Update src/app/page.tsx

Merge version_1 into main

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Libre_Baskerville, Inter } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Home | Western MT Plumbing & Heating',
-  description: 'Reliable, owner-operated plumbing and heating in Missoula.',
+  title: 'Western MT Plumbing & Heating | Reliable Missoula Plumbing',
+  description: 'Owner-operated plumbing and heating services in Missoula, MT. Reliable, high-quality, professional solutions for your home.',
   openGraph: {
     "title": "Western MT Plumbing & Heating",
     "description": "Reliable, owner-operated plumbing and heating in Missoula.",

src/app/page.tsx

@@ -1,21 +1,23 @@
-"use client";
-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';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+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: '/' },
+  { name: 'About', id: '/about' },
+  { name: 'Contact', id: '/contact' }
+];
 
 export default function Page() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "About", id: "/about" },
-    { name: "Reviews", id: "/reviews" },
-    { name: "Contact", id: "/contact" }
-  ];
   return (
     <ThemeProvider 
       defaultButtonVariant="text-stagger" 
@@ -34,47 +36,65 @@ export default function Page() {
       </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", imageAlt: "Plumbing services" }]} 
+          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="Expert plumbing and heating solutions." 
-          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: '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="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" }}
           useInvertedBackground={false}
-          features={[{ id: "1", label: "Plumbing", title: "Plumbing Repair", items: ["Leak detection", "Pipe repair", "Drain cleaning"] }, { id: "2", label: "Heating", title: "Heating Services", items: ["Boiler service", "Furnace repair", "Radiant heat"] }]} 
         />
       </div>
       <div id="about" data-section="about">
-        <InlineImageSplitTextAbout 
-          heading={[{ type: "text", content: "About Our Team" }]} 
+        <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 
-          testimonials={[{ id: "1", name: "John Doe", imageSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" }, { id: "2", name: "Jane Smith", imageSrc: "https://images.unsplash.com/photo-1527980965255-d3b416303d12" }]} 
-          cardTitle="What Our Clients Say" 
-          cardTag="Reviews" 
-          cardAnimation="blur-reveal" 
+        <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 with us for your plumbing and heating needs." 
-          background={{ variant: "plain" }} 
+        <ContactText
+          text="Get in touch today"
+          background={{ variant: "gradient-bars" }}
           useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBase 
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "About", href: "/about" }, { label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] }]} 
+        <FooterBase
+          columns={[{ title: 'Company', items: [{ label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }] }]}
         />
       </div>
     </ThemeProvider>