Update src/app/franchise/page.tsx

Merge version_11 into main

src/app/blog/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+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 = "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"
+        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>
+
+                    {isLoading ? (
+                        <div className="w-content-width mx-auto py-20 text-center">
+                            <p className="text-foreground">Loading posts...</p>
+                        </div>
+                    ) : (
+                        <div id="blog" data-section="blog">
+                            <BlogCardOne
+                                blogs={posts}
+                                title="Latest Articles"
+                                description="Stay updated with our latest insights"
+                                textboxLayout="default"
+                                useInvertedBackground={false}
+                                carouselMode="buttons"
+                                animationType="slide-up"
+                            />
+                        </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/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/layout.tsx

@@ -4,15 +4,15 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Public_Sans } from "next/font/google";
+import { Roboto } from "next/font/google";
 
 
 
 export const metadata: Metadata = {
-  title: 'Doc Barnet | Premium Grooming Salon Gloucester',
-  description: 'Experience premium barbering, ladies hair, and grooming at Doc Barnet Gloucester Quays. Now open.',
+  title: "Doc Barnet Grooming Salon | Premium Barber & Hair Salon Gloucester Quays",
+  description: "Luxury barbering, ladies hair, skin fades, beard grooming, and modern hair styling at Doc Barnet Grooming Salon in Gloucester Quays. EST. 2007. Book online today.",
   openGraph: {
     "title": "Doc Barnet Grooming Salon",
     "siteName": "Doc Barnet",
@@ -20,13 +20,13 @@ export const metadata: Metadata = {
   },
 };
 
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",
-  subsets: ["latin"],
-});
-const inter = Inter({
-  variable: "--font-inter",
+
+
+
+const roboto = Roboto({
+  variable: "--font-roboto",
   subsets: ["latin"],
+  weight: ["100", "300", "400", "500", "700", "900"],
 });
 
 export default function RootLayout({
@@ -37,8 +37,8 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${publicSans.variable} ${inter.variable} antialiased`}>
-          <Tag />
+        <body className={`${roboto.variable} antialiased`}>
+          
           {children}
           <script
               dangerouslySetInnerHTML={{

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';
@@ -14,6 +14,8 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 
 export default function LandingPage() {
+  const bookingUrl = "https://tinyurl.com/2kr8jy37";
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-shift"
@@ -32,77 +34,38 @@ 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: "Prices",          id: "/#pricing"},
         {
-          name: "Contact",          id: "contact"},
-      ]}
-      brandName="DOC BARNET"
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778085314330-0z5ji9s5.jpg"
+          name: "Franchise",          id: "/franchise"},
+        {
+          name: "Contact",          id: "/#contact"},
+      
+          { name: "Blog", id: "/blog" },
+]}
+      brandName="Doc Barnet Grooming Salon"
       button={{
-        text: "BOOK NOW",        href: "#contact"}}
+        text: "BOOK NOW",        href: bookingUrl}}
     />
   </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 gents 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: "#contact"},
+          text: "BOOK NOW",          href: bookingUrl},
         {
-          text: "VIEW PRICES",          href: "#pricing"},
+          text: "VIEW SERVICES",          href: "#services"},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778093237434-05qgab2c.jpg"
       imageAlt="Doc Barnet Luxury Salon"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48807.jpg",          alt: "Shaving process"},
-        {
-          src: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48820.jpg",          alt: "Haircut process"},
-        {
-          src: "http://img.b2bpic.net/free-photo/person-creating-online-content-with-their-pets_23-2151420269.jpg",          alt: "Creative content"},
-        {
-          src: "http://img.b2bpic.net/free-photo/washing-process-small-dog-sits-table-dog-spaying-by-professional_1157-48817.jpg",          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>
 
@@ -132,9 +95,9 @@ export default function LandingPage() {
         {
           title: "Gents Haircuts",          description: "Precision styling tailored to your unique look.",          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-fashionable-modern-male-grey-t-shirt_613910-532.jpg",          imageAlt: "Gents Haircut"},
         {
-          title: "Ladies Styling",          description: "Wash, cut, and blow dry services for sophisticated style.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hairdryer-hairbrush_1385-2900.jpg",          imageAlt: "Ladies Styling"},
+          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: "http://img.b2bpic.net/free-photo/woman-helping-man-applying-facial-mask_23-2148784320.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."
@@ -148,17 +111,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "p1",          badge: "Most Popular",          price: "£35",          subtitle: "Premium Haircut & Styling",          buttons: [
+          id: "p1",          badge: "Most Popular",          price: "£19.99",          subtitle: "Premium Haircut & Styling",          buttons: [
             {
-              text: "Book Now",              href: "#contact"},
+              text: "Book Now",              href: bookingUrl},
           ],
           features: [
             "Consultation",            "Precision Cut",            "Style Advice",            "Finish"],
         },
         {
-          id: "p2",          badge: "Essential",          price: "£55",          subtitle: "Cut, Wash & Blow Dry",          buttons: [
+          id: "p2",          badge: "Essential",          price: "£45",          subtitle: "Cut, Wash & Blow Dry",          buttons: [
             {
-              text: "Book Now",              href: "#contact"},
+              text: "Book Now",              href: bookingUrl},
           ],
           features: [
             "Head Massage",            "Professional Cut",            "Styling"],
@@ -166,7 +129,7 @@ export default function LandingPage() {
         {
           id: "p3",          badge: "Luxury",          price: "£85",          subtitle: "Balayage & Treatment",          buttons: [
             {
-              text: "Book Now",              href: "#contact"},
+              text: "Book Now",              href: bookingUrl},
           ],
           features: [
             "Consultation",            "Expert Colour",            "Treatment",            "Finish"],
@@ -250,7 +213,7 @@ export default function LandingPage() {
         variant: "gradient-bars"}}
       tag="LIMITED OFFER"
       title="20% OFF YOUR FIRST VISIT"
-      description="Join our club and enjoy premium grooming at a special introductory rate."
+      description="TUSDAY ONLY CODE: DOCBARNET20 "
     />
   </div>
 
@@ -276,33 +239,37 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/minimalist-background_23-2151967093.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: "#contact"},
+              label: "Book Now",              href: bookingUrl},
+            {
+              label: "Blog",              href: "/blog"},
+            {
+              label: "Franchise",              href: "/franchise"},
           ],
         },
         {
           title: "Social",          items: [
             {
-              label: "Instagram",              href: "#"},
+              label: "Instagram",              href: "https://www.instagram.com/docbarnet?igsh=MWMwdHBnamFibXc3Yw%3D%3D&utm_source=qr"},
             {
               label: "Facebook",              href: "#"},
             {

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), 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);