Casa Serena — Spanish/Italian for "Serene House" or "Peaceful Home". A name that captures the stillness of waking up to the sea, where luxury and calm exist in perfect balance.
Luxury beachfront estate website. Built with Astro, styled with Tailwind CSS v4, animated with GSAP.
- Framework — Astro 6 (static output)
- Styling — Tailwind CSS v4 (CSS-first config via
@themeinsrc/styles/global.css) - Animations — GSAP + ScrollTrigger
- Fonts — Cormorant Garamond, DM Sans (Google Fonts)
- Images — Astro Image (optimized WebP via Unsplash)
- SEO — Open Graph, Twitter Card, JSON-LD structured data, sitemap
src/
├── components/
│ ├── Nav.astro # Fixed navbar + mobile overlay
│ ├── Hero.astro # Hero, marquee strip, intro section
│ ├── About.astro # About section + stat counters
│ ├── Gallery.astro # Horizontal scroll gallery + lightbox
│ ├── Amenities.astro # Amenity list (data-driven)
│ ├── Quote.astro # Pull quote + animated stat counters
│ ├── Location.astro # Location map context + distances
│ ├── Enquire.astro # Contact form + footer
│ └── PageScripts.astro # All GSAP / ScrollTrigger logic
├── styles/
│ └── global.css # Tailwind v4 @theme tokens + base styles
├── layouts/
│ └── Layout.astro # HTML shell, SEO meta
└── pages/
├── index.astro # Page orchestrator (~50 lines)
└── 404.astro
public/
├── favicon.svg # Brand CS monogram (SVG, preferred)
└── favicon.ico # Brand CS monogram (ICO, fallback)
| Command | Action |
|---|---|
bun install |
Install dependencies |
bun dev |
Start dev server at localhost:4321 |
bun build |
Build production site to ./dist/ |
bun preview |
Preview production build locally |
bun astro check |
Type-check all .astro files |
bun install
bun devThe dev server supports HMR. GSAP animations are disabled for users with prefers-reduced-motion.
The site builds to a static dist/ directory — deploy to any static host (Netlify, Vercel, Cloudflare Pages, etc).
bun build
# upload dist/ to your host