Update src/app/page.tsx

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Playfair_Display, Noto_Serif_TC, Inter, Noto_Sans_TC } from "next/font/
 
 
 export const metadata: Metadata = {
-  title: 'Home',
-  description: 'Welcome to our website.',
+  title: 'Welcome to Our Platform',
+  description: 'Professional solutions for modern business.',
   openGraph: {
     "title": "Borgo C - Official Restaurant",
     "description": "Home-style fusion cuisine in Lei King Wan.",

src/app/page.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
@@ -9,10 +8,9 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function Page() {
-  const navItems = [{ name: "Home", id: "/" }];
   return (
     <ThemeProvider 
-      defaultButtonVariant="hover-magnetic" 
+      defaultButtonVariant="text-stagger" 
       defaultTextAnimation="entrance-slide" 
       borderRadius="rounded" 
       contentWidth="medium" 
@@ -24,59 +22,67 @@ export default function Page() {
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen navItems={navItems} />
+        <NavbarStyleFullscreen navItems={[{name: "Home", id: "/"}]} />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardRotatedCarousel 
-          title="Build Your Future" 
-          description="Innovation delivered through high-performance components." 
+          title="Welcome" 
+          description="Experience the future of digital engagement."
           background={{ variant: "plain" }}
-          carouselItems={[{ id: "1", imageAlt: "Item 1" }, { id: "2", imageAlt: "Item 2" }, { id: "3", imageAlt: "Item 3" }, { id: "4", imageAlt: "Item 4" }, { id: "5", imageAlt: "Item 5" }, { id: "6", imageAlt: "Item 6" }]} 
+          carouselItems={[
+            { id: "1", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=2000" },
+            { id: "2", imageSrc: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=2000" },
+            { id: "3", imageSrc: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2000" },
+            { id: "4", imageSrc: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=2000" },
+            { id: "5", imageSrc: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?q=80&w=2000" },
+            { id: "6", imageSrc: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=2000" }
+          ]}
         />
       </div>
       <div id="features" data-section="features">
         <FeatureCardTwentyFour 
-          title="Powerful Features" 
-          description="Everything you need to scale." 
-          animationType="slide-up" 
-          textboxLayout="default" 
+          title="Core Features" 
+          description="Designed for scale and performance."
+          animationType="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
-          features={[{ id: "1", title: "Speed", author: "Team", description: "Lightning fast performance", tags: ["tech"], imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" }, { id: "2", title: "Reliability", author: "Team", description: "Always online", tags: ["infra"], imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" }]}
+          features={[
+            { id: "f1", title: "High Speed", author: "Admin", description: "Lightning fast performance.", tags: ["speed"], imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=400" },
+            { id: "f2", title: "Secure", author: "Admin", description: "Top notch security.", tags: ["security"], imageSrc: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=400" }
+          ]}
         />
       </div>
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFifteen 
-          testimonial="Incredible results!" 
-          rating={5} 
-          author="Jane Doe" 
-          avatars={[{ src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde", alt: "Avatar" }]}
-          ratingAnimation="slide-up" 
-          avatarsAnimation="slide-up" 
+          testimonial="The best experience I have ever had!"
+          rating={5}
+          author="Jane Doe"
+          avatars={[]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
       <div id="faq" data-section="faq">
         <FaqSplitText 
-          sideTitle="Questions?" 
-          faqs={[{ id: "1", title: "What is this?", content: "A platform." }, { id: "2", title: "Pricing?", content: "Affordable." }]}
+          faqs={[{ id: "q1", title: "How does it work?", content: "Simply sign up and start." }]}
+          sideTitle="FAQ"
           faqsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
       <div id="contact" data-section="contact">
         <ContactCTA 
-          tag="Reach Out" 
-          title="Get in Touch" 
-          description="We're here to help." 
-          buttons={[{ text: "Email Us" }]}
+          tag="Get in touch"
+          title="Ready to start?"
+          description="Contact our team today."
+          buttons={[{text: "Contact Us"}]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBase 
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
-        />
+        <FooterBase columns={[{ title: "Product", items: [{ label: "Home", href: "/" }] }]} />
       </div>
     </ThemeProvider>
   );