Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
-import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
 import MediaAbout from "@/components/sections/about/MediaAbout";
 import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
@@ -47,13 +47,13 @@ export default function LandingPage() {
           ]}
           slides={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=1",              imageAlt: "Professional barbershop interior"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773254861391-l8au2w4i.png",              imageAlt: "Professional barbershop interior"
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=2",              imageAlt: "Barbershop station setup"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773256721086-jdf475ff.png",              imageAlt: "Barbershop station setup"
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=3",              imageAlt: "Premium grooming tools"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773256845629-erqlhcp7.png",              imageAlt: "Premium grooming tools"
             }
           ]}
           autoplayDelay={5000}
@@ -62,23 +62,40 @@ export default function LandingPage() {
       </div>
 
       <div id="services" data-section="services">
-        <FeatureCardSixteen
+        <FeatureCardTwentySeven
+          features={[
+            {
+              id: "1",              title: "Regular Haircut                                    ",              descriptions: [
+                "Professional haircut with expert styling",                "Available with number 1 or 2 sides",                "Perfect for classic looks"
+              ],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773255064647-ucp4j2vs.png",              imageAlt: "Regular haircut service"
+            },
+            {
+              id: "2",              title: "Haircut and Beard                                                                              ",              descriptions: [
+                "Custom beard shaping and design",                "Razor fade enhancement",                "Professional grooming expertise"
+              ],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773255398707-yituexec.png",              imageAlt: "Beard design service"
+            },
+            {
+              id: "3",              title: "The Works",              descriptions: [
+                "Complete grooming package",                "Haircut with beard and fade design",                "Full eyebrow styling included"
+              ],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773255457740-1wnqetcn.png",              imageAlt: "Complete grooming package"
+            },
+            {
+              id: "4",              title: "Haircut and Design",              descriptions: [
+                "Professional eyebrow design",                "Precision shaping and grooming",                "Enhances your natural features"
+              ],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773255064647-ucp4j2vs.png",              imageAlt: "Eyebrow styling service"
+            }
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
           title="Our Premium Services"
           description="Expert grooming solutions tailored to your style and preferences"
           tag="Services"
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
-          negativeCard={{
-            items: [
-              "Standard haircuts only",              "Limited beard options",              "No design services"
-            ]
-          }}
-          positiveCard={{
-            items: [
-              "Any haircut with professional styling",              "Razor fade and enhancement services",              "Eyebrow and beard design",              "Haircut plus beard combo",              "The Works complete grooming package"
-            ]
-          }}
         />
       </div>
 
@@ -107,7 +124,7 @@ export default function LandingPage() {
           plans={[
             {
               id: "1",              badge: "Regular Cut",              badgeIcon: Scissors,
-              price: "From $15",              subtitle: "Classic haircut with number 1 or 2 sides",              buttons: [
+              price: "$35 ",              subtitle: "Classic haircut with number 1 or 2 sides",              buttons: [
                 { text: "Book Now", href: "tel:(505) 386-9320" }
               ],
               features: [
@@ -116,7 +133,7 @@ export default function LandingPage() {
             },
             {
               id: "2",              badge: "Haircut + Design",              badgeIcon: Sparkles,
-              price: "From $25",              subtitle: "Haircut with custom beard or fade design",              buttons: [
+              price: "$40 ",              subtitle: "Haircut with custom beard or fade design",              buttons: [
                 { text: "Book Now", href: "tel:(505) 386-9320" }
               ],
               features: [
@@ -125,7 +142,7 @@ export default function LandingPage() {
             },
             {
               id: "3",              badge: "The Works",              badgeIcon: Award,
-              price: "From $35",              subtitle: "Complete grooming package with all enhancements",              buttons: [
+              price: "$40+ ",              subtitle: "Complete grooming package with all enhancements",              buttons: [
                 { text: "Book Now", href: "tel:(505) 386-9320" }
               ],
               features: [
@@ -144,7 +161,7 @@ export default function LandingPage() {
           tagIcon={MapPin}
           useInvertedBackground={false}
           background={{ variant: "radial-gradient" }}
-          imageSrc="http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=4"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoKE6hKA9rtgdgfJgfe7ytJnyT/uploaded-1773256363345-trha9qsb.png"
           imageAlt="Double R Barber storefront"
           mediaAnimation="slide-up"
           mediaPosition="right"

src/app/services/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="fluid"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Double R Barber"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "About", id: "about" },
+            { name: "Hours", id: "contact" },
+            { name: "Call Us", id: "contact" }
+          ]}
+          button={{ text: "Book Now", href: "tel:(505) 386-9320" }}
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTwentySeven
+          features={[
+            {
+              id: "1",              title: "Regular Haircut",              descriptions: [
+                "Professional haircut with expert styling",                "Available with number 1 or 2 sides",                "Perfect for classic looks"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=1",              imageAlt: "Regular haircut service"
+            },
+            {
+              id: "2",              title: "Beard Design",              descriptions: [
+                "Custom beard shaping and design",                "Razor fade enhancement",                "Professional grooming expertise"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=2",              imageAlt: "Beard design service"
+            },
+            {
+              id: "3",              title: "The Works",              descriptions: [
+                "Complete grooming package",                "Haircut with beard and fade design",                "Full eyebrow styling included"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=3",              imageAlt: "Complete grooming package"
+            },
+            {
+              id: "4",              title: "Eyebrow Styling",              descriptions: [
+                "Professional eyebrow design",                "Precision shaping and grooming",                "Enhances your natural features"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=1",              imageAlt: "Eyebrow styling service"
+            },
+            {
+              id: "5",              title: "Fade Service",              descriptions: [
+                "Precision fade lines and shaping",                "Clean, sharp hairline design",                "Expert technique for perfect blends"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=2",              imageAlt: "Fade service"
+            },
+            {
+              id: "6",              title: "Grooming Package",              descriptions: [
+                "Complete head-to-toe grooming",                "Hair, beard, and brow styling",                "Premium professional treatment"
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg?_wi=3",              imageAlt: "Grooming package"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          title="Our Complete Service Menu"
+          description="Explore all the professional grooming and styling services we offer at Double R Barber"
+          tag="Services"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Double R"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Contact", href: "tel:(505) 386-9320" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}