245 lines
7.8 KiB
TypeScript
245 lines
7.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
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"
|
|
>
|
|
<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="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="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="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="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>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|