Merge version_1 into main #2
142
src/app/page.tsx
142
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user