A premium dark-themed AI solutions landing page built with HTML, CSS, and JavaScript. Features animated stat counters, a speech synthesis voice guide agent, a 3D layered diamond logo with continuous draw loop, and scroll-driven storytelling via GSAP ScrollTrigger.
- 3D Layered Diamond Logo — three isometric diamond boxes with gradient fills and a continuous stroke-draw animation loop
- Voice Guide Agent — floating avatar that speaks a business model summary using the Web Speech API (female voice)
- Animated Stat Counters — synchronized
requestAnimationFrameloop for all four "By the Numbers" metrics (clients, systems, industries, workflows) - Scroll-Triggered Animations — section reveals, benchmark count-ups, and parallax effects using GSAP + ScrollTrigger
- Smooth Scrolling — Lenis-powered smooth scroll with integrated ScrollTrigger
- Responsive Design — fully responsive layout for desktop and mobile, including a collapsible sidebar navigation
- Floating Cyber Navbar — glassmorphism-style navigation bar with hamburger menu and sidebar
- HTML5, CSS3, vanilla JavaScript
- GSAP + ScrollTrigger — scroll-driven animations
- Lenis — smooth scrolling
- Web Speech API — voice guide agent
- Lucide Icons — icon set
- Google Fonts (Plus Jakarta Sans, Inter)
├── index.html # Main landing page
├── styles.css # All styles
├── app.js # All JavaScript
└── README.md # This file
No build tools or package managers required — it's a pure static site.
git clone <repo-url>
cd <project-directory>
# Open index.html in a browserOr serve locally with any HTTP server (recommended for proper module loading):
npx serve .Open index.html in any modern browser. The site works from the file system or any static web host (GitHub Pages, Netlify, Vercel, etc.).
- Meta description, keywords, and Open Graph tags included inline in
<head> - Semantic HTML sectioning
- Google Analytics tracking ID:
G-W6J277LPKK
All rights reserved. © Badar Edge.