Merge version_1 into main #2
302
src/app/page.tsx
302
src/app/page.tsx
@@ -20,27 +20,22 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Jtog Tattoos"
|
||||
/>
|
||||
@@ -49,95 +44,31 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Ink & Steel Crafted to Last"
|
||||
description="At Jtog, we blend artistic precision with professional care. Your vision, our craft—delivering timeless tattoos and refined piercings in a safe, creative environment."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
handle: "@sarahink",
|
||||
testimonial: "The attention to detail here is incredible. Best tattoo experience I've had.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-confident-way_23-2148974038.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jason Vance",
|
||||
handle: "@jasonpierced",
|
||||
testimonial: "Super clean studio and very knowledgeable. Will definitely be back.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-wearing-casual-white-shirt-isolated-background-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-6551.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Rodriguez",
|
||||
handle: "@elenatattoo",
|
||||
testimonial: "Professionalism at its finest. My piercing healed perfectly.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hispanic-man-with-tattoos-standing-yellow-background-pointing-aside-worried-nervous-with-both-hands-concerned-surprised-expression_839833-31477.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark D.",
|
||||
handle: "@markd_ink",
|
||||
testimonial: "Amazing artistry and a really welcoming vibe.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-is-working-cafe-concept-freelancing-coffee-laptop_1321-898.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chloe T.",
|
||||
handle: "@chloepierce",
|
||||
testimonial: "Fast, safe, and beautiful work. Highly recommend Jtog.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-showing-her-white-perfect-teeth-pointing-mouth-looking-happy-standing-t-shirt-against-white-background_176420-45434.jpg",
|
||||
},
|
||||
{ name: "Sarah Miller", handle: "@sarahink", testimonial: "The attention to detail here is incredible. Best tattoo experience I've had.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-confident-way_23-2148974038.jpg" },
|
||||
{ name: "Jason Vance", handle: "@jasonpierced", testimonial: "Super clean studio and very knowledgeable. Will definitely be back.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-wearing-casual-white-shirt-isolated-background-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-6551.jpg" },
|
||||
{ name: "Elena Rodriguez", handle: "@elenatattoo", testimonial: "Professionalism at its finest. My piercing healed perfectly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/hispanic-man-with-tattoos-standing-yellow-background-pointing-aside-worried-nervous-with-both-hands-concerned-surprised-expression_839833-31477.jpg" },
|
||||
{ name: "Mark D.", handle: "@markd_ink", testimonial: "Amazing artistry and a really welcoming vibe.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-is-working-cafe-concept-freelancing-coffee-laptop_1321-898.jpg" },
|
||||
{ name: "Chloe T.", handle: "@chloepierce", testimonial: "Fast, safe, and beautiful work. Highly recommend Jtog.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-showing-her-white-perfect-teeth-pointing-mouth-looking-happy-standing-t-shirt-against-white-background_176420-45434.jpg" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tattoo-artist-doing-her-job-medium-shot_23-2149445983.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tattoo-artist-doing-her-job-medium-shot_23-2149445983.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/master-making-tattoo-with-needle-machine_23-2147833979.jpg",
|
||||
alt: "Master making tattoo with needle machine",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-creative-master-with-dreadlocks-is-working-new-peace-big-leg-tattoo-customer_613910-19715.jpg",
|
||||
alt: "Beautiful creative master with dreadlocks is working on new peace of big leg tattoo for customer.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tattoo-artist-working-side-view_23-2149445965.jpg",
|
||||
alt: "Tattoo artist working side view",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tattoo-salon-process-process-getting-tattoo-body-man-tattoo-parlor_1321-3361.jpg",
|
||||
alt: "Tattoo salon process. the process of getting a tattoo on the body, a man in a tattoo parlor",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-tattoo-artist-wearing-gloves_23-2149445959.jpg",
|
||||
alt: "Side view tattoo artist wearing gloves",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/master-making-tattoo-with-needle-machine_23-2147833979.jpg", alt: "Master making tattoo with needle machine" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-creative-master-with-dreadlocks-is-working-new-peace-big-leg-tattoo-customer_613910-19715.jpg", alt: "Beautiful creative master with dreadlocks is working on new peace of big leg tattoo for customer." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/tattoo-artist-working-side-view_23-2149445965.jpg", alt: "Tattoo artist working side view" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/tattoo-salon-process-process-getting-tattoo-body-man-tattoo-parlor_1321-3361.jpg", alt: "Tattoo salon process. the process of getting a tattoo on the body, a man in a tattoo parlor" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-tattoo-artist-wearing-gloves_23-2149445959.jpg", alt: "Side view tattoo artist wearing gloves" }
|
||||
]}
|
||||
avatarText="Trusted by 5000+ clients"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Professional Studio",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Sterile Equipment",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Custom Designs",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Expert Artists",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Safe Piercings",
|
||||
},
|
||||
{ type: "text", text: "Professional Studio" },
|
||||
{ type: "text-icon", text: "Sterile Equipment", icon: ShieldCheck },
|
||||
{ type: "text", text: "Custom Designs" },
|
||||
{ type: "text-icon", text: "Expert Artists", icon: Award },
|
||||
{ type: "text", text: "Safe Piercings" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -146,12 +77,7 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Mastering the Art of Expression"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Session",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Session", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -161,30 +87,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Custom Tattoos",
|
||||
description: "Original designs tailored to your unique style and vision.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Palette,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-putting-draft-tattoo-arm_23-2147834060.jpg",
|
||||
imageAlt: "Master putting draft of tattoo on arm",
|
||||
},
|
||||
{
|
||||
title: "Precision Piercing",
|
||||
description: "Safe, professional piercing services with high-quality jewelry.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Star,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattoo-artist-doing-her-job-medium-shot_23-2149445983.jpg?_wi=2",
|
||||
imageAlt: "Master putting draft of tattoo on arm",
|
||||
},
|
||||
{
|
||||
title: "Aftercare Guidance",
|
||||
description: "Professional advice to ensure your art and piercings heal beautifully.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: ShieldCheck,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-making-tattoo-with-machine-leg_23-2147833987.jpg?_wi=1",
|
||||
imageAlt: "Master putting draft of tattoo on arm",
|
||||
},
|
||||
{ title: "Custom Tattoos", description: "Original designs tailored to your unique style and vision.", bentoComponent: "reveal-icon", icon: Palette },
|
||||
{ title: "Precision Piercing", description: "Safe, professional piercing services with high-quality jewelry.", bentoComponent: "reveal-icon", icon: Star },
|
||||
{ title: "Aftercare Guidance", description: "Professional advice to ensure your art and piercings heal beautifully.", bentoComponent: "reveal-icon", icon: ShieldCheck }
|
||||
]}
|
||||
title="Comprehensive Studio Services"
|
||||
description="From custom ink to precision piercings, we provide high-end services in a sterile, professional space."
|
||||
@@ -198,42 +103,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Floral Sleeve",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479253.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Geometric Ink",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-making-tattoo-with-machine-leg_23-2147833987.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Gold Hoop Piercing",
|
||||
price: "$80",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-charming-blonde-girl-posing-studio_176420-29653.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Backpiece Art",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-handsome-bearded-tattooed-topless-man-with-purple-eye-patches-mask-posing-camera-pink_343596-3531.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Titanium Jewelry",
|
||||
price: "$60",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattooed-hands-coffee-laptop_1321-882.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Minimalist Tattoo",
|
||||
price: "$150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/reflection-bearded-man-barbershop-mirror_1304-2779.jpg",
|
||||
},
|
||||
{ id: "1", name: "Floral Sleeve", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479253.jpg" },
|
||||
{ id: "2", name: "Geometric Ink", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/master-making-tattoo-with-machine-leg_23-2147833987.jpg" },
|
||||
{ id: "3", name: "Gold Hoop Piercing", price: "$80", imageSrc: "http://img.b2bpic.net/free-photo/portrait-charming-blonde-girl-posing-studio_176420-29653.jpg" },
|
||||
{ id: "4", name: "Backpiece Art", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/european-handsome-bearded-tattooed-topless-man-with-purple-eye-patches-mask-posing-camera-pink_343596-3531.jpg" },
|
||||
{ id: "5", name: "Titanium Jewelry", price: "$60", imageSrc: "http://img.b2bpic.net/free-photo/tattooed-hands-coffee-laptop_1321-882.jpg" },
|
||||
{ id: "6", name: "Minimalist Tattoo", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/reflection-bearded-man-barbershop-mirror_1304-2779.jpg" }
|
||||
]}
|
||||
title="Artistic Highlights"
|
||||
description="A glimpse into our studio's custom tattoo and high-end jewelry work."
|
||||
@@ -247,27 +122,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "5000+",
|
||||
title: "Happy Clients",
|
||||
description: "Individual stories and art.",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "12",
|
||||
title: "Years Experience",
|
||||
description: "Crafting timeless ink.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "100%",
|
||||
title: "Safety Rated",
|
||||
description: "Sterile studio protocols.",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{ id: "1", value: "5000+", title: "Happy Clients", description: "Individual stories and art.", icon: Users },
|
||||
{ id: "2", value: "12", title: "Years Experience", description: "Crafting timeless ink.", icon: Award },
|
||||
{ id: "3", value: "100%", title: "Safety Rated", description: "Sterile studio protocols.", icon: ShieldCheck }
|
||||
]}
|
||||
title="Our Studio Impact"
|
||||
description="Trusted by our community for quality, safety, and creative excellence."
|
||||
@@ -279,21 +136,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "Yes, for piercings, though booking is recommended for tattoos.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What is the age requirement?",
|
||||
content: "Clients must be 18+ for tattoos and require ID.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "How do I care for my tattoo?",
|
||||
content: "Keep it clean, hydrated, and out of direct sun during the healing process.",
|
||||
},
|
||||
{ id: "1", title: "Do you accept walk-ins?", content: "Yes, for piercings, though booking is recommended for tattoos." },
|
||||
{ id: "2", title: "What is the age requirement?", content: "Clients must be 18+ for tattoos and require ID." },
|
||||
{ id: "3", title: "How do I care for my tattoo?", content: "Keep it clean, hydrated, and out of direct sun during the healing process." }
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about our tattoo and piercing services."
|
||||
@@ -307,46 +152,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
handle: "@sarah",
|
||||
testimonial: "Absolutely professional work. My tattoo looks perfect.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattooed-bearded-man-white-shirt-black-hat-write-notes-notepad_343059-1282.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jason Vance",
|
||||
handle: "@jason",
|
||||
testimonial: "Very clean environment. Highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/men-doing-makeup-indoors_23-2150245069.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena R.",
|
||||
handle: "@elena",
|
||||
testimonial: "Expert piercing and great jewelry selection.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-working-side-view_23-2149445966.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Mark D.",
|
||||
handle: "@markd",
|
||||
testimonial: "Jtog is the only place I trust for my sleeves.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-arm-client-tattoo_23-2147834110.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Chloe T.",
|
||||
handle: "@chloe",
|
||||
testimonial: "Safe, professional, and friendly artists.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-tattoos-wearing-headphones-listens-music-draws-notebook_1321-940.jpg",
|
||||
},
|
||||
{ id: "1", name: "Sarah Miller", handle: "@sarah", testimonial: "Absolutely professional work. My tattoo looks perfect.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/tattooed-bearded-man-white-shirt-black-hat-write-notes-notepad_343059-1282.jpg" },
|
||||
{ id: "2", name: "Jason Vance", handle: "@jason", testimonial: "Very clean environment. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/men-doing-makeup-indoors_23-2150245069.jpg" },
|
||||
{ id: "3", name: "Elena R.", handle: "@elena", testimonial: "Expert piercing and great jewelry selection.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-working-side-view_23-2149445966.jpg" },
|
||||
{ id: "4", name: "Mark D.", handle: "@markd", testimonial: "Jtog is the only place I trust for my sleeves.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-arm-client-tattoo_23-2147834110.jpg" },
|
||||
{ id: "5", name: "Chloe T.", handle: "@chloe", testimonial: "Safe, professional, and friendly artists.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-tattoos-wearing-headphones-listens-music-draws-notebook_1321-940.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Stories"
|
||||
@@ -357,9 +167,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Connect"
|
||||
title="Book Your Appointment"
|
||||
description="Ready for your next piece? Send us a message or book your consultation today."
|
||||
@@ -371,14 +179,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Jtog Tattoos & Piercing"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Instagram", href: "https://instagram.com" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user