Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
267
src/app/page.tsx
267
src/app/page.tsx
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user