A sophisticated, high-end website for SCRAFT Salon, designed to showcase luxury beauty services with an elegant, premium aesthetic.
- Luxury Color Palette: Rich golds, champagne creams, and soft ivories
- Elegant Typography: Playfair Display for headings, Inter for body text
- Premium Gradients: Subtle gold and cream gradient textures
- Alternating Backgrounds: White → Ivory → Champagne sections
- Thin Gold Dividers: Elegant separator lines between sections
- Full-screen luxury interior photo with dark translucent gradient overlay
- Brand Identity: "SCRAFT Salon" in large bold text
- Tagline: "Redefining Luxury in Hair, Beauty & Spa"
- Subline: "Experience world-class grooming and care in a luxury setting"
- Dual CTAs: Gold/black "Book Appointment" and outlined "View Services" buttons
- Smooth scroll behavior when CTAs are clicked
- Side-by-side layout: Elegant typography on left, stylist portrait on right
- Salon story: Rich narrative about SCRAFT Salon's commitment to luxury
- Premium features: Award-winning team and personalized care highlights
- Premium service cards with icons, names, and descriptions
- Hover effects: Soft zoom and gold glow animations
- Signature Packages subsection:
- The Royal Experience ($299)
- Bridal Bliss ($499)
- Luxury Revival ($399)
- CTA Button: "Explore Full Service Menu"
- Client testimonials with names, quotes, and star ratings
- Auto-advancing carousel with smooth transitions
- Navigation controls and dot indicators
- Premium styling with elegant backgrounds
- Salon interior grid using existing interior images
- Lightbox support with navigation controls
- Instagram feed integration with mock posts
- Category badges and hover effects
- Follow CTA for social media engagement
- Contact form with premium styling
- Contact information including address, phone, email
- Opening hours and salon details
- Social media links and quick actions
- Logo and tagline with premium branding
- Address with Google Maps link
- Opening hours and contact information
- Phone, WhatsApp, and email contact details
- Social links (Instagram, Facebook, WhatsApp)
- Thin gold border separator
- Smooth fade-in and slide-up animations on scroll
- Intersection Observer for scroll-triggered effects
- Hover animations: Lift, glow, and scale effects
- Premium transitions with luxury timing curves
- Mobile-first approach with elegant scaling
- Touch-friendly CTAs for mobile devices
- Adaptive layouts: Services and gallery adapt to 1-column on mobile
- Hero section scaling for all screen sizes
- React 18 with TypeScript
- Tailwind CSS with custom luxury design system
- Vite for fast development and building
- Lucide React for premium icons
- Custom hooks for scroll animations
- Intersection Observer API for performance
- Primary: Rich gold (
hsl(43 74% 49%)) - Secondary: Champagne cream (
hsl(45 25% 95%)) - Muted: Soft ivory (
hsl(45 25% 97%)) - Accents: Gold variations and gradients
- Display: Playfair Display (serif) for headings
- Body: Inter (sans-serif) for content
- Letter spacing utilities for premium feel
- Gold shadows: Premium depth with gold tinting
- Elegant shadows: Subtle, sophisticated depth
- Premium shadows: Enhanced luxury feel
- Gold glow: Hover effects with golden radiance
src/
├── components/
│ ├── Hero.tsx # Premium hero section
│ ├── About.tsx # Brand identity section
│ ├── Services.tsx # Services with signature packages
│ ├── Testimonials.tsx # Client testimonials carousel
│ ├── Gallery.tsx # Gallery with Instagram feed
│ ├── Contact.tsx # Contact form and information
│ ├── Footer.tsx # Footer with all contact details
│ └── ui/ # Reusable UI components
├── hooks/
│ ├── use-scroll-animation.tsx # Scroll animation hook
│ └── use-toast.ts # Toast notifications
├── assets/
│ └── images/ # Salon interior photos
└── styles/
└── index.css # Luxury design system
✅ Full-screen luxury hero with interior1.jpg background
✅ SCRAFT Salon branding with proper taglines
✅ Dual CTA buttons with smooth scroll functionality
✅ Brand Identity section with side-by-side layout
✅ Premium service cards with hover effects
✅ Signature Packages subsection with pricing
✅ Testimonials carousel with client feedback
✅ Gallery section with lightbox support
✅ Instagram feed integration with mock posts
✅ Alternating backgrounds (white → ivory → champagne)
✅ Thin gold divider lines between sections
✅ Subtle gold/cream gradient textures
✅ Smooth fade-in and slide-up animations on scroll
✅ Enhanced footer with Google Maps and WhatsApp links
✅ Full responsiveness for all devices
✅ Premium animations and transitions
- Install dependencies:
npm install- Start development server:
npm run dev- Build for production:
npm run buildUpdate the CSS custom properties in src/index.css to modify the luxury color scheme.
Replace images in src/assets/images/ with your salon photos.
Update text content in each component to match your salon's branding and services.
Update social media URLs in the Footer and Gallery components.
- Luxury Design Language: Sophisticated, high-end aesthetic
- Smooth Animations: Premium feel with elegant transitions
- Responsive Excellence: Perfect on all devices
- Performance Optimized: Fast loading with modern techniques
- Accessibility: WCAG compliant design
- SEO Ready: Semantic HTML and meta tags
- Touch-optimized buttons and interactions
- Responsive typography that scales elegantly
- Mobile-first navigation with smooth scrolling
- Optimized images for fast loading on mobile networks
SCRAFT Salon - Where luxury meets expertise in hair, beauty & spa services.