Modular Solutions

Innovative modular buildings engineered for people, performance and progress.

A professional, production-ready 3-page website for a modular construction company. Built with Express.js + EJS templating, designed for seamless deployment on Vercel.

---

✨ Features

• 3 Fully Designed Pages — Home, About Us, and Products with responsive layouts
• Universal Quote Modal — Sticky header CTA that opens a beautiful quote request form with email-ready submission
• Product Catalog — Filterable product showcase with categories (Modular Offices, Guard Booths, Clean Rooms, Enclosures, and more)
• Data-Driven Content — All site content, products, navigation, and links configurable via simple JS data files
• Mobile-First Responsive Design — Perfect experience across desktop, tablet, and mobile
• Modern UI / UX — Tailwind CSS powered design with smooth animations, glass effects, and a premium orange-navy brand palette
• SEO Ready — Clean semantic HTML with per-page <title> tags
• Zero Build Step — Pure Node.js + EJS — no build pipeline required

---

🛠 Tech Stack

Layer	Technology
Runtime	Node.js 18+
Framework	Express.js 4.x
Templating	EJS 3.x
Styling	Tailwind CSS (CDN) + Material Icons
Hosting	Vercel (Serverless Node runtime)
Data	Plain JavaScript modules

---

📁 Project Structure

Project 2/
├── data/
│   ├── products.js          # Product catalog (add/edit products here)
│   └── site-config.js       # Brand, nav, footer, stats, testimonials, etc.
├── public/
│   └── images/              # Static assets served at root
├── views/
│   ├── pages/
│   │   ├── home.ejs         # Homepage
│   │   ├── about-us.ejs     # About page
│   │   └── products.ejs     # Products catalog
│   └── partials/
│       ├── head.ejs         # Meta tags, Tailwind config, global CSS
│       ├── header.ejs       # Navbar + mobile menu
│       ├── footer.ejs       # Footer section
│       └── quote-modal.ejs  # Universal quote request modal
├── server.js                # Express server entry point
├── vercel.json              # Vercel deployment configuration
├── package.json
├── package-lock.json
├── .gitignore
└── README.md

---

🚀 Local Development

Prerequisites

• Node.js >= 18.0.0
• npm (bundled with Node)

Setup

# 1. Install dependencies
npm install

# 2. Start development server
npm run dev

The server will start at http://localhost:3000

Available pages:

• 🏠 Home — http://localhost:3000/
• 🏢 About Us — http://localhost:3000/about-us
• 📦 Products — http://localhost:3000/products
• 📝 Quote API — POST /api/quote (JSON body)

---

☁️ Deployment on Vercel

This project is pre-configured for one-click deployment on Vercel. All routes are handled by a single Express server deployed as a Vercel Node serverless function.

Method 1: Deploy via Vercel CLI (Recommended)

# 1. Install Vercel CLI globally (if not installed)
npm i -g vercel

# 2. Login to your Vercel account
vercel login

# 3. Deploy (from project root)
vercel

# 4. For production deployment
vercel --prod

Method 2: Deploy via GitHub Integration

1. Push this repository to your GitHub account
2. Go to vercel.com and click Add New Project
3. Import your GitHub repository
4. In Configure Project:
   • Framework Preset: Other
   • Build Command: (leave empty — no build step)
   • Install Command: npm install (auto-detected)
   • Output Directory: (leave empty)
5. Click Deploy

The vercel.json file will be auto-detected and handle all routing.

What vercel.json Does

{
  "builds": [{ "src": "server.js", "use": "@vercel/node", "config": {
    "includeFiles": ["views/**", "data/**", "public/**"]
  }}],
  "routes": [{ "src": "/(.*)", "dest": "server.js" }]
}

• Bundles server.js as a Node serverless function
• Includes all EJS views, data files, and public assets in the deployment bundle
• Routes every incoming request through Express (including static assets, API, and page routes)

---

⚙️ Customization Guide

Add / Edit Products

Open data/products.js and push a new object:

{
  id: 'product-slug',
  name: 'Product Name',
  shortDesc: 'One-line description shown on cards.',
  longDesc: 'Detailed description for product pages.',
  category: 'Category Name',     // Must match a category in site-config.js → productCategories
  image: 'https://...',          // Main product image URL
  thumb: 'https://...',          // Thumbnail (optional, null for default)
  featured: true,                // true = shows on homepage "Featured" section
}

Edit Branding / Navigation / Footer

Open data/site-config.js:

Key	What it controls
brand	Company name, tagline, hero headline, hero image, etc.
contact	Address, phone, email (shown in footer / contact areas)
socials	Social media links (Twitter, Facebook, LinkedIn...)
navigation	Header navbar menu items
footerLinks	Two-column footer links (Quick Links + Products)
stats	Homepage "250+ Projects" style counters
coreValues	About page 4-column value cards
testimonials	Customer testimonial with partner logo
productCategories	Filter tabs shown on Products page

Change Colors / Design Tokens

Global colors and design system tokens live inside the Tailwind config in views/partials/head.ejs:

colors: {
  primary: '#FF7A00',     // Brand orange
  secondary: '#0E2A47',   // Navy
  accent: '#264B7A',
  cream: '#FFFBF7',
  // ... edit any color here
}

Quote Form Submission

The form submits via POST /api/quote and currently logs the submission to server console. To integrate with email/CRM, edit the handler at server.js:

app.post('/api/quote', (req, res) => {
  // TODO: integrate with SendGrid, Resend, Nodemailer, or your CRM API
  console.log(req.body); // ← current stub
  res.json({ success: true });
});

---

📝 Scripts

Command	Description
npm start	Start production server (used by Vercel)
npm run dev	Start local development server

---

🔒 Security Notes

• .env files are excluded from git via .gitignore. Add any API keys/secrets to Vercel Environment Variables panel.
• Quote form submission payload is JSON. For production, add rate limiting or a service like Cloudflare Turnstile.

---

📄 License

© 2026 Modular Solutions. All rights reserved.

---

Built with ❤️ using Express & EJS — Deployed on Vercel.