Switch to version 1: modified src/app/page.tsx

src/app/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
@@ -7,57 +7,74 @@ import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwent
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import Link from 'next/link';
-
-const navItems = [{ name: 'Home', id: '/' }];
 
 export default function Page() {
+  const navItems = [{ name: "Home", id: "/" }];
+  
   return (
-    <ThemeProvider>
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay navItems={navItems} logoText="Webild" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
       <div id="password" data-section="password">
-        <HeroSplitDoubleCarousel
-          title="Welcome to Webild"
-          description="The future of digital infrastructure starts here."
-          background={{ variant: 'plain' }}
-          leftCarouselItems={[{ imageSrc: 'https://images.unsplash.com/photo-1614064641938-3bbee52942c7?q=80&w=2070&auto=format&fit=crop' }]}
-          rightCarouselItems={[{ imageSrc: 'https://images.unsplash.com/photo-1614064641938-3bbee52942c7?q=80&w=2070&auto=format&fit=crop' }]}
+        <HeroSplitDoubleCarousel 
+          title="Happy Birthday Ruoooo" 
+          description="A heartfelt birthday celebration for the cutest girl in the world." 
+          background={{ variant: "sparkles-gradient" }} 
+          leftCarouselItems={[]} 
+          rightCarouselItems={[]} 
         />
       </div>
       <div id="readiness" data-section="readiness">
-        <SplitAbout
-          title="Our Mission"
-          description="We build robust, scalable platforms for everyone."
-          textboxLayout="default"
+        <SplitAbout 
+          title="Why you are the cutest" 
+          description="You bring joy, laughter, and so much light to everyone around you." 
+          bulletPoints={[{ title: "Kindness", description: "You are the kindest soul." }, { title: "Smile", description: "Your smile lights up the room." }]} 
+          textboxLayout="default" 
+          mediaAnimation="none" 
           useInvertedBackground={false}
         />
       </div>
       <div id="letter" data-section="letter">
-        <FeatureCardTwentyOne
-          title="Core Features"
-          description="Everything you need to succeed."
-          accordionItems={[{ id: '1', title: 'Speed', content: 'Fast performance.' }]}
+        <FeatureCardTwentyOne 
+          title="A Special Letter" 
+          description="Every day with you is a gift, and today is the most special one of all." 
+          accordionItems={[{ id: "1", title: "Message", content: "Happy Birthday!" }]} 
+          mediaAnimation="none" 
+          videoSrc="https://example.com/video.mp4"
+          useInvertedBackground={false}
         />
       </div>
       <div id="reasons" data-section="reasons">
-        <FaqSplitText
-          sideTitle="Questions?"
-          faqs={[{ id: '1', title: 'Why Webild?', content: 'Because we are the best.' }]}
-          faqsAnimation="slide-up"
+        <FaqSplitText 
+          faqs={[{ id: "1", title: "Why today?", content: "It is your birthday!" }]} 
+          sideTitle="Reasons to smile" 
+          faqsAnimation="none" 
+          useInvertedBackground={false}
         />
       </div>
       <div id="surprise" data-section="surprise">
-        <ContactText
-          text="Let's get started."
-          background={{ variant: 'plain' }}
+        <ContactText 
+          text="Hope your day is filled with love and surprise!" 
+          background={{ variant: "sparkles-gradient" }} 
+          useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBase
-          columns={[{ title: 'Product', items: [{ label: 'Home', href: '/' }] }]}
-          logoText="Webild"
+        <FooterBase 
+          logoText="Ruoooo 2025" 
+          columns={[{ title: "Explore", items: [{ label: "Home", href: "/" }] }]} 
         />
       </div>
     </ThemeProvider>