prime-salon

byJehan Fer

PROJECT OVERVIEW You are building a single-page ultra-luxury salon website for "LEO Salon". The brand identity is premium, elegant, sophisticated, and high-end. The color palette is strictly Pink and Gold (rose gold, champagne gold, soft blush, deep rose, and pure gold accents). No prices are to be displayed anywhere on the website—leave all price fields empty or as "—". No images are to be included; instead, use elegant image placeholders with a gold border and a subtle icon or text like "Visual" or "Portrait". The website must feel like a 5-star spa or a luxury fashion brand. Use smooth animations, glassmorphism, gold gradients, and soft pink backgrounds. COLOR SPECIFICATIONS Primary background: Soft cream blush (#FFF5F5) to deep rose (#F9E6E6) Secondary background: Pure white with gold shimmer overlay Accent color: Gold (#D4AF37), Rose Gold (#E6C27A), Champagne (#F7E7CE) Text: Dark charcoal (#1A1A1A) for contrast, gold for highlights Buttons: Gold gradient (#D4AF37 to #B8942E) with white text Hover effects: Gold to rose gold transition Borders: 1px gold gradient with subtle glow TYPOGRAPHY Headings: Playfair Display (serif, elegant, luxury) Body text: Montserrat (sans-serif, clean, modern) Accents: Cormorant Garamond (for quotes and price-less mentions) SOCIAL MEDIA INTEGRATION The website must prominently feature links to: TikTok: https://www.tiktok.com/@rasangiwathsala?_r=1&_t=ZS-95LGdHkkXAL Facebook: https://www.facebook.com/share/1XrWnk73ia/ These should appear as gold circular icons in the header, footer, and a floating sidebar. On hover, they should glow and enlarge slightly. Also embed a minimal TikTok feed preview (no autoplay, just a stylish frame showing the profile and a note "Follow us for transformations"). WEBSITE STRUCTURE (Single Page Scroll) 1. NAVIGATION BAR Sticky, transparent background with blur effect (backdrop-filter: blur(10px)) Logo: "LEO Salon" in gold cursive font (Pacifico or Great Vibes) Menu items: Home, Services, Gallery, Contact, Book Now "Book Now" button: Gold pill shape with shimmer animation Right side: TikTok and Facebook icons (gold, outlined) 2. HERO SECTION Full-screen viewport height Background: Soft pink gradient with floating gold particles (canvas or SVG) Central headline: "LEO Salon" in huge gold text with shadow Subheadline: "Where Elegance Meets Radiance" Tagline: "Ultra-Luxury Hair & Beauty Atelier" Two buttons: "Explore Services" (gold outline) and "Book Your Experience" (solid gold) No images — use an abstract gold mandala or geometric pattern as visual Small text: "No prices displayed — exclusive quotes upon consultation" 3. SERVICES SECTION Title: "Our Signature Services" (gold underline with animation) This section displays ALL services from the two image files you provided, but without any prices. Only service names. Organize them in an elegant card grid (3 columns on desktop, 2 on tablet, 1 on mobile). Each card has: Soft pink background with gold border Hover effect: lift up, gold shadow, slight scale Icon: Gold emoji or FontAwesome icon (sparkles, scissors, crown, etc.) Service name in gold or dark text First Image Data (Threading & Facials): Category: EYEBROW & THREADING Eyebrow Shaping Upper lip Full face Threading Category: CLEAN UP Evon Clean up Dreamron Clean up Kejo Clean up Jovees Clean up Derma Pro Clean up Category: NORMAL FACIAL Evon Facial Dreamron Facial Kejo Facial Jovees Facial Derma Pro Facial Category: GOLD FACIAL Kejo Gold Facial Kejo Vitamin C Facial Derma Pro Gold Facial Category: FACIAL PIMPLE TREATMENT High frequency treatment Category: HYDRA FACIAL Normal Hydra Facial Gold Hydra Facial Second Image Data (Waxing, Nails, Hair, Dressing): Category: WAXING Wax Half Hands Wax Full Hands Wax Half Legs Wax Full Legs Category: MANICURE & PEDICURE Manicure Pedicure Category: HAIR CUTS One Length Cut U Cut V Cut Layer Cut Feather Cut Category: HEAD MASSAGE & HAIR SPA Head Massage (Oil / Tonic) Hair Spa Category: NAIL EXTENSIONS & COLOUR Gel Nails Extension Acrylic Nails Extension Gel Colour Application Category: DRESSING Normal Dressing Pre Shoot Dressing Category: ADVANCED TREATMENTS Rebonding Perming Colouring Keratin Category: CUSTOM Customize Price (show as "Bespoke Services — Enquire Within") Each category title must be in gold with a small divider. Add a "Consultation Required" badge for advanced treatments. 4. GALLERY SECTION (Placeholder Only) Title: "Our Masterpieces" (gold underline) Since no images are provided, create a stunning grid of 6 elegant placeholders. Each placeholder is a square with: Gold dashed border Soft pink gradient background Center icon: camera, star, or crown (gold) Text: "Elegance Revealed" On hover: gold shine overlay A small note: "Visual portfolio available in-salon" 5. ABOUT / PHILOSOPHY Title: "The LEO Philosophy" Paragraph: "At LEO Salon, we don't just style — we sculpt radiance. Every strand, every stroke, every glow is curated with obsessive precision. Our atelier uses only the finest products and techniques reserved for the discerning few. Pink marble, gold mirrors, and silence except for the whisper of scissors. This is not a salon. This is a sanctuary." Add a gold quote divider. 6. SOCIAL PROOF / TESTIMONIALS (No Images) 3 elegant testimonials in gold-bordered cards: "The most luxurious experience of my life. My skin has never glowed like this." — S.R. "I fly in just for LEO. No one else touches my hair." — T.K. "Worth every rupee. The gold facial is divine." — M.P. 7. CONTACT & BOOKING SECTION Title: "Reserve Your Moment" Subtitle: "Walk-ins are not accepted — by appointment only." Form fields (all elegant, gold borders on focus): Full Name (text input) Phone Number (tel) Email (email) Service Interest (dropdown with all service categories) Preferred Date (date picker) Message (textarea) Button: "Request an Appointment" — gold gradient, loading animation on click. Below button: "A confirmation specialist will reach you within 2 hours." Contact details (no phone number unless you want placeholder, just email and social): Email: concierge@leosalon.luxe TikTok & Facebook icons again 8. FOOTER Gold divider line LEO Salon logo again Quick links (Services, Gallery, Contact) Social icons (TikTok, Facebook) "© 2025 LEO Salon — Ultra Luxury Atelier" "Prices available upon private consultation only" ANIMATIONS & INTERACTIONS Scroll-triggered fade-up for all sections (Intersection Observer) Gold shimmer effect on buttons (CSS keyframes) Smooth cursor: custom gold circle that follows mouse on desktop Loading screen: initial gold shimmer logo animation Hover on service cards: gold border glows, text turns gold Form inputs: gold underline animation on focus Floating gold particles in hero (small circles moving slowly) RESPONSIVENESS Mobile-first but ultra-luxury on all devices On mobile, navigation becomes a gold hamburger menu Service grid: 1 column on mobile, 2 on tablet, 3 on desktop Font sizes scale elegantly No horizontal scroll PERFORMANCE & SEO Use Tailwind CSS (or styled-components) for rapid styling FontAwesome or Lucide icons for all icons No external images — only CSS gradients and SVG placeholders Meta tags: "LEO Salon Ultra Luxury Hair & Beauty" Lazy load sections EXCLUSIONS (VERY IMPORTANT) DO NOT display any price (Rs. or otherwise) anywhere. DO NOT add any real images. Use only placeholders. DO NOT embed actual TikTok videos — just a link and styled frame. DO NOT add any phone number unless placeholder. ADDITIONAL LUXURY DETAILS A subtle "As seen on" bar with fake luxury magazines (Vogue, Harper's Bazaar — just text logos in gold opacity) A "Policies" modal: "No prices listed. Each service is customized and quoted after consultation." Gold vertical line divider between sections Background music? No — keep silent luxury. A small "EN" language selector (gold, non-functional for now) "Client since" dynamic year (current year) TECHNICAL REQUIREMENTS FOR LOVABLE Must be a fully functional HTML/CSS/JS single file Use Google Fonts (Playfair Display, Montserrat) Use Tailwind CDN or write custom CSS Ensure all links open in new tab: TikTok and Facebook Form does not need backend — just console log "Appointment requested" Add a fake loading state to the Book button (2 seconds then alert) All gold gradients must have fallback colors Smooth scroll behavior for anchor links FINAL POLISH No spelling errors Every category from your images is included exactly as written No extra invented services The word "Luxury" appears at least 5 times The word "Gold" appears in color context only The TikTok and Facebook links are functional and prominent EXAMPLE LAYOUT SENTENCE "Imagine walking into a pale pink marble foyer, gold-leafed mirrors reflecting soft candlelight. The air smells of jasmine and wealth. Our menu — devoid of numbers — offers only names of rituals: Evon Clean Up, Kejo Gold Facial, Acrylic Nails Extension. You don't ask the price. You simply arrive." VALIDATION CHECKLIST FOR YOU (THE AI) No prices anywhere No real images TikTok and Facebook links included and clickable All services from both images present Pink and gold color scheme Ultra-luxury feel Responsive Gold animations and hover effects OUTPUT INSTRUCTIONS Generate a complete, standalone, beautifully indented HTML document with <style> and <script>. Use modern CSS (Grid, Flex, backdrop-filter). Ensure it looks like a $10,000 salon website. Do not skip any service category. Make the hero unforgettable. The "Book Now" button must scroll to the contact section. All external links open in a new tab with rel="noopener noreferrer". PROMPT END