Initial-commit

EDITING.md

@@ -0,0 +1,166 @@
+# Editing The Website
+
+This is a friendly guide for changing the words on the Novarix Networks website. You don't need to be a developer to use it.
+
+## What You Need
+
+- A text editor — `VS Code`, `Sublime Text`, or even `Notepad++` are all fine.
+- The repo cloned to your computer (ask if you don't have it yet).
+
+That's it. You don't need Node.js installed locally if you only want to change text — the build runs on the Ubuntu Nginx VM.
+
+## The Only File You Need To Touch
+
+```text
+content.ts
+```
+
+This file lives at the top of the project, next to `README.md`. Open it in your text editor.
+
+You will see sections like this:
+
+```ts
+hero: {
+  badge: "Onboarding new accounts",
+  eyebrow: "Network Consulting · Remote Support · Engineering",
+  ...
+},
+```
+
+To change a piece of text, change what's inside the `"double quotes"`. **Keep the quotes**. **Keep the comma at the end of the line.**
+
+## Common Edits
+
+### Change the headline
+
+Find this block near the top of `content.ts`:
+
+```ts
+headlineBefore: "Network expertise, on tap, for teams running",
+headlineAccent: "production",
+headlineAfter: "infrastructure.",
+```
+
+The headline is split into three parts so the middle word can be coloured with the brand gradient. Change any of the three pieces.
+
+### Change a service description
+
+Find the `services` section. Inside the square brackets `[ ... ]` you will see three blocks like this:
+
+```ts
+{
+  index: "01",
+  title: "Network Consulting",
+  description: "Architecture review, design, and second-opinion engineering...",
+},
+```
+
+Edit the `title` or `description`. The `index` is just the small "01 / 02 / 03" label on the card.
+
+### Add a fourth service
+
+Copy one of the existing service blocks (the whole thing from `{` to `},`), paste it inside the same `[ ... ]`, and change the text. Don't forget the comma after the closing `}`. Example:
+
+```ts
+items: [
+  { index: "01", title: "Network Consulting", description: "..." },
+  { index: "02", title: "Remote Network Support", description: "..." },
+  { index: "03", title: "Architecture & Design", description: "..." },
+  { index: "04", title: "Your New Service", description: "Your description here." },
+],
+```
+
+### Remove a service
+
+Delete one of the blocks (from `{` all the way through `},`). Make sure each remaining block still ends with a comma.
+
+### Change the contact email
+
+Find the `contact` and `footer` sections and update the `email` field in both:
+
+```ts
+email: "hello@novarix.uk",
+```
+
+### Change the company number
+
+Find the `footer` section:
+
+```ts
+registered: "Registered in England · Company No. 17047180",
+```
+
+### Hide the "Onboarding new accounts" pill
+
+Set the `badge` field to an empty pair of quotes:
+
+```ts
+badge: "",
+```
+
+### Hide the capabilities line
+
+Same trick — set `capabilities` to an empty pair of quotes:
+
+```ts
+capabilities: "",
+```
+
+### Add or remove a navigation link
+
+Find the `nav` section:
+
+```ts
+nav: [
+  { label: "Services", href: "#services" },
+  { label: "How we engage", href: "#engage" },
+],
+```
+
+Each link has a `label` (the text shown) and an `href` (where it jumps to). For links to sections of this page, use `"#services"`, `"#engage"`, or `"#contact"`. For external links use a full URL like `"https://example.com"`.
+
+## Special Characters
+
+To put a hyphen-like dot between words use the middle dot `·` (option-shift-9 on Mac, alt+0183 on Windows). To use a curly apostrophe, type `’` not `'` — both work but the curly one looks better.
+
+If you need an em dash, use `—` not `--`.
+
+## Saving And Publishing
+
+After editing `content.ts`, save the file and:
+
+1. Open a terminal in the project folder.
+2. Commit your changes:
+   ```bash
+   git add content.ts
+   git commit -m "Update homepage copy"
+   git push
+   ```
+3. SSH into the Nginx VM and run:
+   ```bash
+   cd /var/www/novarix.uk
+   ./deploy.sh
+   ```
+
+The site will be rebuilt and reloaded — usually within 30 seconds.
+
+## If You Want To Preview Changes Locally First
+
+You'll need Node.js 20 or newer installed once. Then in the project folder:
+
+```bash
+npm install
+npm run dev
+```
+
+Open `http://localhost:3000` in your browser. The page updates as you save `content.ts`.
+
+## When Things Go Wrong
+
+If the build fails after you save, you have probably:
+
+- Removed a quote `"` somewhere
+- Removed a comma at the end of a line
+- Removed a closing brace `}` or square bracket `]`
+
+The error message in the terminal will usually tell you which line in `content.ts` is the problem. Open the file, find that line, and look for one of the things above. If in doubt, undo your change with `git checkout content.ts` and start again with one small change at a time.

README.md

@@ -1,2 +1,199 @@
-# novarix-uk
+# Novarix Networks Website
 
+`Next.js 16` + `Tailwind CSS v4` website for `Novarix Networks`, built as a fully static site.
+
+The site is designed for this workflow:
+
+- edit locally
+- push changes to your internal `Gitea` repo
+- run one deploy command on the Ubuntu Nginx VM
+- serve the static `out/` directory from `/var/www/novarix.uk/out`
+- expose it publicly through `Nginx Proxy Manager`
+
+## Recommended Repo Name
+
+```text
+novarix-networks-homepage
+```
+
+Keep all the Novarix domains in repos under the same convention so paths and clone URLs stay predictable, e.g.
+
+```text
+http://10.10.10.11:3000/kismet.hasanaj/novarix-networks-homepage.git
+```
+
+## Project Structure
+
+- `content.ts` **all the editable text on the website lives here**
+- `app/page.tsx` page layout and styling (React + Tailwind utilities)
+- `app/layout.tsx` site-wide metadata, fonts, html shell
+- `app/globals.css` Tailwind v4 entrypoint and design tokens
+- `app/sitemap.ts` generates `/sitemap.xml` at build time
+- `app/robots.ts` generates `/robots.txt` at build time
+- `public/` static assets (logos, branding, favicon)
+- `next.config.ts` configured for static export to `out/`
+- `EDITING.md` plain-English guide for changing content
+- `deploy.sh` server-side update script
+- `ops/nginx/novarix.uk.conf.example` example Nginx config
+
+## Important Tailwind / Next.js Note
+
+This project uses the current Tailwind CSS v4 setup via `@tailwindcss/postcss`, configured entirely inside `app/globals.css` (no `tailwind.config.js`).
+
+The build is a **static export**. `npm run build` produces a fully self-contained `out/` directory. Nginx serves files from that directory directly — there is no Node runtime on the production server.
+
+## Ubuntu 24.04 Nginx Server Setup
+
+Install Nginx and Git:
+
+```bash
+sudo apt update
+sudo apt install -y nginx git
+sudo systemctl enable nginx
+sudo systemctl start nginx
+```
+
+Install Node.js 20 or newer. NodeSource currently supports Ubuntu 24.04 with Node 22, which is a good choice for this server:
+
+```bash
+sudo apt install -y curl
+curl -fsSL https://deb.nodesource.com/setup_22.x -o nodesource_setup.sh
+sudo -E bash nodesource_setup.sh
+sudo apt install -y nodejs
+```
+
+After installing, confirm:
+
+```bash
+node --version
+npm --version
+```
+
+Create the web directory and make your normal sudo user the owner:
+
+```bash
+sudo mkdir -p /var/www
+sudo chown -R $USER:$USER /var/www
+```
+
+Clone the Gitea repo:
+
+```bash
+git clone http://10.10.10.11:3000/kismet.hasanaj/novarix-networks-homepage.git /var/www/novarix.uk
+```
+
+Install the website dependencies and build the static site:
+
+```bash
+cd /var/www/novarix.uk
+npm install --no-package-lock
+npm run build
+```
+
+After the build completes, the static site lives in:
+
+```text
+/var/www/novarix.uk/out
+```
+
+Use the Nginx config in:
+
+```text
+ops/nginx/novarix.uk.conf.example
+```
+
+The important Nginx root is:
+
+```nginx
+root /var/www/novarix.uk/out;
+```
+
+Enable the site:
+
+```bash
+sudo cp ops/nginx/novarix.uk.conf.example /etc/nginx/sites-available/novarix.uk
+sudo ln -s /etc/nginx/sites-available/novarix.uk /etc/nginx/sites-enabled/
+sudo rm -f /etc/nginx/sites-enabled/default
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+## Updating The Live Website
+
+After pushing changes to Gitea from your local machine, SSH into the Nginx VM and run:
+
+```bash
+cd /var/www/novarix.uk
+./deploy.sh
+```
+
+The deploy script does this:
+
+```bash
+git pull origin main
+npm install --no-package-lock
+npm run build
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+If the script is not executable yet, run this once:
+
+```bash
+chmod +x /var/www/novarix.uk/deploy.sh
+```
+
+## Editing The Site
+
+For text content (headlines, services, contact details), edit:
+
+```text
+content.ts
+```
+
+For visual styling, layout, or new sections, edit:
+
+```text
+app/page.tsx
+app/globals.css
+```
+
+The friendly walk-through for non-developers is:
+
+```text
+EDITING.md
+```
+
+## Local Development
+
+For previewing changes on your own machine before pushing:
+
+```bash
+npm install
+npm run dev
+```
+
+Then open `http://localhost:3000` in your browser. The page reloads automatically as you save files.
+
+## Nginx Proxy Manager
+
+Create a proxy host:
+
+- Domain: `novarix.uk`
+- Scheme: `http`
+- Forward hostname/IP: private IP of the Ubuntu Nginx VM
+- Forward port: `80`
+- SSL: request certificate and force SSL
+- Enable `Block Common Exploits`
+
+If you also want to redirect `www.novarix.uk` and any defensive domains (e.g. `novarixnet.com`), add them as additional proxy hosts pointing at the same backend, or use NPM's redirect host feature.
+
+## Canonical Domain
+
+Recommended primary domain:
+
+```text
+novarix.uk
+```
+
+Redirect any other Novarix domains to the primary domain once DNS and Nginx Proxy Manager are ready.

app/cookies/page.tsx

@@ -0,0 +1,217 @@
+// =============================================================================
+//  Cookie & Privacy Policy
+// =============================================================================
+//
+//  A plain, honest policy page describing exactly what (very little) is
+//  stored in the visitor's browser. Update the `lastUpdated` field below
+//  whenever the policy changes.
+//
+//  The wording is deliberately written in first-person plain English rather
+//  than legalese — Novarix is small enough to be transparent and brief.
+// =============================================================================
+
+import type { Metadata } from "next";
+import Link from "next/link";
+import { site } from "@/content";
+
+const lastUpdated = "2 May 2026";
+
+export const metadata: Metadata = {
+  title: "Cookie & Privacy Policy",
+  description:
+    "How Novarix Networks uses cookies and browser storage on this website.",
+};
+
+export default function CookiePolicyPage() {
+  return (
+    <main className="site-shell min-h-screen">
+      {/* Ambient background, matching the homepage */}
+      <div
+        className="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
+        aria-hidden="true"
+      >
+        <div className="ambient-orb ambient-orb-a" />
+        <div className="ambient-orb ambient-orb-b" />
+        <div className="ambient-grid" />
+      </div>
+
+      {/* Lightweight header — just a back-link */}
+      <header className="border-b border-[var(--border)]">
+        <div className="mx-auto flex h-20 w-full max-w-3xl items-center px-6 sm:px-8">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 text-sm text-[var(--text-soft)] transition-colors hover:text-[var(--text)]"
+          >
+            <span aria-hidden="true">←</span>
+            Back to Novarix Networks
+          </Link>
+        </div>
+      </header>
+
+      <article className="mx-auto w-full max-w-3xl px-6 py-16 sm:px-8 sm:py-24">
+        <p className="text-xs font-semibold tracking-[0.18em] text-[var(--accent)] uppercase">
+          Legal
+        </p>
+        <h1 className="mt-3 text-[clamp(2rem,4vw,3rem)] leading-[1.05] font-semibold tracking-[-0.03em]">
+          Cookie &amp; Privacy Policy
+        </h1>
+        <p className="mt-4 text-sm text-[var(--text-soft)]">
+          Last updated {lastUpdated}
+        </p>
+
+        <div className="mt-12 space-y-10 text-base leading-relaxed text-[var(--text-soft)]">
+          <section>
+            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
+              In short
+            </h2>
+            <p className="mt-3">
+              This website does not run analytics, advertising, or any
+              third-party tracking. We do not sell, share, or transfer
+              personal data to anyone. The only things we store in your
+              browser are listed below — and you can decline them using the
+              banner that appears on your first visit.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
+              What we store
+            </h2>
+            <p className="mt-3">
+              We use two small browser storage entries — both first-party,
+              both confined to your browser, neither shared with anyone:
+            </p>
+
+            <div className="mt-6 space-y-4">
+              <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-5 backdrop-blur sm:p-6">
+                <p className="font-mono text-sm font-semibold text-[var(--text)]">
+                  novarix-cookie-consent
+                </p>
+                <p className="mt-2 text-sm">
+                  <span className="font-semibold text-[var(--text)]">
+                    Strictly necessary.
+                  </span>{" "}
+                  Stored in <code>localStorage</code>. Records your choice
+                  from the cookie banner so we don&apos;t ask you again on
+                  every page. Persists until you clear your browser data.
+                </p>
+              </div>
+
+              <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-5 backdrop-blur sm:p-6">
+                <p className="font-mono text-sm font-semibold text-[var(--text)]">
+                  novarix-intro-seen
+                </p>
+                <p className="mt-2 text-sm">
+                  <span className="font-semibold text-[var(--text)]">
+                    Preference.
+                  </span>{" "}
+                  Stored in <code>sessionStorage</code> only when you accept
+                  cookies. Lets us skip the animated logo intro for the rest
+                  of your browsing session. Cleared automatically when you
+                  close the browser tab. If you decline cookies, this is
+                  never set and the intro may play again on a fresh tab.
+                </p>
+              </div>
+            </div>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
+              What we don&apos;t do
+            </h2>
+            <p className="mt-3">
+              We don&apos;t set tracking cookies. We don&apos;t run Google
+              Analytics, Plausible, Fathom, Matomo, or any equivalent. We
+              don&apos;t serve advertising. We don&apos;t embed third-party
+              scripts that profile you across websites. We don&apos;t use
+              session-replay tools.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
+              Server logs
+            </h2>
+            <p className="mt-3">
+              Our web server keeps short-lived access logs (IP address,
+              request path, timestamp, user agent) for the operational
+              purposes of running the site — diagnosing errors, blocking
+              abuse, and basic capacity planning. Logs are retained for no
+              longer than 30 days and are not used to build profiles of
+              individual visitors.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
+              Changing your mind
+            </h2>
+            <p className="mt-3">
+              Use the{" "}
+              <span className="font-semibold text-[var(--text)]">
+                Cookie preferences
+              </span>{" "}
+              link in the footer of any page to re-open the banner and
+              change your decision. Or clear this site&apos;s storage in
+              your browser settings to be asked again from scratch.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
+              Who we are
+            </h2>
+            <p className="mt-3">
+              {site.footer.company}, {site.footer.registered.toLowerCase()}.
+              For privacy questions or to exercise your rights under UK GDPR
+              (access, correction, deletion, portability, objection), email
+              us at{" "}
+              <a
+                href={`mailto:${site.footer.email}`}
+                className="font-medium text-[var(--text)] underline-offset-4 hover:underline"
+              >
+                {site.footer.email}
+              </a>
+              .
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
+              Complaints
+            </h2>
+            <p className="mt-3">
+              If you believe we&apos;ve mishandled your personal data, you
+              have the right to complain to the UK&apos;s data protection
+              authority, the Information Commissioner&apos;s Office (ICO),
+              at{" "}
+              <a
+                href="https://ico.org.uk/make-a-complaint/"
+                className="font-medium text-[var(--text)] underline-offset-4 hover:underline"
+                target="_blank"
+                rel="noreferrer"
+              >
+                ico.org.uk
+              </a>
+              .
+            </p>
+          </section>
+        </div>
+      </article>
+
+      <footer className="border-t border-[var(--border)] py-12">
+        <div className="mx-auto flex w-full max-w-3xl flex-col gap-2 px-6 text-sm text-[var(--text-soft)] sm:flex-row sm:items-center sm:justify-between sm:px-8">
+          <span>
+            © {new Date().getFullYear()} {site.footer.company}
+          </span>
+          <Link
+            href="/"
+            className="transition-colors hover:text-[var(--accent)]"
+          >
+            ← Back to home
+          </Link>
+        </div>
+      </footer>
+    </main>
+  );
+}

app/globals.css

@@ -0,0 +1,338 @@
+/* ============================================================================
+   Novarix Networks — Global stylesheet
+   ============================================================================
+
+   This file controls the visual *theme* of the site (colours, fonts,
+   background effects, animations). Most page layout is done with Tailwind
+   utility classes directly inside `app/page.tsx` — this file only handles
+   things that don't fit neatly into utilities.
+
+   What's in here, top to bottom:
+     1. Design tokens         — brand colours, font, shadows (@theme block)
+     2. Theme variables       — light + dark mode CSS variables
+     3. Base styles           — body font, focus rings, text selection
+     4. Site shell + ambient  — background gradient, floating orbs, grid
+     5. Brand wordmark swap   — light/dark logo switcher
+     6. Intro overlay         — first-visit animated logo
+     7. Animations            — keyframes used above
+     8. Reduced motion        — respect "prefers-reduced-motion" setting
+
+   To change the brand colour palette, edit the `--color-brand-*` lines in
+   the @theme block below. Everything else cascades from those.
+   ============================================================================ */
+
+@import "tailwindcss";
+
+/* ---------------------------------------------------------------------------
+   1. Design tokens — registered with Tailwind v4 via @theme.
+   These become utility classes (e.g. `bg-brand-500`, `text-ink-900`) and
+   custom CSS variables you can use anywhere in the stylesheet.
+   --------------------------------------------------------------------------- */
+@theme {
+  --font-sans:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+
+  --color-brand-50: oklch(0.97 0.015 240);
+  --color-brand-100: oklch(0.93 0.04 240);
+  --color-brand-200: oklch(0.86 0.07 240);
+  --color-brand-300: oklch(0.78 0.11 240);
+  --color-brand-400: oklch(0.7 0.14 240);
+  --color-brand-500: oklch(0.62 0.16 240);
+  --color-brand-600: oklch(0.54 0.18 245);
+  --color-brand-700: oklch(0.46 0.18 250);
+
+  --color-ink-50: oklch(0.985 0.003 250);
+  --color-ink-100: oklch(0.96 0.005 250);
+  --color-ink-200: oklch(0.92 0.008 250);
+  --color-ink-300: oklch(0.84 0.012 250);
+  --color-ink-400: oklch(0.65 0.018 250);
+  --color-ink-500: oklch(0.5 0.02 250);
+  --color-ink-600: oklch(0.38 0.022 250);
+  --color-ink-700: oklch(0.28 0.024 250);
+  --color-ink-800: oklch(0.2 0.026 250);
+  --color-ink-900: oklch(0.13 0.028 255);
+  --color-ink-950: oklch(0.08 0.03 260);
+
+  --radius-card: 1.25rem;
+  --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 12px 32px -12px oklch(0 0 0 / 0.18);
+}
+
+/* ---------------------------------------------------------------------------
+   2. Theme variables (light + dark)
+   These are the runtime CSS variables read by both this file and
+   app/page.tsx (via classes like `bg-[var(--surface)]`). Each variable has
+   a light value here and a dark override further down inside the
+   `@media (prefers-color-scheme: dark)` block.
+   --------------------------------------------------------------------------- */
+:root {
+  color-scheme: light dark;
+
+  --bg: var(--color-ink-50);
+  --surface: oklch(1 0 0 / 0.7);
+  --surface-strong: oklch(1 0 0 / 0.92);
+  --text: var(--color-ink-900);
+  --text-soft: var(--color-ink-500);
+  --border: oklch(0.13 0.028 255 / 0.1);
+  --border-strong: oklch(0.13 0.028 255 / 0.18);
+  --accent: var(--color-brand-500);
+  --accent-soft: oklch(0.62 0.16 240 / 0.12);
+  --ring: oklch(0.62 0.16 240 / 0.4);
+  --grid: oklch(0.5 0.02 250 / 0.08);
+
+  --button-bg: var(--color-ink-900);
+  --button-fg: var(--color-ink-50);
+  --button-hover: var(--color-ink-800);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: var(--color-ink-950);
+    --surface: oklch(0.13 0.028 255 / 0.55);
+    --surface-strong: oklch(0.13 0.028 255 / 0.85);
+    --text: var(--color-ink-100);
+    --text-soft: var(--color-ink-400);
+    --border: oklch(1 0 0 / 0.08);
+    --border-strong: oklch(1 0 0 / 0.16);
+    --accent: var(--color-brand-400);
+    --accent-soft: oklch(0.7 0.14 240 / 0.18);
+    --ring: oklch(0.7 0.14 240 / 0.5);
+    --grid: oklch(0.84 0.012 250 / 0.06);
+
+    --button-bg: var(--color-ink-100);
+    --button-fg: var(--color-ink-950);
+    --button-hover: var(--color-ink-50);
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   3. Base styles — applied to plain HTML elements before any classes hit.
+   --------------------------------------------------------------------------- */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    overflow-x: hidden;
+  }
+
+  ::selection {
+    background: var(--accent-soft);
+    color: var(--text);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 3px;
+    border-radius: 4px;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   4. Site shell + ambient effects
+   The .site-shell class is on the <main> element in page.tsx. The two
+   radial gradients here follow the user's mouse via the --mx / --my CSS
+   variables that page.tsx writes on every mousemove.
+   --------------------------------------------------------------------------- */
+.site-shell {
+  position: relative;
+  isolation: isolate;
+  min-height: 100vh;
+  background:
+    radial-gradient(
+      circle at var(--mx, 50%) var(--my, 22%),
+      oklch(0.62 0.16 240 / 0.12),
+      transparent 20%
+    ),
+    radial-gradient(
+      circle at calc(var(--mx, 50%) * 0.65) calc(var(--my, 22%) * 1.2),
+      oklch(0.6 0.14 280 / 0.09),
+      transparent 24%
+    ),
+    var(--bg);
+}
+
+.ambient-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, var(--grid) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: linear-gradient(to bottom, oklch(0 0 0 / 0.5), transparent 80%);
+}
+
+.ambient-orb {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(80px);
+  opacity: 0.22;
+  animation: drift 18s ease-in-out infinite;
+  will-change: transform;
+}
+
+.ambient-orb-a {
+  width: 32rem;
+  height: 32rem;
+  top: 4rem;
+  right: -10rem;
+  background: linear-gradient(
+    135deg,
+    oklch(0.7 0.14 240 / 0.55),
+    oklch(0.6 0.14 200 / 0.1)
+  );
+}
+
+.ambient-orb-b {
+  width: 26rem;
+  height: 26rem;
+  top: 28rem;
+  left: -8rem;
+  background: linear-gradient(
+    135deg,
+    oklch(0.6 0.14 280 / 0.35),
+    oklch(0.78 0.11 200 / 0.12)
+  );
+  animation-duration: 22s;
+}
+
+/* ---------------------------------------------------------------------------
+   5. Brand wordmark colour-scheme swap
+   The header logo has two PNG variants — a colour one for light mode and a
+   white one for dark mode. The `brand-light` / `brand-dark` classes (set
+   in page.tsx) live on both <Image> tags; only the matching one is shown.
+   --------------------------------------------------------------------------- */
+.brand-light {
+  display: block;
+}
+
+.brand-dark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .brand-light {
+    display: none;
+  }
+
+  .brand-dark {
+    display: block;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   6. Intro overlay
+   The first-visit animated SVG wordmark. The SVG itself runs a 3-second
+   stroke-then-fill animation (defined inside
+   /public/branding/animated_logo_intro.svg). The overlay fades out at the
+   3-second mark so the SVG completes before it disappears. Total intro
+   length is matched in page.tsx's setTimeout (3600ms).
+
+   When .intro-running is on the <main> element, the page content
+   underneath is hidden so it doesn't flash through during the animation.
+   --------------------------------------------------------------------------- */
+.intro-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: grid;
+  place-items: center; /* dead-centre the SVG in the viewport */
+  animation: intro-fade-out 600ms ease 3s forwards;
+}
+
+.intro-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--bg);
+}
+
+.intro-svg {
+  position: relative; /* sits above .intro-backdrop in the stacking order */
+  display: block;
+  width: min(70vw, 900px);
+  max-height: 70vh;
+  height: auto;
+  object-fit: contain;
+}
+
+.intro-running .site-header,
+.intro-running main > section,
+.intro-running main > footer {
+  opacity: 0;
+}
+
+@media (max-width: 720px) {
+  .intro-svg {
+    width: min(86vw, 560px);
+  }
+}
+
+@media (max-width: 480px) {
+  .intro-svg {
+    width: 92vw;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   7. Animations — keyframes used by the orbs and the intro overlay above.
+   --------------------------------------------------------------------------- */
+@keyframes drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(0, 18px, 0) scale(1.06);
+  }
+}
+
+@keyframes intro-wordmark {
+  0% {
+    opacity: 0;
+    transform: translateY(110%) scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes intro-fade-out {
+  to {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   8. Reduced motion
+   Respects the user's OS-level "reduce motion" preference by disabling
+   the orb drift, the intro animation, and any transition/animation
+   durations across the site.
+   --------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  .ambient-orb,
+  .intro-overlay,
+  .intro-wordmark {
+    animation: none !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0ms !important;
+    animation-duration: 0ms !important;
+  }
+}

app/globals.css.bak

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

app/layout.tsx

@@ -0,0 +1,72 @@
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+import CookieBanner from "@/components/CookieBanner";
+
+export const metadata: Metadata = {
+  metadataBase: new URL("https://novarix.uk"),
+  title: {
+    default: "Novarix Networks",
+    template: "%s | Novarix Networks",
+  },
+  description:
+    "Novarix Networks provides network consulting, remote network support, and architecture services for organisations running production network infrastructure.",
+  applicationName: "Novarix Networks",
+  keywords: [
+    "Novarix Networks",
+    "ISP",
+    "Managed Service Provider",
+    "MSP",
+    "Network Consulting",
+    "Internet Connectivity",
+    "BGP",
+    "IXP",
+    "CDN Edge",
+    "Network Engineering",
+  ],
+  authors: [{ name: "Novarix Networks" }],
+  creator: "Novarix Networks",
+  publisher: "Novarix Networks",
+  alternates: {
+    canonical: "/",
+  },
+  openGraph: {
+    type: "website",
+    url: "https://novarix.uk",
+    siteName: "Novarix Networks",
+    title: "Novarix Networks",
+    description:
+      "Engineering-led network consulting, remote support, and architecture for production networks.",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Novarix Networks",
+    description:
+      "Engineering-led network consulting, remote support, and architecture for production networks.",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#020617" },
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en-GB" suppressHydrationWarning>
+      <body>
+        {children}
+        <CookieBanner />
+      </body>
+    </html>
+  );
+}

app/layout.tsx.bak

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,499 @@
+"use client";
+
+// =============================================================================
+//  Novarix Networks — Homepage
+// =============================================================================
+//
+//  This file controls the LAYOUT and STYLING of the homepage.
+//  All editable TEXT lives in `/content.ts` at the project root.
+//
+//  How this file is organised, top to bottom:
+//     1. Imports + setup
+//     2. Intro overlay   (the animated logo shown on first visit)
+//     3. Site shell      (background gradient + ambient orbs + grid)
+//     4. Header          (logo + navigation)
+//     5. Hero            (big headline + buttons)
+//     6. Services        (three cards under "What we do")
+//     7. How we engage   (three cards under "Working with us")
+//     8. Contact         (the dark contact card)
+//     9. Footer          (company details + copyright)
+//
+//  Each section is marked with a clear comment header you can search for.
+//  The "use client" line at the top tells Next.js this page runs in the
+//  browser (needed for the animated intro and the mouse-tracking glow).
+// =============================================================================
+
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { site } from "@/content";
+import { openCookieBanner } from "@/components/CookieBanner";
+
+// Type for the mouse-pointer position used to move the background glow.
+type PointerState = { x: number; y: number };
+
+export default function HomePage() {
+  // ---------------------------------------------------------------------------
+  //  STATE
+  // ---------------------------------------------------------------------------
+  //  showIntro  — true while the animated logo intro is playing.
+  //  pointer    — the mouse position (in % of page width/height). Used by the
+  //               soft glow that follows the cursor in the background.
+  // ---------------------------------------------------------------------------
+  const [showIntro, setShowIntro] = useState(false);
+  const [pointer, setPointer] = useState<PointerState>({ x: 50, y: 22 });
+
+  // ---------------------------------------------------------------------------
+  //  INTRO OVERLAY EFFECT
+  //  Plays the animated logo + wordmark the first time someone visits the
+  //  site in this browser tab. We remember they've seen it using
+  //  sessionStorage so it doesn't replay on every navigation. The intro lasts
+  //  ~3.2 seconds, then fades out.
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    try {
+      const introSeen = window.sessionStorage.getItem("novarix-intro-seen");
+      // Only set the "seen" flag if the user has accepted cookies. Without
+      // consent we still play the intro — we just don't remember it played.
+      const consent = window.localStorage.getItem("novarix-cookie-consent");
+
+      if (!introSeen) {
+        // Sync once with sessionStorage on first client mount.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setShowIntro(true);
+        if (consent === "ack") {
+          window.sessionStorage.setItem("novarix-intro-seen", "true");
+        }
+
+        // The SVG's built-in stroke + fill animation lasts ~3s.
+        // We hold for an extra ~600ms so the CSS fade-out can complete.
+        const timer = window.setTimeout(() => {
+          setShowIntro(false);
+        }, 3600);
+
+        return () => window.clearTimeout(timer);
+      }
+    } catch {
+      /* storage unavailable — silently skip the intro */
+    }
+  }, []);
+
+  // ---------------------------------------------------------------------------
+  //  BACKGROUND POSITION
+  //  Translates the current mouse pointer into two CSS variables (--mx, --my)
+  //  that the .site-shell background gradient reads. Memoised so React doesn't
+  //  rebuild the style object on every render.
+  // ---------------------------------------------------------------------------
+  const backgroundStyle = useMemo(
+    () =>
+      ({
+        ["--mx"]: `${pointer.x}%`,
+        ["--my"]: `${pointer.y}%`,
+      }) as React.CSSProperties,
+    [pointer.x, pointer.y]
+  );
+
+  return (
+    <>
+      {/* =====================================================================
+          INTRO OVERLAY
+          A single self-contained animated SVG of the Novarix wordmark,
+          drawn dead-centre in the viewport. The SVG itself contains all the
+          animation (strokes draw over 2s, fill in over the next 1s — see
+          /public/branding/animated_logo_intro.svg). Hidden after ~3.6s
+          (see the useEffect above + the CSS fade-out timing).
+          ===================================================================== */}
+      {showIntro && (
+        <div className="intro-overlay" aria-hidden="true">
+          <div className="intro-backdrop" />
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src="/branding/animated_logo_intro.svg"
+            alt=""
+            className="intro-svg"
+          />
+        </div>
+      )}
+
+      {/* =====================================================================
+          SITE SHELL
+          The <main> wraps the whole page. It tracks the mouse so the
+          background glow can follow the cursor, and applies the .site-shell
+          class (defined in globals.css) for the background gradient.
+          ===================================================================== */}
+      <main
+        id="top"
+        className={`site-shell ${showIntro ? "intro-running" : ""}`}
+        style={backgroundStyle}
+        onMouseMove={(event) => {
+          const rect = event.currentTarget.getBoundingClientRect();
+          const x = ((event.clientX - rect.left) / rect.width) * 100;
+          const y = ((event.clientY - rect.top) / rect.height) * 100;
+          setPointer({ x, y });
+        }}
+      >
+        {/* -------------------------------------------------------------------
+            AMBIENT LAYER
+            Two soft floating "orbs" and a faint grid behind everything.
+            Purely decorative. All styles live in globals.css under
+            .ambient-orb / .ambient-grid. Sits at z-index -10 so it's
+            under the page content.
+            ------------------------------------------------------------------- */}
+        <div
+          className="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
+          aria-hidden="true"
+        >
+          <div className="ambient-orb ambient-orb-a" />
+          <div className="ambient-orb ambient-orb-b" />
+          <div className="ambient-grid" />
+        </div>
+
+        {/* ===================================================================
+            HEADER
+            Sticky at the top of the page. Contains the wordmark logo (links
+            back to top) and the primary navigation pulled from
+            content.ts -> site.nav. Two logo images swap automatically for
+            light/dark mode.
+            =================================================================== */}
+        <header className="site-header sticky top-0 z-50 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_82%,transparent)] backdrop-blur-xl">
+          <div className="mx-auto flex h-20 w-full max-w-6xl items-center justify-between gap-6 px-6 sm:h-24 sm:px-8">
+            {/* Logo / wordmark */}
+            <a
+              href="#top"
+              aria-label="Novarix Networks — back to top"
+              className="inline-flex shrink-0 items-center"
+            >
+              <Image
+                src="/branding/novarix-wordmark-colour.png"
+                alt="Novarix Networks"
+                width={2048}
+                height={430}
+                priority
+                className="brand-light h-9 w-auto max-w-[42vw] object-contain sm:h-12"
+              />
+              <Image
+                src="/branding/novarix-wordmark-white.png"
+                alt="Novarix Networks"
+                width={2048}
+                height={430}
+                priority
+                className="brand-dark h-9 w-auto max-w-[42vw] object-contain sm:h-12"
+              />
+            </a>
+
+            {/* Desktop navigation — hidden on small screens (sm:flex) */}
+            <nav
+              aria-label="Primary"
+              className="hidden items-center gap-7 text-sm text-[var(--text-soft)] sm:flex"
+            >
+              {site.nav.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className="transition-colors hover:text-[var(--text)]"
+                >
+                  {item.label}
+                </a>
+              ))}
+              {/* Pill-style Contact button on the right */}
+              <a
+                href="#contact"
+                className="inline-flex items-center gap-2 rounded-full border border-[var(--border-strong)] px-4 py-1.5 text-[var(--text)] transition-all hover:border-[var(--accent)] hover:text-[var(--accent)]"
+              >
+                Contact
+                <span aria-hidden="true">→</span>
+              </a>
+            </nav>
+
+            {/* Mobile-only Contact pill — replaces the full nav on small screens */}
+            <a
+              href="#contact"
+              className="inline-flex items-center rounded-full border border-[var(--border-strong)] px-3 py-1.5 text-xs text-[var(--text)] transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)] sm:hidden"
+            >
+              Contact
+            </a>
+          </div>
+        </header>
+
+        {/* ===================================================================
+            HERO
+            The first thing visitors see: status pill, eyebrow, big headline,
+            descriptive paragraph, and two call-to-action buttons.
+            All text comes from content.ts -> site.hero.
+            =================================================================== */}
+        <section className="relative pt-24 pb-20 sm:pt-32 sm:pb-28">
+          <div className="mx-auto w-full max-w-6xl px-6 sm:px-8">
+            <div className="max-w-4xl">
+              {/* Optional pulsing-dot pill. Hidden if site.hero.badge is "" */}
+              {site.hero.badge && (
+                <span className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-3 py-1 text-xs font-medium text-[var(--text-soft)] backdrop-blur">
+                  <span className="relative flex h-2 w-2">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--accent)] opacity-75" />
+                    <span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--accent)]" />
+                  </span>
+                  {site.hero.badge}
+                </span>
+              )}
+
+              {/* Small uppercase eyebrow */}
+              <p className="mt-7 text-xs font-semibold tracking-[0.18em] text-[var(--accent)] uppercase">
+                {site.hero.eyebrow}
+              </p>
+
+              {/* Main headline. The middle word ("accent") is shown in a
+                  brand-coloured gradient. Font size scales with viewport. */}
+              <h1 className="mt-5 text-[clamp(2.5rem,6vw,4.8rem)] leading-[1.04] font-semibold tracking-[-0.04em] text-balance">
+                {site.hero.headlineBefore}{" "}
+                <span className="bg-gradient-to-r from-brand-500 to-brand-700 bg-clip-text text-transparent dark:from-brand-300 dark:to-brand-500">
+                  {site.hero.headlineAccent}
+                </span>{" "}
+                {site.hero.headlineAfter}
+              </h1>
+
+              {/* Supporting paragraph */}
+              <p className="mt-7 max-w-2xl text-lg leading-relaxed text-[var(--text-soft)] sm:text-xl">
+                {site.hero.description}
+              </p>
+
+              {/* Call-to-action buttons */}
+              <div className="mt-10 flex flex-wrap items-center gap-3">
+                {/* Primary button — solid background */}
+                <a
+                  href={site.hero.primaryCta.href}
+                  className="group inline-flex h-12 items-center gap-2 rounded-xl bg-[var(--button-bg)] px-5 text-sm font-semibold text-[var(--button-fg)] shadow-sm transition-all hover:-translate-y-0.5 hover:bg-[var(--button-hover)] hover:shadow-md"
+                >
+                  {site.hero.primaryCta.label}
+                  <span
+                    aria-hidden="true"
+                    className="transition-transform group-hover:translate-x-0.5"
+                  >
+                    →
+                  </span>
+                </a>
+                {/* Secondary button — outlined */}
+                <a
+                  href={site.hero.secondaryCta.href}
+                  className="inline-flex h-12 items-center rounded-xl border border-[var(--border-strong)] bg-[var(--surface)] px-5 text-sm font-semibold text-[var(--text)] backdrop-blur transition-all hover:-translate-y-0.5 hover:border-[var(--accent)] hover:text-[var(--accent)]"
+                >
+                  {site.hero.secondaryCta.label}
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ===================================================================
+            SERVICES
+            "What we do" — section heading then a 3-column grid of cards
+            (1 column on mobile). The number of cards comes from
+            content.ts -> site.services.items, so adding a fourth card there
+            automatically appears here. Below the grid sits an optional
+            dashed-border "Capabilities" line.
+            =================================================================== */}
+        <section
+          id="services"
+          className="relative border-t border-[var(--border)] py-24 sm:py-28"
+        >
+          <div className="mx-auto w-full max-w-6xl px-6 sm:px-8">
+            {/* Section heading */}
+            <div className="max-w-3xl">
+              <p className="text-xs font-semibold tracking-[0.18em] text-[var(--accent)] uppercase">
+                {site.services.eyebrow}
+              </p>
+              <h2 className="mt-3 text-[clamp(1.9rem,3.2vw,2.75rem)] leading-tight font-semibold tracking-[-0.03em]">
+                {site.services.title}
+              </h2>
+              <p className="mt-5 max-w-2xl text-base leading-relaxed text-[var(--text-soft)] sm:text-lg">
+                {site.services.description}
+              </p>
+            </div>
+
+            {/* Service cards grid — 1 column on mobile, 3 columns on md+ */}
+            <div className="mt-12 grid gap-5 sm:gap-6 md:grid-cols-3">
+              {site.services.items.map((service) => (
+                <article
+                  key={service.title}
+                  className="group relative overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-7 backdrop-blur transition-all hover:-translate-y-1 hover:border-[var(--border-strong)] hover:shadow-[0_20px_40px_-20px_oklch(0_0_0/0.25)]"
+                >
+                  {/* Thin gradient hairline at the top of each card on hover */}
+                  <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--border-strong)] to-transparent opacity-0 transition-opacity group-hover:opacity-100"
+                  />
+                  {/* Card top row: index number + arrow that appears on hover */}
+                  <div className="flex items-center justify-between">
+                    <span className="font-mono text-xs tracking-widest text-[var(--text-soft)]">
+                      {service.index}
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      className="text-[var(--text-soft)] opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100"
+                    >
+                      →
+                    </span>
+                  </div>
+                  {/* Card title + body */}
+                  <h3 className="mt-5 text-lg font-semibold tracking-tight">
+                    {service.title}
+                  </h3>
+                  <p className="mt-3 text-sm leading-relaxed text-[var(--text-soft)]">
+                    {service.description}
+                  </p>
+                </article>
+              ))}
+            </div>
+
+            {/* Optional capabilities strip. Hidden if capabilities is "". */}
+            {site.services.capabilities && (
+              <div className="mt-10 rounded-2xl border border-dashed border-[var(--border)] p-5 text-sm leading-relaxed text-[var(--text-soft)] sm:p-6">
+                <span className="font-semibold tracking-wide text-[var(--text)] uppercase">
+                  Capabilities ·
+                </span>{" "}
+                {site.services.capabilities}
+              </div>
+            )}
+          </div>
+        </section>
+
+        {/* ===================================================================
+            HOW WE ENGAGE
+            Three engagement-model cards. Same shape as Services but the
+            cards are simpler (no number, no hover arrow). Cards come from
+            content.ts -> site.engage.items.
+            =================================================================== */}
+        <section
+          id="engage"
+          className="relative border-t border-[var(--border)] py-24 sm:py-28"
+        >
+          <div className="mx-auto w-full max-w-6xl px-6 sm:px-8">
+            {/* Section heading */}
+            <div className="max-w-3xl">
+              <p className="text-xs font-semibold tracking-[0.18em] text-[var(--accent)] uppercase">
+                {site.engage.eyebrow}
+              </p>
+              <h2 className="mt-3 text-[clamp(1.9rem,3.2vw,2.75rem)] leading-tight font-semibold tracking-[-0.03em]">
+                {site.engage.title}
+              </h2>
+              <p className="mt-5 max-w-2xl text-base leading-relaxed text-[var(--text-soft)] sm:text-lg">
+                {site.engage.description}
+              </p>
+            </div>
+
+            {/* Engagement cards grid */}
+            <div className="mt-12 grid gap-5 sm:gap-6 md:grid-cols-3">
+              {site.engage.items.map((engagement) => (
+                <div
+                  key={engagement.title}
+                  className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-7 backdrop-blur"
+                >
+                  <h3 className="text-lg font-semibold tracking-tight">
+                    {engagement.title}
+                  </h3>
+                  <p className="mt-3 text-sm leading-relaxed text-[var(--text-soft)]">
+                    {engagement.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* ===================================================================
+            CONTACT
+            A single dark, rounded "callout" card with the contact email and
+            response-time note. The button uses a `mailto:` link so clicking
+            opens the visitor's mail app pre-addressed to us.
+            =================================================================== */}
+        <section
+          id="contact"
+          className="relative border-t border-[var(--border)] py-24 sm:py-28"
+        >
+          <div className="mx-auto w-full max-w-4xl px-6 sm:px-8">
+            <div className="overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--surface)] p-8 backdrop-blur sm:p-12">
+              {/* Section heading inside the card */}
+              <p className="text-xs font-semibold tracking-[0.18em] text-[var(--accent)] uppercase">
+                {site.contact.eyebrow}
+              </p>
+              <h2 className="mt-3 text-[clamp(1.9rem,3.2vw,2.75rem)] leading-tight font-semibold tracking-[-0.03em]">
+                {site.contact.title}
+              </h2>
+              <p className="mt-5 max-w-2xl text-base leading-relaxed text-[var(--text-soft)] sm:text-lg">
+                {site.contact.description}
+              </p>
+
+              {/* Email button + small response-time note */}
+              <div className="mt-8 flex flex-wrap items-center gap-3">
+                <a
+                  href={`mailto:${site.contact.email}`}
+                  className="group inline-flex h-12 items-center gap-2 rounded-xl bg-[var(--button-bg)] px-5 text-sm font-semibold text-[var(--button-fg)] shadow-sm transition-all hover:-translate-y-0.5 hover:bg-[var(--button-hover)] hover:shadow-md"
+                >
+                  {site.contact.email}
+                  <span
+                    aria-hidden="true"
+                    className="transition-transform group-hover:translate-x-0.5"
+                  >
+                    →
+                  </span>
+                </a>
+                <span className="text-sm text-[var(--text-soft)]">
+                  {site.contact.note}
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ===================================================================
+            FOOTER
+            Two columns on desktop: company details on the left, tagline +
+            copyright on the right. Stacks to one column on mobile.
+            All text comes from content.ts -> site.footer.
+            =================================================================== */}
+        <footer className="border-t border-[var(--border)] py-12">
+          <div className="mx-auto grid w-full max-w-6xl gap-8 px-6 sm:grid-cols-[1fr_auto] sm:px-8">
+            {/* Left column: company name, registration, contact email */}
+            <div className="text-sm leading-relaxed text-[var(--text-soft)]">
+              <p className="font-semibold text-[var(--text)]">
+                {site.footer.company}
+              </p>
+              <p className="mt-1">{site.footer.registered}</p>
+              <p className="mt-1">
+                <a
+                  href={`mailto:${site.footer.email}`}
+                  className="transition-colors hover:text-[var(--accent)]"
+                >
+                  {site.footer.email}
+                </a>
+              </p>
+            </div>
+            {/* Right column: tagline, cookie links, copyright */}
+            <div className="flex flex-col gap-2 text-sm text-[var(--text-soft)] sm:items-end sm:text-right">
+              <span className="text-xs tracking-[0.14em] uppercase">
+                {site.footer.tagline}
+              </span>
+              {/* Cookie & privacy links — keep them small and unobtrusive */}
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
+                <Link
+                  href={site.footer.cookiePolicyHref}
+                  className="transition-colors hover:text-[var(--accent)]"
+                >
+                  {site.footer.cookiePolicyLabel}
+                </Link>
+                <button
+                  type="button"
+                  onClick={openCookieBanner}
+                  className="cursor-pointer text-left transition-colors hover:text-[var(--accent)]"
+                >
+                  {site.footer.cookiePrefsLabel}
+                </button>
+              </div>
+              <span>
+                © {new Date().getFullYear()} {site.footer.company}
+              </span>
+            </div>
+          </div>
+        </footer>
+      </main>
+    </>
+  );
+}

