218 lines
12 KiB
TypeScript
218 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Heart, Lightbulb, Sparkles, Brain, Users, CheckCircle, Send, Music } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Wellsound"
|
|
navItems={[
|
|
{ name: "Explore", id: "features" },
|
|
{ name: "Sounds", id: "sounds" },
|
|
{ name: "Connection", id: "connection" },
|
|
{ name: "Learn", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Start Listening", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center">
|
|
<HeroSplit
|
|
title="Design Your Emotional Sanctuary"
|
|
description="A revolutionary interactive website that combines soothing sound design with responsive visual feedback to enhance your emotional well-being, foster deeper empathy, and create meaningful global connections. Experience technology designed to lift you up, not drain you down."
|
|
tag="Emotional Well-Being"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/home-still-life-with-candles-vase-living-room_169016-5976.jpg"
|
|
imageAlt="Person in peaceful meditation with calming blue ambient lighting"
|
|
imagePosition="right"
|
|
mediaAnimation="blur-reveal"
|
|
buttons={[
|
|
{ text: "Begin Your Journey", href: "#features" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about" className="py-20 px-4 md:px-8">
|
|
<TextAbout
|
|
tag="Our Mission"
|
|
tagIcon={Lightbulb}
|
|
tagAnimation="slide-up"
|
|
title="Technology Designed for Your Emotional Health, Not Against It. In our hyperconnected world, we're more linked yet more lonely than ever. We believe emotional well-being deserves to be at the center of digital design. This sanctuary uses sound and visual design to create a judgment-free space where you feel safe, heard, and genuinely connected."
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Explore Features", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features" className="py-20 px-4 md:px-8">
|
|
<FeatureCardSeven
|
|
title="Interactive Experiences"
|
|
description="Discover how sound and visual feedback work together to create moments of genuine emotional connection and personal reflection."
|
|
tag="Guided Journey"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Calming Soundscapes", description: "Immerse yourself in scientifically-designed ambient sounds that reduce stress, lower anxiety, and create a peaceful emotional state. Each soundscape responds to your mood and preferences.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-equalizer-wave-background_23-2148446992.jpg", imageAlt: "Abstract sound wave visualization in calming blue tones"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Responsive Visual Feedback", description: "Watch as colors shift, light effects animate, and visual elements respond to your interactions. This creates a sense that the platform truly understands and values your emotional state.", imageSrc: "http://img.b2bpic.net/free-vector/smart-home-management_52683-43470.jpg", imageAlt: "Digital interface showing responsive visual feedback animations"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Reflection & Expression", description: "Share your feelings through our safe, non-judgmental platform. Express emotions without fear of comparison or criticism. Every reflection matters and contributes to collective empathy.", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-smartphone-while-bed_23-2148188613.jpg", imageAlt: "Person in moment of calm reflection and emotional processing"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Color Therapy Design", description: "Soft indigo, calming blues, and warm accents work together psychologically to evoke comfort and security. Every color choice supports your emotional journey.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-abstract-blurred-cover-collection_23-2149014167.jpg", imageAlt: "Soft color gradients demonstrating therapeutic color psychology"
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="sounds" data-section="sounds" className="py-20 px-4 md:px-8">
|
|
<MetricCardSeven
|
|
title="Sound & Science"
|
|
description="Research proves that the right audio design directly impacts emotional health and nervous system regulation."
|
|
tag="Evidence-Based"
|
|
tagIcon={Brain}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "87%", title: "Report Reduced Anxiety", items: ["Sound therapy proven effective", "Stress hormones measurably decrease", "Immediate calming response"]
|
|
},
|
|
{
|
|
id: "2", value: "73%", title: "Experience Emotional Safety", items: ["Non-judgmental environment trusted", "Free emotional expression supported", "Reduced social anxiety online"]
|
|
},
|
|
{
|
|
id: "3", value: "91%", title: "Feel More Connected", items: ["Shared empathy builds belonging", "Community support strengthens resilience", "Global emotional network grows"]
|
|
}
|
|
]}
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="wellbeing" data-section="wellbeing" className="py-20 px-4 md:px-8">
|
|
<TestimonialCardOne
|
|
title="Real Stories, Real Impact"
|
|
description="Hear how sound and visual design transformed emotional well-being for people around the world."
|
|
tag="Community Voices"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Maya Patel", role: "Student", company: "Finding Calm Daily", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=1", imageAlt: "Maya Patel"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", role: "Tech Professional", company: "Mental Health Advocate", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=2", imageAlt: "James Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Sofia Martinez", role: "Therapist", company: "Wellness Center", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=3", imageAlt: "Sofia Martinez"
|
|
},
|
|
{
|
|
id: "4", name: "Amir Hassan", role: "Young Adult", company: "Anxiety Support Group", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=4", imageAlt: "Amir Hassan"
|
|
},
|
|
{
|
|
id: "5", name: "Emma Wilson", role: "Artist", company: "Creative Community", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=5", imageAlt: "Emma Wilson"
|
|
},
|
|
{
|
|
id: "6", name: "Kai Tanaka", role: "Meditation Coach", company: "Wellness Educator", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=6", imageAlt: "Kai Tanaka"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="connection" data-section="connection" className="py-20 px-4 md:px-8">
|
|
<SocialProofOne
|
|
title="Trusted by Mental Health Leaders"
|
|
description="Therapists, wellness platforms, and emotional health organizations recognize the power of sound design and visual feedback in supporting mental well-being."
|
|
tag="Partners & Advocates"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
names={[
|
|
"Mental Health Foundation", "Audio Therapy Institute", "Wellness Design Collective", "Digital Empathy Network", "Sound Therapy Alliance", "Emotional Intelligence Lab", "Global Wellness Community"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact" className="py-20 px-4 md:px-8">
|
|
<ContactCenter
|
|
tag="Ready to Begin?"
|
|
title="Start Your Emotional Well-Being Journey Today"
|
|
description="Join a global community discovering the transformative power of intentional sound design and responsive visual feedback. Your emotional sanctuary awaits."
|
|
tagIcon={Send}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Begin Listening"
|
|
termsText="We respect your privacy and emotions. Unsubscribe anytime."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Wellsound"
|
|
copyrightText="© 2025 Wellsound | Emotional Well-Being Through Sound & Design"
|
|
socialLinks={[
|
|
{ icon: Heart, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Music, href: "https://instagram.com", ariaLabel: "Instagram" },
|
|
{ icon: Users, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|