Enhance community features and newsletter signup with visual improvements
Updates community section testimonials, newsletter design, and imports/adds section dividers. 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/d7fc08fa-d3ab-4a73-a920-a0982caef9d7.jpg
This commit is contained in:
JeffEmmett
parent
1f84fe542d
commit
0a1ac84a3f
|
|
@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
|
|||
import { Testimonial } from "./testimonial";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { Link } from "wouter";
|
||||
import { ArabicDecoration } from "@/components/ui/arabic-decoration";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { SectionDivider, SectionDividerBottom, StarDivider } from "@/components/ui/section-divider";
|
||||
import { IslamicPattern } from "@/components/ui/section-divider";
|
||||
|
|
@ -17,21 +16,21 @@ export function CommunitySection() {
|
|||
author: "Sarah H.",
|
||||
memberSince: "2021",
|
||||
initials: "SH",
|
||||
color: "teal",
|
||||
color: "teal" as const,
|
||||
},
|
||||
{
|
||||
quote: "As someone recovering from back surgery, I was hesitant to try Pilates. Fadia's expertise made me feel safe and I've gained strength I never thought possible.",
|
||||
author: "Michael K.",
|
||||
memberSince: "2022",
|
||||
initials: "MK",
|
||||
color: "purple",
|
||||
color: "purple" as const,
|
||||
},
|
||||
{
|
||||
quote: "The community aspect of Pilates with Fadia sets it apart. I've not only improved my physical health but have made wonderful connections with fellow members.",
|
||||
author: "Amina L.",
|
||||
memberSince: "2020",
|
||||
initials: "AL",
|
||||
color: "rose",
|
||||
color: "rose" as const,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -48,76 +47,98 @@ export function CommunitySection() {
|
|||
}, [user]);
|
||||
|
||||
return (
|
||||
<section id="community" 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">Our Community</h2>
|
||||
</ArabicDecoration>
|
||||
<p className="mt-8 max-w-3xl mx-auto text-gray-600">
|
||||
Connect with like-minded individuals on your wellness journey through our digital community board.
|
||||
</p>
|
||||
</div>
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="rose" />
|
||||
|
||||
<div className="relative py-20 bg-rose">
|
||||
<IslamicPattern color="rose" opacity={15} />
|
||||
|
||||
<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 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">
|
||||
Connect with like-minded individuals on your wellness journey through our digital community board.
|
||||
</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"
|
||||
/>
|
||||
<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>
|
||||
)
|
||||
) : (
|
||||
<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>
|
||||
<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>
|
||||
)
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</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>
|
||||
</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>
|
||||
{!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>
|
||||
{!user && (
|
||||
<Link href="/auth">
|
||||
<a className="bg-purple text-white font-medium py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
|
||||
Sign Up to Participate
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="mt-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<Testimonial key={index} {...testimonial} />
|
||||
))}
|
||||
</Card>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="rose" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -26,19 +26,30 @@ export function Testimonial({ quote, author, memberSince, initials, color }: Tes
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-md relative">
|
||||
<div className="absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-4xl">
|
||||
<i className={`fas fa-quote-right ${colorClasses[color].opacity}`}></i>
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg relative overflow-hidden">
|
||||
<div className="absolute -top-4 -right-4 w-16 h-16 opacity-10">
|
||||
<svg viewBox="0 0 100 100" className="w-full h-full">
|
||||
<path
|
||||
d="M95,30 L85,10 C80,0 65,0 60,10 L50,30 L40,10 C35,0 20,0 15,10 L5,30 C0,40 5,50 15,55 L50,70 L85,55 C95,50 100,40 95,30z"
|
||||
fill={color === "teal" ? "#0c8991" : color === "purple" ? "#9D5E9B" : "#B55076"}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-4 italic">
|
||||
|
||||
<div className="mb-6 text-right">
|
||||
<i className={`fas fa-quote-right text-4xl ${colorClasses[color].opacity}`}></i>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700 mb-6 italic relative z-10 font-raleway">
|
||||
"{quote}"
|
||||
</p>
|
||||
<div className="flex items-center">
|
||||
<div className={`w-10 h-10 ${colorClasses[color].bg} rounded-full flex items-center justify-center mr-3`}>
|
||||
|
||||
<div className="flex items-center border-t pt-4 border-gray-100">
|
||||
<div className={`w-12 h-12 rounded-full flex items-center justify-center mr-3 bg-white border-2 ${color === "teal" ? "border-teal" : color === "purple" ? "border-purple" : "border-rose"}`}>
|
||||
<span className={`${colorClasses[color].text} font-semibold`}>{initials}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium">{author}</h5>
|
||||
<h5 className="font-playfair font-medium">{author}</h5>
|
||||
<p className="text-sm text-gray-500">Member since {memberSince}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ 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();
|
||||
|
|
@ -58,81 +60,108 @@ export function NewsletterSection() {
|
|||
};
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-teal text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between">
|
||||
<div className="md:w-1/2 mb-8 md:mb-0 md:pr-10">
|
||||
<h2 className="text-3xl font-playfair font-bold mb-4">Join Our Newsletter</h2>
|
||||
<p className="text-teal-100 mb-4">
|
||||
Stay updated with wellness tips, special class offerings, and community events. We promise to respect your inbox.
|
||||
</p>
|
||||
|
||||
<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
|
||||
<section className="relative overflow-hidden">
|
||||
<SectionDivider color="teal" />
|
||||
|
||||
<div className="relative py-20 bg-teal text-white">
|
||||
<IslamicPattern color="teal" opacity={10} />
|
||||
|
||||
<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"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-teal-100">I agree to receive emails from Pilates with Fadia</span>
|
||||
</label>
|
||||
<circle cx="60" cy="40" r="5" fill="#0c8991" />
|
||||
</svg>
|
||||
</div>
|
||||
</form>
|
||||
<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="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"
|
||||
/>
|
||||
<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 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 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"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDividerBottom color="teal" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue