# Aether AI — Premium AI SaaS Hero Section (Hero-01)

A standalone, premium, and fully responsive Hero Section component designed for modern AI SaaS platforms and digital products. Handcrafted by **CraftedWebs** in the design style of Apple, Linear, Framer, and Vercel. 

This component features deep dark aesthetics, fluid grids, mouse-tracking background spotlight glows, interactive floating elements, and a simulated live code compiler mock-IDE window designed to maximize customer conversion.

---

## Overview

**Aether AI** is a reusable HTML/CSS/JavaScript hero section tailored for engineers, designers, and developers looking to sell or deploy high-end landing pages. Built entirely with vanilla web technologies, it features zero external dependencies, making it extremely lightweight, lightning-fast, and easy to integrate into any existing stack.

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

---

## Features

- **Apple × Linear × Framer × Vercel Aesthetic:** Sleek typography, subtle gradients, soft drop shadows, and delicate glassmorphism.
- **Dynamic Backgrounds:** High-tech CSS-only grid backgrounds with responsive ambient lights.
- **Interactive Mouse Spotlight:** JavaScript-controlled radial gradient that follows cursor motion with spring interpolation.
- **Interactive Mock IDE Showcase:** Simulated terminal compilation and webhook deployment flow, which loops automatically or triggers on click.
- **Floating Cards Parallax:** Decorative metrics cards that respond to mouse movement.
- **Framer-style Nav Slider:** Center links with a sliding pill background highlight that tracks hover positioning.
- **Fully Responsive & Accessible:** Fluid scaling across all screen sizes (Mobile-first, Tablet, Laptop, Desktop, and Ultra Wide) with zero horizontal scrolling.
- **Production-Ready & SEO-friendly:** Proper semantic markup, optimized SVG graphics, and metadata setup.

---

## Folder Structure

```text
Hero-01/
├── index.html          # Main HTML structure and SVGs
├── style.css           # Grid, typography, glassmorphism, responsive styles
├── script.js           # Mouse tracker, terminal simulation, navigation, parallax
├── README.md           # Documentation (this file)
├── LICENSE.txt         # License file
└── assets/
    └── preview.jpg     # Graphic layout preview
```

---

## 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
```

---

## Customization Guide

All colors, typography, margins, and transition speeds are controlled via **CSS Custom Properties** (Variables) defined in the `:root` scope of `style.css` for instant global updates.

### 1. Changing the Logo
Open `index.html` and search for `.logo-group`. Update the SVG path with your brand mark or edit the text content:
```html
<a href="#" class="logo-group">
  <div class="logo-icon">
    <!-- Replace your SVG mark here -->
  </div>
  <span class="logo-text">YourBrand</span>
</a>
```

### 2. Customizing Navigation Links
To add or modify navigation links, edit the links in the `<nav class="main-nav">` container in `index.html`. Active items should have the class `active`. Make sure to copy corresponding updates to the `<nav class="mobile-nav">` drawer below it.

### 3. Updating the Headline & Descriptions
To edit the copy, update the `h1` and `p` tags in `index.html`. You can apply a premium gradient effect to any word by wrapping it with `span` tags using the `.gradient-text` class:
```html
<h1 class="hero-title">
  Create Your Product <span class="gradient-text">10x Faster.</span>
</h1>
```

### 4. Adjusting Colors & Theme
Open `style.css` and locate the `:root` element. Change these HEX/RGBA values to adjust the color theme:
```css
:root {
  --color-bg: #030303;               /* Page background */
  --color-bg-alt: #0a0a0a;           /* Secondary background */
  --color-primary: #6366f1;          /* Accent Indigo */
  --color-secondary: #06b6d4;        /* Accent Cyan */
  --color-accent: #a855f7;           /* Accent Purple */
}
```

### 5. Swapping Fonts
The font stack defaults to Google Font's **Geist** and **Plus Jakarta Sans**. To change fonts:
1. Replace the Google Fonts `<link>` import in the `<head>` of `index.html`.
2. Update the `--font-primary` and `--font-mono` variables in `style.css`:
```css
:root {
  --font-primary: 'YourNewFont', sans-serif;
  --font-mono: 'YourMonoFont', monospace;
}
```

### 6. Changing Floating Card Values
The values on the floating cards can be changed directly in the HTML markup. If you want to change their hover parallax speeds, adjust the `data-parallax-speed` attribute (a higher value moves the card more aggressively relative to mouse coordinates):
```html
<div class="floating-card metric-card" data-parallax-speed="-0.2">
```

### 7. Tweaking Spacing
Vertical spacings are managed via layout tokens. Modify these inside the `:root` declaration of `style.css`:
```css
:root {
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;
}
```

### 8. Customizing Animations
- **Typing simulator**: To update the commands run in the terminal or change the logging speed, edit the `executionSteps` array and `delay` timings inside `script.js`.
- **Glow Shimmers**: To control transition curves or duration speeds, adjust `--transition-normal` or edit the keyframes under `Keyframes & Animation Library` in `style.css`.

---

## Design Systems Spec

### Fonts Used
- **Geist (Sans):** Body text, navigation, headers. Designed by Vercel for high readability on digital screens.
- **Geist Mono:** Editor panes, Terminal, code snippets, buttons.
- **Plus Jakarta Sans:** Backup editorial display text.

### 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)
- Opera (Latest)

---

## Credits

- Fonts provided by [Google Fonts](https://fonts.google.com).
- High-quality mockup avatars sourced from [Unsplash](https://unsplash.com).
- Inspiration from Linear, Vercel, Apple, and Framer design systems.

---

## 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.

---

## Support & Versioning

- **Version:** 1.0.0
- **Release Date:** July 2026
- **Contact:** support@craftedwebs.in
- **Website:** [https://craftedwebs.in](https://craftedwebs.in)
