Update src/app/book-appointment/page.tsx

src/app/book-appointment/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+
+export default function AppointmentPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="large"
+        background="floatingGradient"
+        cardStyle="inset"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Book Appointment", id: "/book-appointment" }
+                ]}
+                brandName="Copper & Pine"
+            />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroBillboard
+                title="Book Your Appointment"
+                description="Schedule your plumbing service online with ease. Choose a service and let us know when works best for you."
+                background={{ variant: "sparkles-gradient" }}
+            />
+        </div>
+
+        <div id="services" data-section="services">
+            <PricingCardTwo
+                title="Select Your Service"
+                description="Choose the service that best fits your plumbing needs."
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={true}
+                plans={[
+                    { id: "s1", badge: "Standard", price: "$95", subtitle: "Minor Repairs", features: ["Faucet Repair", "Disposal Fix"], buttons: [{ text: "Select", href: "#form" }] },
+                    { id: "s2", badge: "Popular", price: "$150", subtitle: "Maintenance", features: ["Leak Detection", "Drain Cleaning"], buttons: [{ text: "Select", href: "#form" }] },
+                    { id: "s3", badge: "Pro", price: "$650", subtitle: "Installations", features: ["Sump Pump", "Custom Piping"], buttons: [{ text: "Select", href: "#form" }] }
+                ]}
+            />
+        </div>
+
+        <div id="form" data-section="contact">
+            <ContactCTA
+                tag="Booking Form"
+                title="Customer Details"
+                description="Please enter your contact information and details regarding your plumbing urgency to complete the booking."
+                buttons={[{ text: "Submit Appointment Request", onClick: () => alert("Booking submitted!") }]}
+                background={{ variant: "plain" }}
+                useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+                logoText="Copper & Pine"
+                columns={[
+                    { title: "Services", items: [{ label: "Repairs", href: "/" }, { label: "Installations", href: "/" }] },
+                    { title: "Company", items: [{ label: "About", href: "/" }, { label: "Contact", href: "/" }] }
+                ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -9,8 +9,9 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { Phone, AlertCircle, CreditCard } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,44 +31,37 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Why Us",
-          id: "about",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Services", id: "services" },
+        { name: "Why Us", id: "about" },
+        { name: "Testimonials", id: "testimonials" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Copper & Pine"
     />
   </div>
 
+  <div className="sticky bottom-6 right-6 z-50 flex flex-col gap-3 items-end">
+      <div className="bg-yellow-500 text-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2 animate-bounce">
+         <AlertCircle className="w-5 h-5" />
+         <span className="font-bold">Emergency Services Available 24/7</span>
+      </div>
+      <a href="tel:5550123" className="bg-blue-600 text-white p-4 rounded-full shadow-xl hover:scale-110 transition-transform">
+         <Phone className="w-8 h-8" />
+      </a>
+  </div>
+
+  <div className="bg-indigo-900 text-white text-center py-3 text-sm font-medium flex items-center justify-center gap-2">
+      <CreditCard className="w-4 h-4" /> Financing Available - Flexible Payment Plans for All Projects
+  </div>
+
   <div id="hero" data-section="hero">
       <HeroLogo
       logoText="Nick Nelson’s Copper & Pine"
       description="Reliable Plumbing Done Right the First Time. Fast, honest, and professional plumbing services with quality workmanship homeowners can trust."
       buttons={[
-        {
-          text: "Call Now",
-          href: "tel:5550123",
-        },
-        {
-          text: "Request Free Estimate",
-          href: "#contact",
-        },
+        { text: "Call Now", href: "tel:5550123" },
+        { text: "Request Free Estimate", href: "#contact" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/technician-checking-heating-system-boiler-room_169016-55519.jpg"
       imageAlt="Professional plumber smiling tools"
@@ -78,12 +72,7 @@ export default function LandingPage() {
       <TextAbout
       useInvertedBackground={true}
       title="Why Homeowners Choose Copper & Pine"
-      buttons={[
-        {
-          text: "Get a Quote",
-          href: "#contact",
-        },
-      ]}
+      buttons={[{ text: "Get a Quote", href: "#contact" }]}
     />
   </div>
 
@@ -93,21 +82,9 @@ export default function LandingPage() {
       title="Expert Plumbing Solutions"
       description="We specialize in installations, repairs, drain cleaning, and inspections to keep your home running smoothly."
       accordionItems={[
-        {
-          id: "f1",
-          title: "Installation",
-          content: "Faucet, shower, toilet, water heater, and sump pump installations.",
-        },
-        {
-          id: "f2",
-          title: "Repairs",
-          content: "Leak repairs, pipe fixes, and emergency system diagnostics.",
-        },
-        {
-          id: "f3",
-          title: "Drain & Sewer",
-          content: "Professional drain and sewer line cleaning services.",
-        },
+        { id: "f1", title: "Installation", content: "Faucet, shower, toilet, water heater, and sump pump installations." },
+        { id: "f2", title: "Repairs", content: "Leak repairs, pipe fixes, and emergency system diagnostics." },
+        { id: "f3", title: "Drain & Sewer", content: "Professional drain and sewer line cleaning services." },
       ]}
       mediaAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721547.jpg"
@@ -121,54 +98,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       plans={[
-        {
-          id: "p1",
-          badge: "Basic",
-          price: "$95",
-          subtitle: "Minor Repairs",
-          features: [
-            "Faucet Repair",
-            "Garbage Disposal Fix",
-          ],
-          buttons: [
-            {
-              text: "Book Now",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "p2",
-          badge: "Popular",
-          price: "$150",
-          subtitle: "Common Services",
-          features: [
-            "Leak Detection",
-            "Drain Cleaning",
-          ],
-          buttons: [
-            {
-              text: "Book Now",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "p3",
-          badge: "Advanced",
-          price: "$650",
-          subtitle: "Full Installations",
-          features: [
-            "Sump Pump Install",
-            "Custom Plumbing",
-          ],
-          buttons: [
-            {
-              text: "Book Now",
-              href: "#contact",
-            },
-          ],
-        },
+        { id: "p1", badge: "Basic", price: "$95", subtitle: "Minor Repairs", features: ["Faucet Repair", "Garbage Disposal Fix"], buttons: [{ text: "Book Now", href: "#contact" }] },
+        { id: "p2", badge: "Popular", price: "$150", subtitle: "Common Services", features: ["Leak Detection", "Drain Cleaning"], buttons: [{ text: "Book Now", href: "#contact" }] },
+        { id: "p3", badge: "Advanced", price: "$650", subtitle: "Full Installations", features: ["Sump Pump Install", "Custom Plumbing"], buttons: [{ text: "Book Now", href: "#contact" }] },
       ]}
       title="Service Pricing"
       description="Transparent starting prices for residential plumbing."
@@ -176,71 +108,26 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Joni Baird",
-          role: "Homeowner",
-          testimonial: "Nick is the best plumber we have had. He is incredibly knowledgeable, timely and reasonable!",
-          imageSrc: "http://img.b2bpic.net/free-photo/older-woman-drinking-coffee-smiling-house-white-shirt-daytime_176474-4942.jpg",
-        },
-        {
-          id: "2",
-          name: "Henry Theking",
-          role: "Homeowner",
-          testimonial: "I couldn’t be more impressed with the service I received! Nick was professional and courteous.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-tender-young-smiling-woman-feeling-cozy-home-sitting-kitchen-chair-with-smartphone_1258-187159.jpg",
-        },
-        {
-          id: "3",
-          name: "Jillian Rusiewicz Freed",
-          role: "Homeowner",
-          testimonial: "Highly recommended! Nick does great work at great prices and finishes issues quickly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-pretty-caucasian-woman-sitting-armchair-designed-living-room-looking-showing-thumb-up-doing-money-gesture_141793-58035.jpg",
-        },
-        {
-          id: "4",
-          name: "J Pick",
-          role: "Homeowner",
-          testimonial: "If I could give 1 million stars, I would! Nick was incredibly nice and reasonably priced.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-looking-side-street_839833-27819.jpg",
-        },
-        {
-          id: "5",
-          name: "Andrew B",
-          role: "Homeowner",
-          testimonial: "I had an excellent experience working with Nick. He did an amazing job and explained everything clearly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947467.jpg",
-        },
-      ]}
-      title="What Our Customers Say"
-      description="Trusted by local homeowners."
-    />
+      <TestimonialCardTwelve
+        cardTitle="What Our Customers Say"
+        cardTag="Trusted by local homeowners"
+        cardAnimation="slide-up"
+        useInvertedBackground={false}
+        testimonials={[
+          { id: "1", name: "Joni Baird", imageSrc: "http://img.b2bpic.net/free-photo/older-woman-drinking-coffee-smiling-house-white-shirt-daytime_176474-4942.jpg" },
+          { id: "2", name: "Henry Theking", imageSrc: "http://img.b2bpic.net/free-photo/portrait-tender-young-smiling-woman-feeling-cozy-home-sitting-kitchen-chair-with-smartphone_1258-187159.jpg" },
+          { id: "3", name: "Jillian Rusiewicz Freed", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-pretty-caucasian-woman-sitting-armchair-designed-living-room-looking-showing-thumb-up-doing-money-gesture_141793-58035.jpg" },
+        ]}
+      />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "faq1",
-          title: "Do you offer emergency services?",
-          content: "Yes, we respond quickly to urgent issues.",
-        },
-        {
-          id: "faq2",
-          title: "Are estimates free?",
-          content: "Yes, contact us to discuss your needs.",
-        },
-        {
-          id: "faq3",
-          title: "What do you specialize in?",
-          content: "Residential repairs, installations, and drain cleaning.",
-        },
+        { id: "faq1", title: "Do you offer emergency services?", content: "Yes, we respond quickly to urgent issues." },
+        { id: "faq2", title: "Are estimates free?", content: "Yes, contact us to discuss your needs." },
+        { id: "faq3", title: "What do you specialize in?", content: "Residential repairs, installations, and drain cleaning." },
       ]}
       sideTitle="Frequently Asked Questions"
       faqsAnimation="slide-up"
@@ -250,18 +137,11 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       tag="Contact Us"
       title="Need Plumbing Help Today?"
       description="Call us or submit an estimate request now."
-      buttons={[
-        {
-          text: "Call Now",
-          href: "tel:5550123",
-        },
-      ]}
+      buttons={[{ text: "Call Now", href: "tel:5550123" }]}
     />
   </div>
 
@@ -269,36 +149,12 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="Copper & Pine"
       columns={[
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Repairs",
-              href: "#services",
-            },
-            {
-              label: "Installations",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
+        { title: "Services", items: [{ label: "Repairs", href: "#services" }, { label: "Installations", href: "#services" }] },
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}