A high-performance B2B platform featuring "Industrial Glassmorphism" design, built for MPS Group's 136-acre industrial facility in Pierceland, SK.
MPS Group is a leading industrial services provider in the Western Canadian Sedimentary Basin, specializing in:
- Fabrication: Large-scale structural steel processing with CWB Division 2 certification
- Modular Assembly: 100-acre assembly yard for mega-modules
- Pipefitting: ABSA certified pressure piping and field installation
- Machining: Precision CNC machining and custom components
- Downhole Technologies: Proprietary WellFi™ and PipeVault™ product lines
- Next.js 14+ - App Router strategy only
- TypeScript - Strict mode enabled
- React 18 - Latest features with Server Components
- Tailwind CSS - Utility-first styling with custom glassmorphism utilities
- Framer Motion - Physics-based animations
- Lucide React - Icon system
- Supabase - Backend as a service, authentication, and database
- @supabase/auth-helpers-nextjs - Auth integration for Next.js
- Node.js 18.0.0 or higher
- npm 9.0.0 or higher
# Install dependencies
npm install
# Run development server
npm run dev
# Open browser
# Navigate to http://localhost:3000npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # TypeScript type checking
npm run format # Format code with Prettier
npm run format:check # Check code formattingmps-group/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles & Tailwind
├── components/ # Reusable components (to be created)
├── lib/ # Utility functions (to be created)
├── public/ # Static assets
│ └── images/ # Images (shop.png, etc.)
├── docs/ # Documentation
│ ├── ai-context/ # AI directive files
│ ├── DEVELOPMENT.md # Development guide
│ └── COMPONENTS.md # Component style guide
├── .vscode/ # VS Code configuration
├── package.json # Dependencies
├── next.config.js # Next.js configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.ts # Tailwind configuration
└── README.md # This file
The site uses a custom "Industrial Glassmorphism" aesthetic with a "Dark Mode HUD" feel:
Brand Colors:
- MPS Red:
#D32F2F- Primary brand color - MPS Blue:
#1976D2- Secondary brand color - HUD Background:
#050505- Deep black base - HUD Panel:
#0A0F1E- Glass panel background
Key Design Elements:
- Glassmorphism cards with backdrop blur
- Laser scan animations
- Industrial textures and patterns
- Animated statistics widgets
- Scrolling partner logo marquee
- Primary Font: Inter (sans-serif)
- Monospace: JetBrains Mono
Reusable glassmorphism card component with backdrop blur and border effects.
<GlassCard className="custom-class">
{/* content */}
</GlassCard>Animated statistics counter with count-up effect on mount.
<StatsWidget
icon={IconComponent}
value={1234}
label="Label Text"
unit="optional unit"
color="red" // or "blue"
decimals={0} // optional
/>- Development Guide - Coding standards and workflows
- Component Guide - Component usage and patterns
- AI Context - AI agent directive files
The project includes VS Code extension recommendations in .vscode/extensions.json:
- ESLint - Code linting
- Prettier - Code formatting
- Tailwind CSS IntelliSense - Tailwind class autocomplete
- TypeScript - Enhanced TypeScript support
- Supabase - Supabase integration
The workspace is configured to automatically format files on save using Prettier.
This project is designed to be deployed on Vercel with automatic deployments from your Git repository.
# Build for production
npm run build
# Test production build locally
npm run start© 2025 MPS Group. All Rights Reserved.
Built with ⚡ by MPS Group - Industrial Leadership Since 2005