Ocean is a modern Travel & Tour Website Template built with Astro for blazing-fast performance, clean architecture, and SEO-friendly delivery. Designed specifically for ocean travel agencies, tour operators, diving & snorkeling companies, island hopping services, and adventure travel brands, Ocean delivers an immersive, trustworthy, and visually rich digital experience inspired by the beauty of the sea.
Ocean Supports Astro Version 6.x.x 🎉
From the first cinematic hero section to detailed tour pages and booking inquiries — every component is carefully crafted to communicate adventure, clarity, safety, and premium travel experiences.
🚀 What Makes Ocean Stand Out
Ocean empowers your travel brand with:
- Immersive hero sections with ocean-inspired visuals
- Purpose-built UI for tours, packages & destinations
- Clean, modern layout optimized for conversion
- Smooth micro-interactions & subtle animations
- Lightning-fast performance powered by Astro
Every section is designed to build trust, excitement, and clarity, helping visitors confidently plan their next ocean adventure.
🎯 Design DNA
- Oceanic Color Palette
- Deep blues, sea turquoise, soft whites & dark overlays inspired by underwater environments
- Modern Travel Typography
- Clean sans-serif typography for clarity, readability & global audiences
- Subtle Motion & Micro-Interactions
- Smooth hover states, scroll reveals & UI feedback
- Responsive Perfection
- Optimized for desktop, tablet & mobile devices
📦 Features Included
- Travel-focused homepage with strong hero & CTA
- Tour listing with detail pages (pricing variants supported)
- Tour Detail gallery with lightbox (GLightbox)
- Booking & inquiry forms
- Blog & travel journal (MDX powered)
- Pagination system (SEO-friendly)
- Reviews & testimonials sections
- Contact page with form & contact info
- About, FAQ, Privacy Policy & Terms pages
- Reusable CTA & section components
📝 Project Structure
public/ ├── img/ # All Source Images │ src/ ├── components/ # Reusable components ├── content/ # MDX content │ ├── blog/ # Article MDX files │ ├── tours/ # Tours MDX files │ └── pages/ # All static pages ├── scripts/ # All Scripts ├── layouts/ # Layout components (MainLayout) ├── pages/ # Astro route files └── styles/ # Global styles and Tailwind config
📄 Pages Included (Fully Coded)
- Home (Landing Page) – Hero, featured tours, reviews & CTAs
- Tours Listing – Grid layout with pagination
- Tour Detail Page – Gallery, pricing packages, facilities & content
- Blog / Journal – Travel stories & guides
- Blog Detail Page
- Contact Page – Contact form & info
- About Page
- FAQ Page
- Privacy Policy
- Terms & Conditions
- Documentation
- 404
🧱 Fully Modular & Reusable Components
Ocean is built with a clean, scalable, component-based architecture:
- HeroSection
- HeadingSection
- TourSection
- TourCard
- TourGallery
- BlogSection
- BlogCard
- ReviewSection
- ContactSection
- BookingForm
- Pagination
…and many more reusable UI components.
Perfect for rapid customization and long-term scalability.
📝 Built-in Content System (MDX / Markdown)
Manage content without touching layout code:
- ✅ Tours & travel packages
- ✅ Blog articles & travel guides
- ✅ Static pages (About, FAQ, Policies)
- ✅ Documentation
Ideal for content-driven travel websites.
⚙️ Quick Setup
1️⃣ Download & open ocean project
2️⃣ Run npm install
3️⃣ Start development with npm run dev
4️⃣ Customize branding, tours & content
5️⃣ Build production files with npm run build
🆓 Free Updates & Support
Free lifetime updates to ensure compatibility with future Astro releases and ongoing performance improvements.
🔄 Changelogs
VERSION 1.1.0 (March 2026)
Package Updated
@iconify-json/bi ^1.2.6 → ^1.2.7 @tailwindcss/vite ^4.1.13 → ^4.2.1 alpinejs ^3.14.9 → ^3.15.8 tailwindcss ^4.1.13 → ^4.2.1 astro ^5.1.7 → ^6.0.0 @astrojs/mdx ^4 → ^5
Content Config
src/content/config.ts → deleted src/content.config.ts → created with glob() type: "content" → removed z imported from astro/zod
Dynamic Routes
entry.slug → entry.id.replace(/\.mdx$/, "")
params: { slug: entry.id.replace(/\.mdx$/, "") }
Pages
entry.render() → render(entry)
Fonts API
Google Fonts `<link>` → Astro 6 built-in Fonts API.
