Simplify website design by removing decorative elements for a cleaner look
Removes Arabic/Islamic design elements from hero, about, and features sections. 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/2363e567-8e52-4d7b-b0f6-e1b8aaaa0e5b.jpg
This commit is contained in:
JeffEmmett
parent
5860030635
commit
64126b5e50
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
|
|
@ -1,150 +1,83 @@
|
|||
import { Link } from "wouter";
|
||||
import { ArabicDecoration } from "@/components/ui/arabic-decoration";
|
||||
import { SectionDivider, SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
|
||||
import { ArabesquePattern } from "@/components/ui/section-divider";
|
||||
|
||||
export function AboutSection() {
|
||||
const certifications = [
|
||||
{
|
||||
title: "Certified Instructor",
|
||||
description: "Comprehensive Pilates Certification",
|
||||
icon: "fa-certificate",
|
||||
color: "teal",
|
||||
},
|
||||
{
|
||||
title: "Advanced Training",
|
||||
description: "Specialized in Rehabilitation",
|
||||
icon: "fa-graduation-cap",
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
title: "Wellness Expert",
|
||||
description: "Holistic Approach to Health",
|
||||
icon: "fa-heartbeat",
|
||||
color: "rose",
|
||||
},
|
||||
{
|
||||
title: "10+ Years Experience",
|
||||
description: "Guiding Hundreds of Students",
|
||||
icon: "fa-users",
|
||||
color: "teal",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="purple" />
|
||||
|
||||
<div className="relative py-20 purple-light-bg">
|
||||
<ArabesquePattern color="purple" opacity={15} />
|
||||
|
||||
<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">About Fadia</span>
|
||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-purple opacity-30"></div>
|
||||
</h2>
|
||||
<CrescentDivider color="purple" className="mt-4" />
|
||||
<p className="mt-6 max-w-3xl mx-auto text-gray-600 font-raleway">
|
||||
Discover the journey, philosophy, and passion behind Pilates with Fadia.
|
||||
</p>
|
||||
<section className="py-20 bg-purple-light">
|
||||
<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-semibold text-gray-800 mb-4">
|
||||
About Fadia
|
||||
</h2>
|
||||
<p className="mt-2 max-w-3xl mx-auto text-gray-600">
|
||||
Discover the journey, philosophy, and passion behind Pilates with Fadia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center">
|
||||
<div className="md:w-1/2 md:pr-12 mb-8 md:mb-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1581122584612-713f89daa8eb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=900"
|
||||
alt="Pilates instructor demonstrating a pose with elegant form"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center">
|
||||
<div className="md:w-1/2 md:pr-12 mb-8 md:mb-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1581122584612-713f89daa8eb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=900"
|
||||
alt="Pilates instructor demonstrating a pose with elegant form"
|
||||
className="rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2">
|
||||
<div className="prose max-w-none">
|
||||
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4">Meet Fadia</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Fadia is a former lawyer, community builder, and agile mover with a deep belief in the power of people—and movement—to 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 Pilates—including 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 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 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 more—a 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 sold—both 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 clarity—on the mat, and in life.
|
||||
</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 changer—not 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 supported—no matter your age or level</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/contact">
|
||||
<span className="inline-block bg-purple text-white font-medium py-3 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
|
||||
Connect with Me
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="md:w-1/2">
|
||||
<div className="prose max-w-none">
|
||||
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4">Meet Fadia</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Fadia is a former lawyer, community builder, and agile mover with a deep belief in the power of people—and movement—to 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>
|
||||
|
||||
<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 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 more—a 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 sold—both on the method and the way it made me feel.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/about">
|
||||
<span className="inline-block border border-purple text-purple font-medium py-2 px-6 hover:bg-purple hover:text-white transition duration-300">
|
||||
Learn More About Me
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-20 grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div className="text-center p-6 bg-white">
|
||||
<i className="fas fa-certificate text-purple text-xl mb-3"></i>
|
||||
<h4 className="font-playfair font-semibold mb-2">Certified Instructor</h4>
|
||||
<p className="text-sm text-gray-600">Comprehensive Pilates Certification</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{certifications.map((cert, index) => (
|
||||
<div key={index} className="bg-white p-6 rounded-lg shadow-md text-center">
|
||||
<div className={`w-16 h-16 bg-${cert.color}-light rounded-full flex items-center justify-center mx-auto mb-4`}>
|
||||
<i className={`fas ${cert.icon} text-${cert.color} text-xl`}></i>
|
||||
</div>
|
||||
<h4 className="font-playfair font-semibold mb-2">{cert.title}</h4>
|
||||
<p className="text-sm text-gray-600">{cert.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white">
|
||||
<i className="fas fa-graduation-cap text-purple text-xl mb-3"></i>
|
||||
<h4 className="font-playfair font-semibold mb-2">Advanced Training</h4>
|
||||
<p className="text-sm text-gray-600">Specialized in Rehabilitation</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-white">
|
||||
<i className="fas fa-heartbeat text-purple text-xl mb-3"></i>
|
||||
<h4 className="font-playfair font-semibold mb-2">Wellness Expert</h4>
|
||||
<p className="text-sm text-gray-600">Holistic Approach to Health</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-white">
|
||||
<i className="fas fa-users text-purple text-xl mb-3"></i>
|
||||
<h4 className="font-playfair font-semibold mb-2">10+ Years Experience</h4>
|
||||
<p className="text-sm text-gray-600">Guiding Hundreds of Students</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="purple" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import React from "react";
|
||||
import { SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
|
||||
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
|
|
@ -9,54 +8,17 @@ interface FeatureCardProps {
|
|||
}
|
||||
|
||||
export function FeatureCard({ title, description, icon, color }: FeatureCardProps) {
|
||||
const colorClasses = {
|
||||
teal: {
|
||||
bg: "bg-teal-light",
|
||||
iconBg: "bg-teal",
|
||||
text: "text-teal",
|
||||
pattern: "islamic-pattern-teal",
|
||||
},
|
||||
purple: {
|
||||
bg: "bg-purple-light",
|
||||
iconBg: "bg-purple",
|
||||
text: "text-purple",
|
||||
pattern: "islamic-pattern",
|
||||
},
|
||||
rose: {
|
||||
bg: "bg-rose-light",
|
||||
iconBg: "bg-rose",
|
||||
text: "text-rose",
|
||||
pattern: "islamic-pattern-rose",
|
||||
},
|
||||
const colorMap = {
|
||||
teal: "#0c8991",
|
||||
purple: "#9D5E9B",
|
||||
rose: "#B55076"
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="group relative rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg overflow-hidden bg-white">
|
||||
<div className={`absolute inset-0 ${colorClasses[color].pattern} opacity-5 group-hover:opacity-10 transition-opacity duration-300`}></div>
|
||||
|
||||
{/* Icon container with geometric border */}
|
||||
<div className="relative">
|
||||
<div className={`w-20 h-20 ${colorClasses[color].iconBg} rounded-full flex items-center justify-center mx-auto mb-5 transform transition-transform group-hover:scale-110 duration-300`}>
|
||||
<i className={`fas ${icon} text-white text-2xl`}></i>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-9 left-1/2 transform -translate-x-1/2 -z-10">
|
||||
<svg width="120" height="120" viewBox="0 0 120 120" className="absolute top-0 left-0 -mt-10 -ml-10">
|
||||
<polygon
|
||||
points="60,0 77.8,42.2 120,42.2 85.1,68.2 97.1,110.3 60,86.3 22.9,110.3 34.9,68.2 0,42.2 42.2,42.2"
|
||||
fill="none"
|
||||
stroke={color === "teal" ? "#0c8991" : color === "purple" ? "#9D5E9B" : "#B55076"}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.2"
|
||||
className="transform scale-75 origin-center"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className={`text-xl font-playfair font-bold mb-3 ${colorClasses[color].text}`}>{title}</h3>
|
||||
<p className="text-gray-600 relative z-10">{description}</p>
|
||||
<div className="text-center p-8 transition duration-300 hover:shadow-md">
|
||||
<i className={`fas ${icon} text-2xl`} style={{ color: colorMap[color] }}></i>
|
||||
<h3 className="text-xl font-playfair font-semibold mt-4 mb-3">{title}</h3>
|
||||
<p className="text-gray-600">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -84,38 +46,21 @@ export function FeaturesSection() {
|
|||
];
|
||||
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-purple">
|
||||
<div className="relative">
|
||||
<section className="py-16 bg-purple">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-white relative inline-block">
|
||||
<span className="relative z-10">Core Benefits</span>
|
||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
|
||||
<h2 className="text-3xl font-playfair font-semibold text-white mb-4">
|
||||
Core Benefits
|
||||
</h2>
|
||||
<div className="flex items-center justify-center py-6">
|
||||
<div className="w-1/3 h-px bg-white opacity-30"></div>
|
||||
<div className="mx-4">
|
||||
<svg width="40" height="40" viewBox="0 0 100 100">
|
||||
<path
|
||||
d="M50,10 A40,40 0 0 1 50,90 A40,40 0 0 1 50,10 A30,30 0 0 0 50,70 A30,30 0 0 0 50,10"
|
||||
fill="#FFFFFF"
|
||||
fillOpacity="0.8"
|
||||
/>
|
||||
<circle cx="60" cy="40" r="5" fill="#9D5E9B" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="w-1/3 h-px bg-white opacity-30"></div>
|
||||
</div>
|
||||
<p className="mt-4 max-w-2xl mx-auto text-white text-opacity-90">
|
||||
<p className="text-white text-opacity-90 max-w-2xl mx-auto">
|
||||
Experience the transformative power of Pilates through these foundational principles
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard key={index} {...feature} />
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 bg-white p-6">
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard key={index} {...feature} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,38 @@
|
|||
import { Link } from "wouter";
|
||||
import { IslamicPattern, ArabesquePattern, SectionDividerBottom } from "@/components/ui/section-divider";
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
<section id="home" className="relative overflow-hidden bg-teal py-16 md:py-24">
|
||||
<ArabesquePattern color="teal" opacity={15} />
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
|
||||
<div className="md:w-1/2 mb-10 md:mb-0 md:pr-10">
|
||||
<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">
|
||||
<section className="relative">
|
||||
<div className="bg-cover bg-center h-[90vh] flex items-center justify-center"
|
||||
style={{
|
||||
backgroundImage: "url('https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=1080')",
|
||||
backgroundPosition: "center"
|
||||
}}>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-20"></div>
|
||||
|
||||
<div className="relative text-center px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
|
||||
<h1 className="text-5xl md:text-6xl font-playfair font-bold text-white leading-tight mb-8">
|
||||
Where Strength Meets Serenity
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center my-6">
|
||||
<div className="h-px w-8 bg-white opacity-50"></div>
|
||||
<div className="w-16 h-1 mx-2 bg-white"></div>
|
||||
<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">
|
||||
Join a global community tuning into their bodies—building 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">
|
||||
<Link
|
||||
href="/classes"
|
||||
className="bg-white text-teal font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-opacity-90"
|
||||
>
|
||||
Join a Class
|
||||
</Link>
|
||||
<Link
|
||||
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"
|
||||
>
|
||||
Try a Free Session
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2 relative">
|
||||
<div className="absolute -bottom-4 -right-4 w-full h-full border-4 border-white border-opacity-20 rounded-lg"></div>
|
||||
<div className="relative overflow-hidden rounded-lg shadow-xl bg-white">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600"
|
||||
alt="Woman practicing pilates in a bright, airy studio"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
<div className="absolute inset-0 border-[12px] border-white border-opacity-50 rounded-lg"></div>
|
||||
</div>
|
||||
<Link
|
||||
href="/classes"
|
||||
className="inline-block bg-white text-teal font-medium py-3 px-10 hover:bg-opacity-90 transition duration-300"
|
||||
>
|
||||
Start Now For Free
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12">
|
||||
<SectionDividerBottom color="teal" />
|
||||
<div className="py-16 text-center">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-900 mb-4">
|
||||
Welcome to Pilates with Fadia
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
where progress feels natural and consistency is effortless
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue