Web development
Arena Sport — Water Sports Center
Immersive 3D and animated experience to explore and book water sports activities
- Client
- Arena Sport
- Location
- Coveñas, Colombia
- Duration
- 3 months
- Status
- Completed
Project Gallery
Technology Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Three.js
- React Three Fiber
- Drei
- GSAP
- Framer Motion
Detailed Description
Immersive website for a water sports center where users explore and book experiences like kitesurfing, wakeboarding, windsurfing, paddle SUP, and jet ski. A complete brand experience with fluid animations, 3D graphics, and dynamic per-activity detail pages.
The Challenge
Create a digital presence that captured the adrenaline and atmosphere of water sports, while functioning as a real conversion platform: activity catalog, per-experience detail pages, instructor info, meeting points, and pricing — all with a scalable and maintainable architecture.
Our Solution
Built with Next.js 16 (App Router) and React 19 with TypeScript. Detail pages are dynamically generated per activity via [slug] routes, powered by a typed data model (Activity) that centralizes the entire catalog. Interactive 3D elements were built with Three.js, React Three Fiber, and Drei. Animations and micro-interactions were implemented with GSAP and Framer Motion. The design system uses Tailwind CSS v4 with Fraunces + DM Sans typography optimized via next/font. Each activity page includes a gallery, instructor info, meeting point with embedded OpenStreetMap, pricing, and reviews.
Results Achieved
Immersive landing page with animated sections (hero, intro, experiences, activities, contact), complete catalog of 5 water sports with dynamic detail pages, scalable data-driven architecture with a typed model, and responsive design focused on conversion and user experience.
Ready to Start?
Looking for the best technological solution?
We transform your ideas into innovative digital solutions that drive your business growth.
Contact us on WhatsApp!