🎮 Zentry - Modern Gaming Website Clone

A visually captivating website inspired by Zentry, featuring advanced scroll-triggered animations, geometric transitions, and engaging video storytelling. This project demonstrates modern web development techniques with a focus on delivering a luxurious, award-winning user experience.

🌟 Features

✨ Advanced Animations

• Scroll-Based Animations: Dynamic GSAP animations triggered by scroll events for immersive user experience
• Clip Path Shaped Animations: Unique geometric transitions using CSS clip-paths for visually stunning effects
• 3D Hover Effects: Interactive 3D transformations that respond to user interactions
• Video Transitions: Seamlessly integrated video elements to enhance storytelling and flow

🎨 Design & UX

• Smooth UI/UX: Polished interfaces with buttery-smooth interactions
• Modern Aesthetic: Luxurious design capturing the essence of Awwwards-winning websites
• Engaging Storytelling: Strategic use of animations to guide user journey
• Visual Hierarchy: Thoughtful layout and typography choices

📱 Technical Excellence

• Completely Responsive: Flawless adaptation across all devices and screen sizes
• Performance Optimized: Efficient animations and code architecture
• Reusable Components: Clean, modular code structure
• Cross-browser Compatibility: Consistent experience across modern browsers

🛠️ Tech Stack

• Frontend Framework: React 18+
• Styling: Tailwind CSS
• Animations: GSAP (GreenSock Animation Platform)
• Build Tool: Vite
• Version Control: Git

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/Priyansh7999/Zentry-Website-Frontend-Project.git
   cd Zentry-Website-Frontend-Project

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:5173 to view the project

Build for Production

npm run build
# or
yarn build

📁 Project Structure

Zentry-Website-Frontend-Project/
├── public/
│   ├── videos/         # Video assets
│   └── img/            # Image assets
|   ├── audio/          # audio assets
│   └── fonts/          # fonts assets
├── src/
│   ├── components/     # Reusable React components
│   └── App.jsx         # Main application component
├── package.json
└── README.md

🎯 Key Learning Outcomes

• GSAP Mastery: Advanced animation techniques including ScrollTrigger, Timeline, and Tween
• Performance Optimization: Efficient rendering and animation performance
• Responsive Design: Modern CSS Grid and Flexbox implementation
• Component Architecture: Scalable React component patterns
• User Experience: Creating engaging, intuitive user interfaces

📱 Responsive Breakpoints

• Mobile: 320px - 768px
• Tablet: 768px - 1024px
• Desktop: 1024px - 1440px
• Large Desktop: 1440px+

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

This is an educational project, but contributions are welcome! Please feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is created for educational purposes only. It is not intended for commercial use.

🙏 Acknowledgments

• Original Inspiration: Zentry by the amazing team at Resn
• GSAP Community: For extensive documentation and examples
• React Community: For best practices and patterns

This is a non-commercial educational clone created to enhance skills in advanced frontend development, motion design, and modern web technologies.