Projects using Tailwind CSS in KarachiProjects using Tailwind CSS in KarachiNoizInvest — Figma-to-Code Redesign & Rebuild
Overview
NoizInvest is a platform that lets everyday investors build and manage automated crypto portfolios by securely connecting their exchange accounts. My task was to replace the platform's existing design with a brand-new Figma design and rebuild the entire front end from scratch — fully responsive across all devices.
My Role & Contributions
✅ Converted high-fidelity Figma designs into a pixel-perfect, fully responsive Next.js application
✅ Built smooth scroll-based animations and transitions using Framer Motion to bring the design to life (hero sections, step-by-step "How It Works" flow, feature reveals)
✅ Implemented an interactive carousel with React-Slick for showcasing reviews
✅ Integrated Chart.js to display portfolio analytics and performance data in a clean, readable format
✅ Set up Nodemailer to handle contact/interest form submissions and email delivery
✅ Styled the entire UI with Tailwind CSS, ensuring consistent spacing, typography, and responsiveness across breakpoints
✅ Structured reusable components for sections like security features, testimonials, supported exchanges, and pricing
Tech Stack
Next.js · Tailwind CSS · Framer Motion · Chart.js · React-Slick · Nodemailer
Outcome
A fully redesigned, production-ready marketing site with smooth animations, interactive data visualizations, and a responsive layout that works seamlessly across desktop and mobile — replacing the old design with a modern, conversion-focused experience.
Live Preview https://noizinvest.com/
