Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-04-30 11:06:39 +00:00

View File

@@ -10,396 +10,180 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Shield } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="aurora"
cardStyle="gradient-bordered"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="aurora"
cardStyle="gradient-bordered"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Works",
id: "products",
},
{
name: "Team",
id: "team",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="InkMaster Studio"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Works", id: "products" },
{ name: "Team", id: "team" },
{ name: "Contact", id: "contact" },
]}
brandName="InkMaster Studio"
button={{ text: "Book Consultation", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "plain",
}}
title="Artistry Written in Ink"
description="Experience premium, custom tattoo artistry in a clean, professional studio environment designed for your comfort and vision."
testimonials={[
{
name: "Alice M.",
handle: "@alicem",
testimonial: "The best studio I've ever visited. Incredible artists and sterile environment.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/active-blonde-girl-posing-studio_176420-29654.jpg",
},
{
name: "Mark D.",
handle: "@markd",
testimonial: "Absolutely obsessed with my sleeve. The detail is unmatched.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg",
},
{
name: "Sarah P.",
handle: "@sarahp",
testimonial: "Very professional and friendly team. My tattoo healed perfectly.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg",
},
{
name: "Jake L.",
handle: "@jakel",
testimonial: "They captured my vision exactly. Highly recommend to everyone.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bearded-stylish-man-sitting-cafe_273609-4482.jpg",
},
{
name: "Chloe B.",
handle: "@chloeb",
testimonial: "Cleanliness and artistry combine perfectly here. Truly gifted masters.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-headphones-neck-points_141793-89059.jpg",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/low-angle-man-tattooing-with-gloves_23-2149525949.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/side-view-smiley-tattoo-artist_23-2149525988.jpg",
alt: "Artist portrait 1",
},
{
src: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_176474-99783.jpg",
alt: "Artist portrait 2",
},
{
src: "http://img.b2bpic.net/free-photo/blonde-man-his-his-greenhouse_53876-98136.jpg",
alt: "Artist portrait 3",
},
{
src: "http://img.b2bpic.net/free-photo/young-delivery-woman-blue-uniform-cap-happy-positive-smiling-cheerfully-standing-white-wall_141793-63943.jpg",
alt: "Artist portrait 4",
},
{
src: "http://img.b2bpic.net/free-photo/redhead-bearded-male-with-tattoos-his-arms-posing-grey-background_613910-13731.jpg",
alt: "Artist portrait 5",
},
]}
avatarText="Trusted by 5,000+ Ink Enthusiasts"
marqueeItems={[
{
type: "text",
text: "FINE LINE",
},
{
type: "text",
text: "TRADITIONAL",
},
{
type: "text",
text: "REALISM",
},
{
type: "text",
text: "GEOMETRIC",
},
{
type: "text",
text: "BLACKWORK",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{ variant: "plain" }}
title="Artistry Written in Ink"
description="Experience premium, custom tattoo artistry in a clean, professional studio environment designed for your comfort and vision."
testimonials={[
{ name: "Alice M.", handle: "@alicem", testimonial: "The best studio I've ever visited. Incredible artists and sterile environment.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/active-blonde-girl-posing-studio_176420-29654.jpg" },
{ name: "Mark D.", handle: "@markd", testimonial: "Absolutely obsessed with my sleeve. The detail is unmatched.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg" },
{ name: "Sarah P.", handle: "@sarahp", testimonial: "Very professional and friendly team. My tattoo healed perfectly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg" },
{ name: "Jake L.", handle: "@jakel", testimonial: "They captured my vision exactly. Highly recommend to everyone.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/bearded-stylish-man-sitting-cafe_273609-4482.jpg" },
{ name: "Chloe B.", handle: "@chloeb", testimonial: "Cleanliness and artistry combine perfectly here. Truly gifted masters.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-headphones-neck-points_141793-89059.jpg" },
]}
imageSrc="http://img.b2bpic.net/free-photo/low-angle-man-tattooing-with-gloves_23-2149525949.jpg"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/side-view-smiley-tattoo-artist_23-2149525988.jpg", alt: "Artist portrait 1" },
{ src: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_176474-99783.jpg", alt: "Artist portrait 2" },
{ src: "http://img.b2bpic.net/free-photo/blonde-man-his-his-greenhouse_53876-98136.jpg", alt: "Artist portrait 3" },
{ src: "http://img.b2bpic.net/free-photo/young-delivery-woman-blue-uniform-cap-happy-positive-smiling-cheerfully-standing-white-wall_141793-63943.jpg", alt: "Artist portrait 4" },
{ src: "http://img.b2bpic.net/free-photo/redhead-bearded-male-with-tattoos-his-arms-posing-grey-background_613910-13731.jpg", alt: "Artist portrait 5" },
]}
avatarText="Trusted by 5,000+ Ink Enthusiasts"
marqueeItems={[{ type: "text", text: "FINE LINE" }, { type: "text", text: "TRADITIONAL" }, { type: "text", text: "REALISM" }, { type: "text", text: "GEOMETRIC" }, { type: "text", text: "BLACKWORK" }]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Philosophy"
title="Mastering the Art of Ink"
description="We believe every tattoo tells a story, and we're here to help you articulate yours through precise lines and artistic vision."
subdescription="Our studio maintains the highest standards of hygiene and artistic excellence to provide an unforgettable experience."
icon={Shield}
imageSrc="http://img.b2bpic.net/free-photo/asian-vlogger-recording-livestream_482257-121911.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Philosophy"
title="Mastering the Art of Ink"
description="We believe every tattoo tells a story, and we're here to help you articulate yours through precise lines and artistic vision."
subdescription="Our studio maintains the highest standards of hygiene and artistic excellence to provide an unforgettable experience."
icon={Shield}
imageSrc="http://img.b2bpic.net/free-photo/asian-vlogger-recording-livestream_482257-121911.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Floral Sleeve",
price: "$1,200+",
imageSrc: "http://img.b2bpic.net/free-vector/vintage-tattoo-dagger-shape-concept_225004-1466.jpg",
},
{
id: "p2",
name: "Geometric Mandala",
price: "$600+",
imageSrc: "http://img.b2bpic.net/free-photo/black-color-brush-strokes-forming-circular-shape-white-surface_23-2148079276.jpg",
},
{
id: "p3",
name: "Minimalist Script",
price: "$200+",
imageSrc: "http://img.b2bpic.net/free-vector/colorless-floral-decoration-element-set_23-2148192624.jpg",
},
{
id: "p4",
name: "Traditional Sailor",
price: "$450+",
imageSrc: "http://img.b2bpic.net/free-photo/slowly-flowing-ink-droplet_23-2147786702.jpg",
},
{
id: "p5",
name: "Hyperreal Portrait",
price: "$1,500+",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-combination-facial-features_23-2150038585.jpg",
},
{
id: "p6",
name: "Tribal Ornament",
price: "$750+",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-chinese-ink-concept_23-2148785875.jpg",
},
]}
title="Featured Portfolios"
description="Browse our artists' latest work across multiple styles."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Floral Sleeve", price: "$1,200+", imageSrc: "http://img.b2bpic.net/free-vector/vintage-tattoo-dagger-shape-concept_225004-1466.jpg" },
{ id: "p2", name: "Geometric Mandala", price: "$600+", imageSrc: "http://img.b2bpic.net/free-photo/black-color-brush-strokes-forming-circular-shape-white-surface_23-2148079276.jpg" },
{ id: "p3", name: "Minimalist Script", price: "$200+", imageSrc: "http://img.b2bpic.net/free-vector/colorless-floral-decoration-element-set_23-2148192624.jpg" },
{ id: "p4", name: "Traditional Sailor", price: "$450+", imageSrc: "http://img.b2bpic.net/free-photo/slowly-flowing-ink-droplet_23-2147786702.jpg" },
{ id: "p5", name: "Hyperreal Portrait", price: "$1,500+", imageSrc: "http://img.b2bpic.net/free-photo/abstract-combination-facial-features_23-2150038585.jpg" },
{ id: "p6", name: "Tribal Ornament", price: "$750+", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-chinese-ink-concept_23-2148785875.jpg" },
]}
title="Featured Portfolios"
description="Browse our artists' latest work across multiple styles."
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
members={[
{
id: "t1",
name: "Elena Thorne",
role: "Fine Line Specialist",
imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg",
},
{
id: "t2",
name: "Marcus Kane",
role: "Traditional Master",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-paint-tubes_23-2148023578.jpg",
},
{
id: "t3",
name: "Jade Rivera",
role: "Realism & Portraiture",
imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479238.jpg",
},
]}
title="Meet Our Artists"
description="Our dedicated team of professionals brings decades of combined experience to your vision."
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
members={[
{ id: "t1", name: "Elena Thorne", role: "Fine Line Specialist", imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg" },
{ id: "t2", name: "Marcus Kane", role: "Traditional Master", imageSrc: "http://img.b2bpic.net/free-photo/close-up-paint-tubes_23-2148023578.jpg" },
{ id: "t3", name: "Jade Rivera", role: "Realism & Portraiture", imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479238.jpg" },
]}
title="Meet Our Artists"
description="Our dedicated team of professionals brings decades of combined experience to your vision."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="scale-rotate"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "12+",
description: "Years of Excellence",
},
{
id: "m2",
value: "5k+",
description: "Happy Clients",
},
{
id: "m3",
value: "20k+",
description: "Hours of Artistry",
},
]}
title="Studio Impact"
description="Years of dedication to the art of tattooing."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="scale-rotate"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "12+", description: "Years of Excellence" },
{ id: "m2", value: "5k+", description: "Happy Clients" },
{ id: "m3", value: "20k+", description: "Hours of Artistry" },
]}
title="Studio Impact"
description="Years of dedication to the art of tattooing."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
textboxLayout="default"
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
testimonials={[
{
id: "test-1",
name: "Alice M.",
role: "Designer",
company: "Creative Co",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-male-with-crossed-tattooed-arms-dressed-black-t-shirt-tweed-hat_613910-9137.jpg",
},
{
id: "test-2",
name: "Mark D.",
role: "Entrepreneur",
company: "Startup",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/drawings-about-legal-profession_23-2151190610.jpg",
},
{
id: "test-3",
name: "Sarah P.",
role: "Marketing",
company: "Growth Co",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/dilligent-focused-tattoo-artist-is-creating-new-tattoo-young-woman-s-hand-tatoo-studio_613910-5857.jpg",
},
{
id: "test-4",
name: "Jake L.",
role: "Student",
company: "University",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/female-hand-painting-glass-jar-with-paint-brush-wooden-desk_23-2148193661.jpg",
},
{
id: "test-5",
name: "Chloe B.",
role: "Artist",
company: "Freelance",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-portrait-wearing-glasses-isolated_273609-48220.jpg",
},
]}
title="Client Stories"
description="What our clients say about their studio experience."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
textboxLayout="default"
gridVariant="asymmetric-60-wide-40-narrow"
animationType="slide-up"
useInvertedBackground={false}
testimonials={[
{ id: "test-1", name: "Alice M.", role: "Designer", company: "Creative Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-male-with-crossed-tattooed-arms-dressed-black-t-shirt-tweed-hat_613910-9137.jpg" },
{ id: "test-2", name: "Mark D.", role: "Entrepreneur", company: "Startup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/drawings-about-legal-profession_23-2151190610.jpg" },
{ id: "test-3", name: "Sarah P.", role: "Marketing", company: "Growth Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dilligent-focused-tattoo-artist-is-creating-new-tattoo-young-woman-s-hand-tatoo-studio_613910-5857.jpg" },
{ id: "test-4", name: "Jake L.", role: "Student", company: "University", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-hand-painting-glass-jar-with-paint-brush-wooden-desk_23-2148193661.jpg" },
{ id: "test-5", name: "Chloe B.", role: "Artist", company: "Freelance", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-portrait-wearing-glasses-isolated_273609-48220.jpg" },
]}
title="Client Stories"
description="What our clients say about their studio experience."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "How do I book an appointment?",
content: "You can fill out our contact form or visit the studio.",
},
{
id: "q2",
title: "Do I need a consultation?",
content: "Yes, for custom pieces we always recommend a short consultation.",
},
{
id: "q3",
title: "What should I bring?",
content: "Just bring a photo ID and your design reference if you have one.",
},
]}
sideTitle="Common Questions"
sideDescription="Everything you need to know about our process."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "How do I book an appointment?", content: "You can fill out our contact form or visit the studio." },
{ id: "q2", title: "Do I need a consultation?", content: "Yes, for custom pieces we always recommend a short consultation." },
{ id: "q3", title: "What should I bring?", content: "Just bring a photo ID and your design reference if you have one." },
]}
sideTitle="Common Questions"
sideDescription="Everything you need to know about our process."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "plain",
}}
text="Ready to get inked? Book your consultation today and bring your artistic vision to life."
buttons={[
{
text: "Book Appointment",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "plain" }}
text="Ready to get inked? Book your consultation today and bring your artistic vision to life."
buttons={[{ text: "Book Appointment", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Studio",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Portfolio",
href: "#products",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Booking",
href: "#contact",
},
],
},
]}
bottomLeftText="© 2024 InkMaster Studio"
bottomRightText="Privacy Policy"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Studio", items: [{ label: "About Us", href: "#about" }, { label: "Portfolio", href: "#products" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Booking", href: "#contact" }] },
]}
bottomLeftText="© 2024 InkMaster Studio"
bottomRightText="Privacy Policy"
/>
</div>
</ReactLenis>
</ThemeProvider>
);