Update src/app/page.tsx

Merge version_5 into main

src/app/blog/page.tsx

@@ -0,0 +1,128 @@
+"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 footerColumns: FooterColumn[] = [
+    {
+        title: "Product",
+        items: [
+            { label: "Features", href: "/features" },
+            { label: "Pricing", href: "/pricing" },
+            { label: "FAQ", href: "/faq" },
+        ],
+    },
+    {
+        title: "Company",
+        items: [
+            { label: "About", href: "/about" },
+            { label: "Blog", href: "/blog" },
+            { label: "Careers", href: "/careers" },
+        ],
+    },
+    {
+        title: "Resources",
+        items: [
+            { label: "Documentation", href: "/docs" },
+            { label: "Support", href: "/support" },
+            { label: "Contact", href: "/contact" },
+        ],
+    },
+];
+
+export default function BlogPage() {
+    const { posts, isLoading } = useBlogPosts();
+
+    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: "Contact",          id: "contact"},
+      ]}
+      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"
+      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/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',
+  title: "Doc Barnet Grooming Salon | Premium Barber & Hair Salon Gloucester Quays",
-  description: 'Experience premium barbering, ladies hair, and grooming at Doc Barnet Gloucester Quays. Now open.',
+  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 roboto = Roboto({
-const inter = Inter({
+  variable: "--font-roboto",
-  variable: "--font-inter",
   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`}>
+        <body className={`${roboto.variable} antialiased`}>
-          <Tag />
+          
           {children}
           <script
               dangerouslySetInnerHTML={{

src/app/page.tsx

@@ -12,9 +12,10 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import ContactText from '@/components/sections/contact/ContactText';
 
 export default function LandingPage() {
+  const bookingUrl = "https://www.fresha.com/book-now/doc-barnet-hair-studio-tzv4uhw7/all-offer?share=true&pId=2750001";
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-shift"
@@ -32,46 +33,95 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        { name: "Home", id: "hero" },
+        {
-        { name: "Services", id: "services" },
+          name: "Home",          id: "hero"},
-        { name: "Prices", id: "pricing" },
+        {
-        { name: "Book", id: "booking" },
+          name: "Services",          id: "services"},
-        { name: "Contact", id: "contact" },
+        {
-      ]}
+          name: "Prices",          id: "pricing"},
-      brandName="DOC BARNET"
+        {
-      button={{ text: "BOOK NOW", href: "#booking" }}
+          name: "Contact",          id: "contact"},
+      
+          { name: "Blog", id: "/blog" },
+]}
+      brandName="Doc Barnet Grooming Salon"
+      button={{
+        text: "BOOK NOW",        href: bookingUrl}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
       useInvertedBackground={false}
-      background={{ variant: "gradient-bars" }}
+      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.", 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.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-dark-wall_329181-7280.jpg" }
+          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"},
+      ]}
+      buttons={[
+        {
+          text: "BOOK NOW",          href: bookingUrl},
+        {
+          text: "VIEW PRICES",          href: "#pricing"},
+      ]}
+      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"},
       ]}
-      buttons={[{ text: "BOOK NOW", href: "#booking" }, { text: "VIEW PRICES", href: "#pricing" }]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg"
     />
   </div>
 
   <div id="about" data-section="about">
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
-      heading={[{ type: "text", content: "THE DOC BARNET EXPERIENCE" }, { type: "image", src: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg" }]}
+      heading={[
-      buttons={[{ text: "DISCOVER MORE", href: "#services" }]}
+        {
-    />
+          type: "text",          content: "THE DOC BARNET EXPERIENCE"},
-  </div>
+        {
-
+          type: "image",          src: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg",          alt: "Barber at work"},
-  <div id="booking" data-section="booking">
+      ]}
-      <ContactText
+      buttons={[
-      text="Ready to look your best? Book your appointment online with Fresha."
+        {
-      buttons={[{ text: "Book with Fresha", href: "https://www.fresha.com" }]}
+          text: "DISCOVER MORE",          href: "#services"},
-      background={{ variant: "gradient-bars" }}
+      ]}
-      useInvertedBackground={false}
     />
   </div>
 
@@ -82,11 +132,15 @@ export default function LandingPage() {
       gridVariant="two-columns-alternating-heights"
       useInvertedBackground={false}
       features={[
-        { title: "Gents Haircuts", description: "Precision styling.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-fashionable-modern-male-grey-t-shirt_613910-532.jpg" },
+        {
-        { title: "Ladies Styling", description: "Wash, cut, and blow dry.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hairdryer-hairbrush_1385-2900.jpg" }
+          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: "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="PREMIUM SERVICES"
-      description="Comprehensive grooming solutions."
+      description="Comprehensive grooming and hair solutions for gentlemen and ladies."
     />
   </div>
 
@@ -96,18 +150,169 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        { id: "p1", badge: "Most Popular", price: "£35", subtitle: "Premium Haircut", buttons: [{ text: "Book", href: "#booking" }], features: ["Consultation", "Precision Cut"] }
+        {
+          id: "p1",          badge: "Most Popular",          price: "£19.99",          subtitle: "Premium Haircut & Styling",          buttons: [
+            {
+              text: "Book Now",              href: bookingUrl},
+          ],
+          features: [
+            "Consultation",            "Precision Cut",            "Style Advice",            "Finish"],
+        },
+        {
+          id: "p2",          badge: "Essential",          price: "£45",          subtitle: "Cut, Wash & Blow Dry",          buttons: [
+            {
+              text: "Book Now",              href: bookingUrl},
+          ],
+          features: [
+            "Head Massage",            "Professional Cut",            "Styling"],
+        },
+        {
+          id: "p3",          badge: "Luxury",          price: "£85",          subtitle: "Balayage & Treatment",          buttons: [
+            {
+              text: "Book Now",              href: bookingUrl},
+          ],
+          features: [
+            "Consultation",            "Expert Colour",            "Treatment",            "Finish"],
+        },
       ]}
       title="PRICE LIST"
-      description="Transparent pricing."
+      description="Transparent pricing for world-class grooming."
+    />
+  </div>
+
+  <div id="gallery" data-section="gallery">
+      <ProductCardTwo
+      animationType="slide-up"
+      textboxLayout="default"
+      gridVariant="four-items-2x2-equal-grid"
+      useInvertedBackground={false}
+      products={[
+        {
+          id: "g1",          name: "Classic Fade",          brand: "Styling",          price: "Transformation",          rating: 5,
+          reviewCount: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18649.jpg"},
+        {
+          id: "g2",          name: "Balayage",          brand: "Colour",          price: "Transformation",          rating: 5,
+          reviewCount: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/woman-wears-grey-hair-wig_633478-1316.jpg"},
+        {
+          id: "g3",          name: "Salon Interior",          brand: "Style",          price: "Luxury Space",          rating: 5,
+          reviewCount: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg"},
+        {
+          id: "g4",          name: "Lighting Design",          brand: "Design",          price: "Atmosphere",          rating: 5,
+          reviewCount: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-barber-s-instruments-shop_23-2149186524.jpg"},
+        {
+          id: "g5",          name: "Tools",          brand: "Precision",          price: "Detail",          rating: 5,
+          reviewCount: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life-top-view_23-2150217977.jpg"},
+        {
+          id: "g6",          name: "Blow Dry",          brand: "Styling",          price: "Treatment",          rating: 5,
+          reviewCount: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-hair-hairsalon_1157-27184.jpg"},
+      ]}
+      title="OUR WORK"
+      description="Visual highlights from our salon floor."
+    />
+  </div>
+
+  <div id="reviews" data-section="reviews">
+      <TestimonialCardSixteen
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      testimonials={[
+        {
+          id: "1",          name: "Sarah H.",          role: "Client",          company: "Local Resident",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9659.jpg"},
+        {
+          id: "2",          name: "David L.",          role: "Client",          company: "Businessman",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021828.jpg"},
+        {
+          id: "3",          name: "Emily B.",          role: "Client",          company: "Frequent Visitor",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18291.jpg"},
+        {
+          id: "4",          name: "John D.",          role: "Client",          company: "Styling Enthusiast",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-barbershop-with-classic-styling_618663-34.jpg"},
+        {
+          id: "5",          name: "Clara R.",          role: "Client",          company: "New Guest",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/two-businessman-discussing-their-chart-coffee-shop_1150-6422.jpg"},
+      ]}
+      kpiItems={[
+        {
+          value: "17+",          label: "Years Experience"},
+        {
+          value: "5000+",          label: "Happy Clients"},
+        {
+          value: "100%",          label: "Satisfaction Rate"},
+      ]}
+      title="WHAT OUR CLIENTS SAY"
+      description="We pride ourselves on the highest standards of service and style."
+    />
+  </div>
+
+  <div id="offer" data-section="offer">
+      <ContactCenter
+      useInvertedBackground={false}
+      background={{
+        variant: "gradient-bars"}}
+      tag="LIMITED OFFER"
+      title="20% OFF YOUR FIRST VISIT"
+      description="TUSDAY ONLY CODE: DOCBARNET20 "
+    />
+  </div>
+
+  <div id="contact" data-section="contact">
+      <FaqSplitMedia
+      textboxLayout="default"
+      useInvertedBackground={false}
+      faqs={[
+        {
+          id: "f1",          title: "Opening Hours",          content: "Mon-Sat: 9am - 7pm | Sun: 10am - 4pm"},
+        {
+          id: "f2",          title: "Appointments",          content: "01452 224220 / 07495 044457"},
+        {
+          id: "f3",          title: "Location",          content: "Gloucester Quays Designer Outlet"},
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/hairdressing-equipment-white-background_23-2147711627.jpg"
+      mediaAnimation="slide-up"
+      title="VISIT US"
+      description="Unit 67, Gloucester Quays Designer Outlet, Gloucester GL1 5SH"
+      faqsAnimation="slide-up"
     />
   </div>
 
   <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"
       logoText="DOC BARNET"
-      columns={[{ title: "Services", items: [{ label: "Book Now", href: "#booking" }] }]}
+      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>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-roboto), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-roboto), sans-serif;
 }