Simplify website design by removing unnecessary decorative elements
Removes SectionDivider, IslamicPattern, and StarDivider components and simplifies section styling in classes, community, cta, and newsletter 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/d0851f8a-ea37-4d01-9787-26b9ceec5b34.jpg
This commit is contained in:
JeffEmmett
parent
64126b5e50
commit
d8620a0a13
|
|
@ -4,8 +4,6 @@ import { BookingCalendar } from "./booking-calendar";
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Class } from "@shared/schema";
|
||||
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);
|
||||
|
|
@ -39,148 +37,99 @@ export function ClassesSection() {
|
|||
}
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="rose" />
|
||||
|
||||
<div className="relative py-20 rose-light-bg">
|
||||
<IslamicPattern color="rose" opacity={10} />
|
||||
<section className="py-20 bg-rose-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">
|
||||
Class Offerings
|
||||
</h2>
|
||||
<p className="max-w-3xl mx-auto text-gray-600">
|
||||
Choose from our variety of class options designed to match your individual needs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">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" />
|
||||
<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 className="grid grid-cols-1 md:grid-cols-5 gap-6 mb-16">
|
||||
<div className="text-center p-6 bg-white">
|
||||
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Mat Pilates</h3>
|
||||
<p className="text-sm text-gray-600">Foundational strength, posture, and mobility</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>
|
||||
</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 className="text-center p-6 bg-white">
|
||||
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Reformer & Equipment</h3>
|
||||
<p className="text-sm text-gray-600">Deeper resistance, alignment, and control</p>
|
||||
</div>
|
||||
|
||||
<div id="booking-calendar" className="pt-8">
|
||||
{selectedClass && (
|
||||
<BookingCalendar selectedClass={selectedClass} />
|
||||
)}
|
||||
<div className="text-center p-6 bg-white">
|
||||
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Beginner Foundations</h3>
|
||||
<p className="text-sm text-gray-600">For those new to movement or Pilates</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-white">
|
||||
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Live Online Classes</h3>
|
||||
<p className="text-sm text-gray-600">Accessible from anywhere</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-white">
|
||||
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Workshops & Events</h3>
|
||||
<p className="text-sm text-gray-600">Special themed sessions and gatherings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-white mb-16">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-playfair text-xl font-semibold text-gray-800 mb-3">
|
||||
✨ 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">📍 Classes every Wednesday & Saturday</p>
|
||||
</div>
|
||||
<a href="https://nuncenter.com" className="mt-4 md:mt-0 inline-flex items-center text-rose hover:text-rose-600 transition-colors font-medium">
|
||||
Contact Nun Center →
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<SectionDividerBottom color="rose" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,8 +3,6 @@ import { Testimonial } from "./testimonial";
|
|||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { Link } from "wouter";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { SectionDivider, SectionDividerBottom, StarDivider } from "@/components/ui/section-divider";
|
||||
import { IslamicPattern } from "@/components/ui/section-divider";
|
||||
|
||||
export function CommunitySection() {
|
||||
const { user } = useAuth();
|
||||
|
|
@ -47,104 +45,77 @@ export function CommunitySection() {
|
|||
}, [user]);
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="rose" />
|
||||
|
||||
<div className="relative py-20 bg-rose">
|
||||
<IslamicPattern color="rose" opacity={15} />
|
||||
<section className="py-20 bg-rose text-white">
|
||||
<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 mb-4">
|
||||
Our Community
|
||||
</h2>
|
||||
<p className="max-w-3xl mx-auto">
|
||||
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 collective—a community that values strength, softness, breath, and belonging.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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-white relative inline-block">
|
||||
<span className="relative z-10">Our Community</span>
|
||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
|
||||
</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">
|
||||
<polygon
|
||||
points="50,10 61,35 90,35 65,55 75,80 50,65 25,80 35,55 10,35 39,35"
|
||||
fill="#FFFFFF"
|
||||
fillOpacity="0.8"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<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">
|
||||
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 collective—a 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 className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<Testimonial key={index} {...testimonial} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="bg-white text-gray-800 overflow-hidden">
|
||||
<div className="border-b border-gray-200 py-4 px-6">
|
||||
<h3 className="font-playfair font-semibold text-xl">Community Digital Whiteboard</h3>
|
||||
</div>
|
||||
|
||||
<Card className="rounded-xl overflow-hidden shadow-xl">
|
||||
<div className="border-b border-gray-200 py-4 px-6 bg-gray-50">
|
||||
<h3 className="font-playfair font-semibold text-xl">Community Digital Whiteboard</h3>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-0">
|
||||
<div className="h-96 bg-gray-100 flex items-center justify-center">
|
||||
{user ? (
|
||||
iframeLoaded ? (
|
||||
<iframe
|
||||
src="https://miro.com/app/board/uXjVKEqwAH8=/"
|
||||
title="Community Whiteboard"
|
||||
className="w-full h-full border-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<i className="fas fa-spinner fa-spin text-5xl text-gray-400 mb-4"></i>
|
||||
<p className="text-gray-500">Loading whiteboard content...</p>
|
||||
</div>
|
||||
)
|
||||
<CardContent className="p-0">
|
||||
<div className="h-96 bg-gray-100 flex items-center justify-center">
|
||||
{user ? (
|
||||
iframeLoaded ? (
|
||||
<iframe
|
||||
src="https://miro.com/app/board/uXjVKEqwAH8=/"
|
||||
title="Community Whiteboard"
|
||||
className="w-full h-full border-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
|
||||
<p className="text-gray-500">
|
||||
Digital whiteboard content will be available after login
|
||||
</p>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
<i className="fas fa-info-circle mr-1"></i> Please sign in to access community features
|
||||
</p>
|
||||
<i className="fas fa-spinner fa-spin text-5xl text-gray-400 mb-4"></i>
|
||||
<p className="text-gray-500">Loading whiteboard content...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<div className="p-6 border-t border-gray-200">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between">
|
||||
<div className="mb-4 md:mb-0">
|
||||
<h4 className="font-playfair font-medium text-lg mb-1">Join Our Community</h4>
|
||||
<p className="text-gray-600 text-sm">Share your journey, ask questions, and connect with others.</p>
|
||||
)
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
|
||||
<p className="text-gray-500">
|
||||
Digital whiteboard content will be available after login
|
||||
</p>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
<i className="fas fa-info-circle mr-1"></i> Please sign in to access community features
|
||||
</p>
|
||||
</div>
|
||||
{!user && (
|
||||
<Link href="/auth">
|
||||
<span className="bg-rose text-white font-medium py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300 cursor-pointer">
|
||||
Sign Up to Participate
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</CardContent>
|
||||
|
||||
<div className="mt-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<Testimonial key={index} {...testimonial} />
|
||||
))}
|
||||
<div className="p-6 border-t border-gray-200">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between">
|
||||
<div className="mb-4 md:mb-0">
|
||||
<h4 className="font-playfair font-medium text-lg mb-1">Join Our Community</h4>
|
||||
<p className="text-gray-600 text-sm">Share your journey, ask questions, and connect with others.</p>
|
||||
</div>
|
||||
{!user && (
|
||||
<Link href="/auth">
|
||||
<span className="bg-rose text-white font-medium py-2 px-6 hover:bg-opacity-90 transition duration-300 cursor-pointer">
|
||||
Sign Up to Participate
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="rose" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,42 +1,32 @@
|
|||
import { Link } from "wouter";
|
||||
import { SectionDivider, SectionDividerBottom } from "@/components/ui/section-divider";
|
||||
import { IslamicPattern } 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">
|
||||
<IslamicPattern color="purple" opacity={10} />
|
||||
<section className="py-20 bg-purple text-white">
|
||||
<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-semibold mb-6">
|
||||
Ready to feel stronger, more connected, and at home in your body?
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
<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-10 hover:bg-opacity-90 transition duration-300"
|
||||
>
|
||||
Join a Class
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-transparent border border-white text-white font-medium py-3 px-10 hover:bg-white hover:text-purple transition duration-300"
|
||||
>
|
||||
Contact Fadia
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="purple" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,8 +4,6 @@ import { apiRequest } from "@/lib/queryClient";
|
|||
import { insertNewsletterSchema } from "@shared/schema";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { SectionDivider, SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
|
||||
import { IslamicPattern } from "@/components/ui/section-divider";
|
||||
|
||||
export function NewsletterSection() {
|
||||
const { toast } = useToast();
|
||||
|
|
@ -60,108 +58,62 @@ export function NewsletterSection() {
|
|||
};
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="teal" />
|
||||
|
||||
<div className="relative py-20 bg-teal text-white">
|
||||
<IslamicPattern color="teal" opacity={10} />
|
||||
<section className="py-20 bg-teal text-white">
|
||||
<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 mb-4">
|
||||
Join Our Newsletter
|
||||
</h2>
|
||||
<p className="max-w-3xl mx-auto">
|
||||
Stay updated with wellness tips, special class offerings, and community events
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">Join Our Newsletter</span>
|
||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
|
||||
</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="#0c8991" />
|
||||
</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">
|
||||
Stay updated with wellness tips, special class offerings, and community events
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center justify-between bg-white/10 p-8 rounded-lg">
|
||||
<div className="md:w-1/2 mb-8 md:mb-0 md:pr-10">
|
||||
<form className="mt-6" onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email address"
|
||||
className="px-4 py-3 rounded-md bg-white bg-opacity-20 border border-teal-300 placeholder-teal-100 text-white focus:outline-none focus:border-white w-full sm:w-auto flex-grow"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-3 bg-white text-teal font-medium rounded-md hover:bg-opacity-90 transition duration-300 flex items-center justify-center"
|
||||
disabled={newsletterMutation.isPending}
|
||||
>
|
||||
{newsletterMutation.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Subscribing...
|
||||
</>
|
||||
) : (
|
||||
"Subscribe"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<label className="inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-checkbox h-4 w-4 bg-white border-teal-300 text-white"
|
||||
checked={agreedToTerms}
|
||||
onChange={(e) => setAgreedToTerms(e.target.checked)}
|
||||
required
|
||||
/>
|
||||
<span className="ml-2 text-sm text-teal-100">I agree to receive emails from Pilates with Fadia</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<form className="bg-white/10 p-8" onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col mb-6">
|
||||
<label htmlFor="email" className="mb-2 text-white font-medium">Email Address</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Your email address"
|
||||
className="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 placeholder-white placeholder-opacity-60 text-white focus:outline-none focus:border-white"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300"
|
||||
alt="Peaceful pilates studio"
|
||||
className="rounded-lg shadow-lg"
|
||||
<div className="mb-6">
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-checkbox h-4 w-4 border-white text-teal"
|
||||
checked={agreedToTerms}
|
||||
onChange={(e) => setAgreedToTerms(e.target.checked)}
|
||||
required
|
||||
/>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300"
|
||||
alt="Group pilates session"
|
||||
className="rounded-lg shadow-lg"
|
||||
/>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1518310383802-640c2de311b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300"
|
||||
alt="Pilates equipment detail"
|
||||
className="rounded-lg shadow-lg"
|
||||
/>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300"
|
||||
alt="Wellness space with cultural elements"
|
||||
className="rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<span className="ml-2 text-white">I agree to receive emails from Pilates with Fadia</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 bg-white text-teal font-medium hover:bg-opacity-90 transition duration-300 flex items-center justify-center"
|
||||
disabled={newsletterMutation.isPending}
|
||||
>
|
||||
{newsletterMutation.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Subscribing...
|
||||
</>
|
||||
) : (
|
||||
"Subscribe"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="teal" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue