From c76c008c94d48c76bc6525a4b5520aa9934b444f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 15 Apr 2026 13:54:39 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 503 ++++++++++++++++-------------------------------
 1 file changed, 168 insertions(+), 335 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f34437f..0e0f73e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,352 +19,185 @@ export default function LandingPage() {
         defaultButtonVariant="text-shift"
         defaultTextAnimation="reveal-blur"
         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: "Results",
-          id: "metrics",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-      ]}
-      brandName="ShortsMagic"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Features", id: "features" },
+              { name: "Results", id: "metrics" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "FAQ", id: "faq" },
+              { name: "Blog", id: "blog" },
+              { name: "Contact", id: "contact" }
+            ]}
+            brandName="ShortsMagic"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroOverlay
-      title="Turn Long Videos Into Viral Shorts Instantly"
-      description="Paste your YouTube link and let our AI engine automatically extract the most engaging moments, optimize them for mobile, and generate perfectly captioned clips."
-      buttons={[
-        {
-          text: "Start Converting",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169845.jpg"
-      showBlur={true}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101150.jpg",
-          alt: "User avatar 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",
-          alt: "User avatar 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-photo-turned-digital-midi-controller_400718-29.jpg",
-          alt: "User avatar 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/person-having-conversation-with-ai-virtual-assistant-producing-clips_482257-127292.jpg",
-          alt: "User avatar 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/focused-woman-working-with-ai-chatbot-her-desktop-computer_482257-120813.jpg",
-          alt: "User avatar 5",
-        },
-      ]}
-      avatarText="Trusted by 50,000+ creators"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlay
+            title="Turn Long Videos Into Viral Shorts Instantly"
+            description="Paste your YouTube link and let our AI engine automatically extract the most engaging moments, optimize them for mobile, and generate perfectly captioned clips."
+            buttons={[{ text: "Start Converting", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169845.jpg"
+            showBlur={true}
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101150.jpg", alt: "User avatar 1" },
+              { src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg", alt: "User avatar 2" },
+              { src: "http://img.b2bpic.net/free-photo/closeup-photo-turned-digital-midi-controller_400718-29.jpg", alt: "User avatar 3" },
+              { src: "http://img.b2bpic.net/free-photo/person-having-conversation-with-ai-virtual-assistant-producing-clips_482257-127292.jpg", alt: "User avatar 4" },
+              { src: "http://img.b2bpic.net/free-photo/focused-woman-working-with-ai-chatbot-her-desktop-computer_482257-120813.jpg", alt: "User avatar 5" }
+            ]}
+            avatarText="Trusted by 50,000+ creators"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardNineteen
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          tag: "AI Intelligence",
-          title: "Smart Highlights",
-          subtitle: "AI detection",
-          description: "Our model automatically identifies the most viral moments from your long-form videos.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg",
-        },
-        {
-          tag: "Optimized",
-          title: "Vertical Format",
-          subtitle: "Mobile ready",
-          description: "Seamlessly reframe your horizontal content for TikTok, Reels, and YouTube Shorts.",
-          imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201876.jpg",
-        },
-        {
-          tag: "Accessibility",
-          title: "Auto-Captions",
-          subtitle: "Text generation",
-          description: "Engage your audience with stunning, perfectly synced dynamic captions automatically.",
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-with-player_1134-101.jpg",
-        },
-      ]}
-      title="Smart Features for Creators"
-      description="ShortsMagic uses advanced AI to make your content work harder for you."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardNineteen
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              {
+                tag: "AI Intelligence",                title: "Smart Highlights",                subtitle: "AI detection",                description: "Our model automatically identifies the most viral moments from your long-form videos.",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg"
+              },
+              {
+                tag: "Optimized",                title: "Vertical Format",                subtitle: "Mobile ready",                description: "Seamlessly reframe your horizontal content for TikTok, Reels, and YouTube Shorts.",                imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201876.jpg"
+              },
+              {
+                tag: "Accessibility",                title: "Auto-Captions",                subtitle: "Text generation",                description: "Engage your audience with stunning, perfectly synced dynamic captions automatically.",                imageSrc: "http://img.b2bpic.net/free-photo/hand-with-player_1134-101.jpg"
+              }
+            ]}
+            title="Smart Features for Creators"
+            description="ShortsMagic uses advanced AI to make your content work harder for you."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="depth-3d"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "10x",
-          description: "Average reach boost",
-        },
-        {
-          id: "m2",
-          value: "90%",
-          description: "Time saved editing",
-        },
-        {
-          id: "m3",
-          value: "500k+",
-          description: "Clips generated monthly",
-        },
-      ]}
-      title="Proven Performance"
-      description="Creators using ShortsMagic see massive growth in reach."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardTwo
+            animationType="depth-3d"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", value: "10x", description: "Average reach boost" },
+              { id: "m2", value: "90%", description: "Time saved editing" },
+              { id: "m3", value: "500k+", description: "Clips generated monthly" }
+            ]}
+            title="Proven Performance"
+            description="Creators using ShortsMagic see massive growth in reach."
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "TechTube",
-        "GrowthLabs",
-        "ContentKings",
-        "MediaMaster",
-        "VisionaryCreators",
-        "SocialBoost",
-        "CreatorElite",
-      ]}
-      title="Trusted by Top Creators"
-      description="We partner with leading agencies and creators to bring the best tools to market."
-    />
-  </div>
+        <div id="social-proof" data-section="social-proof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["TechTube", "GrowthLabs", "ContentKings", "MediaMaster", "VisionaryCreators", "SocialBoost", "CreatorElite"]}
+            title="Trusted by Top Creators"
+            description="We partner with leading agencies and creators to bring the best tools to market."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Alex Rivers",
-          role: "Tech Influencer",
-          company: "RiversTech",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-headphones_23-2149386585.jpg",
-        },
-        {
-          id: "2",
-          name: "Jamie Lee",
-          role: "Creative Lead",
-          company: "StudioMix",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-pressing-buttons-calculator-pink-shirt-jeans-looking-optimistic-front-view_176474-99023.jpg",
-        },
-        {
-          id: "3",
-          name: "Jordan Smith",
-          role: "Content Strategist",
-          company: "GrowthCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg",
-        },
-        {
-          id: "4",
-          name: "Casey Morgan",
-          role: "YouTube Creator",
-          company: "MorganMedia",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097959.jpg",
-        },
-        {
-          id: "5",
-          name: "Taylor Quinn",
-          role: "Founder",
-          company: "StreamFast",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-signs-documents-businessman-sitting-table-manager-working-office_1157-42012.jpg",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "5M+",
-          label: "Views Generated",
-        },
-        {
-          value: "4.9/5",
-          label: "User Rating",
-        },
-        {
-          value: "15k+",
-          label: "Happy Creators",
-        },
-      ]}
-      title="What Creators Say"
-      description="Join thousands of successful creators scaling their content empire."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSixteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", name: "Alex Rivers", role: "Tech Influencer", company: "RiversTech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-headphones_23-2149386585.jpg" },
+              { id: "2", name: "Jamie Lee", role: "Creative Lead", company: "StudioMix", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-pressing-buttons-calculator-pink-shirt-jeans-looking-optimistic-front-view_176474-99023.jpg" },
+              { id: "3", name: "Jordan Smith", role: "Content Strategist", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg" },
+              { id: "4", name: "Casey Morgan", role: "YouTube Creator", company: "MorganMedia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097959.jpg" },
+              { id: "5", name: "Taylor Quinn", role: "Founder", company: "StreamFast", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-signs-documents-businessman-sitting-table-manager-working-office_1157-42012.jpg" }
+            ]}
+            kpiItems={[
+              { value: "5M+", label: "Views Generated" },
+              { value: "4.9/5", label: "User Rating" },
+              { value: "15k+", label: "Happy Creators" }
+            ]}
+            title="What Creators Say"
+            description="Join thousands of successful creators scaling their content empire."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "How does it work?",
-          content: "Simply paste any YouTube link, and our AI analyzes the video to find the most viral potential segments.",
-        },
-        {
-          id: "q2",
-          title: "Is it free to use?",
-          content: "We offer a generous free tier for creators, with premium options for higher volume editing needs.",
-        },
-        {
-          id: "q3",
-          title: "Can I customize captions?",
-          content: "Yes, our editor allows full control over fonts, styles, and animation of your captions.",
-        },
-      ]}
-      title="Common Questions"
-      description="Everything you need to know about ShortsMagic."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "q1", title: "How does it work?", content: "Simply paste any YouTube link, and our AI analyzes the video to find the most viral potential segments." },
+              { id: "q2", title: "Is it free to use?", content: "We offer a generous free tier for creators, with premium options for higher volume editing needs." },
+              { id: "q3", title: "Can I customize captions?", content: "Yes, our editor allows full control over fonts, styles, and animation of your captions." }
+            ]}
+            title="Common Questions"
+            description="Everything you need to know about ShortsMagic."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="blog" data-section="blog">
-      <BlogCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      title="Content Strategy Insights"
-      description="Tips, tricks, and industry news for scaling your social presence."
-      blogs={[
-        {
-          id: "b1",
-          category: "Strategy",
-          title: "Mastering the Short-Form Algorithm",
-          excerpt: "Learn how to optimize your shorts for maximum reach in 2025.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036889.jpg",
-          authorName: "Jane Doe",
-          authorAvatar: "http://img.b2bpic.net/free-photo/upbeat-freelancer-front-digital-device_482257-124312.jpg",
-          date: "Oct 24",
-        },
-        {
-          id: "b2",
-          category: "Growth",
-          title: "Why AI is the Creator's Best Friend",
-          excerpt: "How to save hours of manual editing and focus on creativity.",
-          imageSrc: "http://img.b2bpic.net/free-photo/arrow-paper-cut-out_23-2148456203.jpg",
-          authorName: "John Smith",
-          authorAvatar: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
-          date: "Oct 22",
-        },
-        {
-          id: "b3",
-          category: "Tools",
-          title: "Optimizing Captions for Engagement",
-          excerpt: "Psychology-backed design tips for dynamic captions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-home-creating-3d-render-apartment-interior-layout_482257-126412.jpg",
-          authorName: "Sarah Wilson",
-          authorAvatar: "http://img.b2bpic.net/free-photo/businesswoman-with-notebook-looking-her-side_114579-65357.jpg",
-          date: "Oct 20",
-        },
-      ]}
-    />
-  </div>
+        <div id="blog" data-section="blog">
+          <BlogCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="Content Strategy Insights"
+            description="Tips, tricks, and industry news for scaling your social presence."
+            blogs={[
+              { id: "b1", category: "Strategy", title: "Mastering the Short-Form Algorithm", excerpt: "Learn how to optimize your shorts for maximum reach in 2025.", imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036889.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/upbeat-freelancer-front-digital-device_482257-124312.jpg", date: "Oct 24" },
+              { id: "b2", category: "Growth", title: "Why AI is the Creator's Best Friend", excerpt: "How to save hours of manual editing and focus on creativity.", imageSrc: "http://img.b2bpic.net/free-photo/arrow-paper-cut-out_23-2148456203.jpg", authorName: "John Smith", authorAvatar: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg", date: "Oct 22" },
+              { id: "b3", category: "Tools", title: "Optimizing Captions for Engagement", excerpt: "Psychology-backed design tips for dynamic captions.", imageSrc: "http://img.b2bpic.net/free-photo/woman-home-creating-3d-render-apartment-interior-layout_482257-126412.jpg", authorName: "Sarah Wilson", authorAvatar: "http://img.b2bpic.net/free-photo/businesswoman-with-notebook-looking-her-side_114579-65357.jpg", date: "Oct 20" }
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Get Started"
-      title="Ready to Scale Your Content?"
-      description="Paste your first YouTube link today and see the magic in seconds."
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-network-communications-design_1048-14836.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={false}
+            background={{ variant: "gradient-bars" }}
+            tag="Get Started"
+            title="Ready to Scale Your Content?"
+            description="Paste your first YouTube link today and see the magic in seconds."
+            imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-network-communications-design_1048-14836.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Platform",
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#",
-            },
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Blog",
-              href: "#blog",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="ShortsMagic"
-      copyrightText="© 2025 ShortsMagic | All Rights Reserved"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Platform",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#" },
+                  { label: "FAQ", href: "#faq" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#" },
+                  { label: "Blog", href: "#blog" },
+                  { label: "Contact", href: "#contact" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            logoText="ShortsMagic"
+            copyrightText="© 2025 ShortsMagic | All Rights Reserved"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1