aurelis-luxury-landing-page-

✦   Luxury Skincare — Interactive Landing Page   ✦

✦ Click to experience the live demo ✦

---

  ┌──────────┬──────────┬──────────┬──────────┬──────────┐
  │   HERO   │  STORY   │ PRODUCT  │ SCIENCE  │ REVIEWS  │
  └──────────┴──────────┴──────────┴──────────┴──────────┘

---

✦ Overview

AURÉLIS is a high-fidelity, single-file luxury landing page built entirely with vanilla HTML, CSS, and JavaScript — zero frameworks, zero dependencies. It replicates the premium digital presence of world-class skincare brands through real-time canvas light effects, dual theme support, and a fully custom interaction layer.

Everything — structure, styling, and interactivity — lives inside one self-contained file.

---

✦ Features

  ╔══════════════════════════════════════════════════════╗
  ║                                                      ║
  ║   🕯  Interactive hero with canvas light & shadows  ║
  ║   🌗  Dark / Light theme engine (CSS variables)     ║
  ║   🖱  Dual-layer custom cursor with trail effect    ║
  ║   ✨  Particle background depth system              ║
  ║   📜  Scroll-triggered reveal animations            ║
  ║   📊  Animated clinical ingredient progress bars   ║
  ║   📱  Fully responsive — mobile to widescreen      ║
  ║   🎨  Gold / Ivory / Black luxury color palette    ║
  ║   🚀  Zero dependencies — pure vanilla stack       ║
  ║                                                      ║
  ╚══════════════════════════════════════════════════════╝

---

✦ Page Sections

Section	Description
Nav	Fixed navigation with theme toggle and shop CTA
Hero	Atmospheric intro with interactive hanging bottle animation
Story	Brand philosophy and clinical success statistics
Product	Deep-dive into the signature Radiance Serum
Benefits	Key value propositions with interactive cards
Ingredients	Scientific breakdown with animated efficacy bars
Testimonials	Global client reviews in a structured grid
CTA	Newsletter subscription and final shop link
Footer	Brand info, links, and legal disclosures

---

✦ Tech Stack

+ HTML5     →  Semantic section-based structure
+ CSS3      →  Variables, Grid, Flexbox, @keyframes animations
+ Canvas    →  Real-time light cone & glow effects on hover
+ JavaScript →  Theme engine, custom cursor, particle system

---

✦ Getting Started

No installation. No build step. No dependencies.

1. Clone the repository

git clone https://github.com/galatadesalegn/aurelis-luxury-landing-page-.git
cd aurelis-luxury-landing-page-

2. Open in browser

# Simply open the file
open aurelis-luxury-landing-page.html

# Or with VS Code Live Server
code .

That's it. The entire experience runs from a single HTML file.

---

✦ Project Structure

aurelis-luxury-landing-page-/
└── aurelis-luxury-landing-page.html    # The entire project — self-contained

---

✦ Customization

Since everything is in one file, customization is straightforward:

What to change	Where to find it
Brand name & copy	HTML section content
Color palette	CSS :root variables at the top of <style>
Dark / Light theme colors	[data-theme="light"] CSS block
Product info & pricing	.product section in HTML
Testimonials	.testimonials grid in HTML
Particle density	particleCount in the <script> block
Canvas light behavior	drawLightCone() function in <script>

---

📄 License

This project is licensed under the MIT License.

---

Crafted with precision by Galata Desalegn