From 10adc0e6aa8c348a5777f06ec30f919fcf4845a2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 09:52:21 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 478 +++++++++++++++--------------------------------
 1 file changed, 149 insertions(+), 329 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cbd77c2..6fdbe62 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,346 +17,166 @@ import { Instagram, Twitter } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="background-highlight"
-        borderRadius="soft"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Features",
-          id: "#features",
-        },
-        {
-          name: "Artists",
-          id: "#artists",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-        {
-          name: "Support",
-          id: "#faq",
-        },
-      ]}
-      brandName="Harmony"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Features", id: "features" },
+              { name: "Artists", id: "artists" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Support", id: "faq" },
+            ]}
+            brandName="Harmony"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      logoText="Harmony Stream"
-      description="Listen to millions of songs and podcasts from around the world. Discover new music and create your perfect playlist."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#pricing",
-        },
-        {
-          text: "Learn More",
-          href: "#features",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/sound-engineer-learns-tuning-acoustic-guitar-home-studio_482257-121670.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "sparkles-gradient" }}
+            logoText="Harmony Stream"
+            description="Listen to millions of songs and podcasts from around the world. Discover new music and create your perfect playlist."
+            buttons={[
+              { text: "Get Started", href: "#pricing" },
+              { text: "Learn More", href: "#features" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/sound-engineer-learns-tuning-acoustic-guitar-home-studio_482257-121670.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Unlimited Skips",
-          description: "Jump to your favorite tracks whenever you want, no limitations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/blue-vinyl-with-musical-notes_23-2148785733.jpg",
-        },
-        {
-          title: "High Fidelity Audio",
-          description: "Experience crystal-clear sound quality for every genre.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-technology-background-with-flowing-data-waves_1048-18869.jpg",
-        },
-        {
-          title: "Offline Listening",
-          description: "Download your tracks and take them anywhere without data.",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-pressing-power-button_23-2150040444.jpg",
-        },
-      ]}
-      title="Everything You Need for Music"
-      description="Our platform offers tools to organize, discover, and share your favorite audio experiences seamlessly."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            features={[
+              { title: "Unlimited Skips", description: "Jump to your favorite tracks whenever you want, no limitations.", imageSrc: "http://img.b2bpic.net/free-photo/blue-vinyl-with-musical-notes_23-2148785733.jpg" },
+              { title: "High Fidelity Audio", description: "Experience crystal-clear sound quality for every genre.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-technology-background-with-flowing-data-waves_1048-18869.jpg" },
+              { title: "Offline Listening", description: "Download your tracks and take them anywhere without data.", imageSrc: "http://img.b2bpic.net/free-photo/person-pressing-power-button_23-2150040444.jpg" },
+            ]}
+            title="Everything You Need for Music"
+            description="Our platform offers tools to organize, discover, and share your favorite audio experiences seamlessly."
+          />
+        </div>
 
