🚀 TechTalks Landing Page - DevBounty Submission

A pixel-perfect recreation of the TechTalks landing page built for the DevBounty challenge.

Designed to showcase modern frontend practices, including reusable components, smooth animations, and responsive UI.

🔗 Live Demo

https://devbounty-techtalks-1.pages.dev/

🛠️ Tech Stack

• React 19.2
• React Router
• Tailwind CSS
• Framer Motion
• Vite
• Lucide Icons

✨ Features

• Pixel-perfect responsive layout, compatible with desktop and mobile
• Smooth animations using Framer Motion
• Parallax, glow, and hover effects
• Modular, reusable component system
• SEO-friendly meta tags and accessible semantic structure (ARIA, keyboard support)
• Lazy loading with Suspense for performance

🧩 Reusable Components

This project emphasizes modular, reusable components, ensuring parity and scalability:

• Button – Fully customizable, gradient, scalable, icon-ready
• IconText – Icon + text blocks
• GradientText – Styled emphasis text
• FadeUp – Scroll-triggered animation wrapper
• SocialButton – Animated social icons

🛠️ Development Process

• Analyzed the original TechTalks UI for layout, spacing, and hierarchy
• Rebuilt the layout using Tailwind’s utility-first system
• Designed reusable UI components to avoid duplication
• Integrated Framer Motion for smooth, consistent animations
• Structured routing with scalability in mind
• Optimized loading using lazy imports and Suspense

🧠 What I Learned

• Building pixel-accurate UIs from reference designs
• Structuring scalable component systems
• Using Framer Motion effectively without over-animating
• Improving responsive design consistency
• Applying basic SEO practices in React apps

💡 Future Improvements

• Add dynamic content (API/backend integration)
• Expand remaining pages with real content
• Add testing (unit + integration)
• Improve accessibility with deeper audits

🚦 Running the Project

To run this project locally:

git clone https://github.com/chko0/devbounty-techtalks-1.git
cd devbounty-techtalks-1
npm install
npm run dev

Then open: http://localhost:5173

⚠️ Disclaimer

This project recreates an older version of the TechTalks landing page for a challenge and is not affiliated with the original platform.

🎥 Preview

TechTalks.DevBounty.demo.mp4