Update src/app/page.tsx

Merge version_12 into main

src/app/blog/page.tsx

@@ -1,18 +1,54 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 
-const bookingUrl = "/contact";
-const franchisePagePath = "/franchise-doc-barnet-grooming-salon";
+const bookingUrl = "https://tinyurl.com/2kr8jy37";
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const navItems = [
+      { name: "Home", id: "/" },
+      { name: "Services", id: "/services" },
+      { name: "Products", id: "/products" },
+      { name: "Prices", id: "/#pricing" },
+      { name: "Franchise", id: "/franchise" },
+      { name: "Blog", id: "/blog" },
+      { name: "Contact", id: "/#contact" },
+    ];
+
+    const footerColumns = [
+      {
+        title: "Services",        items: [
+          { label: "Gents Hair", href: "/services" },
+          { label: "Ladies Cut", href: "/services" },
+          { label: "Beard Grooming", href: "/services" },
+        ],
+      },
+      {
+        title: "Company",        items: [
+          { label: "About Us", href: "/#about" },
+          { label: "Contact", href: "/#contact" },
+          { label: "Book Now", href: bookingUrl },
+          { label: "Products", href: "/products" },
+          { label: "Blog", href: "/blog" },
+          { label: "Franchise", href: "/franchise" },
+        ],
+      },
+      {
+        title: "Social",        items: [
+          { label: "Instagram", href: "https://www.instagram.com/docbarnet?igsh=MWMwdHBnamFibXc3Yw%3D%3D&utm_source=qr" },
+          { label: "Facebook", href: "#" },
+          { label: "Privacy Policy", href: "#" },
+        ],
+      },
+    ];
+
     return (
         <ThemeProvider defaultButtonVariant="text-shift"
         defaultTextAnimation="entrance-slide"
@@ -27,21 +63,7 @@ export default function BlogPage() {
             <ReactLenis root>
                 <div id="nav" data-section="nav">
 
-                    <NavbarLayoutFloatingOverlay navItems={[
-        {
-          name: "Home",          id: "/"},
-        {
-          name: "Services",          id: "/#services"},
-        {
-          name: "Prices",          id: "/#pricing"},
-        {
-          name: "Contact",          id: "/#contact"},
-      
-          {
-            name: "Blog",            id: "/blog"},
-          {
-            name: "Franchise",            id: franchisePagePath},
-]}
+                    <NavbarLayoutFloatingOverlay navItems={navItems}
       brandName="Doc Barnet Grooming Salon"
       button={{
         text: "BOOK NOW",        href: bookingUrl}} />
@@ -67,42 +89,9 @@ export default function BlogPage() {
 
                     <div id="footer" data-section="footer">
 
-                        <FooterMedia imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778094604107-kwe3q62f.jpg"
+                        <FooterMedia imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778094604107-kwe3q62f.jpg?_wi=1"
       logoText="DOC BARNET"
-      columns={[
-        {
-          title: "Services",          items: [
-            {
-              label: "Gents Hair",              href: "/#services"},
-            {
-              label: "Ladies Cut",              href: "/#services"},
-            {
-              label: "Beard Grooming",              href: "/#services"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "/#about"},
-            {
-              label: "Contact",              href: "/#contact"},
-            {
-              label: "Book Now",              href: bookingUrl},
-            {
-              label: "Franchise",              href: franchisePagePath},
-          ],
-        },
-        {
-          title: "Social",          items: [
-            {
-              label: "Instagram",              href: "https://www.instagram.com/docbarnet?igsh=MWMwdHBnamFibXc3Yw%3D%3D&utm_source=qr"},
-            {
-              label: "Facebook",              href: "#"},
-            {
-              label: "Privacy Policy",              href: "#"},
-          ],
-        },
-      ]} />
+      columns={footerColumns} />
                     </div>
             </ReactLenis>
         </ThemeProvider>

src/app/franchise/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function FranchisePage() {
+  const bookingUrl = "https://tinyurl.com/2kr8jy37";
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "Products", id: "/products" },
+    { name: "Prices", id: "/#pricing" },
+    { name: "Franchise", id: "/franchise" },
+    { name: "Blog", id: "/blog" },
+    { name: "Contact", id: "/#contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Services",      items: [
+        { label: "Gents Hair", href: "/services" },
+        { label: "Ladies Cut", href: "/services" },
+        { label: "Beard Grooming", href: "/services" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#about" },
+        { label: "Contact", href: "/#contact" },
+        { label: "Book Now", href: bookingUrl },
+        { label: "Products", href: "/products" },
+        { label: "Blog", href: "/blog" },
+        { label: "Franchise", href: "/franchise" },
+      ],
+    },
+    {
+      title: "Social",      items: [
+        { label: "Instagram", href: "https://www.instagram.com/docbarnet?igsh=MWMwdHBnamFibXc3Yw%3D%3D&utm_source=qr" },
+        { label: "Facebook", href: "#" },
+        { label: "Privacy Policy", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeLargeTitles"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+            navItems={navItems}
+            brandName="Doc Barnet Grooming Salon"
+            button={{
+                text: "BOOK NOW",                href: bookingUrl}}
+            />
+        </div>
+
+        <div id="franchise-contact" data-section="franchise-contact">
+            <ContactSplitForm
+                useInvertedBackground={false}
+                title="Franchise Opportunities"
+                description="Interested in joining the Doc Barnet family? We are expanding and seeking passionate individuals to join our brand. Contact us today to learn more about our franchise model and how you can become a part of our success story.\n\nDoc Barnet Management:\n📞 07867777688\n📧 operations@docbarnet.uk"
+                inputs={[
+                    { name: "name", type: "text", placeholder: "Your Name", required: true },
+                    { name: "email", type: "email", placeholder: "Your Email", required: true },
+                    { name: "phone", type: "tel", placeholder: "Your Phone Number" },
+                    { name: "company", type: "text", placeholder: "Your Company (Optional)" }
+                ]}
+                textarea={{
+                    name: "message",                    placeholder: "Your Message",                    rows: 5
+                }}
+                imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1779820625891-kmygfm29.jpg"
+                mediaAnimation="slide-up"
+                buttonText="Send Enquiry"
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterMedia
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778094604107-kwe3q62f.jpg?_wi=1"
+            logoText="DOC BARNET"
+            columns={footerColumns}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
@@ -34,16 +34,20 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",          id: "hero"},
+          name: "Home",          id: "/"},
         {
-          name: "Services",          id: "services"},
+          name: "Services",          id: "/services"},
         {
-          name: "Prices",          id: "pricing"},
+          name: "Products",          id: "/products"},
         {
-          name: "Contact",          id: "contact"},
-      
-          { name: "Blog", id: "/blog" },
-]}
+          name: "Prices",          id: "/#pricing"},
+        {
+          name: "Franchise",          id: "/franchise"},
+        {
+          name: "Blog", id: "/blog" },
+        {
+          name: "Contact",          id: "/#contact"}
+      ]}
       brandName="Doc Barnet Grooming Salon"
       button={{
         text: "BOOK NOW",        href: bookingUrl}}
