Siren Travel (SIREN)

Overview

Siren Travel is a marketing and booking-oriented travel site built with Next.js. It is designed to promote tours, destinations, and travel rentals with a clear layout, reusable section components, and SEO-friendly metadata (Open Graph, Twitter cards, canonical URLs).

The default experience focuses on discovery: hero messaging, offers, categories, destinations, outdoor highlights, hiking gear, social proof, FAQs, and blog teasers — plus dedicated flows for About, Contact, and Travel rentals (listing and detail pages).

Features

App Router pages — Home (/), About (/about), Contact (/contact), rentals index (/rental), rental detail (/rental/[slug]), and an internal Styleguide (/styleguide) for UI reference
Modular sections — Composable blocks under app/components/ (hero variants, destinations, testimonials, FAQ, blog, CTA, forms, carousels, and more) composed per route
Travel rentals flow — Rental listing page with featured items, banners, arrivals, popular picks, terms, and FAQ blocks
Responsive chrome — Shared header and footer; mobile navigation pattern for smaller viewports
Rich UI primitives — Carousel (Embla), date picking (react-day-picker), icons (Lucide, Phosphor), and Base UI–aligned building blocks
Design system — Tailwind CSS 4 utilities plus SCSS modules for colors, typography, buttons, and effects (styles/)
Interactive hero — Client-side hero treatment with image transitions and prefers-reduced-motion awareness where implemented
TypeScript — Typed components and data modules throughout the app directory

Demo

Live site (canonical in app metadata): siren.newproweb.com

Tech stack

Technology	Role
Next.js 16	App Router, layouts, metadata
React 19	UI
TypeScript	Type safety
Tailwind CSS 4	Utility styling
Sass	Shared tokens and component-scoped styles
Embla Carousel	Carousels
date-fns / react-day-picker	Dates in UI

Quick installation guide

Requires Node.js 18+ and npm (or compatible package manager).

1. Clone the repository

git clone https://github.com/newproweb/SIREN.git
cd SIREN

2. Install dependencies

npm install

3. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

4. Production build

npm run build
npm run start

5. Lint

npm run lint

Project structure (high level)

SIREN/
├── app/
│   ├── (pages)/          # Route groups: about, contact, rental
│   ├── components/       # Page sections and UI blocks
│   ├── styleguide/       # Design reference page
│   ├── layout.tsx        # Root layout, fonts, metadata
│   ├── page.tsx          # Home composition
│   └── globals.css
├── styles/               # SCSS entry and tokens
├── public/images/        # Static assets, favicons, previews
└── package.json

Support & contact

Questions about this project or deployment:

Email: tools@newproweb.com

License

This repository is marked private in package.json. Use and distribution follow your team’s or vendor’s agreement.