bender/55fc7253-e340-4be8-9fd7-123bcea207f9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
bender
2026-03-10 10:29:41 +00:00
parent fe96e598c2 1ec42fb47a
commit ac42b4339e
7 changed files with 722 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/app/calm/page.tsx Normal file
View 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>
);
}

156
src/app/empathy/page.tsx Normal file
View File

@@ -0,0 +1,156 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Heart, Users, Lightbulb, Send, Music } from 'lucide-react';
export default function EmpathyPage() {
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: "Explore", id: "features" },
{ name: "Sounds", id: "sounds" },
{ name: "Connection", id: "connection" },
{ name: "Empathy", id: "/empathy" },
{ name: "Positivity", id: "/positivity" },
{ 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">
<HeroOverlay
title="Cultivate Deep Empathy"
description="Explore reflective questions and connection visuals designed to deepen your understanding of others and yourself. Through guided introspection and shared emotional experiences, build bridges of compassion across differences."
tag="Empathy Journey"
tagIcon={Heart}
tagAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/people-holding-hands-team_169016-2524.jpg"
imageAlt="Hands joined together representing human connection and empathy"
showDimOverlay={true}
showBlur={true}
buttons={[
{ text: "Begin Reflection", href: "#reflections" },
{ text: "View Connections", href: "#connections" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="reflections" data-section="reflections" className="py-20 px-4 md:px-8">
<FeatureCardSeven
title="Reflective Questions"
description="Thoughtfully crafted prompts that guide you toward deeper understanding of emotions, perspectives, and human connection."
tag="Self-Discovery"
tagIcon={Lightbulb}
tagAnimation="slide-up"
features={[
{
id: 1,
title: "When Have You Felt Truly Heard?", description: "Reflect on moments when someone genuinely understood you. Explore what made those connections meaningful and how you can recreate that sense of being truly seen and valued by others.", imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-listening_169016-3421.jpg", imageAlt: "People engaged in meaningful conversation"
},
{
id: 2,
title: "What Bridges Divides Between People?", description: "Consider what transcends differences—shared vulnerabilities, common hopes, universal emotions. Discover how acknowledging our humanity builds unexpected connections across backgrounds and beliefs.", imageSrc: "http://img.b2bpic.net/free-photo/people-diverse-hands_169016-4782.jpg", imageAlt: "Diverse group with hands together symbolizing unity"
},
{
id: 3,
title: "How Can I Practice Compassion Today?", description: "Small acts of empathy create ripples. Explore concrete ways to acknowledge others' struggles, offer presence without judgment, and build a culture of genuine emotional support in your daily interactions.", imageSrc: "http://img.b2bpic.net/free-photo/helping-hands-concept_169016-5634.jpg", imageAlt: "Hands offering support and care"
},
{
id: 4,
title: "What Stories Shape Your Empathy?", description: "Every person carries unique experiences that shape their capacity for empathy. Reflect on stories that moved you, changed your perspective, and deepened your understanding of what others face.", imageSrc: "http://img.b2bpic.net/free-photo/storytelling-moment_169016-6123.jpg", imageAlt: "Person sharing stories with others"
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="connections" data-section="connections" className="py-20 px-4 md:px-8">
<FaqDouble
title="Connection Insights"
description="Explore deeper understanding of how empathy creates meaningful human connections and transforms communities."
tag="Empathy Science"
tagIcon={Users}
tagAnimation="slide-up"
faqs={[
{
id: "1", title: "How does empathy change our brains?", content: "Empathy activates mirror neurons and empathic neural circuits, literally rewiring our brains to become more compassionate. Regular empathic practice strengthens these pathways, making compassion a sustainable trait. Studies show that people who engage in empathic reflection show increased activation in brain regions associated with emotional processing and social connection."
},
{
id: "2", title: "Can empathy be learned and developed?", content: "Absolutely. While some people are naturally more empathic, empathy is a skill that grows with practice. Through reflective questioning, perspective-taking, and emotional awareness exercises, anyone can deepen their empathic capacity. Our guided reflections are designed specifically to build this skill over time."
},
{
id: "3", title: "How does listening foster empathy?", content: "Deep listening—without judgment or immediate response—creates a safe space where people feel truly understood. This reciprocal vulnerability builds trust and connection. When we listen to understand rather than to respond, we activate empathic neural pathways and demonstrate genuine care for another's inner world."
},
{
id: "4", title: "What role does vulnerability play in empathy?", content: "Vulnerability is the foundation of authentic empathy. When we acknowledge our own struggles and imperfections, we become more attuned to others' challenges. This shared vulnerability creates bridges between people and fosters genuine human connection beyond surface-level interactions."
},
{
id: "5", title: "How can communities build collective empathy?", content: "Collective empathy emerges when communities create spaces for shared stories, emotional expression, and genuine listening. When people feel heard and valued, they become more empathic to others. Our platform connects you to a global community where empathy becomes a shared value and practice."
},
{
id: "6", title: "How does empathy reduce conflict and isolation?", content: "When we understand others' perspectives and emotions, conflict shifts from adversarial to collaborative. Empathy transforms how we communicate, making it possible to disagree respectfully. It also combats isolation by creating genuine human connection and mutual support."
}
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
animationType="smooth"
/>
</div>
<div id="contact" data-section="contact" className="py-20 px-4 md:px-8">
<ContactCTA
tag="Ready to Deepen Your Empathy?"
tagIcon={Send}
tagAnimation="slide-up"
title="Join Our Empathy Community"
description="Connect with others on the journey toward deeper understanding, genuine compassion, and meaningful human connection. Your empathic voice matters."
buttons={[
{ text: "Start Reflecting", href: "/#contact" },
{ text: "Explore More", href: "/" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</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: Users, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Users, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
]}
/>
</div>
</ThemeProvider>
);
}

121
src/app/feelings/page.tsx Normal file
View File

@@ -0,0 +1,121 @@
"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 SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Heart, Lightbulb, Send, Music, Users } from 'lucide-react';
export default function FeelingsPage() {
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: "#" },
{ name: "Sounds", id: "#" },
{ name: "Connection", id: "#" },
{ name: "Feelings", id: "feelings" },
{ name: "Reflect", id: "reflect" },
{ name: "Learn", id: "#" },
{ name: "Contact", id: "#" }
]}
button={{ text: "Start Listening", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center">
<HeroSplit
title="Your Feelings Matter"
description="In a world that often dismisses emotions, we create a safe sanctuary where every feeling is valued. Whether you're experiencing joy, sadness, anxiety, or peace, this space welcomes you without judgment. Your emotional landscape deserves compassion and understanding. We're here to support your journey with calming soundscapes and supportive messages that remind you: you are not alone."
tag="Emotional Safety"
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="Peaceful space designed for emotional well-being"
imagePosition="right"
mediaAnimation="blur-reveal"
buttons={[
{ text: "Explore Feelings", href: "#supportive-messages" },
{ text: "Share Your Journey", href: "#contact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="supportive-messages" data-section="supportive-messages" className="py-20 px-4 md:px-8">
<TextAbout
tag="Words of Compassion"
tagIcon={Lightbulb}
tagAnimation="slide-up"
title="Supportive Messages for Every Moment. You are enough. Your feelings are valid. You deserve rest, joy, and gentle compassion. When anxiety arrives, remember: you have weathered difficult moments before. When sadness sits with you, know that it is a natural part of being human. When joy finds you, celebrate it fully—you've earned it. This is a space where all emotions belong. You are seen. You are heard. You matter."
useInvertedBackground={true}
buttons={[
{ text: "Begin Your Practice", href: "#contact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="belonging" data-section="belonging" className="py-20 px-4 md:px-8">
<SocialProofOne
title="You Belong Here"
description="Join thousands of people finding acceptance, connection, and peace in our global emotional wellness community."
tag="Community Support"
tagIcon={Users}
tagAnimation="slide-up"
names={[
"Compassion First", "Emotional Wellness Network", "Global Support Circle", "Mental Health Alliance", "Healing Together", "Empathy Hub", "Wellness Warriors"
]}
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="Your Voice Matters"
title="Share Your Feelings with Our Community"
description="Connect with others who understand. Your emotional experience is valuable and contributes to our collective healing. Let's create a world where feelings are always welcome."
tagIcon={Send}
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email to start"
buttonText="Join Us"
termsText="We honor your emotional privacy. Your story is safe with us."
/>
</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>
);
}

2
src/app/page.tsx
View File

@@ -33,6 +33,8 @@ export default function LandingPage() {
{ name: "Explore", id: "features" },
{ name: "Sounds", id: "sounds" },
{ name: "Connection", id: "connection" },
{ name: "Feelings", id: "feelings" },
{ name: "Reflect", id: "reflect" },
{ name: "Learn", id: "about" },
{ name: "Contact", id: "contact" }
]}

147
src/app/positivity/page.tsx Normal file
View File

@@ -0,0 +1,147 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Heart, Sparkles, TrendingUp, Send, Music, Users } from 'lucide-react';
export default function PositivityPage() {
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: "Explore", id: "features" },
{ name: "Sounds", id: "sounds" },
{ name: "Connection", id: "connection" },
{ name: "Empathy", id: "/empathy" },
{ name: "Positivity", id: "/positivity" },
{ 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">
<HeroOverlay
title="Embrace Positivity & Uplift"
description="Discover affirmations, uplifting experiences, and warm design that energize your spirit. Through positive visualization, gratitude practices, and joyful interactions, cultivate a mindset of hope, resilience, and possibility."
tag="Positivity Sanctuary"
tagIcon={Sparkles}
tagAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/sunrise-nature-peaceful_169016-8912.jpg"
imageAlt="Beautiful sunrise symbolizing new beginnings and hope"
showDimOverlay={true}
showBlur={true}
buttons={[
{ text: "Explore Affirmations", href: "#affirmations" },
{ text: "View Impact", href: "#impact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="affirmations" data-section="affirmations" className="py-20 px-4 md:px-8">
<FeatureCardSeven
title="Positive Affirmations"
description="Warm, genuine affirmations designed to uplift your spirit and reinforce empowering beliefs about yourself and your potential."
tag="Daily Inspiration"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
id: 1,
title: "I Am Worthy of Love & Respect", description: "Every person deserves compassion—including yourself. This affirmation reminds you that your value isn't based on productivity or achievement, but on your inherent worth as a human being. You are enough, exactly as you are.", imageSrc: "http://img.b2bpic.net/free-photo/self-love-mirror-reflection_169016-2301.jpg", imageAlt: "Person looking at reflection with self-compassion"
},
{
id: 2,
title: "I Choose Joy & Resilience", description: "Joy isn't about denying difficult emotions—it's about choosing hope and agency. This affirmation empowers you to navigate challenges with resilience, knowing that difficulty doesn't define your story. You have the strength to overcome.", imageSrc: "http://img.b2bpic.net/free-photo/person-celebrating-joy_169016-7634.jpg", imageAlt: "Person celebrating with arms raised in joy"
},
{
id: 3,
title: "My Potential Is Limitless", description: "Growth mindset opens doors to possibility. This affirmation shifts you from 'I can't' to 'I'm learning.' Every challenge becomes an opportunity, every setback a stepping stone. Your potential evolves as you embrace growth.", imageSrc: "http://img.b2bpic.net/free-photo/person-climbing-mountain_169016-5467.jpg", imageAlt: "Person reaching toward their goals"
},
{
id: 4,
title: "I Create Positive Change", description: "You have agency. Even small actions create ripples. This affirmation reminds you that your choices, kindness, and presence matter. You're not just surviving—you're contributing to a more compassionate world.", imageSrc: "http://img.b2bpic.net/free-photo/hands-planting-seed-growth_169016-4891.jpg", imageAlt: "Hands nurturing growth and positive change"
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="impact" data-section="impact" className="py-20 px-4 md:px-8">
<MetricCardOne
title="The Impact of Positivity"
description="Research demonstrates the transformative power of positive affirmations and uplifting practices on mental health, resilience, and overall well-being."
tag="Evidence-Based Uplift"
tagIcon={TrendingUp}
tagAnimation="slide-up"
metrics={[
{
id: "1", value: "88%", title: "Experience Increased Hope", description: "Improved outlook on future", icon: Sparkles
},
{
id: "2", value: "92%", title: "Report Greater Self-Belief", description: "Strengthened confidence and agency", icon: TrendingUp
},
{
id: "3", value: "85%", title: "Feel More Resilient", description: "Better ability to handle challenges", icon: Heart
}
]}
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="contact" data-section="contact" className="py-20 px-4 md:px-8">
<ContactCTA
tag="Ready to Embrace Positivity?"
tagIcon={Send}
tagAnimation="slide-up"
title="Start Your Uplifting Journey"
description="Join a community celebrating possibility, resilience, and the transformative power of positive thinking. Your journey toward greater joy and hope begins here."
buttons={[
{ text: "Begin Today", href: "/#contact" },
{ text: "Return Home", href: "/" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</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: Sparkles, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Users, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
]}
/>
</div>
</ThemeProvider>
);
}

135
src/app/reflect/page.tsx Normal file
View File

@@ -0,0 +1,135 @@
"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 ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Heart, Lightbulb, Sparkles, Send, Music, Users } from 'lucide-react';
export default function ReflectPage() {
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: "#" },
{ name: "Sounds", id: "#" },
{ name: "Connection", id: "#" },
{ name: "Feelings", id: "feelings" },
{ name: "Reflect", id: "reflect" },
{ name: "Learn", id: "#" },
{ name: "Contact", id: "#" }
]}
button={{ text: "Start Listening", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center">
<HeroSplit
title="Reflect, Express, Transform"
description="This is your space for genuine reflection and authentic expression. Through thoughtful prompts and a supportive environment, explore your emotions, celebrate your growth, and connect with your deepest self. Every reflection is an act of self-love. Every expression strengthens your emotional intelligence. You are welcome here, exactly as you are."
tag="Self-Expression"
tagIcon={Heart}
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/woman-using-smartphone-while-bed_23-2148188613.jpg"
imageAlt="Person in peaceful reflection and emotional expression"
imagePosition="right"
mediaAnimation="blur-reveal"
buttons={[
{ text: "Start Reflecting", href: "#reflection-tools" },
{ text: "Share Your Story", href: "#contact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="reflection-tools" data-section="reflection-tools" className="py-20 px-4 md:px-8">
<FeatureCardSeven
title="Guided Reflection Practices"
description="Thoughtfully designed tools to help you explore your emotions, process experiences, and express your authentic self without judgment."
tag="Inner Wisdom"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
id: 1,
title: "Emotion Journaling", description: "Gently guide your emotions onto the page. Our prompts help you explore what you're feeling without analysis or criticism. Writing becomes meditation, and your words become medicine.", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-smartphone-while-bed_23-2148188613.jpg", imageAlt: "Peaceful journaling moment"
},
{
id: 2,
title: "Gratitude & Celebration", description: "Acknowledge the beautiful moments, small victories, and reasons to smile. Cultivating gratitude transforms your perspective and deepens your emotional resilience.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-abstract-blurred-cover-collection_23-2149014167.jpg", imageAlt: "Warm, uplifting visual celebration"
},
{
id: 3,
title: "Growth Reflection", description: "Look back on your journey with compassion. Recognize how far you've come, celebrate the obstacles you've overcome, and identify the wisdom you've gained.", imageSrc: "http://img.b2bpic.net/free-vector/smart-home-management_52683-43470.jpg", imageAlt: "Reflective moment of personal growth"
},
{
id: 4,
title: "Community Sharing", description: "When you're ready, share your reflections with our supportive community. Your story might inspire someone else to embrace their own emotional journey with courage.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-equalizer-wave-background_23-2148446992.jpg", imageAlt: "Connected community voices"
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="expression-message" data-section="expression-message" className="py-20 px-4 md:px-8">
<TextAbout
tag="Your Voice Deserves to Be Heard"
tagIcon={Lightbulb}
tagAnimation="slide-up"
title="Express yourself freely. There are no wrong emotions, no judgment here. Whether your reflection is joyful, challenging, or quietly profound, it matters. Your authentic expression strengthens not only your own emotional wisdom but creates ripples of understanding in our global community. Together, we're building a world where emotions are honored, not hidden."
useInvertedBackground={true}
buttons={[
{ text: "Share Your Reflection", href: "#contact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact" className="py-20 px-4 md:px-8">
<ContactCenter
tag="Ready to Reflect?"
title="Begin Your Journey of Authentic Expression"
description="Create a safe space for your emotions. Connect with practices designed to deepen your self-awareness and strengthen your emotional resilience."
tagIcon={Send}
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email to begin"
buttonText="Start Reflecting"
termsText="Your reflections are private and protected. Express yourself with confidence."
/>
</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>
);
}

6
src/app/styles/variables.css
View File

@@ -10,9 +10,9 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f7f6f7;
--card: #ffffff;
--foreground: #0c1325;
--background: #f0f8ff;
--card: #e6f2ff;
--foreground: #0c1a2e;
--primary-cta: #0798ff;
--primary-cta-text: #f7f6f7;
--secondary-cta: #ffffff;