Add src/app/empathy/page.tsx

src/app/empathy/page.tsx

@@ -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>
+  );
+}