244 lines
12 KiB
TypeScript
244 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import { Award, Crown, Diamond, Facebook, Heart, Instagram, Paintbrush, Phone, Sparkles, Star, Twitter } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "About Us", id: "#about"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Pricing", id: "#pricing"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Nail Haven"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Nail Haven"
|
|
description="Experience unparalleled pampering and exquisite nail artistry. Your journey to perfect nails starts here."
|
|
buttons={[
|
|
{
|
|
text: "Book an Appointment", href: "#contact"},
|
|
{
|
|
text: "View Services", href: "#services"},
|
|
]}
|
|
buttonAnimation="opacity"
|
|
imageSrc="https://img.b2bpic.net/free-photo/woman-showing-her-nail-art-fingernails-with-flower_23-2149820404.jpg?id=34136175"
|
|
imageAlt="Exquisite nail artistry"
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="Our Commitment to Beauty & Care"
|
|
metrics={[
|
|
{
|
|
icon: Sparkles,
|
|
label: "Years of Experience", value: "10+"},
|
|
{
|
|
icon: Heart,
|
|
label: "Happy Clients", value: "5,000+"},
|
|
{
|
|
icon: Award,
|
|
label: "Quality Services", value: "100%"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Manicures & Pedicures", description: "From classic to gel, we offer a variety of services for hands and feet.", bentoComponent: "reveal-icon", icon: Paintbrush
|
|
},
|
|
{
|
|
title: "Nail Enhancements", description: "Achieve your desired length and strength with our premium acrylic and gel extensions.", bentoComponent: "reveal-icon", icon: Diamond
|
|
},
|
|
{
|
|
title: "Custom Nail Art", description: "Express your unique style with our custom designs, glitter, and intricate patterns.", bentoComponent: "reveal-icon", icon: Sparkles
|
|
}
|
|
]}
|
|
title="Our Signature Services"
|
|
description="Indulge in our wide range of services, designed to leave your hands and feet feeling rejuvenated and beautiful."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "prod-1", name: "Classic Manicure", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/make-up-nail-polish_23-2148109470.jpg", imageAlt: "Classic French Manicure"},
|
|
{
|
|
id: "prod-2", name: "Gel Manicure", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-her-nail-art-fingernails-with-glass_23-2149820409.jpg", imageAlt: "Vibrant Gel Manicure"},
|
|
{
|
|
id: "prod-3", name: "Spa Pedicure", price: "$60", imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-getting-massage-feet_23-2147821183.jpg", imageAlt: "Relaxing Spa Pedicure"},
|
|
{
|
|
id: "prod-4", name: "Acrylic Full Set", price: "$70", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24220.jpg", imageAlt: "Elegant Acrylic Nails"},
|
|
{
|
|
id: "prod-5", name: "Custom Nail Art", price: "$15+", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-manicure-blue-background_23-2149311585.jpg", imageAlt: "Intricate Custom Nail Art"},
|
|
{
|
|
id: "prod-6", name: "Mani-Pedi Combo", price: "$80", imageSrc: "http://img.b2bpic.net/free-photo/pink-gray-nail-varnish-bottles-dried-white-limonium-box-colored-background_23-2148074006.jpg", imageAlt: "Manicure and Pedicure Combo"},
|
|
]}
|
|
title="Explore Our Nail Offerings"
|
|
description="Discover a selection of our most popular manicures, pedicures, and nail enhancements."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "Popular", badgeIcon: Star,
|
|
price: "$40", subtitle: "Essential Care", features: [
|
|
"Classic Manicure", "Basic Polish Application", "Hand Massage"],
|
|
},
|
|
{
|
|
id: "premium", badge: "Best Value", badgeIcon: Diamond,
|
|
price: "$75", subtitle: "Deluxe Indulgence", features: [
|
|
"Gel Manicure", "Spa Pedicure", "Extended Massage", "Paraffin Treatment"],
|
|
},
|
|
{
|
|
id: "ultimate", badge: "Ultimate Pamper", badgeIcon: Crown,
|
|
price: "$120", subtitle: "Total Rejuvenation", features: [
|
|
"Gel Manicure & Pedicure", "Custom Nail Art (2 nails)", "Luxury Hand & Foot Spa", "Complimentary Drink"],
|
|
},
|
|
]}
|
|
title="Transparent Pricing, Beautiful Results"
|
|
description="Find the perfect pampering package that fits your needs and budget."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah J.", handle: "@sarah_nails", testimonial: "Nail Haven always exceeds my expectations! My nails look flawless every time, and the staff are incredibly friendly and talented. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-female-barber-uniform-showing-okay-gesture-isolated-pink-background_141793-118849.jpg", imageAlt: "Sarah J. photo"},
|
|
{
|
|
id: "2", name: "Emily R.", handle: "@emily.beauty", testimonial: "The best nail salon experience I've ever had! The ambiance is so relaxing, and my gel manicure lasted for weeks without a single chip.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg", imageAlt: "Emily R. photo"},
|
|
{
|
|
id: "3", name: "Jessica L.", handle: "@jessica_polished", testimonial: "I love coming to Nail Haven for my pedicures. It's truly a luxurious escape, and my feet feel incredibly soft afterwards. Fantastic service!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-mulatto-woman-with-trendy-make-up-standing-with-arms-crossed-office-indoor-photo-female-black-employee-posing-with-international-colleagues-gently-smile_197531-3788.jpg", imageAlt: "Jessica L. photo"},
|
|
{
|
|
id: "4", name: "Megan T.", handle: "@megan.glow", testimonial: "The nail art here is phenomenal! I showed them a picture, and they replicated it perfectly. So impressed with their attention to detail.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-talking-mobile-phone-waiting-area_107420-95801.jpg", imageAlt: "Megan T. photo"},
|
|
{
|
|
id: "5", name: "Olivia S.", handle: "@olivia.spa", testimonial: "Such a clean and professional salon. The technicians are gentle and thorough, making sure every visit is a pleasant one. My go-to place!", imageSrc: "http://img.b2bpic.net/free-photo/fair-skinned-adult-woman-uses-roller-massager-while-sitting-her-beautician-light-studio-home-spa-facial-concept_197531-31464.jpg", imageAlt: "Olivia S. photo"},
|
|
]}
|
|
title="What Our Clients Say"
|
|
description="Hear from our happy customers who love their experience at Nail Haven."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "Do I need to book an appointment?", content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure we can accommodate your preferred time and service."},
|
|
{
|
|
id: "faq-2", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, Mastercard, Amex), Apple Pay, Google Pay, and cash."},
|
|
{
|
|
id: "faq-3", title: "How long do gel manicures last?", content: "Typically, our high-quality gel manicures last between 2-3 weeks, depending on your nail growth and daily activities."},
|
|
{
|
|
id: "faq-4", title: "Do you offer gift cards?", content: "Yes, we do! Gift cards are available for purchase in-store and make the perfect present for any occasion."},
|
|
]}
|
|
title="Got Questions? We Have Answers."
|
|
description="Find quick answers to the most common questions about our services and policies."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Contact Us"
|
|
title="Book Your Ultimate Pampering Session"
|
|
description="Ready for a transformative nail experience? Contact us today to schedule your appointment or inquire about our services."
|
|
tagIcon={Phone}
|
|
imageSrc="http://img.b2bpic.net/free-photo/cozy-hobby-growing-indoor-plants-home_185193-108771.jpg"
|
|
imageAlt="Nail salon reception area"
|
|
mediaAnimation="opacity"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Send Message"
|
|
termsText="By clicking Send Message you're confirming that you agree with our Terms and Conditions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Nail Haven"
|
|
copyrightText="© 2024 Nail Haven. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/nailhaven", ariaLabel: "Instagram"},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/nailhaven", ariaLabel: "Facebook"},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/nailhaven", ariaLabel: "Twitter"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|