Back to Portfolio
Business Site

Salon & Spa Website

Role: Web Designer & Developer
Year: 2024
Tech Stack: React, Next.js, Framer Motion, SEO Opt
Salon & Spa Website

About the Project

This premium business website was designed and built for a luxury salon and spa that needed a strong online presence to attract local customers. Before this website, the business relied entirely on word-of-mouth and social media for customer acquisition — missing out on the significant traffic that comes from Google local search results. The website showcases the salon's services, pricing, gallery of work, and customer testimonials in a visually stunning layout with smooth animations and a dark, premium color scheme. Every page is fully SEO-optimized with structured data markup, local business schema, and Karachi-specific keywords to rank in local search results. The design is mobile-first, since over 85 percent of the salon's target audience browses on smartphones.

Key Features

  • Mobile-first responsive design tested across all screen sizes
  • Integrated service menu with detailed pricing and descriptions
  • SEO optimization with local business schema for Karachi searches
  • Fast loading performance with 95+ Google Lighthouse score
  • Smooth scroll animations powered by Framer Motion
  • WhatsApp integration for instant appointment booking
  • Image gallery showcasing salon work and interiors
  • Contact section with embedded Google Maps for easy navigation

The Challenge

The key challenge was creating a website that feels premium and luxurious while still loading blazing fast on mobile devices — many of the target customers access the internet on mid-range Android phones with slower connections. High-quality salon images are essential for conveying the brand's quality, but unoptimized images would destroy page speed. Additionally, the client needed the website to rank on the first page of Google for local search terms like "salon near me" and "spa in Karachi" without an ongoing advertising budget.

The Solution

I used Next.js Image component with automatic WebP/AVIF conversion and responsive srcset attributes to serve perfectly sized images for each device. This reduced the total image payload by over 70 percent compared to raw photos. Framer Motion animations are triggered on scroll intersection, so animation code only runs when elements enter the viewport — keeping initial page load lightweight. For SEO, I implemented comprehensive LocalBusiness schema markup, optimized meta tags with Karachi-specific keywords, submitted an XML sitemap to Google Search Console, and structured the HTML with proper semantic headings (H1 through H4) so Google can easily understand the page content.

Results & Impact

  • Achieved 95+ Lighthouse performance score on mobile devices
  • Page loads in under 1.5 seconds on 4G mobile connections
  • Ranks on Google for local salon-related search terms in Karachi
  • WhatsApp booking inquiries increased after website launch
  • Image payload reduced by 70% through automatic format conversion

Technical Deep Dive

The website is built with React and Next.js using Static Site Generation (SSG) for maximum performance — every page is pre-rendered at build time and served as static HTML from Vercel's global CDN. Styling combines CSS Modules for component-scoped styles with CSS custom properties for the design system (colors, spacing, typography). Framer Motion handles all scroll-triggered animations with the useInView hook for intersection-based triggering. SEO is implemented through Next.js metadata API for dynamic meta tags, JSON-LD structured data for LocalBusiness and BreadcrumbList schemas, and a programmatically generated sitemap.xml. The contact section integrates WhatsApp's click-to-chat API and an embedded Google Maps iframe. Deployment is automated via Git push to Vercel with preview deployments for every pull request.