Enhance website design with decorative elements and organized sections
Implements SectionDivider components and decorative patterns in AboutSection, ClassesSection, and FeaturesSection for visual appeal. 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/69a90cd0-7d9b-4d41-b614-a96cdbdbcca4.jpg
This commit is contained in:
JeffEmmett
parent
fbc3f108b0
commit
c814070374
|
|
@ -1,5 +1,7 @@
|
|||
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 = [
|
||||
|
|
@ -30,69 +32,79 @@ export function AboutSection() {
|
|||
];
|
||||
|
||||
return (
|
||||
<section id="about" className="py-16 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<ArabicDecoration>
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">About Fadia</h2>
|
||||
</ArabicDecoration>
|
||||
<p className="mt-8 max-w-3xl mx-auto text-gray-600 font-raleway">
|
||||
Discover the journey, philosophy, and passion behind Pilates with Fadia.
|
||||
</p>
|
||||
</div>
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="purple" />
|
||||
|
||||
<div className="relative py-20 purple-light-bg">
|
||||
<ArabesquePattern color="purple" opacity={15} />
|
||||
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2">
|
||||
<div className="prose max-w-none">
|
||||
<h3 className="text-2xl font-playfair font-semibold text-teal mb-4">My Pilates Journey</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.
|
||||
</p>
|
||||
|
||||
<h3 className="text-2xl font-playfair font-semibold text-teal mb-4">My Teaching Philosophy</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
I believe that Pilates is more than exercise—it'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.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<p className="italic text-gray-700 border-l-4 border-teal pl-4 py-2 font-aref text-lg">
|
||||
"Movement is medicine for creating change in a person's physical, emotional, and mental states."
|
||||
<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">My Pilates Journey</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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/contact">
|
||||
<a className="inline-block bg-teal text-white font-medium py-3 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
|
||||
Connect with Me
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<h3 className="text-2xl font-playfair font-semibold text-purple mb-4">My Teaching Philosophy</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
I believe that Pilates is more than exercise—it'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.
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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 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>
|
||||
<h4 className="font-playfair font-semibold mb-2">{cert.title}</h4>
|
||||
<p className="text-sm text-gray-600">{cert.description}</p>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="purple" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { ClassCard } from "./class-card";
|
||||
import { BookingCalendar } from "./booking-calendar";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Class } from "@shared/schema";
|
||||
import { ArabicDecoration } from "@/components/ui/arabic-decoration";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { SectionDivider, SectionDividerBottom, StarDivider } from "@/components/ui/section-divider";
|
||||
import { IslamicPattern } from "@/components/ui/section-divider";
|
||||
|
||||
export function ClassesSection() {
|
||||
const [selectedClassId, setSelectedClassId] = useState<number | null>(null);
|
||||
|
|
@ -29,7 +30,7 @@ export function ClassesSection() {
|
|||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="py-16 islamic-pattern">
|
||||
<div className="py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p className="text-red-500">Error loading classes. Please try again later.</p>
|
||||
</div>
|
||||
|
|
@ -38,57 +39,67 @@ export function ClassesSection() {
|
|||
}
|
||||
|
||||
return (
|
||||
<section id="classes" className="py-16 islamic-pattern">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<ArabicDecoration>
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">Our Classes</h2>
|
||||
</ArabicDecoration>
|
||||
<p className="mt-8 max-w-3xl mx-auto text-gray-600">
|
||||
Discover the perfect Pilates class tailored to your needs and wellness goals.
|
||||
</p>
|
||||
</div>
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="rose" />
|
||||
|
||||
<div className="relative py-20 rose-light-bg">
|
||||
<IslamicPattern color="rose" opacity={10} />
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[1, 2, 3].map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-lg overflow-hidden shadow-lg">
|
||||
<Skeleton className="w-full h-48" />
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[1, 2, 3].map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-lg overflow-hidden shadow-lg">
|
||||
<Skeleton className="w-full h-48" />
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-full my-2" />
|
||||
<Skeleton className="h-4 w-full my-2" />
|
||||
<Skeleton className="h-4 w-3/4 my-2" />
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-full mt-4 rounded-md" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-full my-2" />
|
||||
<Skeleton className="h-4 w-full my-2" />
|
||||
<Skeleton className="h-4 w-3/4 my-2" />
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-full mt-4 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{classes?.map(classItem => (
|
||||
<ClassCard
|
||||
key={classItem.id}
|
||||
classData={classItem}
|
||||
onBookClick={handleBookClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="booking-calendar" className="pt-8">
|
||||
{selectedClass && (
|
||||
<BookingCalendar selectedClass={selectedClass} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{classes?.map(classItem => (
|
||||
<ClassCard
|
||||
key={classItem.id}
|
||||
classData={classItem}
|
||||
onBookClick={handleBookClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="booking-calendar" className="pt-8">
|
||||
{selectedClass && (
|
||||
<BookingCalendar selectedClass={selectedClass} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="rose" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React from "react";
|
||||
import { SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
|
||||
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
|
|
@ -84,12 +85,33 @@ export function FeaturesSection() {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard key={index} {...feature} />
|
||||
))}
|
||||
<section className="relative py-20 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-white"></div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800 relative inline-block">
|
||||
<span className="relative z-10">Core Benefits</span>
|
||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-purple opacity-20"></div>
|
||||
</h2>
|
||||
<CrescentDivider color="purple" className="mt-4" />
|
||||
<p className="mt-4 max-w-2xl mx-auto text-gray-600">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16">
|
||||
<SectionDividerBottom color="purple" />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue