src/app/page.tsx

@@ -1,4 +1,6 @@
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
@@ -7,10 +9,15 @@ import TestimonialCardTwelve from '@/components/sections/testimonial/Testimonial
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import { CalendarDays } from 'lucide-react';
 
-const navItems = [{ name: "Home", id: "/" }];
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'About', id: '/about' },
+  { name: 'Contact', id: '/contact' }
+];
 
-export default function HomePage() {
+export default function Page() {
   return (
     <ThemeProvider 
       defaultButtonVariant="text-stagger" 
@@ -29,58 +36,65 @@ export default function HomePage() {
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel 
-          title="Western MT Plumbing & Heating" 
-          description="Reliable, owner-operated plumbing and heating in Missoula." 
-          background={{ variant: "plain" }} 
-          mediaItems={[{ imageSrc: "https://images.unsplash.com/photo-1585704032915-c3400ca199e7?q=80&w=2070&auto=format&fit=crop" }]} 
+          title="Welcome to Our Platform" 
+          description="Experience the future of digital solutions with our innovative tools."
+          background={{ variant: "gradient-bars" }}
+          mediaItems={[{ imageSrc: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1600", imageAlt: "Digital innovation" }]}
         />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardTwelve 
-          title="Our Services" 
-          description="We provide professional plumbing and heating solutions for your home and business." 
-          animationType="blur-reveal" 
-          textboxLayout="default" 
+        <FeatureCardTwelve
+          animationType="blur-reveal"
+          title="Our Services"
+          description="Comprehensive solutions designed for your growth."
+          textboxLayout="default"
           useInvertedBackground={false}
-          features={[{ id: "1", label: "Plumbing", title: "Full Service Plumbing", items: ["Repair", "Installation"], buttons: [{ text: "Get Quote", href: "#contact" }] }]} 
-        />
-      </div>
-      <div id="about" data-section="about">
-        <InlineImageSplitTextAbout 
-          heading={[{ type: "text", content: "Expertise You Can Trust" }]} 
-          buttons={[{ text: "Read More", href: "#" }]} 
-          useInvertedBackground={false}
-        />
-      </div>
-      <div id="reviews" data-section="reviews">
-        <TestimonialCardTwelve 
-          cardTitle="Customer Success" 
-          cardTag="Testimonials" 
-          cardAnimation="blur-reveal" 
-          useInvertedBackground={false}
-          testimonials={[{ id: "1", name: "John Doe", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&auto=format&fit=crop" }]} 
+          features={[
+            { id: '1', label: 'Tech', title: 'Technology', items: ['AI Integration', 'Cloud Services'] },
+            { id: '2', label: 'Consult', title: 'Consulting', items: ['Strategy', 'Execution'] }
+          ]}
         />
       </div>
       <div id="booking" data-section="booking">
-        <ContactCTA 
-          tag="Ready to start?" 
-          title="Book Your Appointment" 
-          description="Contact us today to schedule your service." 
-          buttons={[{ text: "Schedule Now", href: "#contact" }]} 
+        <ContactCTA
+          tag="Booking"
+          tagIcon={CalendarDays}
+          title="Schedule Your Appointment"
+          description="Book a time that works best for you and our team."
+          buttons={[{ text: "Book Now", href: "#contact" }]}
           background={{ variant: "plain" }}
+        />
+      </div>
+      <div id="about" data-section="about">
+        <InlineImageSplitTextAbout
           useInvertedBackground={false}
+          heading={[{ type: 'text', content: 'About Us' }, { type: 'image', src: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800', alt: 'Team' }]
+}
+        />
+      </div>
+      <div id="reviews" data-section="reviews">
+        <TestimonialCardTwelve
+          cardTitle="Client Success"
+          cardTag="Testimonials"
+          cardAnimation="blur-reveal"
+          useInvertedBackground={false}
+          testimonials={[
+            { id: '1', name: 'John Doe', imageSrc: 'https://i.pravatar.cc/150?u=1' },
+            { id: '2', name: 'Jane Smith', imageSrc: 'https://i.pravatar.cc/150?u=2' },
+            { id: '3', name: 'Alex Brown', imageSrc: 'https://i.pravatar.cc/150?u=3' }
+          ]}
         />
       </div>
       <div id="contact" data-section="contact">
-        <ContactText 
-          text="Get in Touch" 
-          background={{ variant: "plain" }} 
+        <ContactText
+          text="Get in touch today"
+          background={{ variant: "animated-grid" }}
           useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBase 
-          columns={[{ title: "Contact", items: [{ label: "hello@westernmtplumbing.com", href: "mailto:hello@westernmtplumbing.com" }] }]} 
+        <FooterBase
+          columns={[{ title: 'Company', items: [{ label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }] }]}
         />
       </div>
     </ThemeProvider>