Skip to content
BranchesTags

Repository files navigation

AWAKE Marketing — Website

Astro Tailwind CSS TypeScript Vercel

Corporate website for AWAKE Marketing, a digital marketing studio based in Valencia & Alicante, Spain. Built with Astro 6 (SSR), Tailwind CSS v4, and deployed on Vercel. Trilingual (ES/EN/IT) with a dual-mode design system.

Live: www.awakemarketing.es

Tech Stack

Layer Technology
Framework Astro 6 — SSR mode
Styling Tailwind CSS v4 + CSS custom properties
Language TypeScript
Deployment Vercel (server adapter)
Email Resend API
Analytics Vercel Analytics + Speed Insights
Fonts Montserrat + Raleway (Google Fonts)
Package manager pnpm

Architecture

src/
├── components/          # Shared UI components (.astro)
│   ├── Badge.astro
│   ├── Button.astro
│   ├── CoreMethod.astro
│   ├── Footer.astro
│   ├── Header.astro
│   ├── Logo.astro
│   ├── PriceCard.astro
│   ├── RadarOrb.astro
│   ├── SectionTitle.astro
│   ├── ServiceRow.astro
│   ├── Toast.astro
│   └── ValueCard.astro
├── i18n/                # Translations + locale routing utilities
│   ├── es.json
│   ├── en.json
│   ├── it.json
│   └── utils.ts         # getLocalizedUrl(), slugMap, reverseSlugMap
├── layouts/
│   └── Layout.astro     # Base layout: SEO head, view transitions, analytics
├── pages/
│   ├── api/
│   │   └── contact.ts   # POST endpoint — Resend email handler
│   ├── es/              # Spanish pages (default locale)
│   ├── en/              # English pages
│   ├── it/              # Italian pages
│   ├── index.astro      # Root redirect
│   └── sitemap.xml.ts   # Dynamic sitemap generation
├── styles/
│   └── global.css       # CSS design tokens + Tailwind base
└── types.ts             # Shared TypeScript types (Tier, CoreStep)

Pages & Routes

Spanish (ES) English (EN) Italian (IT)
/es/ /en/ /it/
/es/sobre-nosotros/ /en/about-us/ /it/chi-siamo/
/es/servicios/ /en/services/ /it/servizi/
/es/contacto/ /en/contact/ /it/contatto/
/api/contact (shared endpoint) (shared endpoint)

Internationalization

  • Default locale: es (Spanish), with /es/ prefix enforced on all routes
  • Supported locales: es, en, it
  • Slug mapping (e.g. servicios ↔ services ↔ servizi) handled in src/i18n/utils.ts via slugMap and reverseSlugMap
  • Each locale has its own JSON translation file under src/i18n/
  • hreflang alternate links injected in <head> for all locales plus x-default
  • SPA-like navigation between pages via Astro's <ClientRouter /> (View Transitions API)

Design System

The site uses a dual-mode visual identity: violet-saturated sections alternate with editorial white sections throughout every page, creating a consistent rhythm without visual fatigue.

Color Tokens

Token Value Role
--violet #6B2470 Primary · CTA · saturated backgrounds
--violet-deep #3A1840 Dark header · depth · shadows
--violet-soft #F3E9F7 Section tint · card backgrounds
--violet-line #E6D5EE Borders · separators
--ink #0A0A0A Body text on white
--graphite #2C2C2C Secondary text
--paper #FFFFFF Editorial background
--offwhite #F4F4F4 Alternate section background
--coral #FFCE65 Accent (marquee, highlights)
--rule #E8E4EA 1px divider lines

All foreground/background pairings meet WCAG AAA contrast ratios.

Typography

Role Family Notes
Display/H1 Montserrat Bold 700 Wide letter-spacing, hero headings
H2/H3 Montserrat 500–600 Section and card titles
Eyebrow Montserrat 500 Uppercase, tracking +0.22em
Body Raleway Regular 400 Long-form reading, 1.55 line-height
Quote/Caption Raleway Italic 300 Taglines, pull quotes

Animations

  • Scroll reveal: IntersectionObserver toggles .is-visible on .reveal elements (threshold 12%, 40px bottom margin)
  • Marquee: CSS @keyframes infinite scroll on hero band
  • Hover transitions: 200ms color/fill inversions on cards and buttons
  • Reduced motion: All animations disabled via prefers-reduced-motion: reduce

Contact API

POST /api/contact

Accepts a JSON body and sends a formatted HTML email via Resend.

Field Type Description
nombre string Sender's name
email string Sender's email address
marca string Brand / business name
servicio string Service of interest
mensaje string Message body

Emails are sent from noreply@awakemarketing.es to hola@awakemarketing.es.

Responses:

Status Body
200 { "success": true }
500 { "error": "Error al enviar" }

Environment Variables

Variable Required Description
RESEND_API_KEY Yes API key from resend.com

Create a .env.local file at the project root (never commit it):

RESEND_API_KEY=your_key_here

Local Setup

Prerequisites: Node.js ≥ 18, pnpm

# Clone the repo
git clone https://github.com/your-username/awake-marketing.git
cd awake-marketing

# Install dependencies
pnpm install

# Set up environment variables
cp .env.local.example .env.local
# → fill in RESEND_API_KEY

# Start dev server
pnpm dev
# → http://localhost:4321

Available Scripts

Command Action
pnpm dev Start local development server
pnpm build Production build
pnpm preview Preview production build locally

Deployment

Deployed on Vercel using the @astrojs/vercel server adapter (SSR — not static).

  • Production URL: https://www.awakemarketing.es
  • Push to main triggers automatic deployment via Vercel CI
  • Vercel Analytics and Speed Insights are integrated at the framework level

SEO

  • Canonical URLs per page and locale
  • Open Graph + Twitter Card meta tags with og-image.png
  • hreflang alternate links for all 3 locales + x-default
  • JSON-LD structured data (MarketingAgency schema)
  • Dynamic sitemap.xml generated at build time
  • robots.txt included in /public

About

www.awakemarketing.es

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages