Skip to main content

​
Getting Started

This guide will help you get the Adosa Real Estate website up and running locally, and make your first customization.
1

Start the Development Server

Launch the local development server using your preferred package manager:
npm run dev
You should see output similar to:
🚀 astro v5.16.5 started in 123ms

  ┃ Local    http://localhost:4321/
  ┃ Network  use --host to expose
The development server runs on port 4321 by default. Your site will be available at http://localhost:4321.
2

Open Your Browser

Navigate to http://localhost:4321 in your web browser. You should see the Adosa Real Estate homepage with:
  • A video hero section with beach footage
  • Navigation menu at the top
  • Smooth scroll animations (on desktop)
  • Team member profiles
  • Properties section
The site supports both Spanish (/) and English (/en) routes. The default language is Spanish.
3

Explore the Site

Try navigating through different sections:
  • Home: Main landing page with company overview
  • Properties: Browse available real estate listings at /propiedades (ES) or /en/propiedades (EN)
  • Contact: Team information and contact details
The site features smooth scrolling animations powered by GSAP and Lenis. These are only active on desktop (>1024px width) for optimal performance.

​
Your First Customization

Let’s make a simple change to the theme colors to see how easy it is to customize the site.
1

Open the Theme File

Navigate to and open the theme configuration file:
src/styles/theme.css
2

Modify the Color Scheme

The Adosa brand uses a premium color palette defined in CSS custom properties. Let’s change the accent color:Original colors:
src/styles/theme.css
:root {
    /* Color 4: Main Text (Dark Gray Ochre) */
    --color-4: #53534B;
    
    /* Color 3: Accent (Golden/Ochre) */
    --color-3: #D7AE56;
    
    /* Color 2: Secondary (Medium Gray) */
    --color-2: #AEADA5;
    
    /* Color 1: Background (Light Beige) */
    --color-1: #F2F1EB;
}
Try changing the accent color (--color-3) to a different shade:
src/styles/theme.css
:root {
    /* Change the golden accent to a warmer tone */
    --color-3: #C9A04F;
}
3

See the Changes

Save the file and check your browser. Astro’s hot module replacement (HMR) will automatically reload the page with your new color scheme.The accent color (--color-3) is used throughout the site for:
  • Hover states on navigation links
  • Team member role labels
  • Interactive elements
Changes to CSS files trigger instant updates without a full page reload, making styling iterations very fast.

​
Customize the Hero Section

Let’s make a more substantial change by customizing the hero section text.
1

Open the Home Page

The home page is located at:
src/pages/[...lang]/index.astro
2

Update the Hero Text

Find the hero title and subtitle around line 18-23:
src/pages/[...lang]/index.astro
// Current text
const HERO_TITLE = isEn
  ? "Your real estate agency in San Pedro Alcántara and Marbella"
  : "Tu inmobiliaria en San Pedro Alcántara y Marbella";
const HERO_SUBTITLE = isEn
  ? "20 years creating real estate value on La Costa del Sol"
  : "20 años creando valor inmobilrio en La Costa del Sol";
Change it to something more specific:
src/pages/[...lang]/index.astro
const HERO_TITLE = isEn
  ? "Luxury Real Estate in Marbella"
  : "Inmuebles de Lujo en Marbella";
const HERO_SUBTITLE = isEn
  ? "Exclusive properties on the Costa del Sol since 2005"
  : "Propiedades exclusivas en la Costa del Sol desde 2005";
3

View Your Changes

Save the file and refresh your browser. You’ll see the new hero text with the smooth reveal animation.
Notice how the site handles both Spanish and English translations using the isEn variable. This pattern is used throughout the codebase.

​
Understanding the Tech Stack

Astro Framework

Modern static site generator with optimal performance and zero JS by default

GSAP Animations

Professional-grade animations with ScrollTrigger for scroll-based effects

Lenis Smooth Scroll

Premium smooth scrolling experience (desktop only)

TypeScript

Type-safe development with full IDE support

​
Available Commands

Here are all the commands you can run from the project root:
CommandAction
npm run devStarts development server at localhost:4321
npm run buildBuilds production site to ./dist/
npm run previewPreviews your build locally before deploying
npm run astroRun Astro CLI commands
npm run astro -- --helpGet help using the Astro CLI
The project uses Astro 5 with the strict TypeScript configuration. Type checking is performed automatically during builds.

​
Common Development Tasks

​
Adding a New Page

Pages are automatically routed based on their file location in src/pages/[...lang]/: 
# Create a new page
src/pages/[...lang]/about.astro  → /about (ES), /en/about (EN)

​
Working with Components

Reusable components are in src/components/. For example, the Navigation component:
src/components/Navigation.astro
---
import Navigation from "../../components/Navigation.astro";
---

<Navigation />

​
Modifying Styles

Global styles are organized in src/styles/:
  • theme.css - Color palette and typography variables
  • global.css - Base styles and resets
  • animations.css - Animation keyframes and utilities
The project uses CSS custom properties extensively. Always modify colors through the theme variables in theme.css rather than hardcoding values.

​
Performance Features

Lenis smooth scroll is only enabled on desktop (>1024px) to preserve native touch scrolling performance on mobile devices.
src/layouts/BaseLayout.astro
const isDesktop = window.matchMedia("(min-width: 1025px)").matches;
if (isDesktop) {
  const lenis = new Lenis({ /* config */ });
}
GSAP ScrollTrigger animations are conditionally applied based on viewport size using matchMedia:
const mm = gsap.matchMedia();
mm.add("(min-width: 769px)", () => {
  // Desktop-only animations
});
Static assets in public/ are served directly. Consider using Astro’s Image component for automatic optimization:
import { Image } from 'astro:assets';
Custom fade transitions between pages using a white overlay animation (600ms duration).

​
Troubleshooting

If you see an error about the port being in use:
# Use a different port
npm run dev -- --port 3000
GSAP must be processed during SSR. Verify your astro.config.mjs includes:
vite: {
  ssr: {
    noExternal: ['gsap'],
  },
}
Run type checking manually:
npm run astro check
Clear Astro’s cache:
rm -rf .astro
npm run dev

​
Next Steps

Components

Explore the available UI components

Theme Configuration

Deep dive into customizing the theme

Internationalization

Learn about the Spanish/English translation system

Deployment

Deploy your site to production
Join the Astro community on Discord for help and to share your customizations!

Build docs developers (and LLMs) love

Get started for freeTalk to us