feral-barber

# UV Trims — Ultimate AI Website Generation Prompt ## MASTER PROMPT Create a premium, futuristic, luxury barber brand website for **UV Trims**. The design must feel like a blend of modern street culture, luxury grooming, and Apple-level clean UI/UX. The website should look world-class, visually addictive, smooth, highly interactive, mobile-first, and optimized for conversions/bookings. The brand vibe should feel: * Modern luxury barber studio * Clean fades + elite grooming culture * Urban but premium * Professional but creative * Cinematic visuals and smooth animations * High-end Instagram aesthetic * Trendy, stylish, masculine, premium ## DESIGN STYLE ### Core Theme * Primary Accent Color: Light blue neon / icy blue * Secondary Colors: White, matte black, charcoal gray, silver gradients * Backgrounds: Dark luxury gradients with glassmorphism sections * Use subtle glowing blue highlights throughout the website * Add soft animated gradients and floating ambient effects * Use premium typography with bold headlines and elegant spacing * Rounded corners with modern glass cards * Smooth transitions and cinematic scrolling animations ### Inspiration Style Mix the feel of: * Tesla * Apple * Nike * A luxury streetwear brand * High-end barber studios in Miami/Toronto/Dubai The website must NOT feel generic. It should feel custom-designed, artistic, futuristic, and memorable. --- # WEBSITE STRUCTURE ## 1. HERO SECTION (FIRST SCREEN) Create an extremely cinematic hero section. Features: * Fullscreen background video loop of barber cuts/fades/trimming * Animated light blue glowing overlays * Smooth motion effects on mouse movement * Floating particles or subtle light streaks * Premium typography Main headline ideas: * “Precision. Style. Confidence.” * “More Than A Haircut.” * “Where Fades Become Art.” * “Luxury Grooming Experience.” Subheadline: "Professional cuts, clean fades, beard shaping, and elite grooming tailored to your style." Hero buttons: * Book Appointment * View Portfolio * Explore Services Include: * Live Instagram preview cards * 5-star review badges * Animated stats: * Clients served * Years experience * Average rating Add a glowing floating booking button visible throughout the site. --- # 2. ABOUT SECTION Create a luxury storytelling section about UV Trims. Include: * Professional portrait section for the barber * Personal story * Passion for barbering * Clean grooming philosophy * Modern urban styling culture Visual ideas: * Split-screen layouts * Glassmorphism cards * Animated image reveals * Floating typography * Hover effects on images Include signature quote: "Every haircut is a reflection of confidence." --- # 3. INTERACTIVE PORTFOLIO SECTION This section must be one of the most impressive parts of the website. ## Instagram Integration Connect Instagram API/feed to automatically display: * Haircut photos * Fade transformations * Beard work * Reels/videos * Before/after transformations * Stories highlights style cards Portfolio Features: * Masonry grid layout * Hover zoom animations * Smooth reel previews * Video autoplay on hover * Category filters: * Fades * Beard trims * Lineups * Transformations * Kids cuts * Premium styling Include: * “Latest Cuts” live section synced from Instagram * TikTok-style vertical video previews * Swipeable mobile galleries * AI-enhanced image loading optimization Make this section feel highly social-media driven and visually addictive. --- # 4. SERVICES + PRICE LIST Create elegant service cards with luxury styling. Each service card should include: * Service name * Description * Price * Estimated duration * Animated hover effects * Quick-book button Suggested services: * Fade Cut * Beard Trim * Line Up * Full Haircut * Kids Cut * Premium Package * Hair Wash + Styling * Razor Finish Design Requirements: * Interactive pricing cards * Glassmorphism effects * Blue neon hover glow * Smooth transitions * Mobile swipe carousel for phones Add optional upsell recommendations. --- # 5. BOOKING SYSTEM Integrate a fully functional booking system. ## Google Calendar Integration Requirements: * Sync appointments with Google Calendar * Real-time availability * Auto time slot blocking * Automated confirmations * Reminder notifications * Timezone support Booking Features: * Select service * Choose barber * Select date/time * Add notes/preferences * Pay deposit online * Apple Pay + Google Pay support Add: * Animated booking calendar * Smooth multi-step booking flow * Mobile-friendly scheduler * Client dashboard * Reschedule/cancel options The booking experience should feel premium and effortless. --- # 6. TESTIMONIALS SECTION Create an interactive testimonials section. Features: * Video testimonials * Auto-sliding reviews * Google Reviews integration * Instagram comments showcase * Before/after client transformations Visual style: * Floating cards * Neon glow accents * Smooth transitions * Profile images * Verified client badges --- # 7. SCHEDULE + HOURS SECTION Create a sleek weekly schedule section. Include: * Working hours * Availability status * Busy/live indicators * Holiday updates * Dynamic calendar sync Design: * Animated timetable * Luxury card UI * Blue glow highlights * Mobile optimized --- # 8. LOCATION + CONTACT SECTION Features: * Interactive Google Maps integration * Directions button * Tap-to-call button * SMS integration * WhatsApp integration * Instagram DM shortcut Display: * Business phone number * Email * Address from business card * Social media links Add: * Animated contact cards * Floating icons * Quick booking shortcut --- # 9. SOCIAL MEDIA EXPERIENCE Make social media heavily integrated throughout the site. Integrate: * Instagram feed * Reels preview * TikTok embeds * YouTube Shorts support * Live follower counters Add: * Shareable haircut cards * Client selfie wall * Trend gallery * Viral cuts section The website should feel alive and connected to social content. --- # 10. ADVANCED PREMIUM FEATURES Add creative modern features: ## AI FEATURES * AI hairstyle recommendation quiz * Face-shape haircut suggestions * Virtual hairstyle preview mockup * Smart booking recommendations ## VISUAL EFFECTS * Smooth page transitions * Parallax scrolling * Floating glowing particles * Mouse-follow lighting effects * Glassmorphism UI * Motion blur animations * Interactive cursor effects ## PERFORMANCE * Ultra-fast loading * SEO optimized * Responsive on all devices * Optimized animations * Accessibility optimized * Lazy loading media --- # 11. MOBILE EXPERIENCE The mobile version must feel like a premium luxury app. Requirements: * App-like animations * Sticky booking button * Swipe gestures * Vertical video optimization * Thumb-friendly navigation * Fast transitions The mobile experience should feel smooth like TikTok/Instagram. --- # 12. TECH STACK Preferred Stack: * Next.js * React * Tailwind CSS * Framer Motion * GSAP animations * Firebase or Supabase backend * Google Calendar API * Instagram Graph API * Stripe payments --- # 13. SEO + BUSINESS OPTIMIZATION Optimize for: * Local barber searches * Google ranking * Mobile SEO * Fast performance * Booking conversions * Instagram traffic Add: * Structured schema markup * Meta tags * Open Graph previews * Local business SEO * Booking CTA optimization --- # 14. FINAL WEBSITE FEEL The final website should feel: * Luxury * Viral * Cinematic * Highly modern * Creative * Premium * Interactive * Social-first * High-end urban grooming brand When visitors open the website, they should instantly feel: “This barber is elite.” The design must look expensive, smooth, and unforgettable. --- # IMPORTANT IMPLEMENTATION NOTES Use the business card details provided for: * Phone number * Email * Address * Instagram username * Business information Create all pages, components, animations, booking systems, responsive layouts, and integrations fully. Generate: * Homepage * Booking page * Portfolio page * Services page * About page * Contact page * Admin dashboard concept Include all UI/UX details, animation ideas, component structure, and implementation. Do NOT make the design generic. Make it feel like a world-class luxury barber brand.