Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-05-01 19:56:42 +00:00

View File

@@ -29,413 +29,171 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "features",
},
{
name: "Team",
id: "team",
},
{
name: "FAQ",
id: "faq",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Piercing 4You"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "features" },
{ name: "Team", id: "team" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
brandName="Piercing 4You"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "gradient-bars",
}}
title="Define Your Style with Piercing 4You"
description="Professional, safe, and artistic piercing services in a studio designed for your comfort and self-expression."
tag="Safe & Professional"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-pretty-woman-with-curly-hair_197531-2615.jpg?_wi=1",
imageAlt: "piercing jewelry close up professional",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tattoo-artist-working_23-2149445962.jpg?_wi=1",
imageAlt: "piercer working in studio setting",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479243.jpg",
imageAlt: "Experienced tattoo artist working on client tattoo",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-stylish-drag-queen-posing_23-2149247286.jpg",
imageAlt: "Medium shot stylish drag queen posing",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-using-lipgloss_23-2149529631.jpg",
imageAlt: "Side view woman using lipgloss",
},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Rated 5/5 by over 500+ satisfied clients."
tagIcon={Sparkles}
buttons={[
{
text: "Book Now",
href: "#contact",
},
{
text: "View Services",
href: "#features",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{ variant: "gradient-bars" }}
title="Define Your Style with Piercing 4You"
description="Professional, safe, and artistic piercing services in a studio designed for your comfort and self-expression."
tag="Safe & Professional"
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-pretty-woman-with-curly-hair_197531-2615.jpg", imageAlt: "piercing jewelry close up professional" },
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tattoo-artist-working_23-2149445962.jpg", imageAlt: "piercer working in studio setting" }
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Rated 5/5 by over 500+ satisfied clients."
tagIcon={Sparkles}
buttons={[
{ text: "Book Now", href: "#contact" },
{ text: "View Services", href: "#features" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Precision Piercing",
description: "Experienced technicians using sterile, single-use equipment for painless procedures.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/metal-rings-with-skulls_23-2147685523.jpg",
imageAlt: "ear piercing collection jewelry",
},
items: [
{
icon: CheckCircle,
text: "Sterile environments",
},
{
icon: CheckCircle,
text: "Expert placement",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-pretty-woman-with-curly-hair_197531-2615.jpg?_wi=2",
imageAlt: "ear piercing collection jewelry",
},
{
title: "Premium Jewelry",
description: "Hypoallergenic titanium and 14k gold jewelry for healing with minimal irritation.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/collection-orthodontic-instruments-dental-procedure_651396-2230.jpg",
imageAlt: "sterile piercing needles equipment",
},
items: [
{
icon: Shield,
text: "ASTM certified",
},
{
icon: Shield,
text: "Nickel-free",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tattoo-artist-working_23-2149445962.jpg?_wi=2",
imageAlt: "ear piercing collection jewelry",
},
{
title: "Expert Aftercare",
description: "Detailed guidance and premium aftercare solutions provided to ensure perfect healing.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-using-face-roller-massage_23-2150180410.jpg",
imageAlt: "piercing aftercare products professional",
},
items: [
{
icon: Star,
text: "Follow-up support",
},
{
icon: Star,
text: "Custom care plans",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-manager-sunny-day_1139-417.jpg?_wi=1",
imageAlt: "ear piercing collection jewelry",
},
]}
title="Our Piercing Services"
description="From standard ear piercings to advanced body modifications, our studio uses only the highest quality materials."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Precision Piercing", description: "Experienced technicians using sterile, single-use equipment for painless procedures.", media: { imageSrc: "http://img.b2bpic.net/free-photo/metal-rings-with-skulls_23-2147685523.jpg", imageAlt: "ear piercing collection jewelry" },
items: [{ icon: CheckCircle, text: "Sterile environments" }, { icon: CheckCircle, text: "Expert placement" }],
reverse: false
},
{
title: "Premium Jewelry", description: "Hypoallergenic titanium and 14k gold jewelry for healing with minimal irritation.", media: { imageSrc: "http://img.b2bpic.net/free-photo/collection-orthodontic-instruments-dental-procedure_651396-2230.jpg", imageAlt: "sterile piercing needles equipment" },
items: [{ icon: Shield, text: "ASTM certified" }, { icon: Shield, text: "Nickel-free" }],
reverse: true
},
{
title: "Expert Aftercare", description: "Detailed guidance and premium aftercare solutions provided to ensure perfect healing.", media: { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-using-face-roller-massage_23-2150180410.jpg", imageAlt: "piercing aftercare products professional" },
items: [{ icon: Star, text: "Follow-up support" }, { icon: Star, text: "Custom care plans" }],
reverse: false
}
]}
title="Our Piercing Services"
description="From standard ear piercings to advanced body modifications, our studio uses only the highest quality materials."
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
groups={[
{
id: "staff",
groupTitle: "Expert Piercers",
members: [
{
id: "m1",
title: "Lead Piercer",
subtitle: "Expert in cartilage piercing",
detail: "Certified professional with over 10 years experience in body modifications.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-manager-sunny-day_1139-417.jpg?_wi=2",
imageAlt: "female professional piercer smiling",
},
{
id: "m2",
title: "Studio Artist",
subtitle: "Specialist in facial piercings",
detail: "Creative professional with a background in fine art and body modification.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-naked-muscular-guy-with-tattooes-his-body_613910-11668.jpg",
imageAlt: "male body modification artist portrait",
},
{
id: "m3",
title: "Technician",
subtitle: "Body modification consultant",
detail: "Passionate about studio safety and client education.",
imageSrc: "http://img.b2bpic.net/free-photo/tattooed-caucasian-male-dressed-white-shirt-cutting-beard-black-hipster-males-red-fleece-shirt_613910-8615.jpg",
imageAlt: "piercer professional young woman",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-pretty-woman-with-curly-hair_197531-2615.jpg?_wi=3",
imageAlt: "female professional piercer smiling",
},
]}
title="Meet Your Artists"
description="Our team of professionals combines artistic vision with strict safety standards."
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
groups={[
{
id: "staff", groupTitle: "Expert Piercers", members: [
{ id: "m1", title: "Lead Piercer", subtitle: "Expert in cartilage piercing", detail: "Certified professional with over 10 years experience in body modifications.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-manager-sunny-day_1139-417.jpg", imageAlt: "female professional piercer smiling" },
{ id: "m2", title: "Studio Artist", subtitle: "Specialist in facial piercings", detail: "Creative professional with a background in fine art and body modification.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-naked-muscular-guy-with-tattooes-his-body_613910-11668.jpg", imageAlt: "male body modification artist portrait" },
{ id: "m3", title: "Technician", subtitle: "Body modification consultant", detail: "Passionate about studio safety and client education.", imageSrc: "http://img.b2bpic.net/free-photo/tattooed-caucasian-male-dressed-white-shirt-cutting-beard-black-hipster-males-red-fleece-shirt_613910-8615.jpg", imageAlt: "piercer professional young woman" }
]
}
]}
title="Meet Your Artists"
description="Our team of professionals combines artistic vision with strict safety standards."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "s1",
value: "100%",
title: "Sterilization Compliance",
description: "Strict adherence to all health department standards.",
imageSrc: "http://img.b2bpic.net/free-photo/metal-texture-with-plates_1048-5265.jpg",
},
{
id: "s2",
value: "5k+",
title: "Safe Piercings",
description: "Successful procedures performed to date.",
imageSrc: "http://img.b2bpic.net/free-photo/safety-first-sign-wall_23-2149919534.jpg",
},
{
id: "s3",
value: "99%",
title: "Client Satisfaction",
description: "Consistently rated by our community.",
imageSrc: "http://img.b2bpic.net/free-photo/glad-playful-woman-with-bunch-pink-hair-tattoo-wearing-white-t-shirt-blinking-eye-smiling-broadly-while-flirting-with-her-boyfriend-pretty-hipster-female-having-fun-indoors-isolated_273609-572.jpg",
},
]}
title="Safety Standards"
description="We don't compromise when it comes to health and hygiene."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "s1", value: "100%", title: "Sterilization Compliance", description: "Strict adherence to all health department standards.", imageSrc: "http://img.b2bpic.net/free-photo/metal-texture-with-plates_1048-5265.jpg" },
{ id: "s2", value: "5k+", title: "Safe Piercings", description: "Successful procedures performed to date.", imageSrc: "http://img.b2bpic.net/free-photo/safety-first-sign-wall_23-2149919534.jpg" },
{ id: "s3", value: "99%", title: "Client Satisfaction", description: "Consistently rated by our community.", imageSrc: "http://img.b2bpic.net/free-photo/glad-playful-woman-with-bunch-pink-hair-tattoo-wearing-white-t-shirt-blinking-eye-smiling-broadly-while-flirting-with-her-boyfriend-pretty-hipster-female-having-fun-indoors-isolated_273609-572.jpg" },
]}
title="Safety Standards"
description="We don't compromise when it comes to health and hygiene."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Alice M.",
role: "Client",
company: "Local Customer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/very-good-smiling-brunette-woman-shows-ok-okay-hand-sign-looking-satisfied-recommend-great-deal-pleased-with-quality-standing-white-background_176420-46695.jpg",
},
{
id: "t2",
name: "John D.",
role: "Client",
company: "Local Customer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-sending-messages-by-smartphone_329181-18114.jpg",
},
{
id: "t3",
name: "Sarah P.",
role: "Client",
company: "Local Customer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-portrait_23-2149213170.jpg",
},
{
id: "t4",
name: "Mike R.",
role: "Client",
company: "Local Customer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",
},
{
id: "t5",
name: "Emily B.",
role: "Client",
company: "Local Customer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-wearing-jewelry-makeup_23-2150738183.jpg",
},
]}
kpiItems={[
{
value: "4.9",
label: "Google Rating",
},
{
value: "12k",
label: "Instagram Followers",
},
{
value: "500+",
label: "5-Star Reviews",
},
]}
title="Client Stories"
description="Hear from our happy clients about their experiences at Piercing 4You."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Alice M.", role: "Client", company: "Local Customer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/very-good-smiling-brunette-woman-shows-ok-okay-hand-sign-looking-satisfied-recommend-great-deal-pleased-with-quality-standing-white-background_176420-46695.jpg" },
{ id: "t2", name: "John D.", role: "Client", company: "Local Customer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-sending-messages-by-smartphone_329181-18114.jpg" },
{ id: "t3", name: "Sarah P.", role: "Client", company: "Local Customer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-portrait_23-2149213170.jpg" },
{ id: "t4", name: "Mike R.", role: "Client", company: "Local Customer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg" },
{ id: "t5", name: "Emily B.", role: "Client", company: "Local Customer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-wearing-jewelry-makeup_23-2150738183.jpg" },
]}
kpiItems={[
{ value: "4.9", label: "Google Rating" },
{ value: "12k", label: "Instagram Followers" },
{ value: "500+", label: "5-Star Reviews" },
]}
title="Client Stories"
description="Hear from our happy clients about their experiences at Piercing 4You."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "How long does it take to heal?",
content: "Healing times vary by area, typically ranging from 4 weeks to 6 months.",
},
{
id: "q2",
title: "Do you need an appointment?",
content: "While we accept walk-ins, we recommend scheduling an appointment to ensure availability.",
},
{
id: "q3",
title: "Is it painful?",
content: "Most clients describe the sensation as a quick pinch, manageable with professional guidance.",
},
]}
title="Frequently Asked"
description="Everything you need to know about your next piercing session."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "How long does it take to heal?", content: "Healing times vary by area, typically ranging from 4 weeks to 6 months." },
{ id: "q2", title: "Do you need an appointment?", content: "While we accept walk-ins, we recommend scheduling an appointment to ensure availability." },
{ id: "q3", title: "Is it painful?", content: "Most clients describe the sensation as a quick pinch, manageable with professional guidance." },
]}
title="Frequently Asked"
description="Everything you need to know about your next piercing session."
faqsAnimation="slide-up"
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Studio X",
"BodyMod Hub",
"Jewel Elite",
"SafePiercing Org",
"UrbanInk & Piercing",
"GoldenStandard",
"PiercingMag",
]}
title="Trusted Partners"
description="Collaborating with leaders in the piercing and jewelry industry."
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["Studio X", "BodyMod Hub", "Jewel Elite", "SafePiercing Org", "UrbanInk & Piercing", "GoldenStandard", "PiercingMag"]}
title="Trusted Partners"
description="Collaborating with leaders in the piercing and jewelry industry."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "plain",
}}
title="Ready to get pierced?"
description="Book your appointment online today. Your new look awaits at Piercing 4You."
imageSrc="http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096448.jpg"
mediaAnimation="slide-up"
tag="Get In Touch"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "plain" }}
title="Ready to get pierced?"
description="Book your appointment online today. Your new look awaits at Piercing 4You."
imageSrc="http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096448.jpg"
mediaAnimation="slide-up"
tag="Get In Touch"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Piercing 4You"
columns={[
{
title: "Services",
items: [
{
label: "Ear Piercing",
href: "#",
},
{
label: "Body Modification",
href: "#",
},
{
label: "Jewelry Shop",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Aftercare Guide",
href: "#",
},
{
label: "Contact Us",
href: "#",
},
{
label: "FAQs",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Piercing 4You"
columns={[
{ title: "Services", items: [{ label: "Ear Piercing", href: "#" }, { label: "Body Modification", href: "#" }, { label: "Jewelry Shop", href: "#" }] },
{ title: "Support", items: [{ label: "Aftercare Guide", href: "#" }, { label: "Contact Us", href: "#" }, { label: "FAQs", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}