EarthGuard — Eco-Tech Video Hero Section HTML/Tailwind

# Prompt for Creating the EarthGuard Hero Section

You can use the detailed prompt below with any AI coding assistant or LLM to build this exact award-winning, high-impact hero section HTML template.

---

```markdown
Create a responsive, premium HTML5 hero section for "EARTHGUARD", an eco-tech sustainability brand. The page must be built using HTML5, Tailwind CSS (via CDN with custom configuration), custom CSS, Lucide Icons, and plain JavaScript. The design must be modern, atmospheric, spacious, and decluttered with high visual polish.

### 1. External Resources & CDN Links
- **Google Fonts**: Load `Syne` (weights 700, 800), `Instrument Serif` (italic, 400), and `Space Grotesk` (weights 400, 500, 600, 700).
- **Tailwind CSS CDN**: Include `https://cdn.tailwindcss.com`.
- **Lucide Icons CDN**: Include `https://unpkg.com/lucide@latest`.
- **Background Video URL**: `https://strvid.nyc3.cdn.digitaloceanspaces.com/motionsite/hero-bg-glass-ball-1_5mb.mp4`

---

### 2. Page & Styling Configuration

#### HTML & Body Settings
- `html` class: `dark scroll-smooth`, hide standard scrollbars (`scrollbar-width: none;`).
- `body` class: `bg-[#0b191e] text-white font-sans antialiased overflow-x-hidden min-h-screen relative flex flex-col justify-between selection:bg-brand-green selection:text-[#0b191e]`.

#### Tailwind Custom Config (`tailwind.config`)
- **Colors**:
  - `brand.green`: `#86d028`
  - `brand.greenHover`: `#76b821`
  - `brand.greenDark`: `#5a9216`
  - `brand.tealDark`: `#0b191e`
  - `brand.glow`: `rgba(134, 208, 40, 0.4)`
- **Font Families**:
  - `heading`: `['Syne', 'sans-serif']`
  - `serif`: `['"Instrument Serif"', 'serif']`
  - `sans`: `['"Space Grotesk"', 'sans-serif']`
- **Animations & Keyframes**:
  - `pulse-slow`: `pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite`
  - `bounce-slow`: `bounce 2.5s infinite`
  - `float`: `float 6s ease-in-out infinite`
  - `glow`: `glow 3s ease-in-out infinite alternate`

#### Custom CSS Classes (`<style>`)
- `.glass-nav`: `background: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, 0.05);`
- `.glass-card`: `background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12);`
- `.glass-card:hover`: `background: rgba(255, 255, 255, 0.08); border-color: rgba(134, 208, 40, 0.3);`
- `.glass-button`: `background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25);`
- `.glass-button:hover`: `background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.5);`
- `.text-glow`: `text-shadow: 0 0 20px rgba(134, 208, 40, 0.35);`
- `.hero-title-shadow`: `text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);`
- `.video-overlay`: Multi-layer atmospheric gradient overlay:
  ```css
  background: 
      radial-gradient(circle at 50% 45%, rgba(134, 208, 40, 0.04) 0%, rgba(11, 25, 30, 0.3) 45%, rgba(6, 14, 18, 0.85) 85%, rgba(3, 8, 10, 0.96) 100%),
      linear-gradient(to bottom, rgba(5, 12, 15, 0.85) 0%, transparent 20%, transparent 75%, rgba(4, 10, 12, 0.95) 100%),
      linear-gradient(to right, rgba(5, 12, 15, 0.75) 0%, transparent 35%, transparent 65%, rgba(5, 12, 15, 0.75) 100%);
  ```

---

### 3. Background Video Layer
- Full-screen fixed background container (`fixed inset-0 z-0 overflow-hidden pointer-events-none`).
- `<video>` tag with `id="heroVideo"`, `autoplay`, `loop`, `muted`, `playsinline`, poster & src set to `https://strvid.nyc3.cdn.digitaloceanspaces.com/motionsite/hero-bg-glass-ball-1_5mb.mp4`, styled as `absolute inset-0 w-full h-full object-cover scale-105 transition-transform duration-1000 ease-out`.
- `<div class="absolute inset-0 video-overlay"></div>` over video for contrast and visual depth.

---

### 4. Layout & Content Structure

#### Header / Navigation (`<header>`)
- Class: `w-full fixed top-0 left-0 right-0 z-50 glass-nav transition-all duration-300`.
- Max-width inner wrapper: `max-w-[1440px] mx-auto px-6 sm:px-8 lg:px-12 h-20 sm:h-24 flex items-center justify-between`.
- **Logo Area**:
  - Circle icon container (`w-10 h-10 rounded-full border border-white/20 bg-white/5 backdrop-blur-md`) with Lucide `leaf` icon and pulsating green badge (`w-2 h-2 rounded-full bg-brand-green animate-pulse`).
  - Text stacked: Logo name `EARTHGUARD` (`font-heading font-extrabold tracking-wider text-xl sm:text-2xl text-white`) and subtitle `A GREENER PLANET FOR GENERATIONS` (`text-[9px] sm:text-[10px] font-semibold tracking-[0.25em] text-white/60 uppercase`).
- **Desktop Nav Links** (`hidden md:flex items-center gap-8 lg:gap-10`):
  - 3 items: `SOLUTIONS`, `IMPACT`, `ABOUT US`.
  - Link styles: `text-xs lg:text-sm font-semibold tracking-widest text-white/80 hover:text-white uppercase relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-brand-green hover:after:w-full after:transition-all after:duration-300`.