@@ -51,61 +55,19 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardTestimonial
-      useInvertedBackground={false}
+      <HeroBillboardScroll
       background={{
         variant: "gradient-bars"}}
-      title="NOW OPEN AT GLOUCESTER QUAYS"
-      description="Premium Grooming. Expert Styling. Experience the pinnacle of grooming excellence."
-      testimonials={[
-        {
-          name: "James R.",          handle: "@jamesr",          testimonial: "Best haircut I've had in years. Professional and high quality.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portriat-beautiful-business-woman-standing_23-2148317282.jpg"},
-        {
-          name: "Sophie M.",          handle: "@sophiem",          testimonial: "Amazing Balayage treatment, truly premium experience.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-dark-wall_329181-7280.jpg"},
-        {
-          name: "Mark D.",          handle: "@markd",          testimonial: "The attention to detail on the fade was spot on. 5 stars.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7351.jpg"},
-        {
-          name: "Elena P.",          handle: "@elenap",          testimonial: "Professional, welcoming, and perfectly styled. Highly recommend.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-dandruff-looking-mirror_23-2149311387.jpg"},
-        {
-          name: "Chris W.",          handle: "@chrisw",          testimonial: "Classic barbering with a modern, luxury edge. Exceptional.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-room-with-blurred-effect_1203-554.jpg"},
-      ]}
+      title="Experience Our Full Range of Premium Grooming Services"
+      description="From precision gentlemen's haircuts and elegant ladies' styling to expert beard grooming and rejuvenating facial treatments, discover unparalleled quality and care          at Doc Barnet Grooming Salon."
       buttons={[
         {
           text: "BOOK NOW",          href: bookingUrl},
         {
-          text: "VIEW PRICES",          href: "#pricing"},
+          text: "VIEW SERVICES",          href: "#services"},
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778093237434-05qgab2c.jpg"
       imageAlt="Doc Barnet Luxury Salon"
-      avatars={[
-        {
-          src: "https://img.b2bpic.net/free-photo/high-fashion-portrait-young-elegant-blonde-woman-black-wool-hat-wearing-oversize-white-fringe-poncho-with-long-grey-dress_273443-3799.jpg?id=11195909",          alt: "Shaving process"},
-        {
-          src: "https://img.b2bpic.net/free-photo/fashion-studio-image-two-young-women-stylish-casual-spring-outfit-having-fun-show-tongue-bright-trendy-colors-stylish-hairstyle-with-buns-cool-sunglasses-friends-portrait_273443-1142.jpg?id=9331369",          alt: "Haircut process"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1779125338765-fdbqo198.jpg",          alt: "Creative content"},
-        {
-          src: "https://img.b2bpic.net/free-photo/three-young-beautiful-smiling-girls-trendy-summer-casual-jeans-clothes-sexy-carefree-women-posing-positive-models-sunglasses_158538-4730.jpg?id=6601657",          alt: "Washing process"},
-        {
-          src: "http://img.b2bpic.net/free-photo/handsome-afro-american-traveler-brown-jacket-hat-with-backpack-stands-studio-isolated-dark-background_613910-6586.jpg",          alt: "Stylish traveler"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "PRECISION CUTS"},
-        {
-          type: "text",          text: "LUXURY COLOR"},
-        {
-          type: "text",          text: "EXPERT STYLING"},
-        {
-          type: "text",          text: "PREMIUM BEARD"},
-        {
-          type: "text",          text: "MODERN SALON"},
-      ]}
     />
   </div>
 
@@ -137,7 +99,7 @@ export default function LandingPage() {
         {
           title: "Ladies Styling",          description: "Wash, cut, and blow dry services for sophisticated style.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/tmp/hairstyle-holding-hair-drayer-1779125588683-ef4b646b.png",          imageAlt: "Ladies Styling"},
         {
-          title: "Beard & Facial",          description: "Expert beard shaping, hot towel shaves, and facial treatments.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1779127917991-ff4pbcfh.jpg",          imageAlt: "Facial treatment"},
+          title: "Beard & Facial",          description: "Expert beard shaping, hot towel shaves, and facial treatments.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1779125338765-fdbqo198.jpg",          imageAlt: "Facial treatment"},
       ]}
       title="PREMIUM SERVICES"
       description="Comprehensive grooming and hair solutions for gentlemen and ladies."