app/page.tsx.bak.tsx

@@ -0,0 +1,154 @@
+import Image from "next/image";
+
+const services = [
+  {
+    title: "Internet Connectivity",
+    description:
+      "Business internet access with resilient routing, clear service boundaries, and engineering-led deployment.",
+  },
+  {
+    title: "Managed Network Services",
+    description:
+      "Operational support for routing, switching, firewalls, and production network infrastructure.",
+  },
+  {
+    title: "Network Consulting",
+    description:
+      "Architecture, troubleshooting, and design support for organisations and service providers.",
+  },
+];
+
+export default function HomePage() {
+  return (
+    <main id="top">
+      <header className="site-header">
+        <div className="container header-inner">
+          <a href="#top" className="brand-link" aria-label="Go to top">
+            <Image
+              src="/branding/novarix-wordmark-colour.png"
+              alt="Novarix Networks"
+              width={2048}
+              height={430}
+              priority
+              className="brand-image brand-image-light"
+            />
+            <Image
+              src="/branding/novarix-wordmark-white.png"
+              alt="Novarix Networks"
+              width={2048}
+              height={430}
+              priority
+              className="brand-image brand-image-dark"
+            />
+          </a>
+
+          <nav className="nav">
+            <a href="#services">Services</a>
+            <a href="#direction">Direction</a>
+            <a href="#contact">Contact</a>
+          </nav>
+        </div>
+      </header>
+
+      <section className="hero">
+        <div className="container">
+          <div className="hero-copy">
+            <p className="eyebrow">Connectivity • Managed Services • Network Engineering</p>
+            <h1>Network infrastructure services built for reliability and growth.</h1>
+            <p className="hero-text">
+              Novarix Networks provides internet connectivity, managed network
+              services, and engineering expertise for organisations that need
+              dependable infrastructure and clear technical ownership.
+            </p>
+
+            <div className="hero-actions">
+              <a href="#contact" className="button button-primary">
+                Contact
+              </a>
+              <a href="#services" className="button button-secondary">
+                Services
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="services" className="section section-border">
+        <div className="container">
+          <div className="section-heading">
+            <h2>Services</h2>
+            <p>
+              Focus the first version of the business on what can be delivered
+              credibly now.
+            </p>
+          </div>
+
+          <div className="card-grid">
+            {services.map((service) => (
+              <article key={service.title} className="card">
+                <h3>{service.title}</h3>
+                <p>{service.description}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="direction" className="section section-border">
+        <div className="container narrow">
+          <div className="section-heading">
+            <h2>Platform Direction</h2>
+            <p>
+              The platform is designed to expand beyond connectivity and managed
+              services toward deeper interconnection capabilities, including
+              exchange participation and edge infrastructure where commercially
+              justified.
+            </p>
+          </div>
+
+          <div className="direction-list">
+            <div className="direction-item">
+              <span className="direction-phase">Phase 1</span>
+              <h3>Connectivity, support, consulting</h3>
+              <p>Lead with services that are operationally clear and saleable immediately.</p>
+            </div>
+
+            <div className="direction-item">
+              <span className="direction-phase">Phase 2</span>
+              <h3>Interconnect and peering</h3>
+              <p>Add exchange participation and partner interconnection as the footprint matures.</p>
+            </div>
+
+            <div className="direction-item">
+              <span className="direction-phase">Phase 3</span>
+              <h3>Edge infrastructure</h3>
+              <p>Introduce selective CDN edge or regional platform capability only where demand supports it.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="contact" className="section section-border">
+        <div className="container narrow">
+          <div className="section-heading">
+            <h2>Contact</h2>
+            <p>
+              For enquiries regarding connectivity, managed network support, or
+              consulting services:
+            </p>
+          </div>
+
+          <a className="contact-link" href="mailto:hello@novarix.network">
+            hello@novarix.network
+          </a>
+        </div>
+      </section>
+
+      <footer className="footer section-border">
+        <div className="container footer-inner">
+          <span>© {new Date().getFullYear()} Novarix Networks</span>
+        </div>
+      </footer>
+    </main>
+  );
+}

app/robots.ts

@@ -0,0 +1,11 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: "https://novarix.uk/sitemap.xml",
+  };
+}

app/sitemap.ts

@@ -0,0 +1,20 @@
+import type { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const lastModified = new Date();
+
+  return [
+    {
+      url: "https://novarix.uk",
+      lastModified,
+      changeFrequency: "monthly",
+      priority: 1,
+    },
+    {
+      url: "https://novarix.uk/cookies",
+      lastModified,
+      changeFrequency: "yearly",
+      priority: 0.3,
+    },
+  ];
+}

components/CookieBanner.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+// =============================================================================
+//  CookieBanner
+// =============================================================================
+//
+//  A small, non-blocking cookie / consent banner shown on first visit.
+//  Two buttons:  ACK (accept)  /  RST (reject) — network-engineer humour.
+//
+//  Behaviour:
+//   - On first load, if no consent decision is stored, the banner appears.
+//   - "ACK" stores `novarix-cookie-consent = "ack"` in localStorage and the
+//     banner closes. The site then behaves as before (intro animation
+//     remembers it has played using sessionStorage).
+//   - "RST" stores `novarix-cookie-consent = "rst"` in localStorage and the
+//     banner closes. We also clear the intro-seen flag so we don't keep any
+//     non-consent storage around.
+//   - The footer "Cookie preferences" link dispatches a window event that
+//     re-opens this banner so users can change their mind.
+//
+//  All visible text comes from `/content.ts` -> site.cookies.
+// =============================================================================
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { site } from "@/content";
+
+const CONSENT_KEY = "novarix-cookie-consent";
+const INTRO_SEEN_KEY = "novarix-intro-seen";
+const REOPEN_EVENT = "novarix:open-cookie-banner";
+
+type Consent = "unknown" | "ack" | "rst";
+
+export default function CookieBanner() {
+  // Start hidden on the server and on first client paint to avoid a flash.
+  const [visible, setVisible] = useState(false);
+
+  // Read the stored consent on mount and decide whether to show the banner.
+  useEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(CONSENT_KEY) as Consent | null;
+      if (stored !== "ack" && stored !== "rst") {
+        // No decision yet — show the banner. We delay slightly so the page
+        // settles in first; feels less aggressive than appearing instantly.
+        const t = window.setTimeout(() => setVisible(true), 600);
+        return () => window.clearTimeout(t);
+      }
+    } catch {
+      // localStorage unavailable (private mode, blocked, etc.) — show the
+      // banner so the user is still told. Sync-once-on-mount is a legitimate
+      // use of setState in an effect.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setVisible(true);
+    }
+  }, []);
+
+  // Listen for the "re-open" event from the footer "Cookie preferences" link.
+  useEffect(() => {
+    const handler = () => setVisible(true);
+    window.addEventListener(REOPEN_EVENT, handler);
+    return () => window.removeEventListener(REOPEN_EVENT, handler);
+  }, []);
+
+  function decide(choice: "ack" | "rst") {
+    try {
+      window.localStorage.setItem(CONSENT_KEY, choice);
+      if (choice === "rst") {
+        // Honour the rejection by clearing any non-consent storage.
+        window.sessionStorage.removeItem(INTRO_SEEN_KEY);
+      }
+    } catch {
+      /* storage unavailable — nothing to do */
+    }
+    setVisible(false);
+  }
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-live="polite"
+      aria-label="Cookie consent"
+      className="fixed inset-x-0 bottom-0 z-[1500] flex justify-center p-3 sm:p-5"
+    >
+      <div className="pointer-events-auto w-full max-w-3xl rounded-2xl border border-[var(--border-strong)] bg-[var(--surface-strong)] p-4 shadow-[0_24px_60px_-20px_oklch(0_0_0/0.45)] backdrop-blur-xl sm:p-5">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
+          {/* Message + policy link */}
+          <p className="text-sm leading-relaxed text-[var(--text)]">
+            {site.cookies.message}{" "}
+            <Link
+              href={site.cookies.policyHref}
+              className="font-medium text-[var(--accent)] underline-offset-4 hover:underline"
+            >
+              {site.cookies.policyLabel} →
+            </Link>
+          </p>
+
+          {/* Buttons */}
+          <div className="flex flex-shrink-0 gap-2">
+            <button
+              type="button"
+              onClick={() => decide("rst")}
+              aria-label={site.cookies.reject.ariaLabel}
+              title={site.cookies.reject.tooltip}
+              className="group inline-flex h-11 min-w-[5.5rem] flex-col items-center justify-center rounded-xl border border-[var(--border-strong)] bg-transparent px-4 font-mono text-sm font-semibold text-[var(--text)] transition-all hover:-translate-y-0.5 hover:border-[var(--text)]"
+            >
+              <span className="leading-none">{site.cookies.reject.label}</span>
+              <span className="mt-0.5 text-[0.65rem] font-normal tracking-wide text-[var(--text-soft)] uppercase">
+                {site.cookies.reject.subtitle}
+              </span>
+            </button>
+            <button
+              type="button"
+              onClick={() => decide("ack")}
+              aria-label={site.cookies.accept.ariaLabel}
+              title={site.cookies.accept.tooltip}
+              className="group inline-flex h-11 min-w-[5.5rem] flex-col items-center justify-center rounded-xl bg-[var(--button-bg)] px-4 font-mono text-sm font-semibold text-[var(--button-fg)] shadow-sm transition-all hover:-translate-y-0.5 hover:bg-[var(--button-hover)] hover:shadow-md"
+            >
+              <span className="leading-none">{site.cookies.accept.label}</span>
+              <span className="mt-0.5 text-[0.65rem] font-normal tracking-wide opacity-70 uppercase">
+                {site.cookies.accept.subtitle}
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Helper used by the footer "Cookie preferences" link to re-open the banner.
+export function openCookieBanner() {
+  window.dispatchEvent(new Event(REOPEN_EVENT));
+}

