/zentry-clone

This project is a clone of the stunning website Zentry.com, created to showcase my frontend development skills. The goal of this clone is to replicate the beautiful UI, animations, and interactive features of the original website, while demonstrating my expertise in modern frontend technologies like ReactJS, Tailwind CSS, and GSAP.

Primary LanguageJavaScript

Zentry Clone - Frontend Showcase

This project is a clone of the stunning website Zentry.com, created to showcase my frontend development skills. The goal of this clone is to replicate the beautiful UI, animations, and interactive features of the original website, while demonstrating my expertise in modern frontend technologies like ReactJS, Tailwind CSS, and GSAP.

Features

  • Responsive Design: Fully responsive layout, optimized for mobile, tablet, and desktop views.
  • Smooth Animations: Elegant animations and transitions that replicate the original design's interactivity, powered by GSAP.
  • ReactJS: Built using ReactJS for component-based architecture and reactivity.
  • Tailwind CSS: Styled using Tailwind CSS for rapid UI development with a utility-first approach.
  • Optimized Performance: Focus on performance optimization to ensure a fast and smooth experience.
  • Cross-Browser Compatibility: Works well across all modern browsers like Chrome, Firefox, Safari, and Edge.

Tech Stack

  • ReactJS: For building reusable components and creating a dynamic, interactive UI.
  • Tailwind CSS: For styling the layout with a utility-first CSS framework.
  • GSAP: Used for advanced animations and smooth transitions, replicating the effects from the original website.
  • Vite: Used as the development build tool for faster performance and hot module reloading.
  • JavaScript (ES6+): For logic and interactivity within the React components.
  • CSS Animations: For additional animations and transitions when needed.

Getting Started

To get the project up and running locally, follow these steps:

1. Clone the Repository

git clone https://github.com/freddyfavour/zentry-clone.git

2. Install Dependencies

Navigate to the project directory and install the required dependencies:

cd zentry-clone
npm install

3. Start the Development Server

Once the dependencies are installed, start the local development server with:

npm run dev

This will run the app at http://localhost:5173.

Challenges Faced

Some of the challenges I encountered during development:

  • Replicating complex animations: The original website features intricate animations. I used GSAP for smooth and advanced animations, integrating it with React to achieve the desired interactive effects.
  • Responsive Design: Ensuring that the layout works perfectly across various screen sizes using Tailwind's responsive utilities and custom media queries.

Future Improvements

Some features I plan to add or improve:

  • SEO Optimization: Enhance the site’s SEO for better discoverability.
  • Accessibility Enhancements: Improve accessibility by implementing ARIA roles, ensuring keyboard navigation, and adding better support for screen readers.
  • Cross-Browser Testing: Perform additional testing for edge cases in older browsers.

Disclaimer

This is a clone of Zentry.com for educational and portfolio purposes only. All rights to the original design and content of Zentry.com belong to the creators of Zentry. This project is not intended for commercial use and does not represent the official Zentry website in any way.

Acknowledgements

  • The design and animations of this project were inspired by the Zentry.com website, which is an award-winning website recognized on Awwwards.com.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

If you have any questions or feedback, feel free to reach out to me: