303 lines
15 KiB
TypeScript
303 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import { Award, Crown, Scissors, Smile, Sparkles, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "About", id: "/about"},
|
|
{
|
|
name: "Services", id: "/services"},
|
|
{
|
|
name: "Kids", id: "/kids"},
|
|
{
|
|
name: "Groom", id: "/groom"},
|
|
{
|
|
name: "Portfolio", id: "/portfolio"},
|
|
{
|
|
name: "Team", id: "/team"},
|
|
{
|
|
name: "Testimonials", id: "/testimonials"},
|
|
{
|
|
name: "Offers", id: "/offers"},
|
|
{
|
|
name: "Booking", id: "/booking"},
|
|
{
|
|
name: "Contact", id: "/contact"},
|
|
]}
|
|
brandName="KOKO Salon"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="KOKO"
|
|
description="Luxury Men's Grooming Experience\\nأفضل تجربة حلاقة رجالية وأطفال في السويس"
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment", href: "/booking"},
|
|
{
|
|
text: "Explore Services", href: "/services"},
|
|
]}
|
|
buttonClassName="bg-primary-cta text-primary-cta-text drop-shadow-lg"
|
|
slides={[
|
|
{
|
|
videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-man-gets-a-haircut-20836-large.mp4", imageAlt: "Cinematic barber cutting hair", videoAriaLabel: "Luxury haircutting sequence, man getting a precision haircut", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg"},
|
|
{
|
|
videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-barber-trimming-a-mans-beard-32533-large.mp4", imageAlt: "Barber tools close-up", videoAriaLabel: "Close-up of barber trimming a man's beard", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-sensitive-man-posing-studio_23-2149518242.jpg"},
|
|
{
|
|
videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-interior-of-a-hairdressing-salon-32549-large.mp4", imageAlt: "Luxury men's salon interior", videoAriaLabel: "Tour of luxurious salon interior with modern design", imageSrc: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199304.jpg"},
|
|
{
|
|
videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-a-boy-is-getting-a-haircut-at-a-barbershop-44933-large.mp4", imageAlt: "Kids haircut stylish slow motion", videoAriaLabel: "Happy child getting a stylish haircut at the barbershop", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224419.jpg"},
|
|
{
|
|
videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-barber-shaving-a-mans-beard-32532-large.mp4", imageAlt: "Slow-motion beard grooming", videoAriaLabel: "Barber performing a traditional hot towel shave", imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-barber-cutting-hair-man_23-2147737060.jpg"},
|
|
{
|
|
videoSrc: "https://assets.mixkit.co/videos/preview/mixkit-woman-applying-a-moisturizer-on-a-mans-face-32537-large.mp4", imageAlt: "High-end grooming close-up", videoAriaLabel: "Close-up of luxury facial care and grooming process", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-shaving-man_23-2147778911.jpg"},
|
|
]
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text", content: "KOKO Salon: The Art of Luxury Grooming"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "/about"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services-home" data-section="services-home">
|
|
<FeatureHoverPattern
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
icon: Scissors,
|
|
title: "Classic Haircut", description: "Timeless precision and elegant styling for the modern gentleman."},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Skin Fade", description: "Masterful blending for a seamless, sharp, and contemporary look."},
|
|
{
|
|
icon: Smile,
|
|
title: "Kids Haircut", description: "Fun, comfortable, and stylish cuts for our younger gentlemen."},
|
|
{
|
|
icon: Award,
|
|
title: "Hair Styling", description: "Personalized styling to perfect your look for any occasion."},
|
|
{
|
|
icon: Users,
|
|
title: "Beard Trim", description: "Expert shaping and grooming for a refined and distinguished beard."},
|
|
{
|
|
icon: Crown,
|
|
title: "Royal Shave", description: "An indulgent traditional hot towel shave experience."},
|
|
]}
|
|
title="Our Signature Services"
|
|
description="Experience a realm of bespoke grooming services, meticulously crafted to elevate your style and comfort. From classic cuts to advanced treatments, each service is an art."
|
|
buttons={[
|
|
{
|
|
text: "View All Services", href: "/services"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="kids-experience-home" data-section="kids-experience-home">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "kids-1", name: "Trendy Styles", price: "Starting from $30", imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462518.jpg", imageAlt: "Trendy kid hairstyle"},
|
|
{
|
|
id: "kids-2", name: "Comfortable Environment", price: "Always included", imageSrc: "http://img.b2bpic.net/free-photo/girl-helping-her-father-shave_23-2147624074.jpg", imageAlt: "Comfortable kids barbershop"},
|
|
{
|
|
id: "kids-3", name: "Happy Transformations", price: "Priceless", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-boy-wondering_23-2148356616.jpg", imageAlt: "Happy child after haircut"},
|
|
]}
|
|
title="The KOKO Kids Experience"
|
|
description="A comfortable and fun environment tailored for our younger gentlemen, ensuring stylish haircuts with a smile. Watch your child transform with trendy hairstyles and leave with satisfaction."
|
|
buttons={[
|
|
{
|
|
text: "Explore Kids Haircuts", href: "/kids"}
|
|
]
|
|
/>
|
|
</div>
|
|
|
|
<div id="groom-package-home" data-section="groom-package-home">
|
|
<PricingCardTwo
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "wedding-package", badge: "Elite", badgeIcon: Crown,
|
|
price: "$500", subtitle: "Your Perfect Wedding Day Prep", buttons: [
|
|
{
|
|
text: "Book Your Royal Groom", href: "/groom"},
|
|
],
|
|
features: [
|
|
"Precision Haircut & Style", "Premium Skin Fade", "Expert Beard Styling", "Luxury Facial Care", "Exclusive Hair Treatment", "VIP Service & Private Suite"],
|
|
},
|
|
{
|
|
id: "premium-package", badge: "Premium", badgeIcon: Award,
|
|
price: "$250", subtitle: "Elevate Your Everyday Look", buttons: [
|
|
{
|
|
text: "Choose Premium Plan", href: "/groom"},
|
|
],
|
|
features: [
|
|
"Precision Haircut", "Classic Shave or Beard Trim", "Hair Styling", "Invigorating Face Mask"],
|
|
}
|
|
]}
|
|
title="The Royal Groom Package"
|
|
description="Indulge in the ultimate luxury with our exclusive Wedding Groom Package. Every detail is perfected to ensure you look your absolute best for your special day."
|
|
buttons={[
|
|
{
|
|
text: "Discover Grooming Packages", href: "/groom"}
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials-home" data-section="testimonials-home">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Omar El Sayed", handle: "@OmarEsquire", testimonial: "KOKO Salon is unparalleled. The attention to detail and the luxurious experience redefine grooming. Truly world-class!", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-vintage-eyeglasses-dressed-wool-jacket_613910-15932.jpg", imageAlt: "Omar El Sayed"},
|
|
{
|
|
id: "2", name: "Karim Hassan", handle: "@KarimGrooms", testimonial: "My son loves coming to KOKO Salon! The barbers are fantastic with kids, and his haircuts are always perfect. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg", imageAlt: "Karim Hassan"},
|
|
{
|
|
id: "3", name: "Ahmed Mansour", handle: "@AhmedMStyle", testimonial: "The Royal Shave is an absolute must-try. Pure indulgence and precision. KOKO Salon sets the standard for luxury.", imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", imageAlt: "Ahmed Mansour"},
|
|
{
|
|
id: "4", name: "Youssef Ibrahim", handle: "@YoussefLux", testimonial: "From the moment you step in, you know it's a premium experience. My haircuts are consistently flawless. Best in Suez!", imageSrc: "http://img.b2bpic.net/free-photo/two-businessmen-talking-phone-city_1153-8202.jpg", imageAlt: "Youssef Ibrahim"},
|
|
{
|
|
id: "5", name: "Sara Ali", handle: "@SaraMomLife", testimonial: "As a parent, I appreciate the comfort and skill for kids' haircuts. My little one always leaves with a smile and a trendy cut. Thank you, KOKO!", imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-5073.jpg", imageAlt: "Sara Ali"},
|
|
]}
|
|
title="Hear Their KOKO Salon Transformations"
|
|
description="Hear from gentlemen and parents who have experienced the KOKO Salon difference. Exceptional service and impeccable style, consistently delivered."
|
|
buttons={[
|
|
{
|
|
text: "Read All Reviews", href: "/reviews"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-map-home" data-section="contact-map-home">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Visit KOKO Salon"
|
|
description="We look forward to welcoming you to KOKO Salon in Suez. Reach out to schedule your appointment or inquire about our services. Experience luxury firsthand."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Your Message or Inquiry", rows: 4,
|
|
required: false,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-egypt-landscape-digital-art_23-2151718045.jpg"
|
|
imageAlt="KOKO Salon location on map"
|
|
mediaAnimation="opacity"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Classic Haircut", href: "/services#classic"},
|
|
{
|
|
label: "Skin Fade", href: "/services#fade"},
|
|
{
|
|
label: "Royal Shave", href: "/services#shave"},
|
|
{
|
|
label: "Hair Treatments", href: "/services#treatment"},
|
|
],
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{
|
|
label: "Our Story", href: "/about"},
|
|
{
|
|
label: "Our Team", href: "/team"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "Sitemap", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Packages", items: [
|
|
{
|
|
label: "Groom Packages", href: "/groom"},
|
|
{
|
|
label: "Kids Experience", href: "/kids"},
|
|
{
|
|
label: "Special Offers", href: "/offers"},
|
|
{
|
|
label: "VIP Membership", href: "/offers#vip"},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{
|
|
label: "Book Appointment", href: "/booking"},
|
|
{
|
|
label: "Contact Us", href: "/contact"},
|
|
{
|
|
label: "WhatsApp", href: "https://wa.me/01000000000"},
|
|
{
|
|
label: "Instagram", href: "https://instagram.com/kokosalon"},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 KOKO Salon. All rights reserved."
|
|
bottomRightText="Privacy Policy | Terms of Service"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |