Update src/app/page.tsx

2026-03-19 20:33:24 +00:00
3 changed files with 42 additions and 13 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,7 +6,6 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Manrope } from "next/font/google";
-import { Roboto } from "next/font/google";



@@ -15,12 +14,8 @@ export const metadata: Metadata = {
  description: 'Experience premium dental care at Lumineux Dental. Expert cosmetic dentistry, dental implants, and orthodontics in a luxury environment.',
 };

-
-
-const roboto = Roboto({
-  variable: "--font-roboto",
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
+const manrope = Manrope({
+  variable: "--font-manrope",  subsets: ["latin"],
 });

 export default function RootLayout({
@@ -31,7 +26,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${roboto.variable} antialiased`}>
+        <body className={`${manrope.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,12 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
 import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
 import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Heart, Award, Star, Calendar } from "lucide-react";
+import { Sparkles, Heart, Award, Star, Calendar, Wrench, Droplet, Shield, Zap } from "lucide-react";

 export default function LandingPage() {
  return (
@@ -28,6 +29,7 @@ export default function LandingPage() {
        <NavbarLayoutFloatingInline
          brandName="G. MCARDLE"
          navItems={[
+            { name: "Home", id: "hero" },
            { name: "Services", id: "features" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
@@ -43,7 +45,7 @@ export default function LandingPage() {
        <HeroSplitKpi
          title="Professional Plumbing Services You Can Trust"
          description="Expert plumbing solutions for residential and commercial properties. Fast response times, transparent pricing, and guaranteed workmanship. Available 24/7 for emergency repairs."
-          tag="Professional Plumbing in Carlisle"
+          tag="Professional Plumbing"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
@@ -58,13 +60,45 @@ export default function LandingPage() {
          ]}
          enableKpiAnimation={true}
          background={{ variant: "plain" }}
-          imageSrc="http://img.b2bpic.net/premium-photo/male-plumber-hands-fixing-metal-sink-pipe_386185-5648.jpg?id=20009150"
+          imageSrc="http://img.b2bpic.net/free-photo/indoor-hotel-view_1417-1562.jpg?_wi=1"
          imageAlt="Professional plumbing installation"
          mediaAnimation="opacity"
          imagePosition="right"
        />
      </div>

+      <div id="products" data-section="products">
+        <ProductCardTwo
+          title="Our Plumbing Services"
+          description="Comprehensive plumbing solutions for all your needs, from routine maintenance to complex installations and emergency repairs."
+          tag="Full Service"
+          tagIcon={Heart}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "View All Services", href: "#contact" }
+          ]}
+          buttonAnimation="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          products={[
+            {
+              id: "repairs",              brand: "Maintenance",              name: "Pipe Repairs & Installation",              price: "Reliable Repairs",              rating: 5,
+              reviewCount: "1200+",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-dentist-examining-female-s-teeth-dentistry_613910-11476.jpg?_wi=1",              imageAlt: "Professional pipe installation"
+            },
+            {
+              id: "drainage",              brand: "Drainage",              name: "Drain Cleaning & Unclogging",              price: "Quick Solutions",              rating: 5,
+              reviewCount: "1800+",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-dentist-instruments_23-2151053263.jpg?_wi=1",              imageAlt: "Drain cleaning service"
+            },
+            {
+              id: "heating",              brand: "Heating",              name: "Boiler & Heating Installation",              price: "Comfort Guaranteed",              rating: 5,
+              reviewCount: "1500+",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-pleased-smiling-woman-dentist-s-clinic_329181-20765.jpg?_wi=1",              imageAlt: "Boiler installation service"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+        />
+      </div>
+
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-roboto), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-roboto), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
 }