Skip to main content

​
What is Velaria?

Velaria is a modern e-commerce website for handcrafted aromatic candles, built with Astro and deployed on Vercel. The platform showcases artisanal decorative candles with customizable designs and fragrances, providing an elegant online presence for a small business specializing in handmade candles.
Velaria means “candles that transform your space” - each detail matters, from the handcrafted designs to the personalized fragrances.

​
Key features

Velaria offers a comprehensive set of features designed for showcasing and selling artisanal candles:

Product catalog

Dynamic product showcase with 10+ unique candle designs including Bubbles, Geometric, Spiral, Rosa, and seasonal variations. Each product displays with pricing ranging from 20to20 to 85 MXN.

Fragrance selection

Five curated fragrances: Vainilla, Pino, Sándalo, Canela, and Lavanda. Custom fragrance requests are also accommodated.

Contact form

Integrated contact form with SweetAlert2 notifications, email validation, and API integration for customer inquiries and quote requests.

Smooth animations

Built-in scroll animations using tailwindcss-animated and tailwindcss-intersect for fade-up effects, parallax scrolling on the header, and staggered product reveals.

WhatsApp integration

Dynamic WhatsApp contact button that switches between two phone numbers based on time of day (after 12 PM).

​
Tech stack

Velaria is built with modern web technologies:
  • Astro 5.16.6 - Fast, content-focused web framework with server-side rendering
  • Tailwind CSS 4.1.13 - Utility-first CSS framework with custom animations
  • TypeScript - Type-safe development with strict configuration
  • Vercel - Serverless deployment with SSR adapter
  • SweetAlert2 - Beautiful, responsive popup alerts

​
Key dependencies

package.json
{
  "dependencies": {
    "@astrojs/vercel": "^9.0.2",
    "@tailwindcss/vite": "^4.1.13",
    "@tailwindplus/elements": "^1.0.13",
    "astro": "^5.16.6",
    "sweetalert2": "^11.23.0",
    "tailwindcss": "^4.1.13",
    "tailwindcss-animated": "^2.0.0",
    "tailwindcss-intersect": "^2.2.0"
  }
}

​
Project structure

The Velaria codebase follows Astro’s standard project structure: 
velaria/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── bolitas.jpg
│   │   │   └── header2.png
│   │   ├── astro.svg
│   │   └── background.svg
│   ├── components/
│   │   ├── Catalogo.astro
│   │   ├── Contactanos.astro
│   │   ├── Footer.astro
│   │   ├── Fragancias.astro
│   │   ├── Header.astro
│   │   ├── Intro.astro
│   │   ├── Navbar.astro
│   │   ├── Producto.astro
│   │   ├── ScrollToTop.astro
│   │   ├── Usos.astro
│   │   └── Whatsapp.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   ├── api/
│   │   │   ├── contact.ts
│   │   │   └── contact-email.ts
│   │   ├── index.astro
│   │   ├── nosotros.astro
│   │   └── terminos-condiciones.astro
│   └── styles/
│       └── global.css
├── astro.config.mjs
├── package.json
└── tsconfig.json

​
Architecture overview

Velaria uses a component-based architecture with server-side rendering:

​
SSR configuration

The site is configured for server-side rendering with Vercel:
astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import vercel from '@astrojs/vercel';

export default defineConfig({
  output: 'server',
  vite: {
    plugins: [tailwindcss()]
  },
  adapter: vercel()
});

​
Page composition

The homepage (src/pages/index.astro:16) combines multiple components: 
<Layout title="VELARIA | Inicio">
  <Header title="ILUMINA TUS MOMENTOS MÁS ESPECIALES" 
          subtitle="VELAS AROMÁTICAS DECORATIVAS ARTESANALES" />
  <Intro />
  <Producto />
  <Catalogo />
  <Fragancias />
  <Usos />
  <Contactanos />
  <ScrollToTop/>
</Layout>

​
Animation system

Velaria features rich animations powered by Tailwind CSS plugins:

​
Fade-up animations

Used throughout the site for elegant content reveals:
src/components/Header.astro:13-15
<Image class="m-auto pb-3 animate-fade-up animate-delay-400 animate-duration-1000" 
       src={'...'} width={100} height={200} alt="candle-icon" />
<h1 class="animate-delay-500 animate-fade-up">{title}</h1>
<p class="animate-fade-up animate-delay-600">{subtitle}</p>

​
Parallax scrolling

The header background moves at a different speed than content (src/layouts/Layout.astro:38-42): 
window.addEventListener('scroll', () => {
  const offset = window.pageYOffset;
  header.style.backgroundPositionY = offset * 0.3 + 'px';
});

​
Intersection Observer animations

Products fade in and scale up as they enter the viewport (src/components/Catalogo.astro:14): 
<div class="group scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 
            transition duration-500">
  <!-- Product content -->
</div>
Stagger delays (delay-200, delay-300, etc.) create a cascading reveal effect for multiple products.

​
Next steps

Get started with Velaria:

Quick start

Learn how to clone, install, and run Velaria locally in minutes.

Components

Explore the component library including Catalogo, Fragancias, and Contactanos.

API routes

Understand the contact form API and email integration.
This project uses TypeScript with strict mode disabled (tsconfig.json:6). Consider enabling strict type checking for production applications.

Build docs developers (and LLMs) love

Get started for freeTalk to us