Vertotech — Website

The marketing site for Vertotech, built with Next.js 15 (App Router), TypeScript, and Tailwind CSS.

Develop

npm install
npm run dev

Visit http://localhost:3000.

Build

npm run build
npm run start

All routes are statically prerendered.

Deploy to Vercel

The fastest path to a live URL. Vercel auto-deploys this branch on every push.

One-time setup (≈ 2 minutes):

1. Go to https://vercel.com/new
2. Click Import Git Repository and authorize Vercel for your GitHub account if you haven't already.
3. Select digitalcrest01/vertotech02.
4. Vercel auto-detects Next.js — leave all defaults (framework: Next.js, build: next build, output: .next).
5. Click Deploy.

After the first deploy:

• The main Production URL deploys from main (e.g. vertotech-web.vercel.app).
• Every push to claude/redesign-website-w4vzk (or any other branch) gets its own preview URL automatically, posted as a GitHub deployment status on the branch. That's the "see it live in real time" loop.
• To use the custom domain vertotech.io: Project → Settings → Domains → add the domain and follow the DNS instructions Vercel shows.

vercel.json in the repo pins the framework and adds security headers (HSTS, X-Frame-Options, Permissions-Policy, etc.).

Project structure

app/                  # App Router pages, layout, metadata, sitemap, robots, OG image
  layout.tsx          # Root layout (header, footer, global decoration)
  page.tsx            # Home
  services/           # Services catalog
  industries/         # Industry verticals
  training/           # Training programs
  about/              # About / values
  contact/            # Contact form + channels
  not-found.tsx       # 404
  sitemap.ts          # Generated sitemap.xml
  robots.ts           # Generated robots.txt
  icon.tsx            # Favicon (generated)
  opengraph-image.tsx # OG share image (generated)

components/           # Shared UI primitives (Header, Footer, Hero, ServiceCard, …)
lib/
  site.ts             # Site-wide config: name, nav, contact info
  services.ts         # Services catalog (single source of truth)

Editing content

• Nav, contact info, tagline: lib/site.ts
• Services catalog: lib/services.ts
• Industries, training tracks, values, principles: inline at the top of the respective page file. Each is a small array — easy to extend.
• Colors / typography: tailwind.config.ts and app/globals.css.

Notes

• The contact form is a Next.js Server Action at app/contact/actions.ts. It tries delivery channels in order:

  1. Resend — if RESEND_API_KEY is set, sends a transactional email to CONTACT_TO_EMAIL (default: enquiries@vertotech.io).
  2. Webhook — if CONTACT_WEBHOOK_URL is set, POSTs JSON (works with Slack incoming webhooks, Zapier, n8n, etc.).
  3. Console log — in development only, prints the payload. In production with neither channel configured, returns a friendly error.

  See .env.example for the full list. In Vercel, add the variables under Project → Settings → Environment Variables.

• The form includes a hidden honeypot field (company_url) to filter trivial bot submissions.

• Logo is an inline SVG wordmark; swap in a brand asset by editing components/Logo.tsx.