Update src/app/page.tsx

Merge version_1 into main

src/app/layout.tsx

@@ -12,7 +12,7 @@ import { Playfair_Display, Noto_Serif_TC, Inter, Noto_Sans_TC } from "next/font/
 
 export const metadata: Metadata = {
   title: 'Home',
-  description: 'Welcome to our website.',
+  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,5 +1,5 @@
-"use client";
-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';
@@ -9,73 +9,87 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function Page() {
-  const navItems = [{ name: "Home", id: "/" }];
+  const navItems = [{ name: 'Home', id: '/' }];
+  
   return (
-    <ThemeProvider 
-      defaultButtonVariant="hover-magnetic" 
-      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={navItems} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroBillboardRotatedCarousel 
-          title="Build Your Future" 
-          description="Innovation delivered through high-performance components." 
-          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" }]} 
+        <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-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="Powerful Features" 
-          description="Everything you need to scale." 
-          animationType="slide-up" 
-          textboxLayout="default" 
+        <FeatureCardTwentyFour
+          title="Powerful Features"
+          description="Tools designed to help you scale faster."
+          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: '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="Incredible results!" 
-          rating={5} 
-          author="Jane Doe" 
-          avatars={[{ src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde", alt: "Avatar" }]}
-          ratingAnimation="slide-up" 
-          avatarsAnimation="slide-up" 
+        <TestimonialCardFifteen
+          testimonial="The best experience I have had so far!"
+          rating={5}
+          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 
-          sideTitle="Questions?" 
-          faqs={[{ id: "1", title: "What is this?", content: "A platform." }, { id: "2", title: "Pricing?", content: "Affordable." }]}
+        <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="Reach Out" 
-          title="Get in Touch" 
-          description="We're here to help." 
-          buttons={[{ text: "Email Us" }]}
-          background={{ variant: "plain" }}
+        <ContactCTA
+          tag="Contact Us"
+          title="Ready to start?"
+          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: "Links", items: [{ label: "Home", href: "/" }] }]}
+        <FooterBase
+          columns={[{ title: 'Links', items: [{ label: 'Home', href: '/' }] }]}
         />
       </div>
     </ThemeProvider>