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
parent
a041af9174
commit
1f84fe542d
|
|
@ -4,6 +4,8 @@ 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";
|
||||
|
||||
export function CommunitySection() {
|
||||
const { user } = useAuth();
|
||||
|
|
|
|||
|
|
@ -31,8 +31,7 @@ export function FeatureCard({ title, description, icon, color }: FeatureCardProp
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="group relative rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg overflow-hidden">
|
||||
<div className={`absolute inset-0 ${colorClasses[color].bg} opacity-40`}></div>
|
||||
<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].pattern} opacity-5 group-hover:opacity-10 transition-opacity duration-300`}></div>
|
||||
|
||||
{/* Icon container with geometric border */}
|
||||
|
|
@ -85,17 +84,28 @@ export function FeaturesSection() {
|
|||
];
|
||||
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-white"></div>
|
||||
|
||||
<section className="relative py-20 overflow-hidden bg-purple">
|
||||
<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">
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-white 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>
|
||||
<div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
|
||||
</h2>
|
||||
<CrescentDivider color="purple" className="mt-4" />
|
||||
<p className="mt-4 max-w-2xl mx-auto text-gray-600">
|
||||
<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="#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
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -108,10 +118,6 @@ export function FeaturesSection() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16">
|
||||
<SectionDividerBottom color="purple" />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,38 +3,38 @@ import { IslamicPattern, ArabesquePattern, SectionDividerBottom } from "@/compon
|
|||
|
||||
export function HeroSection() {
|
||||
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} />
|
||||
|
||||
<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="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>
|
||||
<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
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center my-6">
|
||||
<div className="h-px w-8 bg-teal opacity-30"></div>
|
||||
<div className="w-16 h-1 mx-2 bg-teal"></div>
|
||||
<div className="h-px flex-grow 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-white"></div>
|
||||
<div className="h-px flex-grow bg-white opacity-50"></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.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<Link
|
||||
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
|
||||
</Link>
|
||||
<Link
|
||||
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
|
||||
</Link>
|
||||
|
|
@ -42,14 +42,14 @@ export function HeroSection() {
|
|||
</div>
|
||||
|
||||
<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="relative overflow-hidden rounded-lg shadow-xl">
|
||||
<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 bg-white">
|
||||
<img
|
||||
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"
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue