Merge version_1 into main #2
333
src/app/page.tsx
333
src/app/page.tsx
@@ -15,229 +15,134 @@ import { Shield } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Experience",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Artists",
|
||||
id: "artists",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Dapper Dog Tattoo"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Experience", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Artists", id: "artists" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Dapper Dog Tattoo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="ANNAPOLIS PREMIER TATTOO EXPERIENCE"
|
||||
description="Precision artistry meets chill professionalism—895 fivestar reviews, eight elite artists, 55 Maryland Ave. Where every line counts."
|
||||
buttons={[
|
||||
{
|
||||
text: "CLAIM YOUR CHAIR",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C9fZa1xasUdPYrwIOG9DQGpmTv/uploaded-1775802972656-3xix9wrt.png?_wi=1"
|
||||
imageAlt="Dapper Dog Tattoo Logo"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="ANNAPOLIS PREMIER TATTOO EXPERIENCE"
|
||||
description="Precision artistry meets chill professionalism—895 fivestar reviews, eight elite artists, 55 Maryland Ave. Where every line counts."
|
||||
buttons={[{ text: "CLAIM YOUR CHAIR", href: "#contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C9fZa1xasUdPYrwIOG9DQGpmTv/uploaded-1775802972656-3xix9wrt.png"
|
||||
imageAlt="Dapper Dog Tattoo Logo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Philosophy"
|
||||
title="Where Art Meets Precision"
|
||||
description="At Dapper Dog, we believe in the sanctity of your skin. Our studio combines a high-end, comfortable environment with elite artistry to ensure every tattoo is a legacy piece."
|
||||
subdescription="With over 800+ five-star experiences, our commitment to clean, professional, and inspired tattooing remains our cornerstone."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-adult-with-transgender-scar_23-2149488850.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Philosophy"
|
||||
title="Where Art Meets Precision"
|
||||
description="At Dapper Dog, we believe in the sanctity of your skin. Our studio combines a high-end, comfortable environment with elite artistry to ensure every tattoo is a legacy piece."
|
||||
subdescription="With over 800+ five-star experiences, our commitment to clean, professional, and inspired tattooing remains our cornerstone."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-adult-with-transgender-scar_23-2149488850.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="artists" data-section="artists">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "team-1",
|
||||
groupTitle: "Elite Artist Collective",
|
||||
members: [
|
||||
{
|
||||
id: "a1",
|
||||
title: "Lead Realism Artist",
|
||||
subtitle: "Black & Grey Specialist",
|
||||
detail: "15 years of experience in custom realism pieces.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-with-tattoos-arms-dressed-military-jacket-wall-brick_613910-3645.jpg",
|
||||
},
|
||||
{
|
||||
id: "a2",
|
||||
title: "Modern Traditional",
|
||||
subtitle: "Bold Lines, Sharp Color",
|
||||
detail: "Master of classic motifs with a modern sharp aesthetic.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-expirienced-tattoo-artist-glasses-is-tuning-her-new-tattoo-machine-before-tattooing-session_613910-6063.jpg",
|
||||
},
|
||||
{
|
||||
id: "a3",
|
||||
title: "Illustrative Specialist",
|
||||
subtitle: "Bespoke Design",
|
||||
detail: "Expert in fine-line detail and custom storytelling.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/focused-leather-designer-is-working-his-new-project-workshop_613910-17064.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C9fZa1xasUdPYrwIOG9DQGpmTv/uploaded-1775802972656-3xix9wrt.png?_wi=2",
|
||||
imageAlt: "User provided image",
|
||||
},
|
||||
]}
|
||||
title="Meet The Collective"
|
||||
description="Our team represents the pinnacle of Annapolis talent, dedicated to your vision."
|
||||
/>
|
||||
</div>
|
||||
<div id="artists" data-section="artists">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "team-1", groupTitle: "Elite Artist Collective", members: [
|
||||
{
|
||||
id: "a1", title: "Lead Realism Artist", subtitle: "Black & Grey Specialist", detail: "15 years of experience in custom realism pieces.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-with-tattoos-arms-dressed-military-jacket-wall-brick_613910-3645.jpg"
|
||||
},
|
||||
{
|
||||
id: "a2", title: "Modern Traditional", subtitle: "Bold Lines, Sharp Color", detail: "Master of classic motifs with a modern sharp aesthetic.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-expirienced-tattoo-artist-glasses-is-tuning-her-new-tattoo-machine-before-tattooing-session_613910-6063.jpg"
|
||||
},
|
||||
{
|
||||
id: "a3", title: "Illustrative Specialist", subtitle: "Bespoke Design", detail: "Expert in fine-line detail and custom storytelling.", imageSrc: "http://img.b2bpic.net/free-photo/focused-leather-designer-is-working-his-new-project-workshop_613910-17064.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Meet The Collective"
|
||||
description="Our team represents the pinnacle of Annapolis talent, dedicated to your vision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-beautiful-girl-smiling-winking-showing-tongue_176420-9434.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah M.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-20128.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "David W.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattoo-artist-doing-her-job-medium-shot_23-2149445983.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jamie L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479237.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Chris B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-stylish-man-sitting-cafe_273609-4483.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="What Clients Say"
|
||||
cardTag="Social Proof"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex R.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-beautiful-girl-smiling-winking-showing-tongue_176420-9434.jpg" },
|
||||
{ id: "2", name: "Sarah M.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-20128.jpg" },
|
||||
{ id: "3", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/tattoo-artist-doing-her-job-medium-shot_23-2149445983.jpg" },
|
||||
{ id: "4", name: "Jamie L.", imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479237.jpg" },
|
||||
{ id: "5", name: "Chris B.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-stylish-man-sitting-cafe_273609-4483.jpg" },
|
||||
]}
|
||||
cardTitle="What Clients Say"
|
||||
cardTag="Social Proof"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I book an appointment?",
|
||||
content: "Bookings are handled via our contact form or in-person consultation at our studio.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "While we prioritize appointments, we do accommodate walk-ins when our schedule permits.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What is the deposit policy?",
|
||||
content: "Deposits are required to secure your date and ensure artist time dedication.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Studio FAQs"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do I book an appointment?", content: "Bookings are handled via our contact form or in-person consultation at our studio." },
|
||||
{ id: "f2", title: "Do you accept walk-ins?", content: "While we prioritize appointments, we do accommodate walk-ins when our schedule permits." },
|
||||
{ id: "f3", title: "What is the deposit policy?", content: "Deposits are required to secure your date and ensure artist time dedication." },
|
||||
]}
|
||||
sideTitle="Studio FAQs"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Ready to Start?"
|
||||
description="The elite experience awaits. Get in touch to schedule your consultation."
|
||||
buttons={[
|
||||
{
|
||||
text: "INQUIRE NOW",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Booking"
|
||||
title="Ready to Start?"
|
||||
description="The elite experience awaits. Get in touch to schedule your consultation."
|
||||
buttons={[{ text: "INQUIRE NOW", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="DAPPER DOG TATTOO"
|
||||
columns={[
|
||||
{
|
||||
title: "Studio",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Our Artists",
|
||||
href: "#artists",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Dapper Dog Tattoo. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="DAPPER DOG TATTOO"
|
||||
columns={[
|
||||
{
|
||||
title: "Studio", items: [{ label: "About Us", href: "#about" }, { label: "Our Artists", href: "#artists" }],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Dapper Dog Tattoo. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user