Skip to main content

Velaria Documentation

Complete developer guide for the Velaria website — a beautiful platform showcasing handcrafted decorative aromatic candles with server-side rendering, animations, and seamless integrations.

Get StartedProject Structure

Quick start

Get up and running with the Velaria project in minutes

1

Clone the repository

Start by cloning the Velaria repository from GitHub to your local machine.
git clone https://github.com/ElvicMC41/VELARIA.git
cd VELARIA
2

Install dependencies

The project uses pnpm as the package manager. Install all required dependencies:
pnpm install
Make sure you have Node.js and pnpm installed on your system before running this command.
3

Start the development server

Run the Astro development server to preview the site locally:
pnpm dev
The site will be available at http://localhost:4321
4

Explore the components

Navigate through the source code to understand the component structure. Key components include:
  • Catalogo - Product catalog grid with animations
  • Fragancias - Available fragrances display
  • Contactanos - Contact form with email integration
  • Whatsapp - WhatsApp floating button
Check out the Components section for detailed documentation on each component.

Explore by topic

Deep dive into specific areas of the Velaria project

Project Structure

Understand the Astro-based architecture, file organization, and how components, pages, and layouts work together.

Product Catalog

Learn about the animated product catalog featuring candle designs like Bubbles, Geometric, Spiral, and Rosa.

Contact Form API

Explore the server-side contact form endpoint with validation and email integration.

Animations

Discover the scroll animations, intersection observer effects, and Tailwind CSS animated classes.

Components Reference

Complete reference for all Astro components including Header, Navbar, Catalogo, Fragancias, and more.

Vercel Deployment

Deploy your Velaria site to Vercel with server-side rendering and edge functions.

Key features

What makes Velaria special

Product Catalog

Animated grid showcasing 10+ candle designs with hover effects and intersection observer animations.

Server-Side Rendering

Built with Astro’s server output mode and Vercel adapter for optimal performance.

Contact Integration

Form validation with server-side API endpoint and external email service integration.

Responsive Design

Tailwind CSS v4 with custom animations and mobile-first responsive layouts.

Ready to build?

Start exploring the Velaria codebase and learn how to customize and extend this beautiful candle e-commerce platform.

Get Started Now