Driven — Precision High-Tech Video Hero Section (HTML & Tailwind)

# Precision Engineering & High-Tech Hero Section Prompt

A master prompt specification for generating a high-tech, responsive HTML5 hero section with video background, transparent navigation, geometric wide typography, and live telemetry UI elements.

---

## Master AI Prompt

```text
Create a stunning, high-tech, responsive hero section using single-file HTML5, Tailwind CSS via CDN, and Google Fonts (Syncopate, Space Grotesk, Inter). 

### Design & Aesthetic Guidelines:
- Overall Theme: Dark high-tech precision engineering, metallic chrome accents, subtle grid lines, and industrial luxury aesthetic.
- Color Palette: Dark Charcoal background (`#07080a`), Metallic Chrome text gradients, Semi-transparent Slate (`rgba(255,255,255,0.4)`), Emerald accents (`#10b981`), and Crisp Pure White (`#ffffff`).
- Background: Full-screen background video (`https://strvid.nyc3.cdn.digitaloceanspaces.com/motionsite/abstract-video.mp4`) muted, looping, and scaled with a dark radial vignette overlay (`rgba(7, 8, 10, 0.85)`) and a fine 60px x 60px technical grid line overlay (`rgba(255, 255, 255, 0.04)`).

### Component Layout & Breakdown:

1. Navigation Bar (Top):
   - Fully transparent background (no backdrop blur or border).
   - Left: Logo icon (square outline container with geometric 3D cube SVG emblem) + brand name "DRIVEN" in Google Font 'Syncopate' uppercase bold tracking.
   - Center: Desktop navigation links (SOLUTIONS, SERVICES, INDUSTRIES, ABOUT US, CONTACT) in Space Grotesk 11px uppercase wide tracking.
   - Right: "GET A QUOTE ->" border outline button with smooth hover slide animation.

2. Hero Main Content (Center Left):
   - Tagline Badge: Fine horizontal line + "ENGINEERED TO PERFORM" + pulsing live white dot indicator.
   - Main Title: Large wide extended typography using Google Font 'Syncopate' (3xl on mobile, 4.25rem on desktop) split into 4 stacked uppercase lines with alternating opacities:
     * Line 1: "PRECISION" (Solid White `#FFFFFF`)
     * Line 2: "BUILT." (Muted Semi-transparent Slate `rgba(255,255,255,0.4)`)
     * Line 3: "PERFORMANCE" (Solid White `#FFFFFF`)
     * Line 4: "DRIVEN." (Muted Semi-transparent Slate `rgba(255,255,255,0.4)`)
   - Subtitle: "Advanced engineering solutions delivering unmatched quality, reliability, and efficiency for a stronger tomorrow." (Inter font, slate-300).
   - Buttons:
     * Primary CTA: "EXPLORE SOLUTIONS ->" rectangular border outline button with white hover fill effect.
     * Secondary CTA: "(►) SYSTEM DEMO" circular play icon button opening an interactive video popup modal.

3. Telemetry HUD Card (Center Right):
   - Floating glassmorphism card with custom L-shaped technical corner brackets on all 4 corners (`┌ ┐`, `└ ┘`).
   - Header: "● SYSTEM ONLINE" (green pulsing dot) + version tag "v4.8.2".
   - Telemetry Item 1: "TOLERANCE ±0.001 mm" with a progress bar.
   - Telemetry Item 2: "EFFICIENCY INDEX 99.8%" with a progress bar.
   - Footer: "GRID LATENCY: 2.4ms" + "OPTIMAL" in green.

4. Bottom Metrics Bar (Footer):
   - Full-width horizontal strip with a top subtle border (`border-t border-white/10`).
   - 3-column responsive layout:
     * 🛡️ "25+ YEARS OF EXCELLENCE"
     * ✓ "1200+ PROJECTS DELIVERED"
     * 🌐 "50+ COUNTRIES SERVED"
   - Numbers styled in Syncopate bold font with animated counter increment on page load.

### Technical & Script Requirements:
- Use Tailwind CSS CDN `<script src="https://cdn.tailwindcss.com"></script>`.
- Embed Google Fonts: `Syncopate`, `Space Grotesk`, `Inter`.
- Include JavaScript logic for:
  1. Interactive animated count-up numbers for bottom stats.
  2. Mobile navigation drawer toggle.
  3. Video demo modal overlay popup with close trigger.
```

---