Showcase Fadia's background, philosophy, and class offerings on the site

Updates the about section and classes section and adds a new CTA section.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: acaf01d7-65a7-4fc5-901d-853488e196e8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/2196c12c-ccf3-47bb-a2c0-9141ee72f8f4.jpg
This commit is contained in:
JeffEmmett 2025-05-09 23:36:45 +00:00
parent 5a2d9b3182
commit 81d95cb0da
5 changed files with 193 additions and 18 deletions

View File

@ -61,20 +61,60 @@ export function AboutSection() {
<div className="md:w-1/2">
<div className="prose max-w-none">
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4">My Pilates Journey</h3>
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4">Meet Fadia</h3>
<p className="text-gray-600 mb-4">
With over a decade of experience in the art of Pilates, I have dedicated my life to understanding the profound connection between movement, breath, and wellness. My journey began in 2010 when I discovered how Pilates transformed not only my physical strength but my entire approach to well-being.
Fadia is a former lawyer, community builder, and agile mover with a deep belief in the power of peopleand movementto create change. Her journey weaves between Cairo, Egypt, and Berlin, Germany, where she now teaches movement both online and in-person.
</p>
<p className="text-gray-600 mb-4">
After years of seeking healing and emotional release through movement, Fadia's path led her from home yoga classes to dance, martial arts, and ultimately, Pilates. What began as a suggestion from a dance teacher soon turned into a life-changing passion.
</p>
<p className="text-gray-600 mb-4">
She trained in classical Pilates with a program aligned with the German Pilates Association and now teaches both mat and equipment Pilatesincluding the Reformer, Cadillac, Wunda Chair, and Spine Corrector.
</p>
<p className="text-gray-600 mb-4">
In every class, her goal is the same: to help people reconnect with their bodies, move with intention, and build deep, functional strength.
</p>
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4">My Teaching Philosophy</h3>
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4 mt-8">My Story</h3>
<h4 className="text-xl font-playfair text-purple-dark mb-3">From Healing to Empowerment</h4>
<p className="text-gray-600 mb-4">
I believe that Pilates is more than exerciseit's a path to self-discovery and inner harmony. My teaching combines classical techniques with modern approaches, always honoring the core principles of concentration, control, centering, flow, precision, and breath.
I came to movement as a way to feel better in my body and begin healing emotions I hadn't yet processed. What started with yoga at home slowly became something morea pathway to connection and transformation.
</p>
<p className="text-gray-600 mb-4">
During a two-year dance program in Berlin, I was introduced to Pilates. My first class? A bit confusing. The simplicity and focused cueing felt foreign. But by the second class, something clicked. Within a month, I was soldboth on the method and the way it made me feel.
</p>
<p className="text-gray-600 mb-4">
Pilates became my anchor. It grounded me in my body, gave me strength, and helped me move with more confidence and clarityon the mat, and in life.
</p>
<div className="mt-8">
<p className="italic text-gray-700 border-l-4 border-purple pl-4 py-2 font-aref text-lg">
"Movement is medicine for creating change in a person's physical, emotional, and mental states."
</p>
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4 mt-8">My Philosophy</h3>
<p className="text-gray-600 mb-4">
I believe movement is a game changernot just physically, but mentally and emotionally. My personal journey includes martial arts like Capoeira and Parkour, in addition to Pilates and dance. This rich background taught me that movement isn't just about exercise—it's about agency, healing, and joy.
</p>
<p className="text-gray-600 mb-4">
Movement reminds us of our power. It helps us live with more awareness, vitality, and self-trust.
</p>
<div className="mt-6 bg-white/50 p-6 rounded-lg shadow-sm">
<p className="font-medium text-gray-800 mb-2">In my classes, you'll:</p>
<ul className="space-y-2">
<li className="flex items-start">
<span className="text-purple font-bold mr-2"></span>
<span>Move mindfully and with intention</span>
</li>
<li className="flex items-start">
<span className="text-purple font-bold mr-2"></span>
<span>Build strength from the inside out</span>
</li>
<li className="flex items-start">
<span className="text-purple font-bold mr-2"></span>
<span>Learn to breathe, connect, and listen to your body</span>
</li>
<li className="flex items-start">
<span className="text-purple font-bold mr-2"></span>
<span>Be supportedno matter your age or level</span>
</li>
</ul>
</div>
<div className="mt-8">

View File

@ -48,13 +48,94 @@ export function ClassesSection() {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800 relative inline-block">
<span className="relative z-10">Our Classes</span>
<span className="relative z-10">Class Offerings</span>
<div className="absolute -bottom-3 left-0 w-full h-1 bg-rose opacity-30"></div>
</h2>
<StarDivider color="rose" className="mt-4" />
<p className="mt-6 max-w-3xl mx-auto text-gray-600">
Discover the perfect Pilates class tailored to your needs and wellness goals.
</p>
<div className="mt-6 max-w-3xl mx-auto space-y-6">
<div className="flex flex-col md:flex-row gap-4 items-center bg-white bg-opacity-50 p-6 rounded-lg shadow-sm">
<div className="md:w-1/4 text-center mb-4 md:mb-0">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-rose bg-opacity-20">
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-rose" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
</div>
<div className="md:w-3/4">
<h3 className="font-playfair text-xl font-semibold text-gray-800">Mat Pilates</h3>
<p className="text-gray-600">Foundational strength, posture, and mobility</p>
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-center bg-white bg-opacity-50 p-6 rounded-lg shadow-sm">
<div className="md:w-1/4 text-center mb-4 md:mb-0">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-rose bg-opacity-20">
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-rose" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
</div>
<div className="md:w-3/4">
<h3 className="font-playfair text-xl font-semibold text-gray-800">Reformer & Equipment Pilates</h3>
<p className="text-gray-600">Deeper resistance, alignment, and control</p>
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-center bg-white bg-opacity-50 p-6 rounded-lg shadow-sm">
<div className="md:w-1/4 text-center mb-4 md:mb-0">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-rose bg-opacity-20">
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-rose" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</div>
</div>
<div className="md:w-3/4">
<h3 className="font-playfair text-xl font-semibold text-gray-800">Beginner Foundations Series</h3>
<p className="text-gray-600">For those new to movement or Pilates</p>
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-center bg-white bg-opacity-50 p-6 rounded-lg shadow-sm">
<div className="md:w-1/4 text-center mb-4 md:mb-0">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-rose bg-opacity-20">
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-rose" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
</div>
<div className="md:w-3/4">
<h3 className="font-playfair text-xl font-semibold text-gray-800">Live Online Classes</h3>
<p className="text-gray-600">Accessible from anywhere</p>
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-center bg-white bg-opacity-50 p-6 rounded-lg shadow-sm">
<div className="md:w-1/4 text-center mb-4 md:mb-0">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-rose bg-opacity-20">
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-rose" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</div>
<div className="md:w-3/4">
<h3 className="font-playfair text-xl font-semibold text-gray-800">Workshops & Community Events</h3>
<p className="text-gray-600">Special themed sessions and gatherings</p>
</div>
</div>
</div>
<div className="mt-12 p-6 bg-rose bg-opacity-10 rounded-lg border border-rose border-opacity-20 max-w-3xl mx-auto">
<h3 className="font-playfair text-xl font-semibold text-gray-800 flex items-center mb-3">
<span className="text-2xl mr-2"></span> In-Person Classes
</h3>
<p className="text-gray-700">Join Fadia for physical classes in the heart of Cairo at the renowned Nun Center, Zamalek</p>
<p className="text-gray-700 mt-2"><span className="font-medium">📍</span> Classes every Wednesday & Saturday</p>
<div className="mt-4">
<a href="https://nuncenter.com" className="inline-flex items-center text-rose hover:text-rose-600 transition-colors">
<span className="mr-1">🔗</span> Contact Nun Center
</a>
</div>
</div>
</div>
{isLoading ? (

View File

@ -73,7 +73,13 @@ export function CommunitySection() {
<div className="w-1/3 h-px bg-white opacity-30"></div>
</div>
<p className="mt-6 max-w-3xl mx-auto text-white text-opacity-90">
Connect with like-minded individuals on your wellness journey through our digital community board.
A Global Space for Movement & Connection
</p>
<p className="mt-3 max-w-3xl mx-auto text-white text-opacity-80">
Whether you're joining from your living room in Cairo or your studio in Berlin, you're part of a larger collectivea community that values strength, softness, breath, and belonging.
</p>
<p className="mt-3 max-w-3xl mx-auto text-white text-opacity-80">
Here, we move to feel good. To age with agency. To grow stronger with grace.
</p>
</div>

View File

@ -0,0 +1,42 @@
import { Link } from "wouter";
import { SectionDivider, SectionDividerBottom } from "@/components/ui/section-divider";
import { ArabicPattern } from "@/components/ui/section-divider";
export function CTASection() {
return (
<section className="relative overflow-hidden">
<SectionDivider color="purple" />
<div className="relative py-20 bg-purple text-white">
<ArabicPattern color="purple" opacity={10} />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-white mb-6">
Ready to feel stronger, more connected, and at home in your body?
</h2>
<p className="text-xl text-white text-opacity-90 font-raleway mb-10 max-w-3xl mx-auto">
Start with your breath. Start today.
</p>
<div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<Link
href="/classes"
className="bg-white text-purple font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-opacity-90"
>
Join a Class
</Link>
<Link
href="/contact"
className="bg-transparent border-2 border-white text-white font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-white hover:bg-opacity-10"
>
Contact Fadia
</Link>
</div>
</div>
</div>
<SectionDividerBottom color="purple" />
</section>
);
}

View File

@ -11,8 +11,11 @@ export function HeroSection() {
<div className="relative">
<span className="absolute -left-4 -top-4 text-4xl text-white opacity-30 font-aref">بسم الله</span>
</div>
<h2 className="text-2xl md:text-3xl font-playfair text-white leading-tight mb-2">
Pilates with Fadia
</h2>
<h1 className="text-4xl md:text-5xl font-playfair font-bold text-white leading-tight">
Find Balance, Strength & Inner Peace
Where Strength Meets Serenity
</h1>
<div className="flex items-center my-6">
@ -21,8 +24,11 @@ export function HeroSection() {
<div className="h-px flex-grow bg-white opacity-50"></div>
</div>
<p className="text-lg text-white text-opacity-90 font-raleway mb-4">
Graceful, mindful movement for real strength and deep connection.
</p>
<p className="text-lg text-white text-opacity-90 font-raleway mb-8">
Transform your body and mind through the art of Pilates. Join our serene studio for personalized sessions that promote harmony, flexibility, and strength.
Join a global community tuning into their bodiesbuilding strength through awareness, breath, and flow.
</p>
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
@ -30,13 +36,13 @@ export function HeroSection() {
href="/classes"
className="bg-white text-teal font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-opacity-90"
>
Book a Class
Join a Class
</Link>
<Link
href="/about"
href="/classes"
className="bg-transparent border-2 border-white text-white font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-white hover:bg-opacity-10"
>
About Fadia
Try a Free Session
</Link>
</div>
</div>