content.ts

@@ -0,0 +1,179 @@
+// =============================================================================
+//  Novarix Networks — Website Content
+// =============================================================================
+//
+//  This is the ONLY file you need to edit to change the words on the website.
+//
+//  Editing rules:
+//   1. Anything inside "double quotes" is text shown on the website.
+//   2. Keep the quotes around every piece of text.
+//   3. Each line ends with a comma — leave the commas alone.
+//   4. To add a new service or engagement, copy a whole "{ ... }" block,
+//      paste it inside the same square brackets [ ... ], and edit the text.
+//   5. Save the file, then run `npm run build` to publish the changes.
+//
+//  See EDITING.md in this folder for a friendlier walk-through with examples.
+// =============================================================================
+
+export const site = {
+  // ---------------------------------------------------------------------------
+  // HERO — the big section at the very top of the page
+  // ---------------------------------------------------------------------------
+  hero: {
+    // Small pill above the headline. Set to "" (empty) to hide.
+    badge: "Onboarding new accounts",
+
+    // Small uppercase line above the headline.
+    eyebrow: "Network Consulting · Remote Support · Engineering",
+
+    // The big headline is split into three parts so one word can be coloured.
+    //   headlineBefore  -> normal text on the left
+    //   headlineAccent  -> the word shown in the brand gradient
+    //   headlineAfter   -> normal text on the right
+    headlineBefore: "Network expertise, on tap, for teams running",
+    headlineAccent: "production",
+    headlineAfter: "infrastructure.",
+
+    // Paragraph under the headline.
+    description:
+      "Novarix Networks provides engineering-led consulting, remote support, and architecture services for organisations and service providers that need clear technical ownership of their network.",
+
+    // Two buttons. `href` can be a section anchor (e.g. "#contact") or a URL.
+    primaryCta: { label: "Get in touch", href: "#contact" },
+    secondaryCta: { label: "Explore services", href: "#services" },
+  },
+
+  // ---------------------------------------------------------------------------
+  // SERVICES — three cards under "What we do"
+  // ---------------------------------------------------------------------------
+  services: {
+    eyebrow: "What we do",
+    title: "Services",
+    description:
+      "We focus on the work we can deliver credibly today — engineering-led consulting, hands-on remote support, and network design for organisations that need an experienced second pair of eyes.",
+
+    // List of service cards. To add a fourth service, copy one block,
+    // paste it inside the [ ... ] and edit. Keep the commas between blocks.
+    items: [
+      {
+        index: "01",
+        title: "Network Consulting",
+        description:
+          "Architecture review, design, and second-opinion engineering for organisations and service providers running production networks.",
+      },
+      {
+        index: "02",
+        title: "Remote Network Support",
+        description:
+          "Hands-on remote support for routing, switching, and firewall environments — incident response, change work, and ongoing operations.",
+      },
+      {
+        index: "03",
+        title: "Architecture & Design",
+        description:
+          "New-build network design, refresh planning, and migration support — from single-site refreshes to multi-site routing topologies.",
+      },
+    ],
+
+    // Dashed-border line under the cards.
+    // Set to "" (empty) to hide it entirely.
+    capabilities:
+      "BGP, OSPF, IS-IS, MPLS, segment routing, IPv4 / IPv6, firewalls (Palo Alto, FortiGate, pfSense), routing platforms (Cisco IOS-XE / IOS-XR, Juniper Junos, Arista EOS, MikroTik RouterOS), and Linux-based networking.",
+  },
+
+  // ---------------------------------------------------------------------------
+  // ENGAGEMENTS — three cards under "How we engage"
+  // ---------------------------------------------------------------------------
+  engage: {
+    eyebrow: "Working with us",
+    title: "How we engage",
+    description:
+      "Three engagement models, depending on what you need. Most engagements start with a short scoping conversation — no obligation, no charge.",
+
+    items: [
+      {
+        title: "Scoped projects",
+        description:
+          "Fixed-deliverable engagements with a clear statement of work — designs, audits, migrations, refreshes.",
+      },
+      {
+        title: "Monthly retainer",
+        description:
+          "An agreed block of remote engineering hours each month for ongoing operations, change work, and on-call cover.",
+      },
+      {
+        title: "Ad-hoc support",
+        description:
+          "Incident-driven engagements for one-off troubleshooting, escalations, and short pieces of design work.",
+      },
+    ],
+  },
+
+  // ---------------------------------------------------------------------------
+  // CONTACT — the dark contact card near the bottom
+  // ---------------------------------------------------------------------------
+  contact: {
+    eyebrow: "Get in touch",
+    title: "Let’s talk infrastructure.",
+    description:
+      "For consulting enquiries, remote support, or scoping a piece of design work — reach out directly. We respond to all business enquiries within one working day.",
+
+    // The button shows your email address; it also opens the user's mail app.
+    email: "hello@novarix.uk",
+
+    // Small grey line shown next to the email button.
+    note: "Replies within one working day.",
+  },
+
+  // ---------------------------------------------------------------------------
+  // NAV — links shown in the top header (in order, left to right)
+  // ---------------------------------------------------------------------------
+  nav: [
+    { label: "Services", href: "#services" },
+    { label: "How we engage", href: "#engage" },
+  ],
+
+  // ---------------------------------------------------------------------------
+  // FOOTER — at the very bottom of the page
+  // ---------------------------------------------------------------------------
+  footer: {
+    company: "Novarix Networks Limited",
+    registered: "Registered in England · Company No. 17047180",
+    email: "hello@novarix.uk",
+    tagline: "Engineered in the UK",
+    // Small link in the footer that re-opens the cookie banner.
+    cookiePrefsLabel: "Cookie preferences",
+    // Link to the cookie policy page.
+    cookiePolicyLabel: "Cookie & Privacy Policy",
+    cookiePolicyHref: "/cookies",
+  },
+
+  // ---------------------------------------------------------------------------
+  // COOKIE BANNER — the bar that appears at the bottom on first visit
+  // ---------------------------------------------------------------------------
+  cookies: {
+    // Short message shown in the banner. Keep it honest — this site does not
+    // currently use any tracking cookies, only one preference for the intro.
+    message:
+      "Heads up — this site stores one tiny browser preference to remember you’ve seen the intro animation. We don’t run analytics, advertising, or third-party tracking.",
+
+    // The two buttons. Labels are small jokes for network folk; subtitles
+    // and aria-labels make them clear to everyone else.
+    accept: {
+      label: "ACK",
+      subtitle: "Allow",
+      ariaLabel: "Accept cookies",
+      tooltip: "Acknowledged — preference saved",
+    },
+    reject: {
+      label: "RST",
+      subtitle: "Decline",
+      ariaLabel: "Reject cookies",
+      tooltip: "Connection reset — preference declined",
+    },
+
+    // Inline link to the policy page from the banner.
+    policyLabel: "Read the policy",
+    policyHref: "/cookies",
+  },
+} as const;

