MR Builder is a modern, responsive construction business portfolio website developed for a real-world client to establish a strong digital presence.
Many local construction businesses lack an online identity, which affects their credibility, branding, and lead generation. This project solves that problem by showcasing services, completed projects, client trust, and contact details—all in a clean, professional website.
The website is designed to be simple, fast, mobile-friendly, and conversion-focused, helping the client attract new customers and build trust online.
| Feature | Description |
|---|---|
| 🏠 Professional Landing Page | Clean hero section highlighting brand identity & trust |
| 🧱 Services Showcase | Displays construction services with visual clarity |
| 🏗️ Project Gallery | Highlights completed & ongoing construction works |
| 📱 Responsive Design | Optimized for mobile, tablet, and desktop |
| 📞 Call-to-Action Buttons | One-click call & WhatsApp integration |
| 📨 Contact Section | Easy enquiry & business contact visibility |
| ⚡ Fast Loading | Lightweight assets for better performance |
| 🌐 SEO-Friendly Structure | Improves discoverability on search engines |
Frontend Technologies
Tools
graph TD
A[Landing Page 🏠] --> B[Services 🧱]
A --> C[Projects 🏗️]
A --> D[About Us ℹ️]
A --> E[Blogs💡]
A --> F[Contact 📞]
F --> G[Client Leads 📩]
├── 📁 mr-builders-premium-construction-217b1fda-main
│ ├── 📁 public
│ │ ├── 📄 favicon.ico
│ │ ├── 🖼️ placeholder.svg
│ │ └── 📄 robots.txt
│ ├── 📁 src
│ │ ├── 📁 assets
│ │ │ ├── 🖼️ about-team.jpg
│ │ │ ├── 🖼️ blog-choose-company.jpg
│ │ │ ├── 🖼️ blog-foundation.jpg
│ │ │ ├── 🖼️ blog-permits.jpg
│ │ │ ├── 🖼️ blog-renovation.jpg
│ │ │ ├── 🖼️ blog-sustainable.jpg
│ │ │ ├── 🖼️ blog-trends.jpg
│ │ │ ├── 🖼️ hero-construction.jpg
│ │ │ ├── 🖼️ project-commercial-1.jpg
│ │ │ ├── 🖼️ project-interior-1.jpg
│ │ │ ├── 🖼️ project-residential-1.jpg
│ │ │ └── 🖼️ project-villa-1.jpg
│ │ ├── 📁 components
│ │ │ ├── 📁 home
│ │ │ │ ├── 📄 AboutPreview.tsx
│ │ │ │ ├── 📄 CTA.tsx
│ │ │ │ ├── 📄 FeaturedProjects.tsx
│ │ │ │ ├── 📄 Hero.tsx
│ │ │ │ ├── 📄 Services.tsx
│ │ │ │ ├── 📄 Testimonials.tsx
│ │ │ │ └── 📄 WhyChooseUs.tsx
│ │ │ ├── 📁 layout
│ │ │ │ ├── 📄 Footer.tsx
│ │ │ │ ├── 📄 Header.tsx
│ │ │ │ ├── 📄 Layout.tsx
│ │ │ │ └── 📄 PageTransition.tsx
│ │ │ ├── 📁 projects
│ │ │ │ ├── 📄 BeforeAfterGallery.tsx
│ │ │ │ ├── 📄 BeforeAfterSlider.tsx
│ │ │ │ ├── 📄 ClientTestimonial.tsx
│ │ │ │ └── 📄 VideoWalkthrough.tsx
│ │ │ ├── 📁 ui
│ │ │ │ ├── 📄 accordion.tsx
│ │ │ │ ├── 📄 alert-dialog.tsx
│ │ │ │ ├── 📄 alert.tsx
│ │ │ │ ├── 📄 aspect-ratio.tsx
│ │ │ │ ├── 📄 avatar.tsx
│ │ │ │ ├── 📄 badge.tsx
│ │ │ │ ├── 📄 breadcrumb.tsx
│ │ │ │ ├── 📄 button.tsx
│ │ │ │ ├── 📄 calendar.tsx
│ │ │ │ ├── 📄 card.tsx
│ │ │ │ ├── 📄 carousel.tsx
│ │ │ │ ├── 📄 chart.tsx
│ │ │ │ ├── 📄 checkbox.tsx
│ │ │ │ ├── 📄 collapsible.tsx
│ │ │ │ ├── 📄 command.tsx
│ │ │ │ ├── 📄 context-menu.tsx
│ │ │ │ ├── 📄 dialog.tsx
│ │ │ │ ├── 📄 drawer.tsx
│ │ │ │ ├── 📄 dropdown-menu.tsx
│ │ │ │ ├── 📄 form.tsx
│ │ │ │ ├── 📄 hover-card.tsx
│ │ │ │ ├── 📄 input-otp.tsx
│ │ │ │ ├── 📄 input.tsx
│ │ │ │ ├── 📄 label.tsx
│ │ │ │ ├── 📄 menubar.tsx
│ │ │ │ ├── 📄 navigation-menu.tsx
│ │ │ │ ├── 📄 pagination.tsx
│ │ │ │ ├── 📄 popover.tsx
│ │ │ │ ├── 📄 progress.tsx
│ │ │ │ ├── 📄 radio-group.tsx
│ │ │ │ ├── 📄 resizable.tsx
│ │ │ │ ├── 📄 scroll-area.tsx
│ │ │ │ ├── 📄 section-heading.tsx
│ │ │ │ ├── 📄 select.tsx
│ │ │ │ ├── 📄 separator.tsx
│ │ │ │ ├── 📄 sheet.tsx
│ │ │ │ ├── 📄 sidebar.tsx
│ │ │ │ ├── 📄 skeleton.tsx
│ │ │ │ ├── 📄 slider.tsx
│ │ │ │ ├── 📄 sonner.tsx
│ │ │ │ ├── 📄 switch.tsx
│ │ │ │ ├── 📄 table.tsx
│ │ │ │ ├── 📄 tabs.tsx
│ │ │ │ ├── 📄 textarea.tsx
│ │ │ │ ├── 📄 toast.tsx
│ │ │ │ ├── 📄 toaster.tsx
│ │ │ │ ├── 📄 toggle-group.tsx
│ │ │ │ ├── 📄 toggle.tsx
│ │ │ │ ├── 📄 tooltip.tsx
│ │ │ │ └── 📄 use-toast.ts
│ │ │ ├── 📄 NavLink.tsx
│ │ │ ├── 📄 WhatsAppButton.tsx
│ │ │ ├── 📄 theme-provider.tsx
│ │ │ └── 📄 theme-toggle.tsx
│ │ ├── 📁 data
│ │ │ ├── 📄 blogPosts.ts
│ │ │ └── 📄 projects.ts
│ │ ├── 📁 hooks
│ │ │ ├── 📄 use-mobile.tsx
│ │ │ ├── 📄 use-toast.ts
│ │ │ └── 📄 useScrollAnimation.ts
│ │ ├── 📁 lib
│ │ │ └── 📄 utils.ts
│ │ ├── 📁 pages
│ │ │ ├── 📄 About.tsx
│ │ │ ├── 📄 Blog.tsx
│ │ │ ├── 📄 BlogDetail.tsx
│ │ │ ├── 📄 Contact.tsx
│ │ │ ├── 📄 Index.tsx
│ │ │ ├── 📄 NotFound.tsx
│ │ │ ├── 📄 ProjectDetail.tsx
│ │ │ ├── 📄 Projects.tsx
│ │ │ └── 📄 Services.tsx
│ │ ├── 📁 test
│ │ │ ├── 📄 example.test.ts
│ │ │ └── 📄 setup.ts
│ │ ├── 🎨 App.css
│ │ ├── 📄 App.tsx
│ │ ├── 🎨 index.css
│ │ ├── 📄 main.tsx
│ │ └── 📄 vite-env.d.ts
│ ├── ⚙️ .gitignore
│ ├── 📝 README.md
│ ├── 📄 bun.lockb
│ ├── ⚙️ components.json
│ ├── 📄 eslint.config.js
│ ├── 🌐 index.html
│ ├── ⚙️ package-lock.json
│ ├── ⚙️ package.json
│ ├── 📄 postcss.config.js
│ ├── 📄 tailwind.config.ts
│ ├── ⚙️ tsconfig.app.json
│ ├── ⚙️ tsconfig.json
│ ├── ⚙️ tsconfig.node.json
│ ├── 📄 vite.config.ts
│ └── 📄 vitest.config.ts
├── ⚙️ .firebaserc
├── ⚙️ .gitignore
├── ⚙️ firebase.json
├── ⚙️ package-lock.json
└── ⚙️ package.json
Contributions are welcome! If you’d like to improve this project or add features, feel free to:
- Fork the repo.
- Create a new branch.
- Submit a pull request.
I appreciate all suggestions for enhancement! 🙏
Let’s connect:
Thanks for stopping by! 👋