L&H Steel Engineering Website

A modern, performant corporate website for L&H Steel Engineering Works Sdn Bhd to showcase company profile, services, projects/portfolio, image gallery, and clear contact/quote intake. The build focuses on industrial precision, clean visuals, and fast user experience.

Company Overview

• Company: L&H Steel Engineering Works Sdn Bhd
• Founded: 2002
• Location: Penang, Malaysia
• Specialization: Stainless Steel Fabrication, Laser Cutting, CNC Bending, Custom Engineering

Objectives

• Present capabilities with clarity and trust signals (experience, QA, processes).
• Highlight key services with strong visual hierarchy and clear CTAs.
• Showcase portfolio and gallery to demonstrate craftsmanship and precision.
• Provide frictionless contact and quote flows (short forms, clear expectations).

Tech Stack

• Framework: Next.js 14 (App Router, TypeScript, metadata/SEO)
• Styling: TailwindCSS with custom brand palette
• Animation: Framer Motion (scroll reveals, hover, section transitions)
• Icons: lucide-react
• Fonts: Google Fonts (Inter / Poppins)
• SEO: JSON‑LD schema, OG/Twitter meta, sitemap/robots
• Deployment: Vercel (edge caching, preview env)

Design Guidelines

• Colors

  • Primary Blue: #0A3D91
  • Accent Gold: #D4AF37
  • Neutral grays for backgrounds and typography

• Look & Feel

  • Modern, clean, industrial precision
  • Grid‑based layout, 2xl rounded corners, soft shadows
  • Smooth scrolling, subtle hover states, staged reveals

• UX

  • Clear, sticky navigation
  • Prominent CTAs (Get Quote / Contact)
  • Mobile‑first with responsive images and typography

Information Architecture (Phase 1)

• Home (hero, service overview, featured projects, KPIs, CTAs)
• About (company profile, history since 2002, QA processes)
• Services (Stainless Steel Fabrication, Laser Cutting, CNC Bending, Custom Engineering)
• Portfolio (case studies by category)
• Gallery (visual showcase)
• Contact (contact form, quote request intake)

App Router Structure (Phase 1)

app/
  (public)/
    layout.tsx
    page.tsx                # Home
    about/page.tsx
    services/page.tsx
    portfolio/page.tsx
    gallery/page.tsx
    contact/page.tsx

api/
  quotes/route.ts           # Accept quote submissions (return 200)
  contact/route.ts          # Contact form handling

Phase 2 expands with an (admin) group, authentication scaffold, and persistence layer.

Components

• navbar.tsx, footer.tsx with brand colors and CTA buttons
• Cards: ServiceCard, PortfolioCard, GalleryCard
• Forms: ContactForm, QuoteForm (client‑side validation)
• Utility: SEO helpers (metadata + JSON‑LD)

SEO and Content

• Structured data for Organization, Breadcrumb, and WebSite
• Open Graph/Twitter meta for all public pages
• Accessible landmarks, headings, and alt text

Deployment

• Vercel for hosting and previews
• Environment‑based config via process.env

Outcomes

• Clear presentation of capabilities and services
• Strong portfolio and gallery to drive lead quality
• Fast page loads with modern interaction patterns
• Easy contact and quote intake for prospective clients