TheBox is a modern, sleek landing page designed specifically for a construction company. Built with React, Vite, and Tailwind CSS, it features a fully responsive design, custom animations, and an interactive project gallery with filtering and pagination capabilities.

Preview

Features

• 📱 Fully Responsive Layout — Optimized for all devices from mobile screens to desktop monitors.
• 🎨 Modern Design & Animations — Clean user interface styled with Tailwind CSS, utilizing smooth transitions and hover states.
• 📂 Interactive Project Gallery — Allows filtering projects by category and navigating through items with custom pagination.
• ✉️ Contact Form Integration — Pre-styled, custom-built form components designed for high usability and conversion.
• ⚓ Smooth Scroll Navigation — Enhanced user experience utilizing internal anchors to slide between page sections gracefully.
• 🔠 Design System — Strictly follows a bespoke construction-themed color scheme and custom typography system.

Tech Stack

• Framework: React (functional components, hooks)
• Bundler & Tooling: Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• Code Quality: ESLint

Architecture Highlights

TheBox implements a lightweight React structure focused on semantic markup and reusable layout cards.

Stateful Filtering
The project gallery is governed by local React state. When a user selects a sector (e.g., Commercial, Residential, Infrastructure), the list is filtered on-the-fly and paginated dynamically. This keeps the interaction feeling instantaneous and lag-free.