Update src/app/franchise/page.tsx

Merge version_8 into main

src/app/blog/page.tsx

@@ -8,6 +8,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 const bookingUrl = "/contact";
+const franchisePagePath = "/franchise-doc-barnet-grooming-salon";
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
@@ -28,14 +29,19 @@ export default function BlogPage() {
 
                     <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"},
+          name: "Contact",          id: "/#contact"},
-      ]}
+      
+          {
+            name: "Blog",            id: "/blog"},
+          {
+            name: "Franchise",            id: franchisePagePath},
+]}
       brandName="Doc Barnet Grooming Salon"
       button={{
         text: "BOOK NOW",        href: bookingUrl}} />
@@ -67,21 +73,23 @@ export default function BlogPage() {
         {
           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: "Franchise",              href: franchisePagePath},
           ],
         },
         {
@@ -99,5 +107,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}
-

src/app/franchise/page.tsx

@@ -0,0 +1,109 @@
+"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";
+
+  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={[
+                {
+                    name: "Home",                    id: "hero"},
+                {
+                    name: "Services",                    id: "services"},
+                {
+                    name: "Prices",                    id: "pricing"},
+                {
+                    name: "Franchise",                    id: "/franchise"},
+                {
+                    name: "Contact",                    id: "contact"},
+              
+                    { name: "Blog", id: "/blog" },
+            ]}
+            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"
+            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},
+                    ],
+                },
+                {
+                    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: "#"},
+                    ],
+                },
+            ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -39,6 +39,8 @@ export default function LandingPage() {
           name: "Services",          id: "services"},
         {
           name: "Prices",          id: "pricing"},
+        {
+          name: "Franchise",          id: "/franchise"},
         {
           name: "Contact",          id: "contact"},
       

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;
+  --background: #1a1a1a;
-  --card: #171717;
+  --card: #2e2e2e;
-  --foreground: #f5f5f5;
+  --foreground: #f0e6d2;
-  --primary-cta: #C5A059;
+  --primary-cta: #d4af37;
   --primary-cta-text: #000000;
-  --secondary-cta: #171717;
+  --secondary-cta: #a67c00;
   --secondary-cta-text: #f5f5f5;
-  --accent: #6B4F3C;
+  --accent: #ffd700;
-  --background-accent: #262626;
+  --background-accent: #0d0d0d;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);