A modern, responsive single-page website for Constrong, a professional concrete contractor serving the construction industry in Kitchener-Waterloo and surrounding areas in Ontario, Canada.
Constrong specializes in concrete formwork and construction services including:
- Foundations
- Footings
- Slabs
- Parking Garages
- High-Rise Bases
- Restoration
- Retaining Walls
Location: Kitchener, ON, Canada Phone: +1 519-222-0700 Email: ryan.armstrong@constronginc.com
- Fully Responsive - Optimized for desktop, tablet, and mobile devices
- Dark Theme - Modern dark design with gold accent colors
- Smooth Scrolling - Single-page navigation with smooth scroll behavior
- Interactive Elements - Animated hero, hover effects, image lightbox gallery
- Contact Form - Functional contact form with mailto fallback
- SEO Optimized - Proper meta tags, Open Graph data, and semantic HTML
- Accessible - ARIA labels, focus states, and keyboard navigation support
| Section | Description |
|---|---|
| Hero | Full-screen banner with logo, tagline, CTAs, and social links |
| Services | Three service cards (Foundations, Footings, Slabs) |
| About | Company story with statistics (100+ projects, 5+ years) |
| Projects | 6-image gallery with lightbox viewer |
| Careers | Job listings for Labourers and Carpenters |
| Contact | Contact form with company address and contact information |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.0.5 | React framework with App Router |
| React | 19.2.0 | UI library |
| TypeScript | 5.9.3 | Type safety |
| Tailwind CSS | 4.1.17 | Utility-first CSS |
| Turbopack | - | Development bundler |
| pnpm | 9.x | Package manager |
constrong/
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout with fonts & metadata
│ │ ├── page.tsx # Main page composing all sections
│ │ ├── globals.css # Global styles & CSS variables
│ │ └── favicon.ico
│ ├── components/
│ │ ├── layout/
│ │ │ ├── Header.tsx # Sticky navigation with mobile menu
│ │ │ ├── Footer.tsx # Site footer with social links
│ │ │ ├── Logo.tsx # SVG shield logo component
│ │ │ └── index.ts
│ │ ├── sections/
│ │ │ ├── Hero.tsx # Hero banner section
│ │ │ ├── Services.tsx # Services cards section
│ │ │ ├── About.tsx # About company section
│ │ │ ├── Projects.tsx # Project gallery with lightbox
│ │ │ ├── Careers.tsx # Job listings section
│ │ │ ├── Contact.tsx # Contact form section
│ │ │ └── index.ts
│ │ └── ui/
│ │ ├── Button.tsx # Reusable button component
│ │ ├── Card.tsx # Card components for services
│ │ ├── Icons.tsx # SVG icon components
│ │ └── index.ts
│ └── lib/
│ └── constants.ts # Company info, services, careers data
├── public/
│ └── images/ # Project images from Instagram
├── mockups/ # Design reference files (gitignored)
├── CLAUDE.md # AI assistant project guidelines
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json
-
Clone the repository
git clone https://github.com/spragginsdesigns/constrong.git cd constrong -
Install dependencies
pnpm install
-
Start the development server
pnpm dev
-
Open in browser
Navigate to http://localhost:3000
| Command | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Create optimized production build |
pnpm start |
Run production server |
pnpm lint |
Run ESLint for code quality |
All company data is centralized in src/lib/constants.ts:
export const COMPANY = {
name: "Constrong",
tagline: "...",
contact: {
phone: "+1 519-222-0700",
email: "ryan.armstrong@constronginc.com",
},
// ...
};Images are stored in public/images/ with the following structure:
public/images/
├── hero-bg.jpg # Hero section background
├── about.jpg # About section image
├── services/
│ ├── foundations.jpg # Foundations service card
│ ├── footings.jpg # Footings service card
│ └── slabs.jpg # Slabs service card
└── projects/
├── project-1.jpg # Gallery images
├── project-2.jpg
└── ...
To update images, replace the files while keeping the same filenames, or update paths in src/lib/constants.ts.
Color variables are defined in src/app/globals.css:
:root {
--background: #0f0f0f; /* Dark background */
--foreground: #ededed; /* Light text */
--accent: #d4a853; /* Gold accent */
--accent-dark: #b8923f; /* Darker gold for hover */
--card-bg: #1a1a1a; /* Card background */
--card-border: #2a2a2a; /* Card borders */
--muted: #888888; /* Muted text */
}The easiest way to deploy is with Vercel:
This Next.js app can be deployed to any platform supporting Node.js:
- Netlify - Next.js on Netlify
- AWS Amplify - Deploy Next.js
- Docker - Build with
next buildand serve withnext start
All images used on this website are authentic Constrong project photos sourced from the official @constrong2019 Instagram account.
The images showcase real concrete formwork projects completed by Constrong in the Kitchener-Waterloo region, including:
- Column and pier formwork
- Foundation and footing work
- Commercial and industrial projects
- Residential foundations
Images were downloaded using instaloader and are used with permission from Constrong.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome for Android)
This is a private business website. For any updates or changes, please contact the repository owner.
This project is proprietary software for Constrong. All rights reserved.
Constrong - Proudly serving the construction industry in KW and surrounding area.
Website: constronginc.com (coming soon) Facebook: @Constrong Instagram: @constrong2019