From c1ede8c31654b7daf024d2d290216d0110eb7943 Mon Sep 17 00:00:00 2001 From: bender Date: Sat, 7 Mar 2026 16:21:26 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 142 ++++++++++++++++++++++++++++------------------- 1 file changed, 86 insertions(+), 56 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 52d17f8..c849f80 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,15 +1,15 @@ "use client"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; -import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel"; -import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve"; -import TeamCardTen from "@/components/sections/team/TeamCardTen"; -import PricingCardNine from "@/components/sections/pricing/PricingCardNine"; -import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen"; -import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia"; -import ContactCTA from "@/components/sections/contact/ContactCTA"; -import FooterMedia from "@/components/sections/footer/FooterMedia"; +import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; +import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel'; +import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve'; +import TeamCardTen from '@/components/sections/team/TeamCardTen'; +import PricingCardNine from '@/components/sections/pricing/PricingCardNine'; +import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen'; +import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; +import ContactCTA from '@/components/sections/contact/ContactCTA'; +import FooterMedia from '@/components/sections/footer/FooterMedia'; import { Sparkles, Scissors, Award, DollarSign, Star, HelpCircle, Mail } from "lucide-react"; export default function LandingPage() { @@ -20,7 +20,7 @@ export default function LandingPage() { borderRadius="pill" contentWidth="mediumSmall" sizing="mediumLargeSizeMediumTitles" - background="blurBottom" + background="circleGradient" cardStyle="gradient-mesh" primaryButtonStyle="shadow" secondaryButtonStyle="radial-glow" @@ -36,7 +36,8 @@ export default function LandingPage() { { name: "Contact", id: "contact" }, ]} button={{ - text: "Book Appointment", href: "contact"}} + text: "Book Appointment", href: "contact" + }} animateOnLoad={true} className="backdrop-blur-sm" navItemClassName="font-medium text-sm" @@ -52,7 +53,7 @@ export default function LandingPage() { tag="Elite Barbershop" tagIcon={Sparkles} tagAnimation="slide-up" - background={{ variant: "blurBottom" }} + background={{ variant: "plain" }} buttons={[ { text: "Book Now", href: "contact" }, { text: "Learn More", href: "services" }, @@ -60,15 +61,20 @@ export default function LandingPage() { buttonAnimation="slide-up" mediaItems={[ { - imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg?_wi=1", imageAlt: "Premium barbershop interior"}, + imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg", imageAlt: "Premium barbershop interior" + }, { - imageSrc: "http://img.b2bpic.net/free-photo/man-getting-fresh-haircut_23-2148242775.jpg?_wi=1", imageAlt: "Professional haircut service"}, + imageSrc: "http://img.b2bpic.net/free-photo/man-getting-fresh-haircut_23-2148242775.jpg", imageAlt: "Professional haircut service" + }, { - imageSrc: "http://img.b2bpic.net/free-photo/master-applying-shaving-foam-client-face_1153-9444.jpg?_wi=1", imageAlt: "Expert beard grooming"}, + imageSrc: "http://img.b2bpic.net/free-photo/master-applying-shaving-foam-client-face_1153-9444.jpg", imageAlt: "Expert beard grooming" + }, { - imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg?_wi=1", imageAlt: "Classic shave service"}, + imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg", imageAlt: "Classic shave service" + }, { - imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg?_wi=2", imageAlt: "Barbershop workspace"}, + imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg", imageAlt: "Barbershop workspace" + }, ]} ariaLabel="Hero section showcasing premium barbershop services" className="w-full" @@ -91,17 +97,20 @@ export default function LandingPage() { features={[ { id: "haircuts", label: "Haircuts", title: "Expert Hair Styling", items: [ - "Classic cuts and fades", "Modern styling techniques", "Personalized consultations", "Premium products included"], + "Classic cuts and fades", "Modern styling techniques", "Personalized consultations", "Premium products included" + ], buttons: [{ text: "Book Haircut", href: "contact" }], }, { id: "beard", label: "Beard Care", title: "Professional Beard Grooming", items: [ - "Precision beard trimming", "Shape and styling", "Beard conditioning treatments", "Expert maintenance advice"], + "Precision beard trimming", "Shape and styling", "Beard conditioning treatments", "Expert maintenance advice" + ], buttons: [{ text: "Book Beard Service", href: "contact" }], }, { id: "shaves", label: "Shaves", title: "Classic Straight Razor Shaves", items: [ - "Traditional hot shave", "Soothing steam treatment", "Premium aftershave products", "Relaxing experience"], + "Traditional hot shave", "Soothing steam treatment", "Premium aftershave products", "Relaxing experience" + ], buttons: [{ text: "Book Shave", href: "contact" }], }, ]} @@ -112,8 +121,8 @@ export default function LandingPage() { buttonAnimation="slide-up" ariaLabel="Our premium barbershop services" containerClassName="py-16 md:py-24" - titleClassName="text-4xl md:text-5xl font-bold mb-4" - descriptionClassName="text-lg mb-12 max-w-2xl" + cardTitleClassName="text-4xl md:text-5xl font-bold mb-4" + textBoxDescriptionClassName="text-lg mb-12 max-w-2xl" /> @@ -123,19 +132,22 @@ export default function LandingPage() { description="Experience the difference that expert craftsmanship and attention to detail make" tag="Why Us" tagIcon={Award} - tagAnimation="fade" + tagAnimation="blur-reveal" features={[ { id: "experience", label: "Experience", title: "20+ Years of Excellence", items: [ - "Certified and trained barbers", "Award-winning stylists", "Continuous skill development", "Master of traditional techniques"], + "Certified and trained barbers", "Award-winning stylists", "Continuous skill development", "Master of traditional techniques" + ], }, { id: "quality", label: "Quality", title: "Premium Products & Tools", items: [ - "Professional-grade equipment", "Luxury grooming products", "Hygiene and sanitation standards", "Latest styling innovations"], + "Professional-grade equipment", "Luxury grooming products", "Hygiene and sanitation standards", "Latest styling innovations" + ], }, { id: "ambiance", label: "Ambiance", title: "Relaxing Atmosphere", items: [ - "Upscale modern design", "Comfortable seating areas", "Complimentary refreshments", "Welcoming environment"], + "Upscale modern design", "Comfortable seating areas", "Complimentary refreshments", "Welcoming environment" + ], }, ]} animationType="blur-reveal" @@ -143,8 +155,8 @@ export default function LandingPage() { useInvertedBackground={false} ariaLabel="Features highlighting why choose our barbershop" containerClassName="py-16 md:py-24" - titleClassName="text-4xl md:text-5xl font-bold mb-4" - descriptionClassName="text-lg mb-12 max-w-2xl" + cardTitleClassName="text-4xl md:text-5xl font-bold mb-4" + textBoxDescriptionClassName="text-lg mb-12 max-w-2xl" /> @@ -156,11 +168,14 @@ export default function LandingPage() { membersAnimation="slide-up" members={[ { - id: "1", name: "Marcus Johnson", imageSrc: "http://img.b2bpic.net/free-photo/strict-slavic-middle-aged-male-barber-uniform-combing-beard-showing-stop-gesture-isolated-purple-wall_141793-91434.jpg", imageAlt: "Marcus Johnson - Master Barber"}, + id: "1", name: "Marcus Johnson", imageSrc: "http://img.b2bpic.net/free-photo/strict-slavic-middle-aged-male-barber-uniform-combing-beard-showing-stop-gesture-isolated-purple-wall_141793-91434.jpg", imageAlt: "Marcus Johnson - Master Barber" + }, { - id: "2", name: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-17840.jpg", imageAlt: "David Chen - Senior Stylist"}, + id: "2", name: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-17840.jpg", imageAlt: "David Chen - Senior Stylist" + }, { - id: "3", name: "James Rivera", imageSrc: "http://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg", imageAlt: "James Rivera - Beard Specialist"}, + id: "3", name: "James Rivera", imageSrc: "http://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg", imageAlt: "James Rivera - Beard Specialist" + }, ]} memberVariant="card" useInvertedBackground={true} @@ -180,19 +195,22 @@ export default function LandingPage() { tagAnimation="slide-up" plans={[ { - id: "haircut", title: "Classic Haircut", price: "$35", period: "per service", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-fresh-haircut_23-2148242775.jpg?_wi=2", imageAlt: "Haircut service", button: { text: "Book Now", href: "contact" }, + id: "haircut", title: "Classic Haircut", price: "$35", period: "per service", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-fresh-haircut_23-2148242775.jpg", imageAlt: "Haircut service", button: { text: "Book Now", href: "contact" }, features: [ - "Professional haircut", "Personalized styling", "Hair wash included", "Style consultation"], + "Professional haircut", "Personalized styling", "Hair wash included", "Style consultation" + ], }, { - id: "beard", title: "Beard Grooming", price: "$25", period: "per service", imageSrc: "http://img.b2bpic.net/free-photo/master-applying-shaving-foam-client-face_1153-9444.jpg?_wi=2", imageAlt: "Beard grooming service", button: { text: "Book Now", href: "contact" }, + id: "beard", title: "Beard Grooming", price: "$25", period: "per service", imageSrc: "http://img.b2bpic.net/free-photo/master-applying-shaving-foam-client-face_1153-9444.jpg", imageAlt: "Beard grooming service", button: { text: "Book Now", href: "contact" }, features: [ - "Precision beard trim", "Shape and styling", "Beard oil treatment", "Expert maintenance tips"], + "Precision beard trim", "Shape and styling", "Beard oil treatment", "Expert maintenance tips" + ], }, { - id: "shave", title: "Classic Shave", price: "$30", period: "per service", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg?_wi=2", imageAlt: "Classic shave service", button: { text: "Book Now", href: "contact" }, + id: "shave", title: "Classic Shave", price: "$30", period: "per service", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg", imageAlt: "Classic shave service", button: { text: "Book Now", href: "contact" }, features: [ - "Traditional hot shave", "Premium products", "Relaxing experience", "Aftershave treatment"], + "Traditional hot shave", "Premium products", "Relaxing experience", "Aftershave treatment" + ], }, ]} animationType="slide-up" @@ -202,8 +220,8 @@ export default function LandingPage() { buttonAnimation="slide-up" ariaLabel="Our service pricing" containerClassName="py-16 md:py-24" - titleClassName="text-4xl md:text-5xl font-bold mb-4" - descriptionClassName="text-lg mb-12 max-w-2xl" + planTitleClassName="text-4xl md:text-5xl font-bold mb-4" + textBoxDescriptionClassName="text-lg mb-12 max-w-2xl" /> @@ -217,22 +235,28 @@ export default function LandingPage() { testimonials={[ { id: "1", name: "John Mitchell", role: "Business Executive", company: "Tech Corp", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/young-smiley-man-looking-camera_23-2148306634.jpg", imageAlt: "John Mitchell"}, + imageSrc: "http://img.b2bpic.net/free-photo/young-smiley-man-looking-camera_23-2148306634.jpg", imageAlt: "John Mitchell" + }, { id: "2", name: "Michael Torres", role: "Marketing Director", company: "Creative Agency", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg", imageAlt: "Michael Torres"}, + imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg", imageAlt: "Michael Torres" + }, { id: "3", name: "Robert Williams", role: "Entrepreneur", company: "StartUp Inc", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-supportive-girl-showing-thumbs-up-smiling-proud-praising-you-showing-well-done-excellent-gesture-standing-satisfied-white-wall_176420-34127.jpg", imageAlt: "Robert Williams"}, + imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-supportive-girl-showing-thumbs-up-smiling-proud-praising-you-showing-well-done-excellent-gesture-standing-satisfied-white-wall_176420-34127.jpg", imageAlt: "Robert Williams" + }, { id: "4", name: "Christopher Lee", role: "Finance Manager", company: "Investment Group", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/corporate-business-people_23-2148827022.jpg", imageAlt: "Christopher Lee"}, + imageSrc: "http://img.b2bpic.net/free-photo/corporate-business-people_23-2148827022.jpg", imageAlt: "Christopher Lee" + }, { id: "5", name: "David Anderson", role: "Senior Consultant", company: "Strategy Partners", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-smiling-with-copy-space_23-2148435784.jpg", imageAlt: "David Anderson"}, + imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-smiling-with-copy-space_23-2148435784.jpg", imageAlt: "David Anderson" + }, { id: "6", name: "James Peterson", role: "CEO", company: "Global Solutions", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-giving-thumb-up_23-2147650951.jpg", imageAlt: "James Peterson"}, + imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-giving-thumb-up_23-2147650951.jpg", imageAlt: "James Peterson" + }, ]} kpiItems={[ { value: "5000+", label: "Happy Clients" }, @@ -244,8 +268,8 @@ export default function LandingPage() { useInvertedBackground={true} ariaLabel="Client testimonials" containerClassName="py-16 md:py-24" - titleClassName="text-4xl md:text-5xl font-bold mb-4" - descriptionClassName="text-lg mb-12 max-w-2xl" + roleClassName="text-4xl md:text-5xl font-bold mb-4" + textBoxDescriptionClassName="text-lg mb-12 max-w-2xl" /> @@ -258,22 +282,28 @@ export default function LandingPage() { tagAnimation="slide-up" faqs={[ { - id: "1", title: "How do I book an appointment?", content: "You can book an appointment through our website contact form, call us directly at (555) 123-4567, or visit us in person. We also offer online booking for your convenience."}, + id: "1", title: "How do I book an appointment?", content: "You can book an appointment through our website contact form, call us directly at (555) 123-4567, or visit us in person. We also offer online booking for your convenience." + }, { - id: "2", title: "Do you accept walk-ins?", content: "Yes, we accept walk-ins based on availability. However, we recommend booking in advance to ensure your preferred time slot. Walk-ins are welcome during off-peak hours."}, + id: "2", title: "Do you accept walk-ins?", content: "Yes, we accept walk-ins based on availability. However, we recommend booking in advance to ensure your preferred time slot. Walk-ins are welcome during off-peak hours." + }, { - id: "3", title: "What is your cancellation policy?", content: "Cancellations must be made at least 24 hours in advance for a full refund. Late cancellations within 24 hours may incur a 50% charge."}, + id: "3", title: "What is your cancellation policy?", content: "Cancellations must be made at least 24 hours in advance for a full refund. Late cancellations within 24 hours may incur a 50% charge." + }, { - id: "4", title: "Do you offer gift certificates?", content: "Yes! Gift certificates are available in any amount and make perfect gifts for the men in your life. Contact us for details on purchasing."}, + id: "4", title: "Do you offer gift certificates?", content: "Yes! Gift certificates are available in any amount and make perfect gifts for the men in your life. Contact us for details on purchasing." + }, { - id: "5", title: "What products do you use?", content: "We use only premium, professional-grade grooming products from leading brands. All products are tested for quality and safety to ensure the best results for our clients."}, + id: "5", title: "What products do you use?", content: "We use only premium, professional-grade grooming products from leading brands. All products are tested for quality and safety to ensure the best results for our clients." + }, { - id: "6", title: "Are you experienced with all hair types?", content: "Absolutely! Our barbers are trained and experienced with all hair types and textures. We customize every cut and style to match your hair characteristics and personal preferences."}, + id: "6", title: "Are you experienced with all hair types?", content: "Absolutely! Our barbers are trained and experienced with all hair types and textures. We customize every cut and style to match your hair characteristics and personal preferences." + }, ]} imageSrc="http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108889.jpg" imageAlt="Our barbershop interior" mediaPosition="left" - mediaAnimation="fade" + mediaAnimation="blur-reveal" faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} @@ -281,8 +311,8 @@ export default function LandingPage() { showCard={true} ariaLabel="FAQ section" containerClassName="py-16 md:py-24" - titleClassName="text-4xl md:text-5xl font-bold mb-4" - descriptionClassName="text-lg mb-12 max-w-2xl" + textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4" + textBoxDescriptionClassName="text-lg mb-12 max-w-2xl" /> -- 2.49.1