Add src/app/reflect/page.tsx
This commit is contained in:
135
src/app/reflect/page.tsx
Normal file
135
src/app/reflect/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user