@@ -279,27 +241,33 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterMedia
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778094604107-kwe3q62f.jpg"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778094604107-kwe3q62f.jpg?_wi=1"
       logoText="DOC BARNET"
       columns={[
         {
           title: "Services",          items: [
             {
-              label: "Gents Hair",              href: "#services"},
+              label: "Gents Hair",              href: "/services"},
             {
-              label: "Ladies Cut",              href: "#services"},
+              label: "Ladies Cut",              href: "/services"},
             {
-              label: "Beard Grooming",              href: "#services"},
+              label: "Beard Grooming",              href: "/services"},
           ],
         },
         {
           title: "Company",          items: [
             {
-              label: "About Us",              href: "#about"},
+              label: "About Us",              href: "/#about"},
             {
-              label: "Contact",              href: "#contact"},
+              label: "Contact",              href: "/#contact"},
             {
               label: "Book Now",              href: bookingUrl},
+            {
+              label: "Products",              href: "/products"},
+            {
+              label: "Blog",              href: "/blog"},
+            {
+              label: "Franchise",              href: "/franchise"},
           ],
         },
         {

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-inter), 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-libre-baskerville), serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #171717;
-  --foreground: #f5f5f5;
-  --primary-cta: #C5A059;
+  --background: #1a1a1a;
+  --card: #2e2e2e;
+  --foreground: #f0e6d2;
+  --primary-cta: #d4af37;
   --primary-cta-text: #000000;
-  --secondary-cta: #171717;
+  --secondary-cta: #a67c00;
   --secondary-cta-text: #f5f5f5;
-  --accent: #6B4F3C;
-  --background-accent: #262626;
+  --accent: #ffd700;
+  --background-accent: #0d0d0d;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);