Add src/app/calm/page.tsx
This commit is contained in:
158
src/app/calm/page.tsx
Normal file
158
src/app/calm/page.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
"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 ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Heart, Volume2, Wind, Waves, Music, Send } from 'lucide-react';
|
||||
|
||||
export default function CalmPage() {
|
||||
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: "Home", id: "/" },
|
||||
{ name: "Soundscapes", id: "soundscapes" },
|
||||
{ name: "Benefits", id: "benefits" },
|
||||
{ name: "About", 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="Find Your Calm"
|
||||
description="Enter a sanctuary of gentle soundscapes, designed to soothe your mind, calm your nerves, and restore emotional balance. Let soft ambient audio guide you to a place of deep peace and inner tranquility. Each soundscape is carefully crafted with therapeutic principles to support your journey toward serenity."
|
||||
tag="Guided Calmness"
|
||||
tagIcon={Wind}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-spa-relaxation-aromatherapy-concept_169016-27029.jpg"
|
||||
imageAlt="Serene person in meditative state surrounded by soft light"
|
||||
imagePosition="right"
|
||||
mediaAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{ text: "Explore Soundscapes", href: "#soundscapes" },
|
||||
{ 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="The Power of Calm"
|
||||
tagIcon={Volume2}
|
||||
tagAnimation="slide-up"
|
||||
title="Gentle Soundscapes for Emotional Wellbeing. Sound has profound power to influence our emotional state. Our carefully curated soundscapes blend nature's gentle rhythms—flowing water, rustling leaves, distant thunder—with ambient music to create an environment that naturally reduces stress and anxiety. Each listening session becomes a mindful retreat into peace and clarity."
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{ text: "Browse Collection", href: "#soundscapes" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="soundscapes" data-section="soundscapes" className="py-20 px-4 md:px-8">
|
||||
<FeatureCardSeven
|
||||
title="Curated Soundscapes"
|
||||
description="Each soundscape is designed to evoke specific emotional states and create lasting calm through gentle, therapeutic audio design."
|
||||
tag="Sound Therapy"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Rainfall Serenity", description: "Gentle rain combined with soft ambient tones creates a deeply soothing atmosphere. Perfect for deep focus, meditation, or restful sleep. The rhythm of rainfall naturally synchronizes with calm breathing patterns.", imageSrc: "http://img.b2bpic.net/free-vector/rainy-day-weather-forecast_23-2149081934.jpg", imageAlt: "Peaceful rain falling on calm water"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Ocean Waves", description: "The hypnotic sound of waves gently lapping against the shore provides a grounding sensation. This soundscape helps release tension and promotes a meditative state ideal for anxious moments.", imageSrc: "http://img.b2bpic.net/free-photo/beach-wave-summer-sunset_169016-26947.jpg", imageAlt: "Serene ocean beach at sunset"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Forest Whispers", description: "Rustling leaves, gentle breeze, and distant bird calls create a natural sanctuary. Transport yourself to a peaceful woodland where stress dissolves and clarity emerges naturally.", imageSrc: "http://img.b2bpic.net/free-photo/misty-forest-morning-light_169016-27234.jpg", imageAlt: "Misty forest with soft morning light"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Ambient Silence", description: "Minimalist soundscape with subtle harmonic frequencies that quiet the mind. Designed for those seeking space and simplicity—pure, peaceful presence without distraction.", imageSrc: "http://img.b2bpic.net/free-vector/meditation-peace-wellness_23-2148445673.jpg", imageAlt: "Minimalist meditation and peace imagery"
|
||||
}
|
||||
]}
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="benefits" data-section="benefits" className="py-20 px-4 md:px-8">
|
||||
<MetricCardSeven
|
||||
title="Transformative Benefits"
|
||||
description="Scientific research validates the therapeutic impact of intentional soundscapes on emotional and physical well-being."
|
||||
tag="Proven Results"
|
||||
tagIcon={Waves}
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "68%", title: "Anxiety Reduction", items: ["Measurable stress hormone decrease", "Faster heart rate normalization", "Improved sense of safety"]
|
||||
},
|
||||
{
|
||||
id: "2", value: "82%", title: "Sleep Quality Improvement", items: ["Easier onset of sleep", "Deeper, more restorative rest", "Reduced nighttime waking"]
|
||||
},
|
||||
{
|
||||
id: "3", value: "76%", title: "Focus & Clarity", items: ["Enhanced concentration ability", "Reduced mental fog", "Better decision-making capacity"]
|
||||
}
|
||||
]}
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact" className="py-20 px-4 md:px-8">
|
||||
<ContactCenter
|
||||
tag="Begin Your Calm Journey"
|
||||
title="Access Guided Soundscapes Today"
|
||||
description="Join thousands who have discovered deep peace through intentional sound design. Your path to calm starts with a single listening session."
|
||||
tagIcon={Send}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Start Listening Free"
|
||||
termsText="Begin with a free trial. Full access to our soundscape library."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Wellsound Calm"
|
||||
copyrightText="© 2025 Wellsound | Gentle Soundscapes for Emotional Peace"
|
||||
socialLinks={[
|
||||
{ icon: Heart, href: "https://twitter.com", ariaLabel: "Twitter" },
|
||||
{ icon: Music, href: "https://instagram.com", ariaLabel: "Instagram" },
|
||||
{ icon: Waves, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user