https://github.com/fazle-rabbi-dev/findtrend
🎨🔥 Digital company landing page - A pixel-perfect implementation of a Figma design using modern frontend tools.
https://github.com/fazle-rabbi-dev/findtrend
design-to-code figma-to-code figma-to-reactjs landing-page modern-landing-page
Last synced: 6 days ago
JSON representation
🎨🔥 Digital company landing page - A pixel-perfect implementation of a Figma design using modern frontend tools.
- Host: GitHub
- URL: https://github.com/fazle-rabbi-dev/findtrend
- Owner: fazle-rabbi-dev
- Created: 2025-10-04T06:11:43.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-04T08:00:03.000Z (8 months ago)
- Last Synced: 2025-10-04T09:19:38.493Z (8 months ago)
- Topics: design-to-code, figma-to-code, figma-to-reactjs, landing-page, modern-landing-page
- Language: JavaScript
- Homepage: https://findtrend-alpha.vercel.app
- Size: 1.23 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌐 Findtrend
A pixel-perfect implementation of a Figma design using modern frontend tools.
## 🎨 Overview
This project is a **Figma to Code** conversion that I built to practice and showcase my **frontend development skills** through real-world UI implementation.
It focuses on `clean structure`, `responsive layout`, and maintainable code.
## 📸 Preview
## 🔗 Live Demo
[🌍 Visit Site](https://findtrend-alpha.vercel.app/)
## 🧰 Tech Stack
- ⚛️ React
- 🎨 Tailwind CSS
- 🧱 Framer Motion
- 🛠️ Vite
## 🧠 Key Learnings
- Improved understanding of **layout building**
- Practiced **responsive design**
- Strengthened **Design/Figma-to-code workflow**
- Learned to translate Figma design tokens — **colors, spacing, typography, and alignment** — into clean, consistent code
## 📁 Folder Structure
```
src/
┣ assets/
┣ components/
┣ lib/
┣ styles/
┣ App.jsx
┗ main.jsx
```
## 💡 Features
- ✅ Pixel-perfect from Figma
- ✅ Fully responsive (mobile-first)
- ✅ Reusable components
- ✅ Semantic HTML structure
## 🧱 Design Reference
- 🎨 Figma URL: [View Design](https://www.figma.com/design/j2sokEwzXpA4I0WrZ2b6bR/Findtrend-Webflow--Free-Code---Community-?node-id=0-1&p=f&t=G2vbA3nZ5REHHPX2-0)
## 🚀 Getting Started
```bash
# Clone project
git clone https://github.com/fazle-rabi-dev/findtrend
# Move into folder
cd project-name
# Install dependencies
npm install
# Run locally
npm run dev
```