</>

</>giacomosx

© 2025 - All right reserved

  • Home
  • Projects
  • About
  • Blog

🇱🇰 Luna Surf Hikka

title
🇱🇰

🤿 Luna Surf Hikka – Surf Resort & Experience in Sri Lanka

Overview

Luna Surf Hikka is a full-service surf resort located in Hikkaduwa, Sri Lanka, offering surf lessons, accommodation, cooking classes, transfers, and authentic Sri Lankan experiences. The website serves as both an informational platform and a booking hub for Italian travelers seeking an unforgettable surf holiday.
The platform combines stunning visuals with practical information, designed with performance, mobile-first design, and user experience at its core. Built with modern web technologies, it reflects the resort's identity: adventure, culture, and authentic Sri Lankan hospitality.

Key Features

🏄 Multi-Level Surf Lessons

  • Detailed pages for Beginner, Intermediate, and Advanced surfers
  • Specialized Longboard sessions for intermediate and advanced riders
  • ISA-certified instructors with personalized coaching
  • Interactive tabs for easy navigation between levels
  • Video analysis for advanced students

🍛 Sri Lankan Cooking Classes

  • Immersive culinary experiences with local chefs
  • Menu featuring authentic dishes: Rice & Curry, Fish Curry, Pol Sambol, and more
  • Multiple packages: Standard Class, Market-to-Table, Private Class
  • Detailed difficulty levels and dish descriptions
  • Weekly themed classes (Street Food, Seafood Special, Vegetarian Feast)

🚐 Transfer & Transportation Services

  • Airport transfers (Colombo ↔ Hikkaduwa)
  • Daily surf spot transfers
  • Full-day tours to popular destinations (Galle, Ella, Yala, Udawalawe)
  • Multiple vehicle options: Van, Private Car, Tuk-Tuk
  • 24/7 assistance and flight monitoring

🗺️ Excursions & Adventures

  • Guided tours to nature reserves, temples, and tea plantations
  • Safari experiences
  • Authentic Sri Lankan cultural immersion

📸 Visual Storytelling

  • Professional photography showcasing surf conditions, resort atmosphere, and landscapes
  • Glassmorphism design with animated backgrounds
  • Immersive hero sections for each service page

📱 Mobile-First & Performance

  • Fully responsive design optimized for all devices
  • Fast loading times with optimized images
  • Smooth animations with Framer Motion
  • Server-side rendering for optimal SEO

🌐 Localization

  • Content primarily in Italian targeting Italian travelers
  • Clear navigation with breadcrumb system
  • SEO-optimized for Italian search queries related to Sri Lanka surf holidays

📞 Easy Contact & Booking

  • Direct WhatsApp integration for instant communication
  • Contact forms for booking requests
  • Clear CTA buttons throughout the site

🎨 Design System

  • shadcn/ui component library
  • Custom ocean-inspired color palette (OKLCH color space)
  • Glassmorphism effects and animated grid patterns
  • Consistent typography: Geist Sans & Geist Mono
  • Dark/Light theme support

Tech Stack

Layer
Technology
Framework
Next.js 15 (App Router)
Language
TypeScript (strict mode)
Styling
Tailwind CSS v4 with CSS variables
UI Library
shadcn/ui + Lucide React icons
Animations
Framer Motion + custom CSS keyframes
Fonts
Geist Sans & Geist Mono (next/font)
Architecture
React Server Components (RSC)
Deployment
Vercel / any Node.js host
Version Control
Git

Project Structure

  • src/app/ – App Router Next.js
    • layout.tsx – Root layout
    • page.tsx – Homepage with Hero
    • cooking-class/ – Cooking class page
    • servizi/ – Surf lessons and transfer service pages
    • privacy-policy/ – Privacy Policy page
    • globals.css – Global styles
  • components/ – UI and layout components
  • hooks/ – Custom hooks
  • lib/ – Utility functions

My Contributions

  • Full-stack development with Next.js 15 and modern React
  • Content architecture using constants for easy updates
  • Mobile-first responsive design with glassmorphism aesthetic
  • SEO optimization and server-side rendering
  • Integration of shadcn/ui for UI consistency and accessibility
  • Custom animations: testimonial marquee, scroll effects
  • Multi-page structure for surf lessons, cooking classes, transfers, and privacy policy
  • Performance optimization: Next.js image optimization, code splitting
  • Type safety with strict TypeScript
  • Accessibility: WCAG-compliant with ARIA labels and keyboard navigation

Business Context

Luna Surf Hikka combines surf, culinary experiences, and authentic Sri Lankan hospitality. Located in Hikkaduwa, a premier Sri Lankan surf destination, it offers a complete experience for Italian travelers seeking adventure, relaxation, and cultural immersion.
The website is designed to:
  • Attract Italian tourists planning surf holidays in Sri Lanka
  • Showcase unique resort offerings beyond surf lessons
  • Simplify the booking process with clear information and direct contact
  • Build trust through professional presentation and transparent content
  • Reflect local identity with visual storytelling

Design Philosophy

  1. Visual Impact First: hero images and glassmorphism capture surf lifestyle
  1. Content Clarity: digestible and scannable information
  1. Performance Matters: fast load times without sacrificing quality
  1. Mobile-First: designed primarily for smartphone users
  1. Authentic Voice: Italian content for the target audience
  1. Conversion-Focused: clear CTAs and streamlined paths to contact/booking

Future Enhancements

  • Online booking system with calendar integration
  • Customer review submission form
  • Blog section for surf conditions and travel tips
  • Photo gallery with Instagram integration
  • Multi-language support (English, German)
  • Google Analytics and cookie consent banner
Live Site: www.lunasurfhikka.com
Repository: Private
Status: Active Development
Target Market: Italian surf travelers to Sri Lanka