Zentry Clone

📋 Table of Content

• ✨ Introduction
• 🧩 Features
• 💻 Tech Stack
• ⚙️ Getting Started
• 📬 Contact

⚠️ Disclaimer

All design credits go to Zentry. This project is created purely for educational purposes and is not intended for commercial use.

✨ Introduction

Welcome to the Zentry Clone website. This site's design is inspired by Zentry, featuring scroll-triggered animations, geometric transitions, and engaging video storytelling. With a luxurious, modern feel, focusing on engaging UI/UX and smooth responsiveness.

🧩 Features

📜 Scroll-Based Animations – Dynamic animations triggered by scrolling for a more engaging user experience.

📐 Clip Path Shaped Animations: Unique geometric transitions using CSS clip-paths to create visually stunning effects.

📺 3D Hover Effects: Interactive 3D transformations that respond to user interactions for a modern feel.

📽️ Video Transitions: Seamlessly integrated video elements to enhance storytelling and flow.

📱 Responsive design – With Tailwind CSS, it is optimized across mobile, tablet, and desktop screens.

and many more, including code architecture and reusability.

💻 Tech Stack

• JavaScript

• React 19

• Tailwind CSS

• Vite

• GSAP

⚙️ Getting Started

Follow these steps to set up the project locally on your machine.

📃 Prerequisites

• Git
• Node.js
• npm

🛠️ Installation & Development

Installation

# Clone the repository
git clone https://github.com/AnasAlhwid/zentry-clone.git

cd zentry-clone    # Navigate to the directory

npm install     # Install dependencies

Development

npm run dev     # Start development server

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

🧹 Code Quality

npm run lint       # Lints the code with ESLint

🏗️ Production Build

npm run build      # Builds the project

npm run preview    # Serves the production build locally

📬 Contact

• Email
• LinkedIn
• X
• GitHub