deploy.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+# -----------------------------------------------------------------------------
+#  Novarix Networks website — deploy script
+# -----------------------------------------------------------------------------
+#  Run this on the Ubuntu Nginx VM after pushing changes to Gitea:
+#
+#    cd /var/www/novarix.uk
+#    ./deploy.sh
+#
+#  It pulls the latest code, rebuilds the static site into out/, and reloads
+#  Nginx. Run once with `chmod +x deploy.sh` if it isn't executable yet.
+# -----------------------------------------------------------------------------
+set -euo pipefail
+
+echo "==> Pulling latest from Gitea"
+git pull origin main
+
+echo "==> Installing dependencies"
+npm install --no-package-lock
+
+echo "==> Building static site into out/"
+npm run build
+
+echo "==> Testing Nginx config"
+sudo nginx -t
+
+echo "==> Reloading Nginx"
+sudo systemctl reload nginx
+
+echo "==> Done. Site updated at $(date -Iseconds)"

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from "next";
+
+// Build the site as a fully static export so it can be served by plain
+// nginx with no Node runtime on the server. The `npm run build` step
+// produces an `out/` directory containing all the HTML, CSS, JS, and
+// image assets.
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  output: "export",
+  images: {
+    // next/image cannot use the optimisation server in static export mode,
+    // so images are served as-is from /public.
+    unoptimized: true,
+  },
+};
+
+export default nextConfig;

