A pixel-perfect conversion of an Architecture Firm landing page from Figma design to a modern, responsive web application.
View the Live Project on Vercel
This project demonstrates a high-fidelity translation of a static design into a dynamic, performant web application. The goal was to build a clean, modular architecture firm website ("G3 Architects") that showcases strict attention to detail in layout, typography, and spacing.
The application serves as a portfolio piece highlighting capabilities in Frontend Engineering, specifically the ability to execute precise designs using Next.js and Tailwind CSS.
- Pixel-Perfect Design: Meticulously aligned with the original Figma source files.
- Fully Responsive: Adaptive layout that works seamlessly on desktop, tablet, and mobile devices.
- Type-Safe Codebase: Built with TypeScript to ensure robust data handling and component interfaces.
- Reusable Components: Modular architecture with extracted, reusable UI elements (Buttons, Cards, Section Wrappers) for maintainability.
- Modern Styling: Utilizes Tailwind CSS for a utility-first, performant styling approach.
- Optimized Assets: Next.js Image optimization for fast load times.
- Framework: Next.js (React)
- Language: TypeScript
- Styling: Tailwind CSS
- Design Source: Figma
- Deployment: Vercel
The project follows a scalable directory structure:
.
├── components/ # Reusable UI components (Hero, Features, Footer, etc.)
├── pages/ # Next.js routes and views
├── public/ # Static assets (images, icons)
├── styles/ # Global styles and Tailwind configuration
├── types/ # TypeScript interfaces and type definitions
└── README.md