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

Enhance website appearance with new color scheme and design elements 

Updates the color palette and adds Islamic-inspired design elements using CSS classes and SVG components.

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/60d2749f-98ca-44a4-bd05-9636755c0c3f.jpg
This commit is contained in:
JeffEmmett 2025-05-09 23:10:23 +00:00
parent a041af9174
commit 1f84fe542d
3 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/community/community-section.tsx
View File

@ -4,6 +4,8 @@ import { useAuth } from "@/hooks/use-auth";
import { Link } from "wouter"; import { Link } from "wouter";
import { ArabicDecoration } from "@/components/ui/arabic-decoration"; import { ArabicDecoration } from "@/components/ui/arabic-decoration";
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();

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

@ -31,8 +31,7 @@ export function FeatureCard({ title, description, icon, color }: FeatureCardProp
}; };
return ( return (
<div className="group relative rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg overflow-hidden"> <div className="group relative rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg overflow-hidden bg-white">
<div className={`absolute inset-0 ${colorClasses[color].bg} opacity-40`}></div>
<div className={`absolute inset-0 ${colorClasses[color].pattern} opacity-5 group-hover:opacity-10 transition-opacity duration-300`}></div> <div className={`absolute inset-0 ${colorClasses[color].pattern} opacity-5 group-hover:opacity-10 transition-opacity duration-300`}></div>
{/* Icon container with geometric border */} {/* Icon container with geometric border */}
@ -85,17 +84,28 @@ export function FeaturesSection() {
]; ];
return ( return (
<section className="relative py-20 overflow-hidden"> <section className="relative py-20 overflow-hidden bg-purple">
<div className="absolute inset-0 bg-white"></div>
<div className="relative"> <div className="relative">
<div className="text-center mb-12"> <div className="text-center mb-12">
<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-white relative inline-block">
<span className="relative z-10">Core Benefits</span> <span className="relative z-10">Core Benefits</span>
<div className="absolute -bottom-3 left-0 w-full h-1 bg-purple opacity-20"></div> <div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
</h2> </h2>
<CrescentDivider color="purple" className="mt-4" /> <div className="flex items-center justify-center py-6">
<p className="mt-4 max-w-2xl mx-auto text-gray-600"> <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="#9D5E9B" />
</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">
Experience the transformative power of Pilates through these foundational principles Experience the transformative power of Pilates through these foundational principles
</p> </p>
</div> </div>
@ -108,10 +118,6 @@ export function FeaturesSection() {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-16">
<SectionDividerBottom color="purple" />
</div>
</section> </section>
); );
} }

24
client/src/components/home/hero-section.tsx
View File

@ -3,38 +3,38 @@ import { IslamicPattern, ArabesquePattern, SectionDividerBottom } from "@/compon
export function HeroSection() { export function HeroSection() {
return ( return (
<section id="home" className="relative overflow-hidden teal-light-bg py-16 md:py-24"> <section id="home" className="relative overflow-hidden bg-teal py-16 md:py-24">
<ArabesquePattern color="teal" opacity={15} /> <ArabesquePattern color="teal" opacity={15} />
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center"> <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
<div className="md:w-1/2 mb-10 md:mb-0 md:pr-10"> <div className="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<div className="relative"> <div className="relative">
<span className="absolute -left-4 -top-4 text-4xl text-teal opacity-20 font-aref">بسم الله</span> <span className="absolute -left-4 -top-4 text-4xl text-white opacity-30 font-aref">بسم الله</span>
</div> </div>
<h1 className="text-4xl md:text-5xl font-playfair font-bold text-gray-800 leading-tight"> <h1 className="text-4xl md:text-5xl font-playfair font-bold text-white leading-tight">
Find Balance, Strength & Inner Peace Find Balance, Strength & Inner Peace
</h1> </h1>
<div className="flex items-center my-6"> <div className="flex items-center my-6">
<div className="h-px w-8 bg-teal opacity-30"></div> <div className="h-px w-8 bg-white opacity-50"></div>
<div className="w-16 h-1 mx-2 bg-teal"></div> <div className="w-16 h-1 mx-2 bg-white"></div>
<div className="h-px flex-grow bg-teal opacity-30"></div> <div className="h-px flex-grow bg-white opacity-50"></div>
</div> </div>
<p className="text-lg text-gray-600 font-raleway mb-8"> <p className="text-lg text-white text-opacity-90 font-raleway mb-8">
Transform your body and mind through the art of Pilates. Join our serene studio for personalized sessions that promote harmony, flexibility, and strength. Transform your body and mind through the art of Pilates. Join our serene studio for personalized sessions that promote harmony, flexibility, and strength.
</p> </p>
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<Link <Link
href="/classes" href="/classes"
className="bg-teal hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center" className="bg-white text-teal font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-opacity-90"
> >
Book a Class Book a Class
</Link> </Link>
<Link <Link
href="/about" href="/about"
className="bg-purple hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center" 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"
> >
About Fadia About Fadia
</Link> </Link>
@ -42,14 +42,14 @@ export function HeroSection() {
</div> </div>
<div className="md:w-1/2 relative"> <div className="md:w-1/2 relative">
<div className="absolute -bottom-4 -right-4 w-full h-full border-4 border-teal border-opacity-10 rounded-lg"></div> <div className="absolute -bottom-4 -right-4 w-full h-full border-4 border-white border-opacity-20 rounded-lg"></div>
<div className="relative overflow-hidden rounded-lg shadow-xl"> <div className="relative overflow-hidden rounded-lg shadow-xl bg-white">
<img <img
src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600" src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600"
alt="Woman practicing pilates in a bright, airy studio" alt="Woman practicing pilates in a bright, airy studio"
className="w-full h-auto" className="w-full h-auto"
/> />
<div className="absolute inset-0 border-[12px] border-white border-opacity-20 rounded-lg"></div> <div className="absolute inset-0 border-[12px] border-white border-opacity-50 rounded-lg"></div>
</div> </div>
</div> </div>
</div> </div>