# Aero — Premium AI SaaS & Startup Hero Section (Hero-02)

A standalone, commercial-grade, and fully responsive Hero Section component designed for modern SaaS companies, AI products, startups, and creative developers. Handcrafted by **CraftedWebs** in the design style of Apple, Linear, Stripe, Framer, and Vercel.

Featuring a conversion-focused copy column on the left and a layered, floating, 3D interactive dashboard mockup on the right.

---

## Overview

**Aero** is an ultra-premium hero component engineered to instantly communicate trust, innovation, and digital polish. The right-hand column features a multi-layered mock SaaS interface containing widgets (Daily Active Users, Weekly User Growth, Monthly Revenue curves, Notifications, Team Activities, and an AI chat dialogue simulator) which float gently and shift on mouse movement. Built entirely with vanilla technologies, it features zero dependencies and is ready for integration or direct resale.

- **Author:** CraftedWebs
- **Website:** [https://craftedwebs.in](https://craftedwebs.in)
- **Version:** 1.0.0
- **License:** Personal & Commercial Use (MIT-based)

---

## Features

- **Apple × Linear × Vercel Aesthetic:** Minimalist dark gradients, soft aurora glow spotlight lights, and subtle glassmorphism cards.
- **Conversion-Optimized Layout:** Small announcement badge, bold headline, rating stars (4.9/5), active users live indicator, and horizontal infinite brand logo marquee (Google, Microsoft, OpenAI, Notion, Slack).
- **Layered 3D Dashboard Mockup:** Clean glassmorphic panels floating at varying rates.
- **Interactive Mouse Parallax:** Moving the cursor applies subtle skews, tilts, and offsets to the dashboard widget layers for three-dimensional depth.
- **AI Chat Dialog Simulator:** A mock assistant chat panel that dynamically types query optimizations and scrolls automatically.
- **Count-Up Stat Animations:** Numerical indicators and charts run smooth count-up animations on viewport intersection.
- **Fully Responsive & Standalone:** Structured mobile-first using CSS variables, flex layout, and CSS grid to ensure compatibility across Mobile, Tablet, Laptop, and Desktop.

---

## Installation

Since the component is built using standard, framework-free web technology, setting it up is quick and easy:

1. **Clone or Download** the folder to your workspace.
2. **Move files** into your website directory.
3. Open `index.html` directly in your browser or serve it using a local development server (such as VS Code's Live Server or Python's HTTP server).

```bash
# Example serving locally with python
python -m http.server 8000
```

---

## Folder Structure

```text
Hero-02/
├── index.html            # Main HTML layout and SVG spline graphs
├── style.css             /* Layout grids, aurora glows, widget cards, and marquees */
├── script.js             /* Cursor parallax, AI chat simulation, stats count-up */
├── README.md             # Product documentation (this file)
├── LICENSE.txt           # Product license file
├── CHANGELOG.md          # Version history log
├── CUSTOMIZATION.md      # Customize guide for colors, charts, and chatbot
├── assets/
│   ├── images/           # Custom local image files
│   ├── icons/            # Custom SVGs/Icons
│   └── preview.jpg       # Digital product presentation graphic mockup
└── screenshots/
    ├── desktop.png       # Desktop layout presentation image
    ├── tablet.png        # Tablet layout presentation image
    └── mobile.png        # Mobile layout presentation image
```

---

## Customization Guide

For full instructions, refer to the [CUSTOMIZATION.md](file:///c:/Users/Abira/OneDrive/Desktop/ui%20components/hero%20section/Hero-02/CUSTOMIZATION.md) file.

### CSS Variables
All colors, sizing scales, and glow variables are defined globally inside the `:root` scope of `style.css`:
- **Main Background (`--color-bg`):** Set to `#050505`.
- **Primary Color (`--color-primary`):** Electric blue `#2563eb`.
- **Secondary Color (`--color-secondary`):** Purple accent `#8b5cf6`.
- **Success Color (`--color-success`):** Emerald green `#10b981`.

### Typography
- **Plus Jakarta Sans:** Primary font family for headlines, rating numbers, and headers.
- **Inter:** Primary font family for paragraphs, buttons, and subtext labels.

### Animations
- **Logo Marquee:** Animates infinitely via `@keyframes marquee-scroll` at 20s.
- **Floating Cards:** Hover up and down slowly using `@keyframes float-y-card`.
- **Chat Bot:** Driven by the `chatSteps` array in `script.js`.

---

## Design System Spec

### Responsive Breakpoints
- **Mobile:** Default (Mobile-first, up to 767px)
- **Tablet:** `768px - 1023px`
- **Laptop / Smaller Desktop:** `1024px - 1199px`
- **Desktop:** `1200px - 1599px`
- **Ultra Wide:** `1600px+`

### Browser Support
- Google Chrome (Latest)
- Apple Safari (Latest)
- Mozilla Firefox (Latest)
- Microsoft Edge (Latest)

---

## Performance Notes

- **Zero dependencies:** Loads in less than 200ms.
- **CSS-driven layout animations:** Hardware accelerated transforms (`translate3d`) ensure rendering performance remains at a solid 60FPS.
- **Optimized SVG paths:** Vector curves are loaded inline to avoid external fetching bottlenecks.

---

## Credits

- Typography hosted on [Google Fonts](https://fonts.google.com).
- Profile avatars courtesy of [Unsplash](https://unsplash.com).
- Grid templates inspired by Linear and Vercel consoles.

---

## License

This digital product is licensed for both **Personal & Commercial Use**. You can use it as a standalone piece, integrate it with larger projects, or customize it for customer delivery. Re-selling or distributing the raw source files on digital marketplaces is strictly prohibited.
