Update src/app/page.tsx

Merge version_2 into main
2026-03-10 11:03:53 +00:00 · 2026-03-10 11:02:46 +00:00 · 2026-03-10 10:56:52 +00:00 · 2026-03-10 10:56:48 +00:00 · 2026-03-10 10:56:48 +00:00 · 2026-03-10 10:41:34 +00:00
3 changed files with 146 additions and 134 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Manrope } from "next/font/google";
+import { Playfair_Display } from "next/font/google";



@@ -14,8 +15,10 @@ export const metadata: Metadata = {
  description: 'Professional hair styling, grooming & beauty services in Raj Nagar Extension, Ghaziabad. Experienced stylists, premium products. Book your appointment today!',
 };

-const manrope = Manrope({
-  variable: "--font-manrope",  subsets: ["latin"],
+
+const playfairDisplay = Playfair_Display({
+  variable: "--font-playfair-display",  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800", "900"],
 });

 export default function RootLayout({
@@ -26,7 +29,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${manrope.variable} antialiased`}>
+        <body className={`${playfairDisplay.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,183 +1,192 @@
 "use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import ContactFaq from '@/components/sections/contact/ContactFaq';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Sparkles, Users, Star, Heart, Shield, MapPin } from 'lucide-react';
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Sparkles, Award, Heart, MapPin, Users, Zap } from "lucide-react";

-export default function LandingPage() {
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "about" },
+  { name: "Services", id: "services" },
+  { name: "Gallery", id: "gallery" },
+  { name: "Contact", id: "contact" },
+];
+
+export default function Home() {
  return (
    <ThemeProvider
-      defaultButtonVariant="text-stagger"
+      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="mediumLarge"
-      background="noise"
-      cardStyle="outline"
-      primaryButtonStyle="double-inset"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="large"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="bold"
    >
-      <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="Gallantry"
-          navItems={[
-            { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Location", id: "location" },
-            { name: "Contact", id: "contact" }
-          ]}
-          button={{ text: "Book on WhatsApp", href: "https://wa.me/919876543210" }}
-          animateOnLoad={true}
-        />
-      </div>
+      <NavbarStyleFullscreen
+        navItems={navItems}
+        brandName="Gallantry"
+        bottomLeftText="Raj Nagar Extension"
+        bottomRightText="hello@gallantry.salon"
+      />

      <div id="hero" data-section="hero">
-        <HeroSplitDoubleCarousel
-          title="Gallantry Unisex Salon"
-          description="Premium Hair, Skin & Grooming Services in Raj Nagar Extension. Experience luxury styling with professional experts and premium products."
+        <HeroSplit
+          background={{ variant: "plain" }}
+          title="Experience Luxury Hair & Grooming"
+          description="Premium salon services with expert stylists using the finest products. Transform your look with our elite grooming experience."
          tag="Premium Salon"
          tagIcon={Sparkles}
-          background={{ variant: "plain" }}
-          leftCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205870.jpg?_wi=1", imageAlt: "Luxury salon interior" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/boy-is-resting-salon_1157-16187.jpg", imageAlt: "Professional styling station" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg", imageAlt: "Premium salon ambiance" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/young-womwn-wearing-trendy-hairstyle_23-2149478888.jpg?_wi=1", imageAlt: "Hairstyle showcase" }
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Book Appointment", href: "contact" },
+            { text: "View Services", href: "services" },
          ]}
-          rightCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-bearded-brutal-tattooed-happy-man-holds-pomeranian-spitz-playing-with-lovely-pet_343596-1561.jpg?_wi=1", imageAlt: "Professional styling service" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/bearded-stylish-man-sitting-cafe_273609-4476.jpg?_wi=1", imageAlt: "Men's haircut styling" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/atmospheric-glamour-perfect-nice-blurred_1304-833.jpg?_wi=1", imageAlt: "Women's hair styling" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/young-model-woman-beauty-salon-is-making-evening-make-up_231208-3585.jpg?_wi=1", imageAlt: "Beauty treatment service" }
-          ]}
-          buttons={[{ text: "Book Appointment on WhatsApp", href: "https://wa.me/919876543210" }]}
-          carouselPosition="right"
+          buttonAnimation="slide-up"
+          imageSrc="/luxury-salon.jpg"
+          imageAlt="Premium salon interior with elegant styling chairs"
+          mediaAnimation="slide-up"
+          imagePosition="right"
+          fixedMediaHeight={true}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
-          title="Gallantry Unisex Salon offers modern hair styling, grooming and beauty services with experienced stylists and premium products. We focus on hygiene, customer satisfaction and trendy styles for men and women."
+          title="Gallantry Unisex Salon - Where Excellence Meets Elegance"
+          useInvertedBackground={false}
          metrics={[
-            { icon: Users, label: "Happy Clients", value: "500+" },
-            { icon: Star, label: "Professional Stylists", value: "8+" },
-            { icon: Heart, label: "Premium Products", value: "100%" },
-            { icon: Shield, label: "Years Experience", value: "15+" }
+            { icon: Award, label: "Expert Stylists", value: "15+" },
+            { icon: Users, label: "Happy Clients", value: "5,000+" },
+            { icon: Heart, label: "Years of Excellence", value: "12+" },
+            { icon: Sparkles, label: "Premium Products", value: "100%" },
          ]}
          metricsAnimation="slide-up"
-          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
-        <FeatureCardTwentyThree
-          title="Our Premium Services"
-          description="Comprehensive grooming and beauty solutions designed for modern men and women"
-          features={[
-            { id: "1", title: "Haircut & Hair Styling", tags: ["Men", "Women", "Trending"], imageSrc: "http://img.b2bpic.net/free-photo/bearded-stylish-man-sitting-cafe_273609-4476.jpg?_wi=2", imageAlt: "Haircut styling" },
-            { id: "2", title: "Hair Spa & Hair Treatment", tags: ["Treatments", "Premium", "Wellness"], imageSrc: "http://img.b2bpic.net/free-photo/atmospheric-glamour-perfect-nice-blurred_1304-833.jpg?_wi=2", imageAlt: "Hair treatment" },
-            { id: "3", title: "Hair Coloring & Highlights", tags: ["Color", "Styling", "Professional"], imageSrc: "http://img.b2bpic.net/free-photo/young-womwn-wearing-trendy-hairstyle_23-2149478888.jpg?_wi=2", imageAlt: "Hair coloring" },
-            { id: "4", title: "Beard Grooming", tags: ["Men", "Grooming", "Expert"], imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-bearded-brutal-tattooed-happy-man-holds-pomeranian-spitz-playing-with-lovely-pet_343596-1561.jpg?_wi=2", imageAlt: "Beard grooming" },
-            { id: "5", title: "Facial & Skin Care", tags: ["Skincare", "Wellness", "Professional"], imageSrc: "http://img.b2bpic.net/free-photo/young-model-woman-beauty-salon-is-making-evening-make-up_231208-3585.jpg?_wi=2", imageAlt: "Facial care" },
-            { id: "6", title: "Bridal Makeup", tags: ["Special", "Makeup", "Events"], imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205870.jpg?_wi=2", imageAlt: "Bridal makeup" }
+        <PricingCardTwo
+          plans={[
+            {
+              id: "1",              badge: "Hair Styling",              badgeIcon: Sparkles,
+              price: "From $40",              subtitle: "Professional cuts, coloring & treatments",              buttons: [
+                { text: "Book Now", href: "contact" },
+                { text: "Learn More", href: "#" },
+              ],
+              features: [
+                "Expert stylists with 10+ years experience",                "Premium international products",                "Personalized consultation",                "Color correction specialist"],
+            },
+            {
+              id: "2",              badge: "Men's Grooming",              badgeIcon: Award,
+              price: "From $25",              subtitle: "Premium beard & haircut services",              buttons: [
+                { text: "Book Now", href: "contact" },
+                { text: "Learn More", href: "#" },
+              ],
+              features: [
+                "Classic & modern cuts",                "Precision beard grooming",                "Hot towel treatment",                "Premium grooming products"],
+            },
+            {
+              id: "3",              badge: "Spa & Wellness",              badgeIcon: Heart,
+              price: "From $35",              subtitle: "Relaxation & rejuvenation treatments",              buttons: [
+                { text: "Book Now", href: "contact" },
+                { text: "Learn More", href: "#" },
+              ],
+              features: [
+                "Facial treatments",                "Head & shoulder massage",                "Aromatherapy sessions",                "Luxury skincare products"],
+            },
          ]}
-          animationType="slide-up"
+          title="Our Services"
+          description="Discover our comprehensive range of premium salon services designed for your complete satisfaction"
+          tag="Premium Services"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
          textboxLayout="default"
+          animationType="slide-up"
          useInvertedBackground={false}
+          carouselMode="buttons"
        />
      </div>

-      <div id="why-choose" data-section="why-choose">
-        <MetricCardTwo
-          title="Why Choose Gallantry"
-          description="Excellence in every aspect of our service"
+      <div id="gallery" data-section="gallery">
+        <MetricCardSeven
          metrics={[
-            { id: "1", value: "500+", description: "Happy Clients" },
-            { id: "2", value: "8+", description: "Professional Stylists" },
-            { id: "3", value: "100%", description: "Premium Products" },
-            { id: "4", value: "15+", description: "Years of Experience" }
+            {
+              id: "1",              value: "500+",              title: "Transformations Completed",              items: ["Professional styling", "Color expertise", "Client satisfaction"],
+            },
+            {
+              id: "2",              value: "98%",              title: "Client Satisfaction Rate",              items: ["Repeat customers", "Premium service", "Expert care"],
+            },
+            {
+              id: "3",              value: "24/7",              title: "Customer Support",              items: ["Online booking", "Quick response", "Expert advice"],
+            },
+            {
+              id: "4",              value: "10+",              title: "Years of Excellence",              items: ["Industry awards", "Trusted brand", "Premium quality"],
+            },
          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
+          title="Why Choose Gallantry"
+          description="Our commitment to excellence in every detail"
+          tag="Why Us"
+          tagIcon={Award}
+          tagAnimation="slide-up"
          textboxLayout="default"
+          animationType="slide-up"
          useInvertedBackground={false}
+          carouselMode="buttons"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardOne
-          title="What Our Clients Say"
-          description="Real testimonials from satisfied customers who trust Gallantry for their grooming needs"
+        <TestimonialCardTwelve
          testimonials={[
-            { id: "1", name: "Priya Sharma", role: "Marketing Executive", company: "Tech Startup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-woman-smiling-looking-mirror-beauty-salon_176420-4473.jpg?_wi=1", imageAlt: "Priya Sharma" },
-            { id: "2", name: "Rajesh Kumar", role: "Business Owner", company: "Fashion Retail", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-face-massaging-with-gua-sha-medium-shot_23-2149349087.jpg?_wi=1", imageAlt: "Rajesh Kumar" },
-            { id: "3", name: "Neha Gupta", role: "Event Planner", company: "Event Management", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-charming-smile_329181-7290.jpg", imageAlt: "Neha Gupta" },
-            { id: "4", name: "Amit Verma", role: "Entrepreneur", company: "Digital Agency", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beauty-vlogger-adjusting-camera_23-2148916349.jpg", imageAlt: "Amit Verma" },
-            { id: "5", name: "Sneha Patel", role: "HR Manager", company: "Corporate Office", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-woman-smiling-looking-mirror-beauty-salon_176420-4473.jpg?_wi=2", imageAlt: "Sneha Patel" },
-            { id: "6", name: "Vikram Singh", role: "Fitness Trainer", company: "Gym Owner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-face-massaging-with-gua-sha-medium-shot_23-2149349087.jpg?_wi=2", imageAlt: "Vikram Singh" }
+            { id: "1", name: "Priya Singh", imageSrc: "/testimonial-1.jpg" },
+            { id: "2", name: "Rahul Verma", imageSrc: "/testimonial-2.jpg" },
+            { id: "3", name: "Anjali Sharma", imageSrc: "/testimonial-3.jpg" },
+            { id: "4", name: "Vikram Kumar", imageSrc: "/testimonial-4.jpg" },
          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
+          cardTitle="Join 5,000+ satisfied clients who trust Gallantry for their styling needs"
+          cardTag="Client Reviews"
+          cardTagIcon={Heart}
+          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

-      <div id="location" data-section="location">
-        <ContactFaq
-          ctaTitle="Visit Gallantry Unisex Salon"
-          ctaDescription="Located in VVIP Style Mall, Raj Nagar Extension, Ghaziabad. Open: Monday – Sunday | 10:00 AM – 9:00 PM"
-          ctaButton={{ text: "Book Appointment on WhatsApp", href: "https://wa.me/919876543210" }}
-          ctaIcon={MapPin}
-          faqs={[
-            { id: "1", title: "What are your salon timings?", content: "We are open Monday to Sunday from 10:00 AM to 9:00 PM. Walk-ins are always welcome, but we recommend booking appointments in advance for better service." },
-            { id: "2", title: "Where is the salon located?", content: "Gallantry Unisex Salon is located in VVIP Style Mall, Raj Nagar Extension, Ghaziabad. Easily accessible with ample parking and convenient public transportation." },
-            { id: "3", title: "Do you provide services for men and women?", content: "Yes, we are a unisex salon offering premium services for both men and women including haircuts, styling, coloring, grooming, facials, and bridal makeup." },
-            { id: "4", title: "How can I book an appointment?", content: "You can book an appointment by contacting us on WhatsApp, calling directly, or visiting our salon in person. We ensure minimal waiting time with our appointment booking system." },
-            { id: "5", title: "What products do you use?", content: "We use only premium, professional-grade beauty and grooming products that are safe, effective, and suitable for all hair and skin types." }
-          ]}
+      <div id="contact" data-section="contact">
+        <ContactSplit
+          tag="Get In Touch"
+          title="Book Your Appointment"
+          description="Visit us at Raj Nagar Extension, Ghaziabad for a personalized consultation and premium grooming experience. Our expert team is ready to serve you."
+          tagIcon={MapPin}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
          useInvertedBackground={false}
-          animationType="slide-up"
+          imageSrc="/contact-salon.jpg"
+          imageAlt="Gallantry salon contact location"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          inputPlaceholder="Enter your email"
+          buttonText="Book Now"
+          termsText="We'll get back to you within 24 hours. Your privacy is important to us."
+          onSubmit={(email) => console.log("Email submitted:", email)}
        />
      </div>

      <div id="footer" data-section="footer">
-        <FooterBaseReveal
-          columns={[
-            {
-              title: "Services",              items: [
-                { label: "Hair Styling", href: "#services" },
-                { label: "Hair Treatment", href: "#services" },
-                { label: "Beard Grooming", href: "#services" },
-                { label: "Facial Care", href: "#services" }
-              ]
-            },
-            {
-              title: "Quick Links",              items: [
-                { label: "About Us", href: "#about" },
-                { label: "Our Team", href: "#services" },
-                { label: "Book Appointment", href: "https://wa.me/919876543210" },
-                { label: "Contact", href: "#location" }
-              ]
-            },
-            {
-              title: "Contact Info",              items: [
-                { label: "VVIP Style Mall, Raj Nagar Extension", href: "#" },
-                { label: "Ghaziabad", href: "#" },
-                { label: "Mon-Sun: 10 AM - 9 PM", href: "#" },
-                { label: "WhatsApp: Book Now", href: "https://wa.me/919876543210" }
-              ]
-            }
-          ]}
-          copyrightText="© 2025 Gallantry Unisex Salon. All rights reserved."
+        <FooterLogoReveal
+          logoText="Gallantry"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-manrope), sans-serif;
+  font-family: var(--font-playfair-display), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-manrope), sans-serif;
+  font-family: var(--font-playfair-display), sans-serif;
 }
Author	SHA1	Message	Date
bender	2489aef028	Update src/app/page.tsx	2026-03-10 11:03:53 +00:00
bender	7056cec064	Update src/app/page.tsx	2026-03-10 11:02:46 +00:00
bender	32b24ca552	Merge version_2 into main Merge version_2 into main	2026-03-10 10:56:52 +00:00
bender	49cda0d012	Update src/app/styles/base.css	2026-03-10 10:56:48 +00:00
bender	1081337aa5	Update src/app/layout.tsx	2026-03-10 10:56:48 +00:00
bender	a87e99a145	Merge version_1 into main Merge version_1 into main	2026-03-10 10:41:34 +00:00
bender	e470f362b4	Merge version_1 into main Merge version_1 into main	2026-03-10 10:40:43 +00:00
bender	7e00b47b34	Merge version_1 into main Merge version_1 into main	2026-03-10 10:39:39 +00:00