The Pretty Bar Web Design and Development Project by Paul FadayoThe Pretty Bar Web Design and Development Project by Paul Fadayo

The Pretty Bar Web Design and Development Project

Paul Fadayo

Completed work

Framer Designer

Frontend Engineer

Fullstack Engineer

GSAP

Jitter

Next.js

Beauty

Project Executive Summary

Client The Pretty Bar (Kolonaki, Athens, Greece)

Project Type Web Design & Full-Stack Development

Platform Next.js 16, React 19, Tailwind CSS v4, Framer Motion, Three.js

Scope Design, Engineering, Hosting & Domain Handoff

Timeline 1 Week

Deliverables Figma Prototypes (Mobile & Desktop), Full Next.js Web Application, Unified Treatwell & Fresha Booking System, Local SEO & Analytics Setup, Hostinger Business Infrastructure

The Challenge & Background

The Pretty Bar is a high-end beauty studio located in the prestigious Kolonaki district of Athens, specializing in hair styling, nail art, facials, waxing, and specialized beauty treatments.

Prior to this project, the salon faced several operational and digital branding friction points:

Broken Digital Entry Point: The Instagram bio link pointed to an unreachable domain (theprettybar.gr), causing lost revenue from prospective clients clicking through social media.

Fragmented Booking Platforms: Bookings were split across Treatwell (for review credibility) and Fresha (for appointment management), confusing clients on where and how to reserve a slot.

Lack of Brand Ownership: Operating solely on third-party platform URLs meant competitors were displayed alongside their profiles and organic local search presence was non-existent.

The Objective

Design and engineer a single-page brand homepage that serves as the salon's owned digital home, unifies Treatwell and Fresha booking channels into a frictionless user experience, highlights 2,200+ verified customer reviews, showcases the specialist team, and converts social media traffic into bookings.

The Solution & Core Features

We crafted a bespoke, high-converting digital experience designed with modern editorial aesthetics—incorporating dark champagne accents, smooth ambient aura lighting, soft glassmorphism, and instant-scroll navigation.

Key Highlights:

Unified Dual-Booking System: Prominent CTAs directing clients seamlessly to either Treatwell or Fresha based on their preference.

Mobile-First Responsive Design: Optimized specifically for phone viewports (390px base), capturing 85%+ of traffic coming from Instagram.

Dynamic Micro-Interactions: Framer Motion scroll reveals, GSAP transitions, and Lenis smooth scrolling for a world-class luxury feel.

High-Trust Social Proof: Highlighting a 4.8 / 5 star rating backed by 2,200+ verified client reviews.

Bilingual Multi-Language Support (EN / EL): Built-in instant language switcher powered by lightweight client-side dictionaries (en.ts & el.ts), delivering a localized Greek experience for Athens locals and English for international visitors.

Adaptive Dark & Light Mode Theme: Customized luxury theme engine powered by next-themes with tailored HSL palette tokens (deep espresso base, champagne rose highlights, and soft glassmorphism).

Section-by-Section Screenshot Deep Dives

Here is the complete visual breakdown of the key sections designed and built for the landing page project:

1. Hero Section & Unified Booking System

The hero section serves as the first viewport signal—establishing immediate brand luxury and eliminating clutter. It features dual primary action buttons ("Book on Treatwell" and "Book on Fresha") alongside interactive modal triggers.

Hero Section & Unified Booking System

Design Note: A clean dark background with warm champagne highlights anchors the hero. The headline clearly communicates the location ("Kolonaki · Athens") and value proposition without overwhelming the visitor.

Interactive Booking Hub Modal

Clicking the primary header CTA opens an interactive overlay, presenting clients with their choice of booking provider:

Interactive Booking Hub Modal

2. Brand Story & Interactive Service FAQs

A curated narrative section detailing the salon's ethos in Kolonaki, combined with interactive expandable accordions covering service categories (Hair, Nails, Facials, Waxing, Lashes).

Interactive Service FAQs

UX Strategy: Smooth FAQ accordions prevent vertical page bloat while giving prospective clients quick answers regarding treatment times, products used, and booking policies.

3. Specialist Team Showcase

Beauty clients book people, not just brands. This section spotlights all 7 team specialists (Kelly, Zoe, Lori, Penny, Claudia, Anna, Euaggelia) with their specific domain focus (Nails, Stylist, Facials).

Team Showcase

Visual Direction: Minimalist profile cards with hover interactions allow clients to identify their preferred practitioner before committing to a booking.

4. Editorial Craft & Selected Work Gallery

An editorial masonry grid showcasing real client work—from intricate nail art to professional hair coloring and styling.

Editorial Craft & Selected Work Gallery

Performance Optimization: Images use Next.js next/image with WebP compression, lazy loading, and blur placeholders for immediate visual response.

5. Social Proof & Verified Rating Strip

To build immediate credibility, we created a dedicated social proof strip aggregating customer ratings directly from Treatwell.

Social Proof & Verified Rating Strip

Key Metric Displayed:

4.8 / 5.0 Rating

2,200+ Verified Reviews via Treatwell

Authentic customer quote marquee scrolling horizontally.

6. Location, Hours & Direct Contact Hub

The closing section provides actionable visit information: exact Greek address in Kolonaki (Ακαδημίας 19, Αθήνα), opening hours (Mon–Sat 09:00–20:00), direct tap-to-call link, and an interactive Google Maps embed.

Location, Hours & Direct Contact Hub

Technical Architecture & Stack

flowchart TD
    SubGraph1[Client Layer] --> NextJS[Next.js 16 - App Router]
    NextJS --> React19[React 19 Engine]
    
    SubGraph2[Styling & UI] --> TW[Tailwind CSS v4]
    SubGraph2 --> FM[Framer Motion 12]
    SubGraph2 --> R3F[React Three Fiber Ambient Glow]
    
    NextJS --> SubGraph2
    
    SubGraph3[External Bookings] --> Treatwell[Treatwell Booking Engine]
    SubGraph3 --> Fresha[Fresha Booking Engine]
    
    NextJS --> SubGraph3
    
    SubGraph4[Deployment & Hosting] --> Hostinger[Hostinger Business Infra]
    Hostinger --> DNS[Custom Domain & SSL]

Architecture

Stack Breakdown:

Framework: Next.js 16 (Turbopack) & React 19

Styling: Tailwind CSS v4 + Vanilla CSS variables for glassmorphism

Animations: Framer Motion 12, GSAP 3, Lenis smooth scrolling

3D Effects: @react-three/fiber & @react-three/drei for real-time ambient lighting aura

Hosting & Infrastructure: Hostinger Business Plan, 1-year free .com domain, SSL certificate, 5 email mailboxes setup.

Results & Deliverables Summary

100% Brand Ownership: Replaced broken link with a custom, high-speed landing page owned entirely by the salon.

Zero Booking Friction: Unified Treatwell and Fresha platforms into a single tap-to-book workflow.

Mobile Performance: Achieved 98+ mobile performance score on Google Lighthouse with fast initial server paint.

Complete Package Handoff: Handed over full ownership, domain DNS configuration, email mailbox setup, and client documentation within budget.

Like this project

Completed work

Posted Aug 11, 2026

Designed a high-converting website for The Pretty Bar, unifying booking platforms and enhancing brand engagement.

Likes

Views

Timeline

Aug 1, 2026 - Aug 7, 2026