+
+
+
+ {/* Hero / Header */}
+
+
+
+ {/* Licensing Notice */}
+
+
+
+ {/* Tabs: General vs Transparent Bandage */}
+
+
+
+ {/* Infection Warning */}
+
+
+
+ {/* Healing Timeline */}
+
+
+
+ {/* Contact / Help */}
+
+
+
+ )
+}
diff --git a/components/artist-portfolio.tsx b/components/artist-portfolio.tsx
new file mode 100644
index 000000000..6ff2293cf
--- /dev/null
+++ b/components/artist-portfolio.tsx
@@ -0,0 +1,413 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import Link from "next/link"
+import { ArrowLeft, Star, MapPin, Calendar, Instagram, ExternalLink } from "lucide-react"
+
+// Mock data - in a real app, this would come from a database
+const artistsData = {
+ "1": {
+ id: "1",
+ name: "Sarah Chen",
+ specialty: "Traditional & Neo-Traditional",
+ image: "/professional-female-tattoo-artist-with-traditional.jpg",
+ bio: "Specializing in bold traditional designs with a modern twist. Sarah brings 8 years of experience creating vibrant, timeless tattoos that honor the classic American traditional style while incorporating contemporary elements.",
+ experience: "8 years",
+ rating: 4.9,
+ reviews: 127,
+ location: "Studio A",
+ availability: "Available",
+ styles: ["Traditional", "Neo-Traditional", "American Traditional", "Color Work"],
+ instagram: "@sarahchen_tattoo",
+ portfolio: [
+ {
+ id: 1,
+ image: "/traditional-rose-tattoo-with-bold-colors.jpg",
+ title: "Traditional Rose",
+ category: "Traditional",
+ },
+ {
+ id: 2,
+ image: "/neo-traditional-wolf-tattoo-design.jpg",
+ title: "Neo-Traditional Wolf",
+ category: "Neo-Traditional",
+ },
+ {
+ id: 3,
+ image: "/american-traditional-anchor-tattoo.jpg",
+ title: "American Traditional Anchor",
+ category: "Traditional",
+ },
+ { id: 4, image: "/colorful-traditional-bird-tattoo.jpg", title: "Traditional Bird", category: "Color Work" },
+ { id: 5, image: "/placeholder-jmey3.png", title: "Traditional Eagle", category: "Traditional" },
+ { id: 6, image: "/placeholder-ah8n2.png", title: "Neo-Traditional Snake", category: "Neo-Traditional" },
+ { id: 7, image: "/placeholder-s803z.png", title: "Traditional Panther", category: "Color Work" },
+ { id: 8, image: "/placeholder-e6fqm.png", title: "Traditional Ship", category: "Traditional" },
+ { id: 9, image: "/placeholder-qrydh.png", title: "Neo-Traditional Fox", category: "Neo-Traditional" },
+ { id: 10, image: "/placeholder-s31fj.png", title: "Traditional Dagger", category: "Traditional" },
+ { id: 11, image: "/placeholder-xzjye.png", title: "Traditional Butterfly", category: "Color Work" },
+ { id: 12, image: "/placeholder-mjx9t.png", title: "Neo-Traditional Deer", category: "Neo-Traditional" },
+ { id: 13, image: "/placeholder-882fw.png", title: "Traditional Skull", category: "Traditional" },
+ { id: 14, image: "/placeholder-0h0qb.png", title: "Traditional Lighthouse", category: "Traditional" },
+ { id: 15, image: "/placeholder-mykqu.png", title: "Neo-Traditional Octopus", category: "Neo-Traditional" },
+ { id: 16, image: "/placeholder-jk026.png", title: "Traditional Tiger", category: "Color Work" },
+ { id: 17, image: "/placeholder-ju7df.png", title: "Traditional Swallow", category: "Traditional" },
+ { id: 18, image: "/placeholder-r6l7b.png", title: "Neo-Traditional Moon", category: "Neo-Traditional" },
+ { id: 19, image: "/placeholder-lh3ki.png", title: "Traditional Heart", category: "Traditional" },
+ { id: 20, image: "/placeholder.svg?height=400&width=300", title: "Traditional Koi", category: "Color Work" },
+ ],
+ testimonials: [
+ {
+ name: "Jessica M.",
+ rating: 5,
+ text: "Sarah created the most beautiful traditional rose tattoo for me. Her attention to detail and color work is incredible!",
+ },
+ {
+ name: "Mike R.",
+ rating: 5,
+ text: "Amazing artist! The neo-traditional piece she did exceeded all my expectations. Highly recommend!",
+ },
+ ],
+ },
+ // Add other artists data here...
+}
+
+interface ArtistPortfolioProps {
+ artistId: string
+}
+
+export function ArtistPortfolio({ artistId }: ArtistPortfolioProps) {
+ const [selectedCategory, setSelectedCategory] = useState("All")
+ const [selectedImage, setSelectedImage] = useState
+ 
+
+
+
+
+
+
+
+ + Tattoo Aftercare +
++ Proper aftercare is crucial for the healing and longevity of your new tattoo. Follow these + instructions carefully to ensure the best results. +
+
+
+
+ United Tattoo is proudly licensed by the El Paso County Health Department and fully supports
+ health department regulations to protect the health of our customers.
+
+
+
+
+ setTab(v as any)} className="w-full">
+
+
+ General Tattoo Aftercare
+
+
+ Transparent Bandage Aftercare
+
+
+
+ {/* General Aftercare */}
+
+
+
+ {/* Transparent Bandage */}
+
+
+
+
+
+ {Object.values(generalAftercare).map((phase, idx) => {
+ const Icon = phase.icon
+ return (
+
+
+
+
+
+
+
+
+ )
+ })}
+
+ -
+ {phase.steps.map((s, i) => (
+
-
+
+ {s} +
+ ))}
+
+ {Object.values(transparentBandage).map((phase, idx) => {
+ const Icon = phase.icon
+ return (
+
+
+
+
+
+
+
+
+ )
+ })}
+
+ -
+ {phase.steps.map((s, i) => (
+
-
+
+ {s} +
+ ))}
+
+
+
+
+
+
+
+
+ Important
+
+ If you experience any of these symptoms, contact our studio immediately at{" "}
+
+ (719) 698-9004
+ {" "}
+ or seek urgent medical attention.
+
+
+
+
+
+
+ {infectionWarning.map((sign, i) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ Surface Healing
+
+
+
+
+
+
+
+ Deep Healing
+
+
+
+
+
+
+
+ Complete Healing
+
+
+
+
+
+ 2–3 Weeks
++ The outermost layer of skin typically heals in 2–3 weeks. Continue following aftercare during this time. +
+2–4 Months
++ Deeper layers of skin continue healing. Maintain a consistent moisturizing routine. +
+Up to 6 Months
++ Full healing may take up to 6 months. Protect with SPF and keep moisturized. +
+
+
+
+
+
+
+ Questions?
++ Reach out if you have any aftercare questions or concerns. We’re here to help. +
+
+
+
+
+
+
+ )
+ }
+
+ const categories = ["All", ...Array.from(new Set(artist.portfolio.map((item) => item.category)))]
+ const filteredPortfolio =
+ selectedCategory === "All"
+ ? artist.portfolio
+ : artist.portfolio.filter((item) => item.category === selectedCategory)
+
+ return (
+ Artist not found
+ +
+ {/* Back Button */}
+
+ {/* Left Side - Artist Image */}
+
+
+ {/* Portfolio Section with Split Screen Layout */}
+
+
+
+ {/* Reviews Section */}
+
+
+
+ {/* Contact Section */}
+
+
+
+ {/* Image Modal */}
+ {selectedImage && (
+
+ )
+}
diff --git a/components/artists-grid.tsx b/components/artists-grid.tsx
new file mode 100644
index 000000000..a85f114ff
--- /dev/null
+++ b/components/artists-grid.tsx
@@ -0,0 +1,210 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import Link from "next/link"
+import { Star, MapPin, Calendar } from "lucide-react"
+
+const artists = [
+ {
+ id: "1",
+ name: "Sarah Chen",
+ specialty: "Traditional & Neo-Traditional",
+ image: "/professional-female-tattoo-artist-with-traditional.jpg",
+ bio: "Specializing in bold traditional designs with a modern twist. Sarah brings 8 years of experience creating vibrant, timeless tattoos.",
+ experience: "8 years",
+ rating: 4.9,
+ reviews: 127,
+ location: "Studio A",
+ availability: "Available",
+ styles: ["Traditional", "Neo-Traditional", "American Traditional", "Color Work"],
+ portfolio: [
+ "/traditional-rose-tattoo-with-bold-colors.jpg",
+ "/neo-traditional-wolf-tattoo-design.jpg",
+ "/american-traditional-anchor-tattoo.jpg",
+ "/colorful-traditional-bird-tattoo.jpg",
+ ],
+ },
+ {
+ id: "2",
+ name: "Marcus Rodriguez",
+ specialty: "Realism & Portraits",
+ image: "/professional-male-tattoo-artist-specializing-in-re.jpg",
+ bio: "Master of photorealistic tattoos and detailed portrait work. Marcus has perfected the art of bringing photographs to life on skin.",
+ experience: "12 years",
+ rating: 5.0,
+ reviews: 89,
+ location: "Studio B",
+ availability: "Booked until March",
+ styles: ["Realism", "Portraits", "Black & Grey", "Photorealism"],
+ portfolio: [
+ "/photorealistic-portrait-tattoo-black-and-grey.jpg",
+ "/realistic-animal-tattoo-detailed-shading.jpg",
+ "/black-and-grey-portrait-tattoo-masterpiece.jpg",
+ "/hyperrealistic-eye-tattoo-design.jpg",
+ ],
+ },
+ {
+ id: "3",
+ name: "Luna Kim",
+ specialty: "Fine Line & Minimalist",
+ image: "/professional-female-tattoo-artist-with-delicate-fi.jpg",
+ bio: "Creating elegant, minimalist designs with precision and grace. Luna's delicate touch brings subtle beauty to every piece.",
+ experience: "6 years",
+ rating: 4.8,
+ reviews: 156,
+ location: "Studio C",
+ availability: "Available",
+ styles: ["Fine Line", "Minimalist", "Geometric", "Botanical"],
+ portfolio: [
+ "/delicate-fine-line-flower-tattoo.jpg",
+ "/minimalist-geometric-tattoo-design.jpg",
+ "/fine-line-botanical-tattoo-elegant.jpg",
+ "/simple-line-work-tattoo-artistic.jpg",
+ ],
+ },
+ {
+ id: "4",
+ name: "Jake Thompson",
+ specialty: "Japanese & Oriental",
+ image: "/professional-male-tattoo-artist-with-japanese-styl.jpg",
+ bio: "Traditional Japanese tattooing with authentic techniques passed down through generations. Jake honors the ancient art form.",
+ experience: "15 years",
+ rating: 4.9,
+ reviews: 203,
+ location: "Studio D",
+ availability: "Limited slots",
+ styles: ["Japanese", "Oriental", "Irezumi", "Traditional Japanese"],
+ portfolio: [
+ "/traditional-japanese-dragon-tattoo-sleeve.jpg",
+ "/japanese-koi-fish-tattoo-colorful.jpg",
+ "/oriental-cherry-blossom-tattoo-design.jpg",
+ "/japanese-samurai-tattoo-traditional.jpg",
+ ],
+ },
+]
+
+const specialties = ["All", "Traditional", "Realism", "Fine Line", "Japanese", "Portraits", "Minimalist"]
+
+export function ArtistsGrid() {
+ const [selectedSpecialty, setSelectedSpecialty] = useState("All")
+
+ const filteredArtists =
+ selectedSpecialty === "All"
+ ? artists
+ : artists.filter((artist) =>
+ artist.styles.some((style) => style.toLowerCase().includes(selectedSpecialty.toLowerCase())),
+ )
+
+ return (
+
+
+
+
+ {/* Hero Section with Split Screen */}
+
+
+
+ {/* Right Side - Artist Info */}
+
+ 
+
+
+
+
+ {artist.availability}
+
+
+
+
+
+ {/* Curved Border */}
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+
+
+ {artist.bio}
+ +
+
+
+
+
+
+
+
+
+
+
+
+ Specializes in:
+
+ {artist.styles.map((style) => (
+
+ {style}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {/* Left Side - Portfolio Grid */}
+
+
+
+
+ {/* Right Side - Sticky Header and Info */}
+
+ {filteredPortfolio.map((item, index) => (
+
+ setSelectedImage(item.id)}>
+
+ ))}
+
+ 
+
+
+
+
+
+ {item.title}
+
+
+
+
+
+
+
+ Featured Work
+ {filteredPortfolio.length} +
+
+
+
+
+ {/* Category Filter */}
+ + Explore {artist.name}'s portfolio showcasing {artist.experience} of expertise in{" "} + {artist.specialty.toLowerCase()}. Each piece represents a unique collaboration between artist and + client. +
+
+
+
+ {/* Quick Stats */}
+ Filter by Style
+
+ {categories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+
+ {artist.portfolio.length}
+ Pieces
+
+
+ {artist.rating}
+ Rating
+
+
+
+
+
+ What Clients Say
+ +
+
+
+ {/* Duplicate testimonials for seamless loop */}
+ {[...artist.testimonials, ...artist.testimonials, ...artist.testimonials, ...artist.testimonials].map(
+ (testimonial, index) => (
+
+
+ {/* Enhanced spotlight background with stronger separation */}
+
+ ),
+ )}
+
+
+
+
+
+
+
+ {[...Array(testimonial.rating)].map((_, i) => (
+
+ + "{testimonial.text}" ++ — {testimonial.name} +
+
+
+
+ Ready to Get Started?
++ Book a consultation with {artist.name} to discuss your next tattoo. Whether you're looking for a + traditional piece or something with a modern twist, let's bring your vision to life. +
+ +
+
+
+
+
+
+
+
+
+
+
+ {artist.experience}
+ Experience
+
+
+ {artist.reviews}+
+ Happy Clients
+
+
+ {artist.rating}/5
+ Average Rating
+ setSelectedImage(null)}
+ >
+
+ )}
+
+ )
item.id === selectedImage)?.image || "/placeholder.svg"}
+ alt="Portfolio piece"
+ className="max-w-full max-h-full object-contain"
+ />
+
+
+
+
+
+
+
+ {/* Filter Buttons */}
+ Our Artists
++ Meet our talented team of tattoo artists, each bringing their unique style and years of experience to create + your perfect tattoo. +
+
+ {specialties.map((specialty) => (
+
+ ))}
+
+
+ {/* Artists Grid */}
+
+ {filteredArtists.map((artist) => (
+
+
+ ))}
+
+
+ {/* Artist Image */}
+
+
+
+
+
+
+
+ {/* Artist Info */}
+
+
+ {artist.availability}
+
+
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+
+
+ {artist.bio}
+ +
+
+
+ {/* Styles */}
+
+
+
+
+
+
+
+ {/* Action Buttons */}
+ Specializes in:
+
+ {artist.styles.slice(0, 3).map((style) => (
+
+ {style}
+
+ ))}
+ {artist.styles.length > 3 && (
+
+ +{artist.styles.length - 3} more
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+ {/* Artists Grid with Parallax */}
+
+
+
+
+
+ {/* Filter Buttons */}
+
+
+ OUR ARTISTS
++ Meet our exceptional team of tattoo artists, each bringing unique expertise and artistic vision to + create your perfect tattoo. +
+
+
+
+
+ {specialties.map((specialty) => (
+
+ ))}
+
+
+
+
+ {/* Call to Action */}
+
+
+
+
+
+ {leftColumn.map((artist, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ {artist.experience}
+
+
+ {artist.availability}
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+{artist.bio}
+ +
+
+ ★ {artist.rating} ({artist.reviews} reviews)
+
+
+
+
+
+
+
+
+ {centerColumn.map((artist, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {artist.experience}
+
+
+ {artist.availability}
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+{artist.bio}
+ +
+
+ ★ {artist.rating} ({artist.reviews} reviews)
+
+
+
+
+
+
+
+
+ {rightColumn.map((artist, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {artist.experience}
+
+
+ {artist.availability}
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+{artist.bio}
+ +
+
+ ★ {artist.rating} ({artist.reviews} reviews)
+
+
+
+
+
+
+
+
+
+
+
+ READY?
++ Choose your artist and start your tattoo journey with United Tattoo. +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ARTISTS
++ Our exceptional team of tattoo artists, each bringing unique expertise and artistic vision to create your perfect + tattoo. +
+
+
+
+
+
+
+
+
+
+
+
+ {leftColumn.map((artist, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {artist.experience}
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+{artist.bio}
+ +
+
+
+
+
+ {centerColumn.map((artist, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {artist.experience}
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+{artist.bio}
+ +
+
+
+
+
+ {rightColumn.map((artist, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {artist.experience}
+
+
+
+
+
+ {artist.name}
+{artist.specialty}
+{artist.bio}
+ +
+
+
+
+
+
+
+
+ READY?
++ Choose your artist and start your tattoo journey with United Tattoo. +
+ +
+
+ {/* Header */}
+
+
+
+ {/* Progress Indicator */}
+ Book Your Appointment
++ Let's create something amazing together. Fill out the form below to schedule your tattoo session. +
+
+
+ {[1, 2, 3, 4].map((stepNumber) => (
+
+
+
+
+ = stepNumber ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+ }`}
+ >
+ {stepNumber}
+
+ {stepNumber < 4 && (
+ stepNumber ? "bg-primary" : "bg-muted"}`} />
+ )}
+
+ ))}
+