# Nexus — Premium Bento Grid SaaS Hero Section (Hero-04)

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

Featuring a conversion-focused column on the left and a detailed, interactive 3D tilted Bento Grid on the right.

---

## Overview

**Nexus** is an ultra-premium hero component built around a modern Bento Grid layout. The right-hand column features a responsive grid containing 8 distinct widgets (Performance Monitor curve, Daily Revenue indicator, Conversion bar chart, Event Schedule grid, Notification alerts, AI Chat dialogue, Profile Activity logs, and Project circular progress loaders) which float and tilt on mouse coordination displacements. Built with vanilla technologies, it has zero dependencies and is ready for production deployment or marketplace distribution.

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

---

## Features

- **Apple × Linear Bento Grid Aesthetic:** Clean borders, rounded cards (`--radius-md`), subtle glassmorphism, and luxury shadows.
- **Conversion-Optimized copy:** Small announcement badge, bold title, rating stars (4.9/5), and horizontal infinite brand logo marquee (Google, Stripe, Notion, Slack, Framer, GitHub).
- **Asymmetrical CSS Grid Layout:** Widgets adapt and reflow beautifully based on device dimensions.
- **Interactive Mouse Parallax:** Hovering tilts the Bento Grid in a 3D perspective to create 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-04/
├── 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/
│   └── 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-04/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`.
- **Card Background (`--color-card-bg`):** Set to `#111111`.
- **Primary Color (`--color-accent`):** Electric blue `#2563eb`.
- **Secondary Color (`--color-secondary`):** Purple accent `#a855f7`.
- **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 25s.
- **Card Hover:** Cards scale and borders transition color on hover.
- **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 Notion and Linear 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.