-  <div id="artists" data-section="artists">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "a1",
-          name: "Lumina",
-          price: "12.4M Listeners",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-braids-portrait_23-2151428151.jpg",
-        },
-        {
-          id: "a2",
-          name: "Neon Pulse",
-          price: "9.8M Listeners",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453407.jpg",
-        },
-        {
-          id: "a3",
-          name: "Echo Theory",
-          price: "8.5M Listeners",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-exercises-with-dumbbell_23-2147775557.jpg",
-        },
-        {
-          id: "a4",
-          name: "Solar Breeze",
-          price: "7.2M Listeners",
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-addiction-illustrated_23-2151873470.jpg",
-        },
-        {
-          id: "a5",
-          name: "Velvet Bass",
-          price: "6.8M Listeners",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-posing-with-plastic-foil_23-2148864892.jpg",
-        },
-        {
-          id: "a6",
-          name: "Urban Groove",
-          price: "5.9M Listeners",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-ballerina-doing-splits_23-2148229620.jpg",
-        },
-      ]}
-      title="Top Trending Artists"
-      description="Explore the music that the world is listening to right now."
-    />
-  </div>
+        <div id="artists" data-section="artists">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="asymmetric-60-wide-40-narrow"
+            useInvertedBackground={true}
+            products={[
+              { id: "a1", name: "Lumina", price: "12.4M Listeners", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-braids-portrait_23-2151428151.jpg" },
+              { id: "a2", name: "Neon Pulse", price: "9.8M Listeners", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453407.jpg" },
+              { id: "a3", name: "Echo Theory", price: "8.5M Listeners", imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-exercises-with-dumbbell_23-2147775557.jpg" },
+              { id: "a4", name: "Solar Breeze", price: "7.2M Listeners", imageSrc: "http://img.b2bpic.net/free-photo/technology-addiction-illustrated_23-2151873470.jpg" },
+              { id: "a5", name: "Velvet Bass", price: "6.8M Listeners", imageSrc: "http://img.b2bpic.net/free-photo/man-posing-with-plastic-foil_23-2148864892.jpg" },
+              { id: "a6", name: "Urban Groove", price: "5.9M Listeners", imageSrc: "http://img.b2bpic.net/free-photo/front-view-ballerina-doing-splits_23-2148229620.jpg" },
+            ]}
+            title="Top Trending Artists"
+            description="Explore the music that the world is listening to right now."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "p1",
-          badge: "Individual",
-          price: "$9.99/mo",
-          subtitle: "For your personal journey",
-          features: [
-            "Ad-free music",
-            "High Fidelity",
-            "Offline mode",
-          ],
-        },
-        {
-          id: "p2",
-          badge: "Family",
-          price: "$15.99/mo",
-          subtitle: "For your whole household",
-          features: [
-            "6 premium accounts",
-            "Shared playlists",
-            "Ad-free music",
-          ],
-        },
-        {
-          id: "p3",
-          badge: "Student",
-          price: "$4.99/mo",
-          subtitle: "Special discounted rate",
-          features: [
-            "Ad-free music",
-            "Mobile only",
-            "Verified students",
-          ],
-        },
-      ]}
-      title="Choose Your Plan"
-      description="Get full access to all features with a simple subscription."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "p1", badge: "Individual", price: "$9.99/mo", subtitle: "For your personal journey", features: ["Ad-free music", "High Fidelity", "Offline mode"] },
+              { id: "p2", badge: "Family", price: "$15.99/mo", subtitle: "For your whole household", features: ["6 premium accounts", "Shared playlists", "Ad-free music"] },
+              { id: "p3", badge: "Student", price: "$4.99/mo", subtitle: "Special discounted rate", features: ["Ad-free music", "Mobile only", "Verified students"] },
+            ]}
+            title="Choose Your Plan"
+            description="Get full access to all features with a simple subscription."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Miller",
-          role: "DJ",
-          company: "BeatFlow",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-cup-headphones-red-background-high-quality-photo_114579-60893.jpg",
-        },
-        {
-          id: "t2",
-          name: "Marcus Chen",
-          role: "Producer",
-          company: "StudioOne",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-virtual-reality-goggles_23-2148815672.jpg",
-        },
-        {
-          id: "t3",
-          name: "Elena Rodriguez",
-          role: "Fan",
-          company: "Global",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-colorful-coat-listening-music-waving-pink-background_140725-26777.jpg",
-        },
-        {
-          id: "t4",
-          name: "David Smith",
-          role: "Fan",
-          company: "Tech",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/annoyed-female-performer-getting-her-vocals-wrong-pre-show-rehearsal_482257-114731.jpg",
-        },
-        {
-          id: "t5",
-          name: "Grace Kim",
-          role: "Fan",
-          company: "Design",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-positive-man-with-headphones-neck-smiles-broadly-closes-eyes-from-pleasure-wears-hat-black-t-shirt_273609-25587.jpg",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "100M+",
-          label: "Active Users",
-        },
-        {
-          value: "5M+",
-          label: "Songs",
-        },
-        {
-          value: "99.9%",
-          label: "Uptime",
-        },
-      ]}
-      title="What Our Fans Say"
-      description="Join millions of satisfied music lovers across the globe."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSixteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "t1", name: "Sarah Miller", role: "DJ", company: "BeatFlow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-cup-headphones-red-background-high-quality-photo_114579-60893.jpg" },
+              { id: "t2", name: "Marcus Chen", role: "Producer", company: "StudioOne", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-virtual-reality-goggles_23-2148815672.jpg" },
+              { id: "t3", name: "Elena Rodriguez", role: "Fan", company: "Global", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-colorful-coat-listening-music-waving-pink-background_140725-26777.jpg" },
+              { id: "t4", name: "David Smith", role: "Fan", company: "Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/annoyed-female-performer-getting-her-vocals-wrong-pre-show-rehearsal_482257-114731.jpg" },
+              { id: "t5", name: "Grace Kim", role: "Fan", company: "Design", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-positive-man-with-headphones-neck-smiles-broadly-closes-eyes-from-pleasure-wears-hat-black-t-shirt_273609-25587.jpg" },
+            ]}
+            kpiItems={[
+              { value: "100M+", label: "Active Users" },
+              { value: "5M+", label: "Songs" },
+              { value: "99.9%", label: "Uptime" },
+            ]}
+            title="What Our Fans Say"
+            description="Join millions of satisfied music lovers across the globe."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How can I cancel my plan?",
-          content: "You can cancel any time directly from your account settings.",
-        },
-        {
-          id: "f2",
-          title: "Does it work on mobile?",
-          content: "Yes, our app is available on both iOS and Android platforms.",
-        },
-        {
-          id: "f3",
-          title: "Are there ads on premium?",
-          content: "No, premium members never see ads while listening.",
-        },
-      ]}
-      sideTitle="Common Questions"
-      sideDescription="Everything you need to know about your account."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "How can I cancel my plan?", content: "You can cancel any time directly from your account settings." },
+              { id: "f2", title: "Does it work on mobile?", content: "Yes, our app is available on both iOS and Android platforms." },
+              { id: "f3", title: "Are there ads on premium?", content: "No, premium members never see ads while listening." },
+            ]}
+            sideTitle="Common Questions"
+            sideDescription="Everything you need to know about your account."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "1.2B",
-          title: "Monthly Hours Streamed",
-          items: [
-            "Podcast content",
-            "Artist tracks",
-          ],
-        },
-        {
-          id: "m2",
-          value: "240k",
-          title: "New Podcasts Added",
-          items: [
-            "Daily additions",
-            "Daily updates",
-          ],
-        },
-        {
-          id: "m3",
-          value: "50k",
-          title: "Verified Creators",
-          items: [
-            "Independent artists",
-            "Global producers",
-          ],
-        },
-      ]}
-      title="Our Impact"
-      description="We are consistently growing our music ecosystem every day."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", value: "1.2B", title: "Monthly Hours Streamed", items: ["Podcast content", "Artist tracks"] },
+              { id: "m2", value: "240k", title: "New Podcasts Added", items: ["Daily additions", "Daily updates"] },
+              { id: "m3", value: "50k", title: "Verified Creators", items: ["Independent artists", "Global producers"] },
+            ]}
+            title="Our Impact"
+            description="We are consistently growing our music ecosystem every day."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "radial-gradient",
-      }}
-      tag="Support"
-      title="Need Help? Reach Out"
-      description="Our support team is ready to answer any questions you have regarding your account or our services."
-      buttons={[
-        {
-          text: "Contact Support",
-          href: "mailto:hello@harmony.com",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={false}
+            background={{ variant: "radial-gradient" }}
+            tag="Support"
+            title="Need Help? Reach Out"
+            description="Our support team is ready to answer any questions you have regarding your account or our services."
+            buttons={[{ text: "Contact Support", href: "mailto:hello@harmony.com" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Harmony"
-      copyrightText="© 2025 Harmony Inc."
-      socialLinks={[
-        {
-          icon: Twitter,
-          href: "#",
-          ariaLabel: "Twitter",
-        },
-        {
-          icon: Instagram,
-          href: "#",
-          ariaLabel: "Instagram",
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="Harmony"
+            copyrightText="© 2025 Harmony Inc."
+            socialLinks={[
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1