Clandestine

Beauty salon landing page template made using Next.js, Perplexity, and Firebase Studio.

Check it out https://clandestine-beauty-salon-landing-page.netlify.app/

Successfully tested on Google Chrome 141 (Windows 11), Mozilla Firefox 136 (Fedora 42), and Safari (iPhone 7 - IOS 15.8.1)

Notes

General

• Content area max-width changes by window.innerHeight:
  • 1448px if ≥ 912px height
  • 1306px if ≤ 800px height

Navbar

• Limelight section with icons is hidden if window.innerWidth is below the language-specific threshold defined in Limelight.tsx file.

Hero Sections

• Two versions: desktop and tablet/mobile.
• Desktop hero section:
  • One review container removed below a certain windowWidth threshold.
  • Text Swap container adjusts possessive adjectives to match Italian word gender.
  • For heroSectionWidth < 1336px, Text Swap component replaced with a modified morphing text resembling Hebrew Text Swap.
• Components with “Morphing” or “Morph” in their names don’t have a morphing effect—they use a morph-inspired blur effect that Perplexity AI created by combining two morphing text components, which is where the name comes from.
• Second review container (“Talia Lewin”) image mirrored for RTL layout.

Currency Display

• English & Hebrew: currency symbol left of price, no space.
• Italian: symbol right of price, with space.

Services Section

• Mobile: lists all services vertically.
• Desktop:
  • Shows 4–6 services based on window.innerHeight:
    • ≥ 1048px → 6 services
    • ≥ 924px → 5 services
    • Else → 4 services
  • “Show More” button toggles service list with animate.css animations.
  • Background image behind service list.
  • “Show More” button color changes on hover of any service row.
• Hover effect (both desktop & mobile): highlight fields sequentially — name → description → price → duration.

Masters Section

• The Fancy showcase component built on top of Aceternity UI’s Animated Testimonials is replaced with four cards on mobile.

Testimonials Section

• Three versions: desktop, tablet, mobile.

Booking Modal

Calendar

• Day headers:
  • English/Italian desktop: 3 characters
  • English/Italian mobile: 2 characters
  • Hebrew: always 2 characters (letter + geresh)
• Months can be changed via gestures.

Checkout Tab

• To spare you from entering valid credit card information (and primarily to save myself time by avoiding the need to chat with the AI and implement a credit card validity check), I made the pay button enabled at all times so you can bypass this tab even if the input fields are empty.

Hebrew AM/PM Variations

• Short (time slots): לפ', אח'
• Medium (confirmation tab): לפנה"צ, אחה"צ
• Full (confirmation tab): לפני הצהריים, אחרי הצהריים

Store Section

• Cards mirrored for RTL layout.

About Us Section

• Desktop: diced image grid.
• Mobile: replaces grid with 2 images, then 1 image depending on window.innerWidth.

FAQ

• Chevron rotation animation reversed for RTL direction flow.

Footer

• Middle color in multi-colored text = accent color; other two colors derived via logic from vue-color-wheel by Robert Shaw.

Credit

Resizable Navbar by Aceternity UI

Limelight Nav by EaseMize UI

Chronicle Button by Haaguitos

Wheel Picker by Chánh Đại

React Wheel Picker by Chánh Đại

すりガラスなプロフィールカード by あしざわ - Webクリエイター

Text Rotate by Fancy Components

GSAP (GreenSock Animation Platform)

framer-motion

motion

AnimateIcons

Hero Section 6 by Tailark

Modern Hero Section by Ravi Katiyar

Travel section #tailwind #slick.js by Kristen

Scroll Down Icon Animation by Tsukasa Aoki

i18next

Lucide React

tabler-icons-react

Gooey Text Morphing by Victor Welander

Morphing Text by Magic UI

[gsap/component] ❍ Interactive Table with Image Hover & Idle Animation by Filip Zrnzevic

Text scroll and hover effect with GSAP and clip by Juxtopposed

Animate.css

Animated Testimonials by Aceternity UI

Text Reveal Animation by Swati Parge

Bento Grid by Aceternity UI

Lens by Aceternity UI

Profile Card Testimonial Carousel by Arunachalam

Custom Checkbox by Edil Ozi

チェックしないと押せないボタン by あしざわ - Webクリエイター

Coach Scheduling Card by Isaiah

Calendar by Ali Imam

react-swipeable

Cards with inverted border-radius #scss by Kristen

Input Floating Label animation by Elpeeda

Success Check Animation Pure CSS by Istiak Tridip

Inverted border-radius using CSS mask II by Temani Afif

Accordion by Molecule UI

JTB studios - Link by Nico

Hover Link Animation by Ruben

Multi Colored Text with CSS by Shireen Taj

vue-color-wheel by Robert Shaw

404 galaxy not found by Rémi Denimal

Photo by Majid Akbari on Unsplash

Photo by engin akyurt on Unsplash

Photo by Farhad Ibrahimzade on Unsplash

Photo by Giorgio Trovato on Unsplash

Photo by Arina Krasnikova from Pexels

Photo by Ali Pazani from Pexels

Photo by Le Petit on Unsplash

Photo by Grzegorz Rakowski on Unsplash

Photo by Raamin ka on Unsplash

Photo by Bave Pictures on Unsplash

Photo by Layanne Aguiar from Pexels

Photo by Airam Dato-on from Pexels

Photo by Tnarg from Pexels

Photo by Jonas Svidras from Pexels

Photo by Mockup Free on Unsplash

Photo by Mockup Free on Unsplash

Photo by Mockup Free on Unsplash

Photo by KaLisa Veer on Unsplash

Photo by Mockup Free on Unsplash

Photo by Mockup Free on Unsplash

Photo by Benyamin Bohlouli on Unsplash

Photo by Guilherme Petri on Unsplash

Photo by Lindsay Cash on Unsplash

Photo by Edz Norton on Unsplash