Update src/app/page.tsx

Merge version_1 into main

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: 'Welcome to Our Platform',
-  description: 'Professional solutions for modern business.',
+  title: 'Home',
+  description: 'Welcome to our website',
   openGraph: {
     "title": "Borgo C - Official Restaurant",
     "description": "Home-style fusion cuisine in Lei King Wan.",

src/app/page.tsx

@@ -1,4 +1,5 @@
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+'use client';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
@@ -8,81 +9,88 @@ 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="text-stagger" 
-      defaultTextAnimation="entrance-slide" 
-      borderRadius="rounded" 
-      contentWidth="medium" 
-      sizing="medium" 
-      background="circleGradient" 
-      cardStyle="glass-elevated" 
-      primaryButtonStyle="gradient" 
-      secondaryButtonStyle="glass" 
+    <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">
-        <NavbarStyleFullscreen navItems={[{name: "Home", id: "/"}]} />
+        <NavbarStyleFullscreen navItems={navItems} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroBillboardRotatedCarousel 
-          title="Welcome" 
-          description="Experience the future of digital engagement."
-          background={{ variant: "plain" }}
+        <HeroBillboardRotatedCarousel
+          title="Innovating Digital Experiences"
+          description="Crafting robust, scalable, and beautiful web solutions."
+          background={{ variant: 'plain' }}
           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" }
+            { id: '1', imageSrc: 'https://images.unsplash.com/photo-1497215728101-856f4ea42174' },
+            { id: '2', imageSrc: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab' },
+            { id: '3', imageSrc: 'https://images.unsplash.com/photo-1496493677560-f5a6f220300a' },
+            { id: '4', imageSrc: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72' },
+            { id: '5', imageSrc: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085' },
+            { id: '6', imageSrc: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40' },
           ]}
         />
       </div>
       <div id="features" data-section="features">
-        <FeatureCardTwentyFour 
-          title="Core Features" 
-          description="Designed for scale and performance."
+        <FeatureCardTwentyFour
+          title="Powerful Features"
+          description="Tools designed to help you scale faster."
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           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" }
+            { id: '1', title: 'Feature 1', author: 'Admin', description: 'Description 1', tags: ['Tag1'], imageSrc: 'https://images.unsplash.com/photo-1497215728101-856f4ea42174' },
+            { id: '2', title: 'Feature 2', author: 'Admin', description: 'Description 2', tags: ['Tag2'], imageSrc: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab' },
           ]}
         />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardFifteen 
-          testimonial="The best experience I have ever had!"
+        <TestimonialCardFifteen
+          testimonial="The best experience I have had so far!"
           rating={5}
-          author="Jane Doe"
-          avatars={[]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
+          author="John Doe"
+          avatars={[{ src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e', alt: 'User' }]}
+          ratingAnimation="opacity"
+          avatarsAnimation="opacity"
           useInvertedBackground={false}
         />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitText 
-          faqs={[{ id: "q1", title: "How does it work?", content: "Simply sign up and start." }]}
-          sideTitle="FAQ"
+        <FaqSplitText
+          sideTitle="Frequently Asked Questions"
+          faqs={[
+            { id: '1', title: 'Question 1', content: 'Answer 1' },
+            { id: '2', title: 'Question 2', content: 'Answer 2' },
+          ]}
           faqsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCTA 
-          tag="Get in touch"
+        <ContactCTA
+          tag="Contact Us"
           title="Ready to start?"
-          description="Contact our team today."
-          buttons={[{text: "Contact Us"}]}
-          background={{ variant: "plain" }}
+          description="Let's build something great together."
+          buttons={[{ text: 'Get Started', href: '#' }]}
+          background={{ variant: 'plain' }}
           useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBase columns={[{ title: "Product", items: [{ label: "Home", href: "/" }] }]} />
+        <FooterBase
+          columns={[{ title: 'Links', items: [{ label: 'Home', href: '/' }] }]}
+        />
       </div>
     </ThemeProvider>
   );