frozen-a

byArbab zafar

Build a modern, premium 5-page Tattoo Studio website using ReactJS. PROJECT: Tattoo Studio Website TECH STACK: - ReactJS - React Router for page routing - CSS / modern responsive CSS - Use reusable React components - Do not use unnecessary libraries - Keep the code clean, modular, maintainable, and production-ready DESIGN DIRECTION: Create a high-end tattoo studio aesthetic using a strict Black / White / Grey color palette. The website should feel: - Premium - Artistic - Dark - Minimal - Bold - Modern - Editorial - Professional Avoid a generic template look. The design should feel like a premium creative/tattoo brand website. PAGES: 1. Home 2. About / Studio 3. Artists 4. Portfolio / Tattoos 5. Contact / Booking GLOBAL DESIGN: - Black, white and grey color palette - Strong typography - Large editorial headings - High-quality tattoo imagery - Spacious layouts - Sharp but elegant UI - Subtle borders - Dark backgrounds with white typography - Grey secondary text - High visual contrast - Premium image presentation - Smooth hover effects - Smooth page transitions - Subtle scroll animations - Micro-interactions throughout the interface HOME PAGE: Create an impressive hero section. Hero should contain: - Large statement headline - Short studio description - Primary CTA: "Book a Session" - Secondary CTA: "View Portfolio" - Large tattoo artwork/studio image - Minimal navigation - Premium typography - Subtle entrance animation Below hero: - Studio introduction - Featured tattoo work - Featured artists - Tattoo styles/categories - Short process section - Testimonials - Final booking CTA ABOUT / STUDIO PAGE: Include: - Studio story - Studio philosophy - Premium studio imagery - Why choose the studio - Tattoo process - Safety / hygiene section - CTA to book a session ARTISTS PAGE: Create premium artist profile cards. Each artist card should include: - Portrait - Artist name - Specialty - Short bio - Social/link - "View Work" interaction Artist cards should have sophisticated hover interactions. PORTFOLIO PAGE: Create a visually impressive tattoo gallery. Include: - Masonry/grid layout - Tattoo categories/filtering - Black & grey tattoos - Fine line - Realism - Traditional - Custom tattoos Images should have: - Smooth hover zoom - Overlay information - Elegant transitions - Lightbox/gallery interaction where appropriate CONTACT / BOOKING PAGE: Include: - Booking form - Name - Email - Phone - Preferred date - Tattoo style - Tattoo size - Placement - Description - Budget - File/image upload UI - Submit button Also include: - Studio location - Opening hours - Contact information - Social media links - Map section RESPONSIVENESS: The website MUST be fully responsive. Desktop: - Premium wide layouts - Large typography - Multi-column sections - Large imagery Tablet: - Adapt grids and typography - Maintain visual hierarchy Mobile: - Proper mobile navigation - Hamburger menu - Single-column layouts - Optimized typography - Touch-friendly buttons - No horizontal overflow - Images must scale correctly - Maintain premium visual appearance ANIMATIONS: Use subtle professional animations. Include: - Hero text reveal - Image reveal - Fade/slide animations on scroll - Button hover effects - Image scale on hover - Navigation transitions - Card hover interactions - Smooth page transitions - Gallery interactions Animations must remain fast and elegant. Do NOT over-animate the website. PERFORMANCE: The website must be fast-loading. Requirements: - Lazy-load below-the-fold images - Use optimized image dimensions - Avoid unnecessary JavaScript - Avoid excessive animation libraries - Reuse components - Avoid duplicate CSS - Minimize DOM complexity - Use semantic HTML - Ensure good Lighthouse performance SEO: Implement SEO-friendly structure. Requirements: - Semantic HTML5 - Proper H1/H2/H3 hierarchy - Unique page titles - Meta descriptions - Descriptive image alt text - SEO-friendly URLs - Proper internal linking - Accessible navigation - Open Graph metadata structure ACCESSIBILITY: - Keyboard-friendly navigation - Visible focus states - Proper button/link semantics - Accessible form labels - Good color contrast - Alt text for meaningful images - ARIA only where necessary COMPONENT STRUCTURE: Create reusable components such as: Navbar MobileMenu Footer Hero SectionHeading Button ImageCard ArtistCard PortfolioCard TestimonialCard CTASection ContactForm Gallery Modal/Lightbox Keep repeated UI inside reusable components instead of duplicating code. IMPORTANT: The final result must NOT look like a basic React starter template. It should look like a real premium tattoo studio website that could be delivered to a paying client. Prioritize: 1. Premium visual design 2. Pixel-perfect spacing 3. Typography 4. High-quality imagery 5. Smooth micro-interactions 6. Responsive behavior 7. Performance 8. SEO 9. Accessibility 10. Clean React architecture Use realistic tattoo studio content instead of placeholder text such as "Lorem ipsum". Generate the complete frontend implementation with all 5 pages, routing, reusable components, responsive CSS, animations, gallery interactions, forms, and polished UI. VISUAL REFERENCE: Think of the design language as a combination of: - Luxury tattoo studio - High-fashion editorial website - Contemporary art gallery - Premium creative agency Use oversized typography, monochromatic photography, asymmetrical layouts, dramatic whitespace, subtle borders, cinematic imagery, editorial grids, and sophisticated hover interactions. Do NOT use: - Generic Bootstrap-looking cards - Excessive rounded corners - Bright colors - Gradient-heavy SaaS styling - Cartoonish icons - Excessive shadows - Generic dashboard UI - Template-like sections The final website should feel custom-designed, expensive, artistic, and visually memorable.