bender/3daa2d79-b6a3-46ef-8bbf-40524cfed21f
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-11 08:25:57 +00:00
parent 7dbe058fe5
commit e505e4f414
1 changed files with 39 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
src/app/page.tsx
View File

@@ -32,22 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Portfolio",
id: "work",
},
{
name: "About",
id: "about",
},
{
name: "FAQ",
id: "faq",
},
{
name: "Contact",
id: "contact",
},
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
brandName="John Tattoos"
/>
@@ -55,48 +43,17 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "rotated-rays-animated",
}}
background={{ variant: "rotated-rays-animated" }}
title="Mastery in Every Stroke"
description="Experience professional artistry with John. Specializing in custom, intricate, and high-quality tattoo designs tailored to your vision."
buttons={[
{
text: "Book Session",
href: "#contact",
},
]}
buttons={[{ text: "Book Session", href: "#contact" }]}
carouselItems={[
{
id: "h1",
imageSrc: "http://img.b2bpic.net/free-photo/hand-painting-canvas_23-2148002539.jpg",
imageAlt: "Tattoo artist working close up",
},
{
id: "h2",
imageSrc: "http://img.b2bpic.net/free-photo/golden-waterfall-giant-full-moon_23-2152033544.jpg",
imageAlt: "traditional japanese tattoo artwork style",
},
{
id: "h3",
imageSrc: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094604.jpg",
imageAlt: "tattoo studio interior warm lighting",
},
{
id: "h4",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-beautiful-tattooed-girl-smiling-posing-looking-down_176420-9471.jpg",
imageAlt: "woman showing new tattoo arm",
},
{
id: "h5",
imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-pointing-book-studying_23-2147737568.jpg",
imageAlt: "tattoo artist portfolio page background",
},
{
id: "h6",
imageSrc: "http://img.b2bpic.net/free-photo/colourful-painted-blue-red-water_23-2147964115.jpg",
imageAlt: "abstract tattoo ink splash texture",
},
{ id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/hand-painting-canvas_23-2148002539.jpg", imageAlt: "Tattoo artist working close up" },
{ id: "h2", imageSrc: "http://img.b2bpic.net/free-photo/golden-waterfall-giant-full-moon_23-2152033544.jpg", imageAlt: "traditional japanese tattoo artwork style" },
{ id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094604.jpg", imageAlt: "tattoo studio interior warm lighting" },
{ id: "h4", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-beautiful-tattooed-girl-smiling-posing-looking-down_176420-9471.jpg", imageAlt: "woman showing new tattoo arm" },
{ id: "h5", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-pointing-book-studying_23-2147737568.jpg", imageAlt: "tattoo artist portfolio page background" },
{ id: "h6", imageSrc: "http://img.b2bpic.net/free-photo/colourful-painted-blue-red-water_23-2147964115.jpg", imageAlt: "abstract tattoo ink splash texture" }
]}
/>
</div>
@@ -106,21 +63,9 @@ export default function LandingPage() {
useInvertedBackground={false}
title="A Legacy of Ink"
metrics={[
{
icon: Award,
label: "Years Experience",
value: "12+",
},
{
icon: CheckCircle,
label: "Completed Pieces",
value: "2000+",
},
{
icon: Star,
label: "Happy Clients",
value: "100%",
},
{ icon: Award, label: "Years Experience", value: "12+" },
{ icon: CheckCircle, label: "Completed Pieces", value: "2000+" },
{ icon: Star, label: "Happy Clients", value: "100%" }
]}
metricsAnimation="slide-up"
/>
@@ -132,24 +77,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Custom Consultation",
description: "Every design is unique, built around your personality and story.",
imageSrc: "http://img.b2bpic.net/free-vector/20-cv-resume-outline-icon-presentation-vector-line-icons-illustration_1142-17811.jpg",
imageAlt: "shield icon line art",
},
{
title: "Clinical Hygiene",
description: "Professional environment following strict sanitation protocols.",
imageSrc: "http://img.b2bpic.net/free-photo/appointment-schedule-calendar-event-meeting-concept_53876-121132.jpg",
imageAlt: "Appointment Schedule Calendar Event Meeting Concept",
},
{
title: "Versatile Style",
description: "Expert in fine line, traditional, portrait, and modern abstract.",
imageSrc: "http://img.b2bpic.net/free-photo/pencil-icon-left-side_187299-39544.jpg",
imageAlt: "Pencil Icon Left Side",
},
{ title: "Custom Consultation", description: "Every design is unique, built around your personality and story.", imageSrc: "http://img.b2bpic.net/free-vector/20-cv-resume-outline-icon-presentation-vector-line-icons-illustration_1142-17811.jpg", imageAlt: "shield icon line art" },
{ title: "Clinical Hygiene", description: "Professional environment following strict sanitation protocols.", imageSrc: "http://img.b2bpic.net/free-photo/appointment-schedule-calendar-event-meeting-concept_53876-121132.jpg", imageAlt: "Appointment Schedule Calendar Event Meeting Concept" },
{ title: "Versatile Style", description: "Expert in fine line, traditional, portrait, and modern abstract.", imageSrc: "http://img.b2bpic.net/free-photo/pencil-icon-left-side_187299-39544.jpg", imageAlt: "Pencil Icon Left Side" }
]}
title="Why Choose John's Art"
description="Dedication to safety, hygiene, and artistic integrity in every session."
@@ -158,46 +88,17 @@ export default function LandingPage() {
<div id="work" data-section="work">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Full Sleeve Composition",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-vector/kitsuni-esport-vintage-logo_4513-1862.jpg",
},
{
id: "p2",
name: "Fine Line Minimalism",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-vector/vintage-collection-beautiful-tattoos_23-2147563248.jpg",
},
{
id: "p3",
name: "Neo-Traditional Art",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-vector/vibrant-heart-with-snake-wings-tattoo-design-artwork_32991-10984.jpg",
},
{
id: "p4",
name: "Black & Grey Portrait",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/black-white-portrait-man-with-body-tattoos_23-2150774623.jpg",
},
{
id: "p5",
name: "Floral Design",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-vector/black-white-illustration-hand-drawn-skull-rose_474888-7804.jpg",
},
{
id: "p6",
name: "Typography/Script",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-calligrapher-working-project_53876-26153.jpg",
},
{ id: "p1", name: "Full Sleeve Composition", price: "Custom", imageSrc: "http://img.b2bpic.net/free-vector/kitsuni-esport-vintage-logo_4513-1862.jpg" },
{ id: "p2", name: "Fine Line Minimalism", price: "Custom", imageSrc: "http://img.b2bpic.net/free-vector/vintage-collection-beautiful-tattoos_23-2147563248.jpg" },
{ id: "p3", name: "Neo-Traditional Art", price: "Custom", imageSrc: "http://img.b2bpic.net/free-vector/vibrant-heart-with-snake-wings-tattoo-design-artwork_32991-10984.jpg" },
{ id: "p4", name: "Black & Grey Portrait", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/black-white-portrait-man-with-body-tattoos_23-2150774623.jpg" },
{ id: "p5", name: "Floral Design", price: "Custom", imageSrc: "http://img.b2bpic.net/free-vector/black-white-illustration-hand-drawn-skull-rose_474888-7804.jpg" },
{ id: "p6", name: "Typography/Script", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/closeup-calligrapher-working-project_53876-26153.jpg" }
]}
title="Featured Work"
description="Recent commissions demonstrating technical precision."
@@ -210,46 +111,11 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah D.",
handle: "@sarah_ink",
testimonial: "John brought my design to life with incredible detail.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/tattooed-man-drinking-coffee-cafe_1321-902.jpg",
},
{
id: "t2",
name: "Mark L.",
handle: "@markl_99",
testimonial: "The best studio experience I've ever had, very professional.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-smiling-bearded-man-laughing_176420-20398.jpg",
},
{
id: "t3",
name: "Chloe M.",
handle: "@chloem",
testimonial: "Absolutely love my new sleeve piece. Precision work.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-good-mood-with-short-hairstyle-green-sunglasses-modern-hoodie-cool-jeans-smiling-holding-pink-skateboard_197531-18948.jpg",
},
{
id: "t4",
name: "Elena V.",
handle: "@elenavart",
testimonial: "John is a true artist with such steady hands.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-mental-health-day-awareness-illustration_23-2151813313.jpg",
},
{
id: "t5",
name: "Julian R.",
handle: "@julianr",
testimonial: "Professional, clean, and extremely talented. Highly recommend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-caucasian-female-with-tattoos-standing-street-making-cute-face_181624-24338.jpg",
},
{ id: "t1", name: "Sarah D.", handle: "@sarah_ink", testimonial: "John brought my design to life with incredible detail.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/tattooed-man-drinking-coffee-cafe_1321-902.jpg" },
{ id: "t2", name: "Mark L.", handle: "@markl_99", testimonial: "The best studio experience I've ever had, very professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-smiling-bearded-man-laughing_176420-20398.jpg" },
{ id: "t3", name: "Chloe M.", handle: "@chloem", testimonial: "Absolutely love my new sleeve piece. Precision work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-good-mood-with-short-hairstyle-green-sunglasses-modern-hoodie-cool-jeans-smiling-holding-pink-skateboard_197531-18948.jpg" },
{ id: "t4", name: "Elena V.", handle: "@elenavart", testimonial: "John is a true artist with such steady hands.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-mental-health-day-awareness-illustration_23-2151813313.jpg" },
{ id: "t5", name: "Julian R.", handle: "@julianr", testimonial: "Professional, clean, and extremely talented. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-caucasian-female-with-tattoos-standing-street-making-cute-face_181624-24338.jpg" }
]}
showRating={true}
title="What Clients Say"
@@ -261,21 +127,9 @@ export default function LandingPage() {
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "How do I book?",
content: "You can book by using the contact form below or through my Instagram DM.",
},
{
id: "q2",
title: "Is the shop safe?",
content: "We follow the highest industry standards for sanitation.",
},
{
id: "q3",
title: "Do you do cover-ups?",
content: "Yes, I specialize in cover-ups based on the underlying design.",
},
{ id: "q1", title: "How do I book?", content: "You can book by using the contact form below or through my Instagram DM." },
{ id: "q2", title: "Is the shop safe?", content: "We follow the highest industry standards for sanitation." },
{ id: "q3", title: "Do you do cover-ups?", content: "Yes, I specialize in cover-ups based on the underlying design." }
]}
sideTitle="Common Inquiries"
faqsAnimation="blur-reveal"
@@ -286,15 +140,7 @@ export default function LandingPage() {
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Ink Magazine",
"City Tattoo Review",
"National Art Collective",
"Design Weekly",
"Local Artists Guild",
"Tattoo Studio Awards",
"Modern Ink Guide",
]}
names={["Ink Magazine", "City Tattoo Review", "National Art Collective", "Design Weekly", "Local Artists Guild", "Tattoo Studio Awards", "Modern Ink Guide"]}
title="Recognized Excellence"
description="Proudly featured in the industry's leading publications and collections."
/>
@@ -306,21 +152,10 @@ export default function LandingPage() {
title="Start Your Journey"
description="Ready to get inked? Send me a message and let's discuss your project details."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Your Email",
},
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "email", type: "email", placeholder: "Your Email" }
]}
textarea={{
name: "message",
placeholder: "Describe your tattoo idea, size, and placement...",
}}
textarea={{ name: "message", placeholder: "Describe your tattoo idea, size, and placement..." }}
imageSrc="http://img.b2bpic.net/free-photo/smiley-tattoo-artist-medium-shot_23-2149525984.jpg"
/>
</div>
@@ -329,32 +164,8 @@ export default function LandingPage() {
<FooterBaseReveal
logoText="John Tattoos"
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "#about",
},
{
label: "Portfolio",
href: "#work",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Contact",
href: "#contact",
},
],
},
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#work" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
]}
/>
</div>