Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-15 13:59:38 +00:00

View File

@@ -12,442 +12,188 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Palette, Scissors, Star } from "lucide-react";
import { Scissors, Palette, Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "features",
},
{
name: "Portfolio",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="GianFranco"
button={{
text: "Book Now",
href: "#contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Products", id: "products" },
{ name: "Pricing", id: "pricing" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
]}
brandName="GianFranco"
button={{ text: "Book Now", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "plain",
}}
title="GianFranco Hair Artistry"
description="Crafting iconic looks that define sophistication and modern elegance. Experience world-class hair artistry tailored exclusively for you."
kpis={[
{
value: "10+",
label: "Years Experience",
},
{
value: "5k+",
label: "Artistic Cuts",
},
{
value: "100%",
label: "Client Satisfaction",
},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Book Appointment",
href: "#contact",
},
{
text: "View Portfolio",
href: "#products",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg?_wi=1"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-adult-businesswoman-smiling_23-2148452640.jpg",
alt: "Client profile 1",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
alt: "Client profile 2",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452696.jpg",
alt: "Client profile 3",
},
{
src: "http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg",
alt: "Client profile 4",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-looking-camera-while-standing-counter-movie-house_613910-21690.jpg",
alt: "Client profile 5",
},
]}
avatarText="Join 5,000+ satisfied clients"
marqueeItems={[
{
type: "text",
text: "Precision Cutting",
},
{
type: "text",
text: "Luxury Styling",
},
{
type: "text",
text: "Color Expertise",
},
{
type: "text",
text: "Trend-Forward",
},
{
type: "text",
text: "Modern Elegance",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "plain" }}
title="GianFranco Hair Artistry"
description="Crafting iconic looks that define sophistication and modern elegance. Experience world-class hair artistry tailored exclusively for you."
kpis={[
{ value: "10+", label: "Years Experience" },
{ value: "5k+", label: "Artistic Cuts" },
{ value: "100%", label: "Client Satisfaction" }
]}
enableKpiAnimation={true}
buttons={[
{ text: "Book Appointment", href: "#contact" },
{ text: "View Portfolio", href: "#products" }
]}
imageSrc="http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/portrait-adult-businesswoman-smiling_23-2148452640.jpg", alt: "Client profile 1" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg", alt: "Client profile 2" },
{ src: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452696.jpg", alt: "Client profile 3" },
{ src: "http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg", alt: "Client profile 4" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-looking-camera-while-standing-counter-movie-house_613910-21690.jpg", alt: "Client profile 5" }
]}
avatarText="Join 5,000+ satisfied clients"
marqueeItems={[
{ type: "text", text: "Precision Cutting" },
{ type: "text", text: "Luxury Styling" },
{ type: "text", text: "Color Expertise" },
{ type: "text", text: "Trend-Forward" },
{ type: "text", text: "Modern Elegance" }
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="The Art of Elegance"
metrics={[
{
icon: Scissors,
label: "Precision Cutting",
value: "Mastery",
},
{
icon: Palette,
label: "Color Analysis",
value: "Expert",
},
{
icon: Star,
label: "Trending Designs",
value: "2026",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="The Art of Elegance"
metrics={[
{ icon: Scissors, label: "Precision Cutting", value: "Mastery" },
{ icon: Palette, label: "Color Analysis", value: "Expert" },
{ icon: Star, label: "Trending Designs", value: "2026" }
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "feat-1",
title: "Men's Styling",
tags: [
"Precision",
"Modern",
],
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fat-bearded-male-dressed-jacket_613910-988.jpg?_wi=1",
},
{
id: "feat-2",
title: "Women's Styling",
tags: [
"Elegant",
"Volume",
],
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-girl_1385-2552.jpg?_wi=1",
},
{
id: "feat-3",
title: "Color Analysis",
tags: [
"Customized",
"Vibrant",
],
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg?_wi=1",
},
]}
title="Signature Services"
description="Excellence in hair craft, delivered with passion."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ id: "feat-1", title: "Men's Styling", tags: ["Precision", "Modern"], imageSrc: "http://img.b2bpic.net/free-photo/portrait-fat-bearded-male-dressed-jacket_613910-988.jpg" },
{ id: "feat-2", title: "Women's Styling", tags: ["Elegant", "Volume"], imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-girl_1385-2552.jpg" },
{ id: "feat-3", title: "Color Analysis", tags: ["Customized", "Vibrant"], imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg" }
]}
title="Signature Services"
description="Excellence in hair craft, delivered with passion."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Classic Elegance",
price: "Styling",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-red-blouse-sitting-posing_114579-66797.jpg?_wi=1",
},
{
id: "p2",
name: "Modern Edge",
price: "Cut",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhaired-woman-wearing-make-up_23-2149676973.jpg",
},
{
id: "p3",
name: "Color Masterpiece",
price: "Dyeing",
imageSrc: "http://img.b2bpic.net/free-photo/black-woman-s-portrait-dramma-look_633478-1621.jpg",
},
{
id: "p4",
name: "Trend Collection",
price: "Hairstyle",
imageSrc: "http://img.b2bpic.net/free-photo/teenager-girl-combs-her-hair-looking-mirror-bathroom_169016-55523.jpg",
},
{
id: "p5",
name: "Iconic Cut",
price: "Men's",
imageSrc: "http://img.b2bpic.net/free-photo/singing-girl_23-2147635322.jpg",
},
{
id: "p6",
name: "Vibrant Fusion",
price: "Color",
imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-portrait-indoor_624325-4388.jpg",
},
]}
title="Portfolio Highlights"
description="Explore the signature transformations by GianFranco."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Classic Elegance", price: "Styling", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-red-blouse-sitting-posing_114579-66797.jpg" },
{ id: "p2", name: "Modern Edge", price: "Cut", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhaired-woman-wearing-make-up_23-2149676973.jpg" },
{ id: "p3", name: "Color Masterpiece", price: "Dyeing", imageSrc: "http://img.b2bpic.net/free-photo/black-woman-s-portrait-dramma-look_633478-1621.jpg" },
{ id: "p4", name: "Trend Collection", price: "Hairstyle", imageSrc: "http://img.b2bpic.net/free-photo/teenager-girl-combs-her-hair-looking-mirror-bathroom_169016-55523.jpg" },
{ id: "p5", name: "Iconic Cut", price: "Men's", imageSrc: "http://img.b2bpic.net/free-photo/singing-girl_23-2147635322.jpg" },
{ id: "p6", name: "Vibrant Fusion", price: "Color", imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-portrait-indoor_624325-4388.jpg" }
]}
title="Portfolio Highlights"
description="Explore the signature transformations by GianFranco."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{
id: "b1",
name: "Essentials",
price: "$80",
buttons: [
{
text: "Book",
href: "#contact",
},
],
features: [
"Consultation",
"Haircut",
"Style",
],
},
{
id: "b2",
name: "Advanced",
price: "$150",
buttons: [
{
text: "Book",
href: "#contact",
},
],
features: [
"Color Consultation",
"Full Coloring",
"Styling",
],
},
{
id: "b3",
name: "Signature",
price: "$250",
buttons: [
{
text: "Book",
href: "#contact",
},
],
features: [
"Complete Restyle",
"Treatment",
"Coloring",
],
},
]}
title="Booking Options"
description="Select your transformation service."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{ id: "b1", name: "Essentials", price: "$80", buttons: [{ text: "Book", href: "#contact" }], features: ["Consultation", "Haircut", "Style"] },
{ id: "b2", name: "Advanced", price: "$150", buttons: [{ text: "Book", href: "#contact" }], features: ["Color Consultation", "Full Coloring", "Styling"] },
{ id: "b3", name: "Signature", price: "$250", buttons: [{ text: "Book", href: "#contact" }], features: ["Complete Restyle", "Treatment", "Coloring"] }
]}
title="Booking Options"
description="Select your transformation service."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah J.",
date: "Oct 2025",
title: "Incredible",
quote: "The best haircut I've ever had, truly an artist.",
tag: "5 Stars",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg?_wi=2",
imageAlt: "client headshot professional luxury",
},
{
id: "t2",
name: "Mark D.",
date: "Sep 2025",
title: "Precision",
quote: "GianFranco is incredibly detailed. A true professional.",
tag: "5 Stars",
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting-table_23-2149684349.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fat-bearded-male-dressed-jacket_613910-988.jpg?_wi=2",
imageAlt: "client headshot professional luxury",
},
{
id: "t3",
name: "Elena R.",
date: "Aug 2025",
title: "Stunning",
quote: "Changed my look completely. Highly recommended.",
tag: "5 Stars",
avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-hairdresser-apron-holding-trimmer-looking-aside-confused-standing-green-wall_141793-55408.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-girl_1385-2552.jpg?_wi=2",
imageAlt: "client headshot professional luxury",
},
{
id: "t4",
name: "Liam K.",
date: "Jul 2025",
title: "Expertise",
quote: "The color analysis was perfect, loved the result.",
tag: "5 Stars",
avatarSrc: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg?_wi=2",
imageAlt: "client headshot professional luxury",
},
{
id: "t5",
name: "Sofia M.",
date: "Jun 2025",
title: "Amazing",
quote: "Professional, creative, and luxurious service.",
tag: "5 Stars",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12311.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-red-blouse-sitting-posing_114579-66797.jpg?_wi=2",
imageAlt: "client headshot professional luxury",
},
]}
title="Client Reviews"
description="What our clients are saying about GianFranco."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah J.", date: "Oct 2025", title: "Incredible", quote: "The best haircut I've ever had, truly an artist.", tag: "5 Stars", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg" },
{ id: "t2", name: "Mark D.", date: "Sep 2025", title: "Precision", quote: "GianFranco is incredibly detailed. A true professional.", tag: "5 Stars", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting-table_23-2149684349.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fat-bearded-male-dressed-jacket_613910-988.jpg" },
{ id: "t3", name: "Elena R.", date: "Aug 2025", title: "Stunning", quote: "Changed my look completely. Highly recommended.", tag: "5 Stars", avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-hairdresser-apron-holding-trimmer-looking-aside-confused-standing-green-wall_141793-55408.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-girl_1385-2552.jpg" },
{ id: "t4", name: "Liam K.", date: "Jul 2025", title: "Expertise", quote: "The color analysis was perfect, loved the result.", tag: "5 Stars", avatarSrc: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg" },
{ id: "t5", name: "Sofia M.", date: "Jun 2025", title: "Amazing", quote: "Professional, creative, and luxurious service.", tag: "5 Stars", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12311.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-red-blouse-sitting-posing_114579-66797.jpg" }
]}
title="Client Reviews"
description="What our clients are saying about GianFranco."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "How do I book?",
content: "Book directly through our WhatsApp link on this site.",
},
{
id: "q2",
title: "Do you do consultations?",
content: "Yes, every service starts with a consultation.",
},
{
id: "q3",
title: "What payment methods?",
content: "We accept major cards and mobile payments.",
},
]}
sideTitle="Common Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "How do I book?", content: "Book directly through our WhatsApp link on this site." },
{ id: "q2", title: "Do you do consultations?", content: "Yes, every service starts with a consultation." },
{ id: "q3", title: "What payment methods?", content: "We accept major cards and mobile payments." }
]}
sideTitle="Common Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Contact Us"
title="Book Your Session"
description="Get in touch via WhatsApp for an exclusive appointment."
buttonText="Connect via WhatsApp"
onSubmit={(email) => window.open('https://wa.me/your-number-here', '_blank')}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Contact Us"
title="Book Your Session"
description="Get in touch via WhatsApp for an exclusive appointment."
buttonText="Connect via WhatsApp"
onSubmit={(email) => window.open('https://wa.me/your-number-here', '_blank')}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="GianFranco"
columns={[
{
title: "Links",
items: [
{
label: "Portfolio",
href: "#products",
},
{
label: "Services",
href: "#features",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
copyrightText="© 2026 GianFranco Hair Art. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="GianFranco"
columns={[
{ title: "Links", items: [{ label: "Portfolio", href: "#products" }, { label: "Services", href: "#features" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
copyrightText="© 2026 GianFranco Hair Art. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);