Zentry - Award Winning Landing Page

An immersive, award-winning landing page clone of Zentry, built with React, Tailwind CSS, and GSAP. This project features cinematic video transitions, high-performance animations, and a sophisticated HUD navigation system.

🚀 Experience the Metagame

• Cinematic Video HUD: Interactive video transitions using GSAP and clip-paths.
• Bento-Grid Layout: A modern, responsive feature section with tilt-on-hover effects.
• Floating HUD Navigation: A smart navbar that responds to scroll direction and includes a real-time audio visualizer.
• Zentry Icon System: Custom-coded SVG icons and wordmark for pixel-perfect rendering.
• Responsive Animations: GSAP ScrollTrigger timelines optimized for all devices.

🛠️ Tech Stack

• Framework: React.js
• Build Tool: Vite
• Animations: GSAP (ScrollTrigger, Flip), Framer Motion
• Styling: Tailwind CSS
• Hooks: React-use

📸 Project Previews

Hero Section	Features (Bento)

Story Section	Contact & Footer

⚙️ Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/WhiiteRose/Zentry.git

2. Navigate to the project directory:

   cd Zentry

3. Install dependencies:

   npm install

Execution

To launch the development server:

npm run dev

The site will be available at http://localhost:5173.

📂 Project Structure

• Hero Section - Interactive video HUD
• Navigation Bar - Floating menu with audio HUD
• Features Hub - Bento grid layout
• Story Component - Clip-path animations
• Contact & Footer - Global contact section
• Icon System - Custom SVG icons

---

Built with ❤️ by WhiiteRose