This project is a cricket-themed website developed for XYZ Organization. It features interactive elements, a multi-stage registration form, and is styled with Tailwind CSS. The website also incorporates animations using Framer Motion to enhance user experience and add a modern touch to the design. This also has a cool custom pointer.
- public/
- images/: Contains image files.
- models/: Contains 3D model files.
- src/
- components/: Contains React components.
- App.jsx: Main application file.
- main.jsx: Entry point for the React application.
-
Clone the Repository
git clone <repository-url> cd <repository-directory>
-
Install dependencies Ensure you have Node.js installed. Run the following command to install dependencies:
npm install
-
Run the Development Server Start the development server with Vite:
npm run dev
You will be able to view the project locally now.
- Multi-stage registration form: A step-by-step form that ensures smooth and user-friendly registration.
- 3D model integration: A cricket ball hitting the stumps, embedded using Three.js for added interactivity.
- Slider component: A responsive and animated image slider with smooth navigation and transitions.
- Custom buttons: Buttons with hover effects and animations, enhancing user interactivity.
- Responsive design: The site is optimized for both desktop and mobile screens.
- Contact form: A contact form with submission capabilities.
- Footer with Social Media icons: Includes a 'rights reserved' message, social icons, and contact info.
- Frontend Framework: React
- Styling: Tailwind CSS for rapid styling and layout customization
- Animations: Framer Motion for modern, smooth animations
- 3D Models: Three.js for embedding and managing 3D models
- Build Tool: Vite for fast and optimized development builds
- Deployment: Vercel for seamless hosting and deployment
The 3D model is taken from Sketchfab.