https://github.com/ayush-1315/ambitio-assignment
A pixel-perfect hero section built using React.js and Tailwind CSS, accurately replicating the Figma design. The section includes smooth animations and interactions to enhance user experience and is fully responsive across all screen sizes. 🚀
https://github.com/ayush-1315/ambitio-assignment
css-library css3 html5 internship-task javascript react reactjs tailwind vitejs
Last synced: 2 months ago
JSON representation
A pixel-perfect hero section built using React.js and Tailwind CSS, accurately replicating the Figma design. The section includes smooth animations and interactions to enhance user experience and is fully responsive across all screen sizes. 🚀
- Host: GitHub
- URL: https://github.com/ayush-1315/ambitio-assignment
- Owner: Ayush-1315
- Created: 2025-02-27T23:06:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-28T03:08:31.000Z (over 1 year ago)
- Last Synced: 2025-02-28T09:26:55.829Z (over 1 year ago)
- Topics: css-library, css3, html5, internship-task, javascript, react, reactjs, tailwind, vitejs
- Language: JavaScript
- Homepage: https://ambitio.netlify.app/
- Size: 1.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hero Section - Landing Page
## Overview
This project is a hero section for a landing page, developed as part of a Frontend Developer Intern assignment. The goal was to accurately translate a Figma design into code while ensuring pixel-perfect implementation, responsiveness, and creative animations/interactions.
## Technologies Used
- **React.js+Vite** - For component-based UI development.
- **Tailwind CSS** - For efficient and responsive styling..
## Features
- **Pixel-Perfect Design**: The hero section closely matches the Figma design in layout, typography, colors, and spacing.
- **Smooth Animations**: Interactive elements enhance user experience while maintaining a professional look.
- **Fully Responsive**: Optimized for desktop, tablet, and mobile views.
## Installation & Setup
1. Clone the repository:
```sh
git clone https://github.com/Ayush-1315/ambitio-assignment.git
```
2. Navigate to the project folder:
```sh
cd hero-section
```
3. Install dependencies:
```sh
npm install # or yarn install
```
4. Run the development server:
```sh
npm run dev # or yarn dev
```
5. Open the browser and visit:
```
http://localhost:5174
```
## Approach
1. **Design Implementation**: Recreated the design with a focus on pixel-perfect accuracy.
2. **Animations & Interactions**: Used CSS animations and Framer Motion to add smooth transitions.
3. **Responsiveness**: Ensured a seamless experience across different screen sizes using Tailwind's responsive utilities.
## Screenshots
### Mobile View
### Desktop View
## Author
- **Ayush Raj** - Frontend Developer
## License
This project is for evaluation purposes only and follows standard fair-use practices.