|
|
|
|
@@ -3,14 +3,14 @@
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import ReactLenis from "lenis/react";
|
|
|
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
|
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
|
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
|
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
|
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
|
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
|
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
|
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
|
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
|
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
|
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
return (
|
|
|
|
|
@@ -37,42 +37,29 @@ export default function LandingPage() {
|
|
|
|
|
{
|
|
|
|
|
name: "Contact", id: "contact"},
|
|
|
|
|
]}
|
|
|
|
|
brandName="Slater"
|
|
|
|
|
brandName="ARTIST :: SLATER "
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroSplitDualMedia
|
|
|
|
|
background={{
|
|
|
|
|
variant: "gradient-bars"}}
|
|
|
|
|
title="Dark Ethereal Fine Line Artistry"
|
|
|
|
|
<HeroLogo
|
|
|
|
|
logoText="SLATER"
|
|
|
|
|
description="Professional tattoo artist specializing in delicate bone structures and ethereal fine-line designs. Create your permanent vision with precision."
|
|
|
|
|
tag="Available for Booking"
|
|
|
|
|
buttons={[
|
|
|
|
|
{
|
|
|
|
|
text: "Book Session", href: "#contact"},
|
|
|
|
|
{
|
|
|
|
|
text: "View Portfolio", href: "#portfolio"},
|
|
|
|
|
{ text: "Book Session", href: "#contact" },
|
|
|
|
|
{ text: "View Portfolio", href: "#portfolio" },
|
|
|
|
|
]}
|
|
|
|
|
mediaItems={[
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-vector/skull-with-hand-drawn-wreath_23-2147610865.jpg?_wi=1", imageAlt: "Bone fine line tattoo"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/skull-flower-arrangement-still-life_23-2150569359.jpg?_wi=1", imageAlt: "Tattoo studio aesthetic"}
|
|
|
|
|
]}
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
rating={5}
|
|
|
|
|
ratingText="Trusted by 500+ clients"
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0F1A9wA0hoEJAN6judgd0t0Sz/uploaded-1777443678706-x46y3wh8.jpg"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
|
<MediaAbout
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
title="Slater: The Artist"
|
|
|
|
|
title="SLATER :: The Artist"
|
|
|
|
|
description="With years of experience in fine-line tattooing, Slater specializes in blending anatomical precision with ethereal, haunting aesthetics. Every piece is a unique dialogue between the skin and the bone."
|
|
|
|
|
tag="Philosophy"
|
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512085.jpg"
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0F1A9wA0hoEJAN6judgd0t0Sz/uploaded-1777412749489-3o4tvvq9.jpg"
|
|
|
|
|
imageAlt="Artist portrait"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -80,28 +67,13 @@ export default function LandingPage() {
|
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
|
|
|
<ProductCardTwo
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
gridVariant="uniform-all-items-equal"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
products={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", brand: "Ethereal", name: "Ribcage Detail", price: "Session Work", rating: 5,
|
|
|
|
|
reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/hand-decorative-skeleton-touching-woman-s-shoulder_23-2147903136.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "2", brand: "Ethereal", name: "Skull Study", price: "Session Work", rating: 5,
|
|
|
|
|
reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-vector/four-alchemy-esoteric-icons_24908-77743.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "3", brand: "Ethereal", name: "Hand Anatomy", price: "Session Work", rating: 5,
|
|
|
|
|
reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/top-view-clean-shaven-man-with-tattoos_1122-1461.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "4", brand: "Ethereal", name: "Spinal Fine Line", price: "Session Work", rating: 5,
|
|
|
|
|
reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/abstract-halloween-texture-design_23-2151853402.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "5", brand: "Ethereal", name: "Floral Bones", price: "Session Work", rating: 5,
|
|
|
|
|
reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-death-moth-drawing-illustration_52683-129287.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "6", brand: "Ethereal", name: "Minimalist Anatomy", price: "Session Work", rating: 5,
|
|
|
|
|
reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/elegant-black-ink-drop-water_1112-475.jpg"},
|
|
|
|
|
id: "1", brand: "Ethereal", name: "Coming Soon", price: "", rating: 0,
|
|
|
|
|
reviewCount: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0F1A9wA0hoEJAN6judgd0t0Sz/coming-soon-placeholder.jpg"},
|
|
|
|
|
]}
|
|
|
|
|
title="Portfolio"
|
|
|
|
|
description="A curated selection of recent bone-themed and fine-line works."
|
|
|
|
|
@@ -139,31 +111,25 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardTwo
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
<TestimonialCardSix
|
|
|
|
|
animationType="blur-reveal"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
testimonials={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", name: "Alex R.", role: "Collector", testimonial: "The precision is unmatched. The bone detail feels alive.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-thoughtful-bearded-male-with-tattooed-naked-torso-crossed-arms-sits-chair-dark-grey-background_613910-1780.jpg"},
|
|
|
|
|
id: "1", name: "Alex R.", handle: "@alexr", testimonial: "The precision is unmatched. The bone detail feels alive.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-thoughtful-bearded-male-with-tattooed-naked-torso-crossed-arms-sits-chair-dark-grey-background_613910-1780.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "2", name: "Sam B.", role: "Client", testimonial: "Dark, ethereal, exactly what I envisioned.", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-pointing-book-studying_23-2147737568.jpg"},
|
|
|
|
|
id: "2", name: "Sam B.", handle: "@samb", testimonial: "Dark, ethereal, exactly what I envisioned.", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-pointing-book-studying_23-2147737568.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "3", name: "Jordan P.", role: "Collector", testimonial: "Slater is an artist first, tattooist second.", imageSrc: "http://img.b2bpic.net/free-photo/black-white-photo-old-woman-wearing-hat_250224-37.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "4", name: "Casey W.", role: "Client", testimonial: "So gentle yet so detailed. Incredible atmosphere.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-creative-master-with-dreadlocks-is-working-new-peace-big-leg-tattoo-customer_613910-2923.jpg"},
|
|
|
|
|
{
|
|
|
|
|
id: "5", name: "Jamie M.", role: "Collector", testimonial: "I travel across the country for these lines.", imageSrc: "http://img.b2bpic.net/free-photo/crop-couple-holding-hands-belly_1153-2654.jpg"},
|
|
|
|
|
id: "3", name: "Jordan P.", handle: "@jordanp", testimonial: "Slater is an artist first, tattooist second.", imageSrc: "http://img.b2bpic.net/free-photo/black-white-photo-old-woman-wearing-hat_250224-37.jpg"},
|
|
|
|
|
]}
|
|
|
|
|
title="Client Experience"
|
|
|
|
|
description="What our clients are saying about the Slater experience."
|
|
|
|
|
description=""
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="faq" data-section="faq">
|
|
|
|
|
<FaqSplitMedia
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
<FaqSplitText
|
|
|
|
|
faqs={[
|
|
|
|
|
{
|
|
|
|
|
id: "f1", title: "How do I book?", content: "Use the contact form below and include your ideas, placement, and size."},
|
|
|
|
|
@@ -172,10 +138,10 @@ export default function LandingPage() {
|
|
|
|
|
{
|
|
|
|
|
id: "f3", title: "What is the deposit policy?", content: "A non-refundable deposit is required to secure all booking appointments."},
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-tattoo-artist-doing-her-job_23-2149445982.jpg"
|
|
|
|
|
title="Studio Info"
|
|
|
|
|
description="Common questions about booking and maintenance."
|
|
|
|
|
faqsAnimation="slide-up"
|
|
|
|
|
sideTitle="Studio Info"
|
|
|
|
|
sideDescription="Common questions about booking and maintenance."
|
|
|
|
|
faqsAnimation="blur-reveal"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -218,4 +184,4 @@ export default function LandingPage() {
|
|
|
|
|
</ReactLenis>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
