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 { useQuery } from "@tanstack/react-query";
|
||||||
import { Class } from "@shared/schema";
|
import { Class } from "@shared/schema";
|
||||||
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);
|
||||||
|
|
@ -39,148 +37,99 @@ export function ClassesSection() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="relative overflow-hidden">
|
<section className="py-20 bg-rose-light">
|
||||||
<SectionDivider color="rose" />
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
<div className="relative py-20 rose-light-bg">
|
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
|
||||||
<IslamicPattern color="rose" opacity={10} />
|
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="grid grid-cols-1 md:grid-cols-5 gap-6 mb-16">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center p-6 bg-white">
|
||||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800 relative inline-block">
|
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Mat Pilates</h3>
|
||||||
<span className="relative z-10">Class Offerings</span>
|
<p className="text-sm text-gray-600">Foundational strength, posture, and mobility</p>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
{isLoading ? (
|
<div className="text-center p-6 bg-white">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Reformer & Equipment</h3>
|
||||||
{[1, 2, 3].map((_, i) => (
|
<p className="text-sm text-gray-600">Deeper resistance, alignment, and control</p>
|
||||||
<div key={i} className="bg-white rounded-lg overflow-hidden shadow-lg">
|
</div>
|
||||||
<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">
|
<div className="text-center p-6 bg-white">
|
||||||
{selectedClass && (
|
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Beginner Foundations</h3>
|
||||||
<BookingCalendar selectedClass={selectedClass} />
|
<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>
|
</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>
|
</div>
|
||||||
|
|
||||||
<SectionDividerBottom color="rose" />
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -3,8 +3,6 @@ import { Testimonial } from "./testimonial";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import { Link } from "wouter";
|
import { Link } from "wouter";
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
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() {
|
export function CommunitySection() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
|
@ -47,104 +45,77 @@ export function CommunitySection() {
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="relative overflow-hidden">
|
<section className="py-20 bg-rose text-white">
|
||||||
<SectionDivider color="rose" />
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
<div className="relative py-20 bg-rose">
|
<h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-4">
|
||||||
<IslamicPattern color="rose" opacity={15} />
|
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="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||||
<div className="text-center mb-16">
|
{testimonials.map((testimonial, index) => (
|
||||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-white relative inline-block">
|
<Testimonial key={index} {...testimonial} />
|
||||||
<span className="relative z-10">Our Community</span>
|
))}
|
||||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
|
</div>
|
||||||
</h2>
|
|
||||||
<div className="flex items-center justify-center py-6">
|
<Card className="bg-white text-gray-800 overflow-hidden">
|
||||||
<div className="w-1/3 h-px bg-white opacity-30"></div>
|
<div className="border-b border-gray-200 py-4 px-6">
|
||||||
<div className="mx-4">
|
<h3 className="font-playfair font-semibold text-xl">Community Digital Whiteboard</h3>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<Card className="rounded-xl overflow-hidden shadow-xl">
|
<CardContent className="p-0">
|
||||||
<div className="border-b border-gray-200 py-4 px-6 bg-gray-50">
|
<div className="h-96 bg-gray-100 flex items-center justify-center">
|
||||||
<h3 className="font-playfair font-semibold text-xl">Community Digital Whiteboard</h3>
|
{user ? (
|
||||||
</div>
|
iframeLoaded ? (
|
||||||
|
<iframe
|
||||||
<CardContent className="p-0">
|
src="https://miro.com/app/board/uXjVKEqwAH8=/"
|
||||||
<div className="h-96 bg-gray-100 flex items-center justify-center">
|
title="Community Whiteboard"
|
||||||
{user ? (
|
className="w-full h-full border-0"
|
||||||
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>
|
|
||||||
)
|
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
|
<i className="fas fa-spinner fa-spin text-5xl text-gray-400 mb-4"></i>
|
||||||
<p className="text-gray-500">
|
<p className="text-gray-500">Loading whiteboard content...</p>
|
||||||
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>
|
</div>
|
||||||
)}
|
)
|
||||||
</div>
|
) : (
|
||||||
</CardContent>
|
<div className="text-center">
|
||||||
|
<i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
|
||||||
<div className="p-6 border-t border-gray-200">
|
<p className="text-gray-500">
|
||||||
<div className="flex flex-col md:flex-row items-center justify-between">
|
Digital whiteboard content will be available after login
|
||||||
<div className="mb-4 md:mb-0">
|
</p>
|
||||||
<h4 className="font-playfair font-medium text-lg mb-1">Join Our Community</h4>
|
<p className="text-sm text-gray-400 mt-2">
|
||||||
<p className="text-gray-600 text-sm">Share your journey, ask questions, and connect with others.</p>
|
<i className="fas fa-info-circle mr-1"></i> Please sign in to access community features
|
||||||
|
</p>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</Card>
|
</CardContent>
|
||||||
|
|
||||||
<div className="mt-16">
|
<div className="p-6 border-t border-gray-200">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div className="flex flex-col md:flex-row items-center justify-between">
|
||||||
{testimonials.map((testimonial, index) => (
|
<div className="mb-4 md:mb-0">
|
||||||
<Testimonial key={index} {...testimonial} />
|
<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>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SectionDividerBottom color="rose" />
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,42 +1,32 @@
|
||||||
import { Link } from "wouter";
|
import { Link } from "wouter";
|
||||||
import { SectionDivider, SectionDividerBottom } from "@/components/ui/section-divider";
|
|
||||||
import { IslamicPattern } from "@/components/ui/section-divider";
|
|
||||||
|
|
||||||
export function CTASection() {
|
export function CTASection() {
|
||||||
return (
|
return (
|
||||||
<section className="relative overflow-hidden">
|
<section className="py-20 bg-purple text-white">
|
||||||
<SectionDivider color="purple" />
|
<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">
|
||||||
<div className="relative py-20 bg-purple text-white">
|
Ready to feel stronger, more connected, and at home in your body?
|
||||||
<IslamicPattern color="purple" opacity={10} />
|
</h2>
|
||||||
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
<p className="text-xl text-white text-opacity-90 font-raleway mb-10 max-w-3xl mx-auto">
|
||||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-white mb-6">
|
Start with your breath. Start today.
|
||||||
Ready to feel stronger, more connected, and at home in your body?
|
</p>
|
||||||
</h2>
|
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
|
||||||
<p className="text-xl text-white text-opacity-90 font-raleway mb-10 max-w-3xl mx-auto">
|
<Link
|
||||||
Start with your breath. Start today.
|
href="/classes"
|
||||||
</p>
|
className="bg-white text-purple font-medium py-3 px-10 hover:bg-opacity-90 transition duration-300"
|
||||||
|
>
|
||||||
<div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
|
Join a Class
|
||||||
<Link
|
</Link>
|
||||||
href="/classes"
|
<Link
|
||||||
className="bg-white text-purple font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-opacity-90"
|
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"
|
||||||
Join a Class
|
>
|
||||||
</Link>
|
Contact Fadia
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SectionDividerBottom color="purple" />
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -4,8 +4,6 @@ import { apiRequest } from "@/lib/queryClient";
|
||||||
import { insertNewsletterSchema } from "@shared/schema";
|
import { insertNewsletterSchema } from "@shared/schema";
|
||||||
import { useToast } from "@/hooks/use-toast";
|
import { useToast } from "@/hooks/use-toast";
|
||||||
import { Loader2 } from "lucide-react";
|
import { Loader2 } from "lucide-react";
|
||||||
import { SectionDivider, SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
|
|
||||||
import { IslamicPattern } from "@/components/ui/section-divider";
|
|
||||||
|
|
||||||
export function NewsletterSection() {
|
export function NewsletterSection() {
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
@ -60,108 +58,62 @@ export function NewsletterSection() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="relative overflow-hidden">
|
<section className="py-20 bg-teal text-white">
|
||||||
<SectionDivider color="teal" />
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
<div className="relative py-20 bg-teal text-white">
|
<h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-4">
|
||||||
<IslamicPattern color="teal" opacity={10} />
|
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="max-w-2xl mx-auto">
|
||||||
<div className="text-center mb-12">
|
<form className="bg-white/10 p-8" onSubmit={handleSubmit}>
|
||||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-white relative inline-block">
|
<div className="flex flex-col mb-6">
|
||||||
<span className="relative z-10">Join Our Newsletter</span>
|
<label htmlFor="email" className="mb-2 text-white font-medium">Email Address</label>
|
||||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
|
<input
|
||||||
</h2>
|
id="email"
|
||||||
<div className="flex items-center justify-center py-6">
|
type="email"
|
||||||
<div className="w-1/3 h-px bg-white opacity-30"></div>
|
placeholder="Your email address"
|
||||||
<div className="mx-4">
|
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"
|
||||||
<svg width="40" height="40" viewBox="0 0 100 100">
|
value={email}
|
||||||
<path
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
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"
|
required
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
<div className="md:w-1/2">
|
<div className="mb-6">
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<label className="flex items-center cursor-pointer">
|
||||||
<img
|
<input
|
||||||
src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300"
|
type="checkbox"
|
||||||
alt="Peaceful pilates studio"
|
className="form-checkbox h-4 w-4 border-white text-teal"
|
||||||
className="rounded-lg shadow-lg"
|
checked={agreedToTerms}
|
||||||
|
onChange={(e) => setAgreedToTerms(e.target.checked)}
|
||||||
|
required
|
||||||
/>
|
/>
|
||||||
<img
|
<span className="ml-2 text-white">I agree to receive emails from Pilates with Fadia</span>
|
||||||
src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300"
|
</label>
|
||||||
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>
|
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SectionDividerBottom color="teal" />
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue