jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2025-05-07 03:42:26 +00:00
parent fbc3f108b0
commit c814070374
3 changed files with 153 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/components/about/about-section.tsx
View File

@ -1,5 +1,7 @@
import { Link } from "wouter"; import { Link } from "wouter";
import { ArabicDecoration } from "@/components/ui/arabic-decoration"; 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() { export function AboutSection() {
const certifications = [ const certifications = [
@ -30,13 +32,20 @@ export function AboutSection() {
]; ];
return ( return (
<section id="about" className="py-16 bg-gray-50"> <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16"> <div className="text-center mb-16">
<ArabicDecoration> <h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800 relative inline-block">
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">About Fadia</h2> <span className="relative z-10">About Fadia</span>
</ArabicDecoration> <div className="absolute -bottom-3 left-0 w-full h-1 bg-purple opacity-30"></div>
<p className="mt-8 max-w-3xl mx-auto text-gray-600 font-raleway"> </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. Discover the journey, philosophy, and passion behind Pilates with Fadia.
</p> </p>
</div> </div>
@ -52,27 +61,27 @@ export function AboutSection() {
<div className="md:w-1/2"> <div className="md:w-1/2">
<div className="prose max-w-none"> <div className="prose max-w-none">
<h3 className="text-2xl font-playfair font-semibold text-teal mb-4">My Pilates Journey</h3> <h3 className="text-2xl font-playfair font-semibold text-purple mb-4">My Pilates Journey</h3>
<p className="text-gray-600 mb-4"> <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. 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> </p>
<h3 className="text-2xl font-playfair font-semibold text-teal mb-4">My Teaching Philosophy</h3> <h3 className="text-2xl font-playfair font-semibold text-purple mb-4">My Teaching Philosophy</h3>
<p className="text-gray-600 mb-4"> <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. 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> </p>
<div className="mt-8"> <div className="mt-8">
<p className="italic text-gray-700 border-l-4 border-teal pl-4 py-2 font-aref text-lg"> <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." "Movement is medicine for creating change in a person's physical, emotional, and mental states."
</p> </p>
</div> </div>
<div className="mt-8"> <div className="mt-8">
<Link href="/contact"> <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"> <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 Connect with Me
</a> </span>
</Link> </Link>
</div> </div>
</div> </div>
@ -93,6 +102,9 @@ export function AboutSection() {
</div> </div>
</div> </div>
</div> </div>
</div>
<SectionDividerBottom color="purple" />
</section> </section>
); );
} }

27
client/src/components/classes/classes-section.tsx
View File

@ -1,10 +1,11 @@
import { useEffect, useState } from "react"; import { useState } from "react";
import { ClassCard } from "./class-card"; import { ClassCard } from "./class-card";
import { BookingCalendar } from "./booking-calendar"; import { BookingCalendar } from "./booking-calendar";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Class } from "@shared/schema"; import { Class } from "@shared/schema";
import { ArabicDecoration } from "@/components/ui/arabic-decoration";
import { Skeleton } from "@/components/ui/skeleton"; 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() { export function ClassesSection() {
const [selectedClassId, setSelectedClassId] = useState<number | null>(null); const [selectedClassId, setSelectedClassId] = useState<number | null>(null);
@ -29,7 +30,7 @@ export function ClassesSection() {
if (error) { if (error) {
return ( 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"> <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> <p className="text-red-500">Error loading classes. Please try again later.</p>
</div> </div>
@ -38,13 +39,20 @@ export function ClassesSection() {
} }
return ( return (
<section id="classes" className="py-16 islamic-pattern"> <section className="relative overflow-hidden">
<SectionDivider color="rose" />
<div className="relative py-20 rose-light-bg">
<IslamicPattern color="rose" opacity={10} />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16"> <div className="text-center mb-16">
<ArabicDecoration> <h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800 relative inline-block">
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">Our Classes</h2> <span className="relative z-10">Our Classes</span>
</ArabicDecoration> <div className="absolute -bottom-3 left-0 w-full h-1 bg-rose opacity-30"></div>
<p className="mt-8 max-w-3xl mx-auto text-gray-600"> </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. Discover the perfect Pilates class tailored to your needs and wellness goals.
</p> </p>
</div> </div>
@ -89,6 +97,9 @@ export function ClassesSection() {
)} )}
</div> </div>
</div> </div>
</div>
<SectionDividerBottom color="rose" />
</section> </section>
); );
} }

24
client/src/components/home/feature-card.tsx
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
interface FeatureCardProps { interface FeatureCardProps {
title: string; title: string;
@ -84,12 +85,33 @@ export function FeaturesSection() {
]; ];
return ( return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{features.map((feature, index) => ( {features.map((feature, index) => (
<FeatureCard key={index} {...feature} /> <FeatureCard key={index} {...feature} />
))} ))}
</div> </div>
</div> </div>
</div>
<div className="mt-16">
<SectionDividerBottom color="purple" />
</div>
</section>
); );
} }