🫒 Olive UI Clone

A pixel-perfect frontend clone of the Olive App landing page, built using modern React tools. This project focuses on UI/UX accuracy, smooth animations, and responsive design.

🔗 Live Demo: https://olive-ui-clone-one.vercel.app/

---

🚀 Features

• 🎯 Pixel-perfect UI inspired by Olive App
• 📱 Fully responsive design (mobile + tablet + desktop)
• ✨ Smooth animations using Framer Motion
• 🎴 Card-based layout with overlapping sections
• 🧩 Modular React component architecture
• 🎨 Clean and modern design system

---

🧱 Tech Stack

• ⚛️ React (Vite)
• 🎨 CSS3 (custom styling)
• 🎞️ Framer Motion (animations)
• 🚀 Vercel (deployment)

---

📂 Project Structure

src/
 ├── components/
 │   ├── Hero.jsx
 │   ├── HealthHeroSection.jsx
 │   ├── NutritionCardSection.jsx
 │   ├── ProductInsightCard.jsx
 │   ├── HowItWorks.jsx
 │   ├── Testimonials.jsx
 │   └── ...
 ├── App.jsx
 └── main.jsx

public/
 └── images/

---

🎨 Key UI Sections

1. Hero Section

• Large green background
• Headline + CTA button
• Clean typography

2. Health Benefits Section

• Overlapping card layout
• Product visualization
• Score + insights UI

3. How It Works

• Step-by-step feature explanation
• Image + text cards

4. Testimonials (Real Results)

• Floating review cards
• User avatars + ratings
• Asymmetric layout

---

⚙️ Installation & Setup

# Clone the repository
git clone https://github.com/shishir-21/olive-ui-clone.git

# Navigate into the project
cd olive-ui-clone

# Install dependencies
npm install

# Run development server
npm run dev

---

📦 Build for Production

npm run build

---

🌐 Deployment

This project is deployed using Vercel.

To deploy your own version:

1. Push code to GitHub
2. Connect repo to Vercel
3. Click deploy 🚀

---

🧠 What I Learned

• Building real-world UI from reference designs
• Creating reusable React components
• Implementing smooth UI animations
• Handling complex layouts (overlapping cards, grids)
• Writing clean and maintainable CSS

---

📌 Future Improvements

• Add backend integration (real product data)
• Improve accessibility (ARIA, keyboard nav)
• Add dark mode 🌙
• Optimize performance (lazy loading images)

---

👨‍💻 Author

Shishir Mahato

• GitHub: https://github.com/shishir-21
• LinkedIn: https://www.linkedin.com/in/shishir-mahato-4468aa280/

---

⭐ If you like this project

Give it a ⭐ on GitHub — it helps a lot!

---