Marketing site for a commercial security integrator: automated gates, access control, surveillance, intercoms, alarms and 24/7 monitoring. Single-page layout with hero video, service grid, process timeline, client quotes and a contact form.
| Piece | Version |
|---|---|
| Next.js (App Router) | 16.3 |
| React | 19.2 |
| TypeScript | 5 |
| Tailwind CSS | 4 (@tailwindcss/postcss) |
| Components | shadcn + @base-ui/react |
| Icons | lucide-react |
npm install
npm run dev # http://localhost:3000Other scripts:
npm run build # production build
npm start # serve the build
npm run lint # eslintNode 20 or newer.
app/
layout.tsx root layout, fonts, metadata
page.tsx the whole landing page
globals.css Tailwind entry + design tokens
components/ui/ shadcn primitives (button, …)
lib/utils.ts cn() class merge helper
public/ logo, hero video, control-room image
Page content — nav links, stats, services, credentials, process steps, testimonials — lives in plain arrays at the top of app/page.tsx. Edit those to change copy; no CMS involved.
Theme colors and radii are CSS variables in app/globals.css, consumed through Tailwind's bg-background / text-foreground style utilities. Change a variable once and it propagates.
public/hero-video.mp4 is the background of the hero section. It autoplays muted and loops, so keep replacements short and small — anything over a few megabytes hurts first paint. public/gess-logo.jpg is used in the nav and footer.
Any host that runs a Next.js build works. On Vercel, import the repo and take the defaults — no environment variables are needed, since the site has no backend calls. The contact form is markup only; wiring it to an email service or form endpoint is still to do.
No license granted. All rights reserved.