ops/nginx/novarix.uk.conf.example

@@ -0,0 +1,78 @@
+# -----------------------------------------------------------------------------
+#  Novarix Networks — Nginx site config
+#
+#  Place at: /etc/nginx/sites-available/novarix.uk
+#  Then:    sudo ln -s /etc/nginx/sites-available/novarix.uk \
+#                      /etc/nginx/sites-enabled/
+#           sudo nginx -t && sudo systemctl reload nginx
+#
+#  This server listens on plain HTTP only — TLS termination happens upstream
+#  in Nginx Proxy Manager. Adjust if you front it with something else.
+# -----------------------------------------------------------------------------
+
+server {
+    listen      80;
+    listen      [::]:80;
+    server_name novarix.uk www.novarix.uk;
+
+    # Static export from `npm run build` — this directory must exist after
+    # the first deploy.
+    root  /var/www/novarix.uk/out;
+    index index.html;
+
+    # Don't leak nginx version
+    server_tokens off;
+
+    # Reasonable defaults
+    charset utf-8;
+    client_max_body_size 1M;
+
+    # ---------------------------------------------------------------------
+    # Routing for Next.js static export
+    # ---------------------------------------------------------------------
+    # Pretty URLs: /services -> /services.html, falling back to 404.html
+    location / {
+        try_files $uri $uri.html $uri/index.html =404;
+    }
+
+    # ---------------------------------------------------------------------
+    # Caching
+    # ---------------------------------------------------------------------
+    # Hashed Next.js assets (JS/CSS/fonts) — cache forever, immutable
+    location /_next/static/ {
+        access_log off;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+    }
+
+    # Other static assets in /public — sensible long cache
+    location ~* \.(?:ico|css|js|gif|jpe?g|png|webp|svg|woff2?|ttf|eot|json)$ {
+        access_log off;
+        add_header Cache-Control "public, max-age=2592000";
+    }
+
+    # robots / sitemap should not be cached aggressively
+    location = /robots.txt {
+        add_header Cache-Control "public, max-age=300";
+    }
+    location = /sitemap.xml {
+        add_header Cache-Control "public, max-age=300";
+    }
+
+    # ---------------------------------------------------------------------
+    # Hardening
+    # ---------------------------------------------------------------------
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options        "SAMEORIGIN" always;
+    add_header Referrer-Policy        "strict-origin-when-cross-origin" always;
+    add_header Permissions-Policy     "camera=(), microphone=(), geolocation=()" always;
+
+    # Custom error page (Next.js generates this at build time)
+    error_page 404 /404.html;
+
+    # ---------------------------------------------------------------------
+    # Don't serve hidden files
+    # ---------------------------------------------------------------------
+    location ~ /\.(?!well-known) {
+        deny all;
+    }
+}

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "novarix-site",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "lottie-react": "^2.4.1",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}