- **Right CTA Action**:
  - `GET STARTED` pill button (`glass-button px-5 py-2.5 rounded-full text-xs font-bold tracking-widest uppercase text-white flex items-center gap-2 hover:border-brand-green hover:text-brand-green transition-all duration-300 shadow-lg hover:shadow-brand-green/20`).
- **Mobile Menu Toggle & Dropdown**:
  - Hamburger toggle button (`id="mobileMenuBtn"`, `md:hidden`).
  - Mobile dropdown (`id="mobileMenu"`, `hidden md:hidden bg-[#0b191e]/95 backdrop-blur-xl border-t border-white/10 px-6 py-6 flex-col gap-4`) containing mobile links and full-width CTA button.

#### Hero Main Section (`<main>`)
- Grid layout (`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center max-w-[1440px] mx-auto px-6 sm:px-8 lg:px-12`).
- **Left Typography Column** (`lg:col-span-7 xl:col-span-6`):
  - **Tagline**: Horizontal green pill line (`w-8 h-[2px] bg-brand-green rounded-full`) + text `SUSTAINABILITY FOR TOMORROW` (`text-xs sm:text-sm font-bold tracking-[0.2em] text-brand-green uppercase`).
  - **Main Headline**:
    - Line 1: `BUILDING TOMORROW.` in `font-heading font-extrabold text-4xl sm:text-6xl xl:text-[68px] leading-[1.08] uppercase tracking-tight text-white hero-title-shadow`.
    - Line 2: `Protecting Today.` in `font-serif italic font-normal text-brand-green text-glow capitalize text-5xl sm:text-7xl xl:text-[76px] tracking-normal inline-block mt-1`.
  - **Subtitle Paragraph**: `Innovative solutions protecting our planet for generations to come.` (`text-white/80 text-base sm:text-lg font-normal max-w-md leading-relaxed mb-8`).
  - **Button Action Group**:
    - Primary CTA: `EXPLORE SOLUTIONS` (`bg-brand-green hover:bg-brand-greenHover text-[#0b191e] font-extrabold text-xs sm:text-sm tracking-widest uppercase px-7 py-4 rounded-full flex items-center gap-3 transition-all duration-300 transform hover:scale-[1.03] shadow-lg shadow-brand-green/30 hover:shadow-brand-green/50`) with Lucide `leaf` icon.
    - Secondary CTA: `WATCH VIDEO` (`id="openVideoModal"`, `glass-button text-white font-semibold text-xs sm:text-sm tracking-widest uppercase px-7 py-4 rounded-full flex items-center gap-3 transition-all duration-300 hover:border-white/60`) with play icon in circle.
- **Center Spacer** (`hidden lg:block lg:col-span-1 xl:col-span-2`):
  - Preserves view clear space for the central 3D glass ball video element.
- **Right Stats Column** (`lg:col-span-4 flex flex-col justify-center items-start lg:items-end`):
  - 2 glass cards (`max-w-xs space-y-4`):
    - Stat 1: Icon `cloud`, Number `2.4M`, Label `TONS CO₂ REDUCED` (`text-[11px] font-bold tracking-widest text-brand-green uppercase`).
    - Stat 2: Icon `globe`, Number `120+`, Label `GLOBAL PROJECTS` (`text-[11px] font-bold tracking-widest text-brand-green uppercase`).

#### Footer Controls Bar (`<footer>`)
- Fixed layout at bottom (`w-full py-6 z-20`).
- **Left Video Audio/Play Controls**:
  - Mute/Unmute toggle button (`id="toggleAudioBtn"`) with Lucide `volume-x` icon.
  - Play/Pause toggle button (`id="togglePlayBtn"`) with Lucide `pause` icon.
- **Center Animated Scroll Indicator**:
  - Mouse outline (`w-7 h-11 rounded-full border-2 border-white/30 group-hover:border-brand-green`) with animated dot (`animate-bounce-slow`) and text `SCROLL DOWN`.
- **Right System Tag**:
  - Text `EARTHGUARD ECO OS v2.4` (`text-[11px] font-medium tracking-widest text-white/40 uppercase`).

#### Video Documentary Modal (`<div id="videoModal">`)
- Fixed overlay (`fixed inset-0 z-50 hidden flex items-center justify-center bg-black/80 backdrop-blur-xl p-4 sm:p-8`).
- Container: `max-w-4xl bg-[#0b191e] border border-white/20 rounded-2xl overflow-hidden shadow-2xl`.
- Header with title `EarthGuard — Sustainability Documentary` and close button (`id="closeVideoModal"`).
- `<video>` player (`id="modalVideo"`, `controls`, `aspect-video`) playing the same video URL.

---

### 5. JavaScript Logic
Implement standard JavaScript to power interactive features:
1. `lucide.createIcons()` on page load and on icon state changes.
2. **Mobile Navigation**: Toggle `#mobileMenu` between `hidden` and `flex`, switching menu icon to `x` when open.
3. **Background Video Sound Toggle**: Toggle `heroVideo.muted` state and switch icon between `volume-x` and `volume-2`.
4. **Background Video Play/Pause Toggle**: Toggle `heroVideo.pause()` / `heroVideo.play()` and switch icon between `pause` and `play`.
5. **Video Modal Handler**: Open modal `#videoModal` and trigger `#modalVideo.play()` on `#openVideoModal` click; close modal and pause video on `#closeVideoModal` click or background overlay click.
```