# Vertice — Premium Creative Agency Hero Section (Hero-06)

A standalone, commercial-grade, and fully responsive Hero Section component designed for creative digital agencies, modern studios, portfolios, and luxury designers. Handcrafted by **CraftedWebs** in the design style of award-winning digital creative agencies.

Featuring a modern editorial layout, split screen, and floating interactive statistics badges.

---

## Overview

**Vertice** is a premium split-screen hero section component. The left column focuses on high-character editorial typography lines using **Syne** and **Inter**, while the right column showcases a full-height image frame layered with absolute glassmorphic stats cards and a circular rotating nomination badge. Built with pure HTML/CSS/JS, it features zero external dependencies, making it clean, modular, and fast.

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

---

## Features

- **Modern Editorial Split Layout:** Left-side copy details (announcement, title, descriptions, CTAs, social links) and right-side full-height workspace image showcase.
- **Glassmorphic Floating Cards:** Layered details cards presenting completed projects, satisfaction ratings, global availability, and circular Awwwards nom badge.
- **Interactive Mouse Parallax:** Hovering tilts the visual canvas in a 3D perspective, translating the floating stats cards to create depth.
- **Client Logos Marquee:** Horizontally scrolling client brand names (Google, Spotify, Adobe, Figma, Notion, Slack).
- **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-06/
├── 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 photos, 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-06/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 `#0b0b0b`.
- **Card Background (`--color-card-bg`):** Set to `#111111`.
- **Accent Color (`--color-accent`):** Electric blue `#2563eb`.
- **Secondary Accent (`--color-secondary`):** Soft purple `#a855f7`.

### Typography
- **Syne:** 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.
- **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).
- Product imagery courtesy of [Unsplash](https://unsplash.com).
- Composition inspired by modern creative agency boutique brand experiences.

---

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