Included technologies
AstroCSS (Webflow-sourced design tokens)JavaScriptSwiperGSAPBricolage Grotesque (Google Fonts)
Travel, Tourism & Vacation
2
TravelLanding Page
Surf Haven
A premium Bali surf camp landing page featuring a day-by-day program, villa room accordion, activity gallery, team section, and an apply CTA overlay. Based on the Waveyu Webflow design, faithfully adapted to Astro with all local assets.
StatusAvailable preview
Selection codetravel-tourism-vacation-lp-002
CategoryTravel, Tourism & Vacation
Business fitSurf camp and vacation retreat
Product preview
What this landing page is for
Surf Haven is a one-page website preview for a surf camp and vacation retreat. It is designed to present the business clearly, show the main offer quickly, and guide visitors toward the next action, whether that is a call, booking, quote request, visit, or online inquiry.
Review the purpose, included sections, technology, support path, and selection code first, then open the live demo in a separate tab when you are ready to inspect the actual one-page website.
Technology
Technology and item details
How this page can be used
- Responsive one-page layout for desktop, tablet, and mobile visitors.
- Clear page sections for the business story, services or offer, trust signals, contact path, and primary customer action.
- Ready to customize with the customer's logo, brand colors, copy, images, services, prices, offers, and contact details.
Included
Page structure and support
What the demo includes
- Sticky navbar with dark/light scroll inversion
- Hero with large headline and video background / scooter motion image
- Surf levels section (Beginner, Intermediate, Advanced cards)
- Program / Day accordion with Description + Timetable tabs (7 days)
- Stay section with villa image and room accordion (Twin, Double, Group Suite, Common Areas)
- About section
- Team section
- Activity gallery
- Apply CTA overlay
- Footer with aerial surf background and Powered by WebDevful
Features and interactions
- Day program accordion expands/collapses with smooth height transition
- Program day hover reveals that day's image as a rotated card that parks right-of-centre and drifts subtly with the cursor (desktop; GSAP mouse-move)
- Program day divider line wipes from gray to green (left-to-right) on row hover
- Section eyebrow star twinkles/polishes on an infinite loop (all sections; CSS, reduced-motion aware)
- FAQ accordion (single-open) expands/collapses each question with a height transition + chevron rotate
- Unified button hover roll: text buttons roll their label, arrow-tail buttons roll their arrow (out top-right, duplicate rolls in) + accent circle
- Team card click expands a frosted bio overlay from the + corner to fill the card (+ rotates to ×); single-open
- Footer nav links slide the accent underline in on hover/focus; the giant footer wordmark shifts frost→accent green per letter on hover (site-wide accent)
- Description/Timetable tab switcher inside each day pane
- Room accordion with grid-template-rows animation
- Apply overlay modal with ESC and backdrop click dismiss
- Navbar scroll-invert color transition (bar goes light on scroll; the nav dropdown menu stays accent green in both the top and sticky header states)
- Smooth anchor scrolling
Documentation included
Included setup notes can cover page sections, image replacement, content editing, preview steps, and handoff details.
Subscription-ready
This landing page can be chosen as the first step in the Webdevful subscription process, then customized with the customer's business content.
Commercial purchase path
The same landing page can also support a direct purchase option for customers or developers who want to adapt it for a project.
Support option
Standard support can cover setup questions and landing-page issues after delivery, with extended support available as a separate upgrade.
