# Nexus — Premium Interactive SaaS & Startup Hero Section (Hero-08)

A standalone, commercial-grade, and fully responsive Hero Section component designed for modern SaaS dashboards, startup product launches, and developer platform sites. Handcrafted by **CraftedWebs** in the design style of Apple, Linear, Framer, and Stripe.

Featuring a 3D mouse parallax interactive canvas holding layered widget cards.

---

## Overview

**Nexus** is an interactive, split-column SaaS hero section. The left column details conversion badges, editorial headlines, action CTAs, and user ratings. The right column details a layered dashboard composition containing 6 interactive widgets (Analytics, Revenue, Notification, Chat Assistant, Milestones Timeline, and User Activities) that translate dynamically based on mouse coordinates.

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

---

## Features

- **3D Mouse Parallax Engine:** Smoothly calculates cursor coordinates inside the viewport, applying custom translates to cards and tilt parameters to the base canvas.
- **Glassmorphic Floating Overlays:** 6 high-fidelity dashboard cards styled with subtle blur borders, inner highlights, and ambient dropshadows.
- **Bespoke Mobile Reflow Layout:** Collapses the absolute overlays on mobile viewports into a structured relative grid to prevent overlaps or offscreen overflow.
- **Trusted Client Marquee:** Horizontally scrolling partner brands (Google, Microsoft, OpenAI, Stripe, Notion, Slack).
- **Responsive Statistics Grid:** Centered grid showing active users, server uptime, countries supported, and average ratings.
- **Strict Mobile-First Architecture:** Tailored CSS scaling from mobile displays (`320px`) up to ultra-wide desktop viewports (`1920px+`).

---

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

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

---

## Folder Structure

```text
Hero-08/
├── index.html            # Main HTML layout, inline SVGs, and marquees
├── style.css             /* Layout grids, spacing tokens, float keyframes, and marquees */
├── script.js             /* Mouse parallax, metrics count-ups, scroll reveals */
├── README.md             # Product documentation (this file)
├── LICENSE.txt           # Product license file
├── CHANGELOG.md          # Version history log
├── CUSTOMIZATION.md      # Customize guide for widgets, colors, and variables
├── 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 components/hero section/Hero-08/CUSTOMIZATION.md) file.

### CSS Variables
All colors, spacing scales, and glow variables are defined globally inside the `:root` scope of `style.css`:
- **Main Background (`--color-bg`):** Set to `#050505`.
- **Card Background (`--color-card-bg`):** Set to `#121214`.
- **Accent Color (`--color-accent`):** Electric blue `#2563eb`.
- **Secondary Accent (`--color-secondary`):** Soft purple `#a855f7`.
- **Cyan Accent (`--color-cyan`):** Soft cyan `#06b6d4`.

### Typography
- **Plus Jakarta Sans:** Headline font family for high visual character.
- **Inter:** Clean utility sans-serif for paragraphs, buttons, and subtext labels.

---

## 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 150ms.
- **RequestAnimationFrame driven parallax:** Keeps coordinate calculations lightweight and avoids layout thrashing.
- **Optimized SVG paths:** Vector curves are loaded inline to avoid external fetching bottlenecks.

---

## Credits

- Typography hosted on [Google Fonts](https://fonts.google.com).
- Composition inspired by modern interactive SaaS dashboard landing pages.

---

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