Merge version_2 into main #2
@@ -45,42 +45,59 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero" className="bg-gradient-to-b from-background to-background/80">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Healing Through Art & Self Expression"
|
||||
description="Reconnect with yourself through art therapy, journaling, and somatic healing. A safe, creative space to process emotions and rediscover inner peace."
|
||||
background={{ variant: "plain" }}
|
||||
tag="Therapeutic Art Practice"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Book Your Session", href: "#contact" },
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselItems={[
|
||||
{ id: "carousel-1", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-her-worshop_23-2149536261.jpg?_wi=1", imageAlt: "woman painting abstract art therapy watercolor" },
|
||||
{ id: "carousel-2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-spiral-notebook-fresh-grapefruit-soft-colors-background_140725-160468.jpg", imageAlt: "hand journal writing self-reflection natural light" },
|
||||
{ id: "carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-woman-meditating-nature_1098-1412.jpg?_wi=1", imageAlt: "person meditating nature forest healing energy" },
|
||||
{ id: "carousel-4", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-women-hugging_23-2149212145.jpg?_wi=1", imageAlt: "therapist and client art therapy session trust" },
|
||||
{ id: "carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/artistic-painting-composition_23-2147781608.jpg", imageAlt: "colorful art supplies paint brushes creative" },
|
||||
{ id: "carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/pathway-trees-daytime_395237-206.jpg", imageAlt: "serene nature forest path healing wellness" }
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={5000}
|
||||
ariaLabel="Art therapy and healing carousel"
|
||||
className="relative overflow-hidden"
|
||||
containerClassName="py-20 lg:py-32"
|
||||
textBoxClassName="text-center max-w-2xl mx-auto"
|
||||
titleClassName="text-4xl lg:text-5xl font-light tracking-tight mb-6"
|
||||
descriptionClassName="text-lg text-foreground/80 leading-relaxed mb-8"
|
||||
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 text-foreground/70 text-sm"
|
||||
buttonContainerClassName="flex gap-4 justify-center flex-wrap"
|
||||
buttonClassName="px-8 py-3 rounded-full font-medium transition-all duration-300"
|
||||
carouselClassName="absolute inset-0 rounded-3xl overflow-hidden opacity-40"
|
||||
<div id="hero" data-section="hero" className="relative min-h-screen overflow-hidden bg-background">
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvWirEunVL3HZniBzcTNtjvLbP/uploaded-1773593678704-g2xmidr5.png"
|
||||
alt="Calming nature background"
|
||||
className="w-full h-full object-cover"
|
||||
style={{
|
||||
animation: 'slowParallax 20s ease-in-out infinite',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background/30 via-background/50 to-background" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen px-4">
|
||||
<div className="max-w-2xl w-full">
|
||||
<div className="rounded-3xl bg-card/40 backdrop-blur-md border border-accent/20 p-8 lg:p-12 shadow-2xl hover:shadow-3xl transition-shadow duration-500">
|
||||
<div className="space-y-6 text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 text-foreground/70 text-sm">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
<span>Therapeutic Art Practice</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-light tracking-tight text-foreground leading-relaxed">
|
||||
Healing Through Art & Self Expression
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-foreground/80 leading-relaxed">
|
||||
Reconnect with yourself through art therapy, journaling, and somatic healing. A safe, creative space to process emotions and rediscover inner peace.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4 justify-center flex-wrap pt-4">
|
||||
<button className="px-8 py-3 rounded-full font-medium bg-primary-cta text-primary-cta-text hover:shadow-lg transition-all duration-300">
|
||||
Book Your Session
|
||||
</button>
|
||||
<button className="px-8 py-3 rounded-full font-medium bg-secondary-cta text-secondary-cta-text border border-accent/20 hover:shadow-lg transition-all duration-300">
|
||||
Learn More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes slowParallax {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1.05);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.08);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about" className="bg-background">
|
||||
|
||||
Reference in New Issue
Block a user