{
  "name": "tanstack_start_ts",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "preview": "vite preview",
    "lint": "eslint .",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@hookform/resolvers": "^5.2.2",
    "@radix-ui/react-accordion": "^1.2.12",
    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-aspect-ratio": "^1.1.8",
    "@radix-ui/react-avatar": "^1.1.11",
    "@radix-ui/react-checkbox": "^1.3.3",
    "@radix-ui/react-collapsible": "^1.1.12",
    "@radix-ui/react-context-menu": "^2.2.16",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-hover-card": "^1.1.15",
    "@radix-ui/react-label": "^2.1.8",
    "@radix-ui/react-menubar": "^1.1.16",
    "@radix-ui/react-navigation-menu": "^1.2.14",
    "@radix-ui/react-popover": "^1.1.15",
    "@radix-ui/react-progress": "^1.1.8",
    "@radix-ui/react-radio-group": "^1.3.8",
    "@radix-ui/react-scroll-area": "^1.2.10",
    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-separator": "^1.1.8",
    "@radix-ui/react-slider": "^1.3.6",
    "@radix-ui/react-slot": "^1.2.4",
    "@radix-ui/react-switch": "^1.2.6",
    "@radix-ui/react-tabs": "^1.1.13",
    "@radix-ui/react-toggle": "^1.1.10",
    "@radix-ui/react-toggle-group": "^1.1.11",
    "@radix-ui/react-tooltip": "^1.2.8",
    "@tailwindcss/vite": "^4.2.1",
    "@tanstack/react-query": "^5.83.0",
    "@tanstack/react-router": "^1.168.25",
    "@tanstack/react-start": "^1.167.50",
    "@tanstack/router-plugin": "^1.167.28",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
    "date-fns": "^4.1.0",
    "embla-carousel-react": "^8.6.0",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.575.0",
    "react": "^19.2.0",
    "react-day-picker": "^9.14.0",
    "react-dom": "^19.2.0",
    "react-hook-form": "^7.71.2",
    "react-resizable-panels": "^4.6.5",
    "recharts": "^2.15.4",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.2.1",
    "tw-animate-css": "^1.3.4",
    "vaul": "^1.1.2",
    "vite-tsconfig-paths": "^6.0.2",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@eslint/js": "^9.32.0",
    "@lovable.dev/vite-tanstack-config": "2.7.6",
    "@types/node": "^22.16.5",
    "@types/react": "^19.2.0",
    "@types/react-dom": "^19.2.0",
    "@vitejs/plugin-react": "^5.2.0",
    "eslint": "^9.32.0",
    "eslint-config-prettier": "^10.1.1",
    "eslint-plugin-prettier": "^5.2.6",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^15.15.0",
    "nitro": "3.0.260603-beta",
    "prettier": "^3.7.3",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.56.1",
    "vite": "^8.0.16"
  }
}
vite.config.ts
// @lovable.dev/vite-tanstack-config already includes the following — do NOT add them manually
// or the app will break with duplicate plugins:
//   - tanstackStart, viteReact, tailwindcss, tsConfigPaths, nitro (build-only using cloudflare as a default target),
//     componentTagger (dev-only), VITE_* env injection, @ path alias, React/TanStack dedupe,
//     error logger plugins, and sandbox detection (port/host/strictPort).
// You can pass additional config via defineConfig({ vite: { ... }, etc... }) if needed.
import { defineConfig } from "@lovable.dev/vite-tanstack-config";

export default defineConfig({
  tanstackStart: {
    // Redirect TanStack Start's bundled server entry to src/server.ts (our SSR error wrapper).
    // nitro/vite builds from this
    server: { entry: "server" },
  },
});
tsconfig.json
{
  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "eslint.config.js"],
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react-jsx",
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": false,
    "noEmit": true,

    /* Linting */
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
eslint.config.js
import js from "@eslint/js";
import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";

export default tseslint.config(
  { ignores: ["dist", ".output", ".vinxi"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules": {
      ...reactHooks.configs.recommended.rules,
      "no-restricted-imports": [
        "error",
        {
          paths: [
            {
              name: "server-only",
              message:
                "TanStack Start does not use the Next.js `server-only` package. Rename the module to `*.server.ts` or mark it with `@tanstack/react-start/server-only`.",
            },
          ],
        },
      ],
      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
      "@typescript-eslint/no-unused-vars": "off",
    },
  },
  eslintPluginPrettier,
);
components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "css": "src/styles.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "rtl": false,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {}
}
.prettierrc
{
  "printWidth": 100,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all"
}
.prettierignore
node_modules
dist
.output
.vinxi
pnpm-lock.yaml
package-lock.json
bun.lock
routeTree.gen.ts
bunfig.toml
[
install
]
# 24h supply-chain guard: skip package versions published less than a day ago.
minimumReleaseAge = 86400
# Each entry bypasses the 24h guard for one package — confirm with the user
# before adding any.
minimumReleaseAgeExcludes = ["@lovable.dev/vite-tanstack-config", "@lovable.dev/mcp-js", "@lovable.dev/vite-plugin-dev-server-bridge", "@lovable.dev/vite-plugin-hmr-gate"]
.gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
.output
.vinxi
.tanstack/**
.nitro
*.local

# Wrangler / Cloudflare
.wrangler/
.dev.vars

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.lovable/project.json
{
  "schemaVersion": 1,
  "template": "tanstack_start_ts_2026-06-08-vite-8"
}
.lovable/plan.md
Revert the single-passport hero image back to its previous design while keeping the bilingual stack image unchanged.

## Plan

1. Regenerate `src/assets/passport-eu.jpg` to match its previous design: a single burgundy European passport with **EUROPEAN UNION** at the top, the EU circle-of-stars emblem, and **PASSPORT** at the bottom, placed on a marble desk with a golden key beside it.
2. Leave `src/assets/passports-stack.jpg` untouched — it keeps the bilingual "EUROPEAN COMMUNITY / COMMUNAUTÉ EUROPÉENNE / PASSPORT / PASSEPORT" cover design.
3. Verify the preview renders both images correctly: the hero should show the single EU passport, and the family/section further down should still show the bilingual stack.

No other files or copy will change.
Source files
src/styles.css
@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-gold: var(--gold);
  --color-gold-soft: var(--gold-soft);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

:root {
  --radius: 0.25rem;

  /* Deep navy / cream / gold editorial palette */
  --background: oklch(0.98 0.005 80);
  --foreground: oklch(0.18 0.03 250);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.03 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.03 250);

  --primary: oklch(0.22 0.05 255);          /* deep navy */
  --primary-foreground: oklch(0.97 0.01 80);

  --secondary: oklch(0.94 0.015 80);
  --secondary-foreground: oklch(0.22 0.05 255);

  --muted: oklch(0.95 0.012 80);
  --muted-foreground: oklch(0.45 0.02 250);

  --accent: oklch(0.78 0.13 80);             /* warm gold accent */
  --accent-foreground: oklch(0.18 0.03 250);

  --gold: oklch(0.74 0.14 78);
  --gold-soft: oklch(0.88 0.07 82);

  --destructive: oklch(0.55 0.22 27);
  --destructive-foreground: oklch(0.98 0.01 80);

  --border: oklch(0.88 0.015 80);
  --input: oklch(0.88 0.015 80);
  --ring: oklch(0.74 0.14 78);

  --gradient-hero: linear-gradient(135deg, oklch(0.18 0.04 255 / 0.85), oklch(0.18 0.04 255 / 0.35));
  --gradient-gold: linear-gradient(135deg, oklch(0.82 0.12 82), oklch(0.66 0.15 70));
  --shadow-elegant: 0 30px 80px -30px oklch(0.18 0.04 255 / 0.35);
  --shadow-gold: 0 20px 60px -20px oklch(0.74 0.14 78 / 0.5);
}

.dark {
  --background: oklch(0.12 0.02 255);
  --foreground: oklch(0.97 0.01 80);
  --card: oklch(0.16 0.03 255);
  --card-foreground: oklch(0.97 0.01 80);
  --primary: oklch(0.78 0.13 80);
  --primary-foreground: oklch(0.12 0.02 255);
  --border: oklch(1 0 0 / 10%);
}

@layer base {
  * { border-color: var(--color-border); }
  html { scroll-behavior: smooth; }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
  }
}

@layer utilities {
  .text-gold { color: var(--gold); }
  .bg-gold { background-color: var(--gold); }
  .border-gold { border-color: var(--gold); }
  .gradient-gold { background-image: var(--gradient-gold); }
  .gradient-hero { background-image: var(--gradient-hero); }
  .shadow-elegant { box-shadow: var(--shadow-elegant); }
  .shadow-gold { box-shadow: var(--shadow-gold); }
  .eyebrow {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.72rem;
    font-weight: 500;
  }
}
src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router";
import heroCoast from "@/assets/hero-coast.jpg";
import passportEu from "@/assets/passport-eu.jpg";
import beachGreece from "@/assets/beach-greece.jpg";
import coastPortugal from "@/assets/coast-portugal.jpg";
import coastItaly from "@/assets/coast-italy.jpg";
import passportsStack from "@/assets/passports-stack.jpg";
import algarveImg from "@/assets/algarve.jpg";
import capriImg from "@/assets/capri-new.jpg";
import meganisiImg from "@/assets/meganisi.jpg";
import mykonosImg from "@/assets/mykonos-new.jpg";
import ibizaImg from "@/assets/ibiza.png";
import santoriniImg from "@/assets/santorini.jpg";
import logoWave from "@/assets/logo-wave.png";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Blue Ports Foundation — Golden Passport to European Citizenship" },
      {
        name: "description",
        content:
          "Secure a European residence permit and passport through curated property acquisition. Trusted golden passport advisory for clients in Russia, Asia, the Middle East, Africa and the USA.",
      },
      { property: "og:title", content: "Blue Ports Foundation — Golden Passport to European Citizenship" },
      {
        property: "og:description",
        content:
          "Residence and citizenship by investment. One application — your entire family included.",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/" },
      { property: "og:image", content: heroCoast },
    ],
    links: [{ rel: "canonical", href: "/" }],
  }),
  component: Landing,
});

function Landing() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Nav />
      <Hero />
      <Trust />
      <Program />
      <LandInvestment />
      <Family />
      <Destinations />
      <Lifestyle />
      <Audience />
      <Process />
      <CTA />
      <Footer />
    </div>
  );
}

function Nav() {
  return (
    <header className="absolute top-0 left-0 right-0 z-50">
      <div className="mx-auto max-w-7xl px-6 py-6 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-3 text-primary-foreground">
          <img src={logoWave} alt="Blue Ports Foundation" className="h-10 w-10 object-contain" />
          <span className="font-display text-xl tracking-wide">Blue Ports Foundation</span>
        </a>
        <nav className="hidden md:flex items-center gap-10 text-sm text-primary-foreground/85">
          <a href="#program" className="hover:text-gold transition-colors">Program</a>
          <a href="#destinations" className="hover:text-gold transition-colors">Destinations</a>
          <a href="#process" className="hover:text-gold transition-colors">Process</a>
          <a href="#contact" className="hover:text-gold transition-colors">Contact</a>
        </nav>
        <a
          href="#contact"
          className="hidden md:inline-flex items-center gap-2 border border-gold/60 text-gold px-5 py-2 text-sm tracking-wide hover:bg-gold hover:text-primary transition-colors"
        >
          Private Consultation
        </a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section id="top" className="relative min-h-[100svh] w-full overflow-hidden">
      <img
        src={heroCoast}
        alt="Aerial view of a luxurious Mediterranean coastline at golden hour"
        className="absolute inset-0 h-full w-full object-cover"
        width={1920}
        height={1080}
      />
      <div className="absolute inset-0 bg-gradient-to-b from-primary/80 via-primary/50 to-primary/90" />

      <div className="relative mx-auto max-w-7xl px-6 pt-40 pb-24 md:pt-48 md:pb-32 grid lg:grid-cols-12 gap-12 items-end min-h-[100svh]">
        <div className="lg:col-span-8 text-primary-foreground">
          <p className="eyebrow text-gold mb-6">Residence &amp; Citizenship by Investment</p>
          <h1 className="font-display text-5xl md:text-7xl lg:text-8xl leading-[0.95] max-w-4xl">
            A European passport,
            <br />
            <em className="text-gold not-italic font-light">earned in stone &amp; coastline.</em>
          </h1>
          <p className="mt-8 max-w-xl text-lg text-primary-foreground/85 font-light leading-relaxed">
            We open the door to European Union residence — and onward to full citizenship —
            through curated property acquisition. One application. Intact families. A future
            with freedom of movement.
          </p>
          <div className="mt-10 flex flex-wrap items-center gap-4">
            <a
              href="#contact"
              className="inline-flex items-center gap-3 bg-gold text-primary px-8 py-4 text-sm tracking-widest uppercase font-medium hover:bg-gold-soft transition-colors shadow-gold"
            >
              Begin Your Application
              <span aria-hidden>→</span>
            </a>
            <a
              href="#program"
              className="inline-flex items-center gap-3 text-primary-foreground/90 border-b border-primary-foreground/40 pb-1 hover:text-gold hover:border-gold transition-colors text-sm tracking-widest uppercase"
            >
              How it works
            </a>
          </div>
        </div>

        <div className="lg:col-span-4 text-primary-foreground/80 lg:text-right">
          <div className="grid grid-cols-3 lg:grid-cols-1 gap-8 lg:gap-10">
            <Stat n="27" label="EU Member States" />
            <Stat n="180+" label="Visa-free destinations" />
            <Stat n="1" label="Application — full family" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, label }: { n: string; label: string }) {
  return (
    <div>
      <div className="font-display text-4xl md:text-5xl text-gold">{n}</div>
      <div className="mt-2 text-xs uppercase tracking-[0.2em] text-primary-foreground/70">{label}</div>
    </div>
  );
}

function Trust() {
  const items = ["Lisbon", "Valletta", "Athens", "Nicosia", "Rome", "Madrid"];
  return (
    <section className="border-y border-border bg-secondary">
      <div className="mx-auto max-w-7xl px-6 py-8 flex flex-wrap items-center justify-between gap-6">
        <p className="eyebrow text-muted-foreground">Counsel across</p>
        <div className="flex flex-wrap items-center gap-x-10 gap-y-3 font-display text-xl text-foreground/70">
          {items.map((c) => (
            <span key={c}>{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Program() {
  return (
    <section id="program" className="mx-auto max-w-7xl px-6 py-28 md:py-36 grid lg:grid-cols-12 gap-16 items-center">
      <div className="lg:col-span-5">
        <img
          src={passportEu}
          alt="A European Union passport beside a golden key on a marble desk"
          width={1024}
          height={1024}
          loading="lazy"
          className="w-full aspect-square object-cover shadow-elegant"
        />
      </div>
      <div className="lg:col-span-7">
        <p className="eyebrow text-gold">The Golden Passport</p>
        <h2 className="mt-4 text-4xl md:text-6xl leading-tight">
          Citizenship is no longer a matter of birth.
          <em className="text-gold not-italic font-light"> It is a matter of vision.</em>
        </h2>
        <p className="mt-6 text-lg text-muted-foreground leading-relaxed font-light max-w-2xl">
          The Golden Passport program allows qualifying investors to obtain a long-term
          residence permit in the European Community by acquiring real property within an
          EU member state. After the statutory holding period, that residence converts into
          full European citizenship — and a passport that opens 180+ countries without a visa.
        </p>
        <div className="mt-10 grid sm:grid-cols-3 gap-6">
          <Pillar n="01" title="Residence" body="Issued upon completion of a qualifying property acquisition." />
          <Pillar n="02" title="Naturalisation" body="Path to full citizenship within the program's statutory window." />
          <Pillar n="03" title="Passport" body="An EU passport with freedom of movement, work, and study." />
        </div>
      </div>
    </section>
  );
}

function Pillar({ n, title, body }: { n: string; title: string; body: string }) {
  return (
    <div className="border-t border-border pt-5">
      <div className="font-display text-gold text-2xl">{n}</div>
      <div className="mt-2 font-display text-xl">{title}</div>
      <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{body}</p>
    </div>
  );
}

function LandInvestment() {
  return (
    <section className="relative bg-primary text-primary-foreground overflow-hidden">
      <img
        src={coastPortugal}
        alt="Aerial of the Portuguese Atlantic coast at golden hour"
        width={1280}
        height={960}
        loading="lazy"
        className="absolute inset-0 h-full w-full object-cover opacity-25"
      />
      <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/85 to-primary/40" />
      <div className="relative mx-auto max-w-7xl px-6 py-28 md:py-36 grid lg:grid-cols-2 gap-16">
        <div>
          <p className="eyebrow text-gold">Land — the Qualifying Asset</p>
          <h2 className="mt-4 text-4xl md:text-6xl leading-tight">
            Own a piece of Europe.
            <br />
            <em className="text-gold not-italic font-light">Inherit new culture.</em>
          </h2>
        </div>
        <div className="space-y-8 text-primary-foreground/85 font-light text-lg leading-relaxed">
          <p>
            Our advisors source pre-qualified parcels of land across the European Community —
            coastal estates in Portugal, olive groves in Greece, vineyards in Italy, agricultural
            holdings in Cyprus and Spain. Each parcel is structured to satisfy the minimum
            investment threshold required for a long-term EU residence permit.
          </p>
          <p>
            You acquire a real asset that grows in equity. We secure the residence. The land remains
            yours; the passport, in time, becomes yours as well.
          </p>
          <ul className="grid sm:grid-cols-2 gap-4 pt-4 text-base">
            {[
              "Pre-vetted, title-clear parcels",
              "Threshold-compliant valuations",
              "End-to-end legal structuring",
              "Discreet escrow & settlement",
            ].map((i) => (
              <li key={i} className="flex items-start gap-3">
                <span className="mt-2 h-px w-6 bg-gold flex-none" />
                <span>{i}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Family() {
  return (
    <section className="mx-auto max-w-7xl px-6 py-28 md:py-36 grid lg:grid-cols-12 gap-16 items-center">
      <div className="lg:col-span-7 order-2 lg:order-1">
        <p className="eyebrow text-gold">One Application. Your Entire Family.</p>
        <h2 className="mt-4 text-4xl md:text-6xl leading-tight">
          When you arrive,
          <em className="text-gold not-italic font-light"> they arrive with you.</em>
        </h2>
        <p className="mt-6 text-lg text-muted-foreground leading-relaxed font-light max-w-2xl">
          A single qualifying application extends to your spouse, dependent children,
          and — in many jurisdictions — your parents and adult dependents. One investment.
          One passport file. A multi-generational inheritance of mobility.
        </p>
        <div className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-4">
          {[
            { l: "Spouse", v: "Included" },
            { l: "Children", v: "Up to 26 years of age" },
            { l: "Parents", v: "Eligible" },
            { l: "Future heirs", v: "By descent" },
          ].map((x) => (
            <div key={x.l} className="border border-border p-5 bg-card">
              <div className="text-xs uppercase tracking-widest text-muted-foreground">{x.l}</div>
              <div className="mt-2 font-display text-xl text-primary">{x.v}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="lg:col-span-5 order-1 lg:order-2">
        <img
          src={passportsStack}
          alt="A stack of European passports on a walnut desk with gold coins and a fountain pen"
          width={1280}
          height={960}
          loading="lazy"
          className="w-full aspect-[4/5] object-cover shadow-elegant"
        />
      </div>
    </section>
  );
}

function Destinations() {
  const places = [
    { name: "Portugal", img: coastPortugal },
    { name: "Greece", img: beachGreece },
    { name: "Italy", img: coastItaly },
  ];
  return (
    <section id="destinations" className="bg-secondary">
      <div className="mx-auto max-w-7xl px-6 py-28 md:py-36">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
          <div>
            <p className="eyebrow text-gold">Where We Place You</p>
            <h2 className="mt-4 text-4xl md:text-6xl leading-tight max-w-3xl">
              Coastlines that hold
              <em className="text-gold not-italic font-light"> the keys.</em>
            </h2>
          </div>
          <p className="max-w-md text-muted-foreground font-light">
            Each destination is vetted for legal stability, investment integrity, and the
            quality of the European life it confers.
          </p>
        </div>
        <div className="grid md:grid-cols-3 gap-6">
          {places.map((p) => (
            <article key={p.name} className="group relative overflow-hidden bg-card shadow-elegant">
              <div className="aspect-[4/5] overflow-hidden">
                <img
                  src={p.img}
                  alt={`${p.name} coastline`}
                  width={1280}
                  height={960}
                  loading="lazy"
                  className="h-full w-full object-cover transition-transform duration-[1200ms] ease-out group-hover:scale-105"
                />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Lifestyle() {
  const places = [
    { name: "Algarve", img: algarveImg },
    { name: "Isle of Capri", img: capriImg },
    { name: "Meganisi", img: meganisiImg },
    { name: "Mykonos", img: mykonosImg },
    { name: "Ibiza", img: ibizaImg },
    { name: "Santorini", img: santoriniImg },
  ];
  return (
    <section id="lifestyle" className="bg-background">
      <div className="mx-auto max-w-7xl px-6 py-28 md:py-36">
        <div className="max-w-4xl mb-16">
          <p className="eyebrow text-gold">A Glimpse of What Awaits</p>
          <h2 className="mt-4 text-4xl md:text-6xl leading-tight">
            The world your passport
            <em className="text-gold not-italic font-light"> unlocks.</em>
          </h2>
          <p className="mt-6 text-lg text-muted-foreground font-light max-w-2xl">
            From the cliffs of Capri to the white domes of Santorini — these are the places our
            clients call home once their citizenship is secured.
          </p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {places.map((p) => (
            <figure key={p.name} className="group relative overflow-hidden shadow-elegant">
              <div className="aspect-[4/5] overflow-hidden">
                <img
                  src={p.img}
                  alt={p.name}
                  loading="lazy"
                  width={1920}
                  height={1280}
                  className="h-full w-full object-cover transition-transform duration-[1200ms] ease-out group-hover:scale-105"
                />
              </div>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Audience() {
  const regions = [
    { r: "Russia & CIS", c: "Moscow · St Petersburg · Almaty" },
    { r: "Middle East", c: "Dubai · Riyadh · Doha" },
    { r: "Africa", c: "Lagos · Cairo · Johannesburg" },
    { r: "Asia", c: "Hong Kong · Singapore · Shanghai" },
    { r: "United States", c: "New York · Miami · Los Angeles" },
  ];
  return (
    <section className="mx-auto max-w-7xl px-6 py-28 md:py-36">
      <div className="grid lg:grid-cols-12 gap-12">
        <div className="lg:col-span-4">
          <p className="eyebrow text-gold">Whom We Serve</p>
          <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
            A clientele as global
            <em className="text-gold not-italic font-light"> as the passport itself.</em>
          </h2>
          <p className="mt-6 text-muted-foreground font-light">
            We work discreetly with private clients from five continents who are seeking the
            certainty and freedom of European citizenship.
          </p>
        </div>
        <div className="lg:col-span-8 grid sm:grid-cols-2 gap-px bg-border">
          {regions.map((x) => (
            <div key={x.r} className="bg-background p-8 hover:bg-secondary transition-colors">
              <div className="font-display text-2xl text-primary">{x.r}</div>
              <div className="mt-2 text-xs uppercase tracking-widest text-muted-foreground">{x.c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: "I", t: "Private Consultation", b: "A confidential briefing to understand your goals, family, and timeline." },
    { n: "II", t: "Jurisdiction Selection", b: "We match you with the EU member state best suited to your file." },
    { n: "III", t: "Property Acquisition", b: "We source, vet, and structure your qualifying property purchase." },
    { n: "IV", t: "Residence Permit", b: "Your residence card is issued — for you and your family." },
    { n: "V", t: "European Passport", b: "Upon naturalisation, your family receives full EU citizenship." },
  ];
  return (
    <section id="process" className="bg-primary text-primary-foreground">
      <div className="mx-auto max-w-7xl px-6 py-28 md:py-36">
        <div className="max-w-3xl mb-16">
          <p className="eyebrow text-gold">The Pathway</p>
          <h2 className="mt-4 text-4xl md:text-6xl leading-tight">
            Five steps.
            <em className="text-gold not-italic font-light"> One passport.</em>
          </h2>
        </div>
        <ol className="grid md:grid-cols-5 gap-px bg-primary-foreground/15">
          {steps.map((s) => (
            <li key={s.n} className="bg-primary p-8 min-h-[260px] flex flex-col">
              <div className="font-display text-gold text-4xl">{s.n}</div>
              <div className="mt-6 font-display text-2xl">{s.t}</div>
              <p className="mt-3 text-sm text-primary-foreground/75 font-light leading-relaxed">{s.b}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function CTA() {
  const fieldClass =
    "w-full bg-primary-foreground/10 border border-primary-foreground/25 text-primary-foreground placeholder:text-primary-foreground/50 px-4 py-3 focus:outline-none focus:border-gold";
  const labelClass = "block text-xs uppercase tracking-[0.2em] text-gold/90 mb-2";

  return (
    <section id="contact" className="relative overflow-hidden">
      <img
        src={coastItaly}
        alt="Italian coastal village above the sea"
        width={1280}
        height={960}
        loading="lazy"
        className="absolute inset-0 h-full w-full object-cover"
      />
      <div className="absolute inset-0 bg-primary/90" />
      <div className="relative mx-auto max-w-3xl px-6 py-24 md:py-32 text-primary-foreground">
        <div className="text-center">
          <p className="eyebrow text-gold">Begin</p>
          <h2 className="mt-4 text-4xl md:text-6xl leading-[1.05] font-display">
            Your European life
            <br />
            <em className="text-gold not-italic font-light">starts with a single conversation.</em>
          </h2>
          <p className="mt-6 text-base md:text-lg font-light text-primary-foreground/85 max-w-xl mx-auto">
            Share a few details with our advisors. Every enquiry is private,
            complimentary, and answered within 24 hours.
          </p>
        </div>

        <form
          action="https://formsubmit.co/dimo95719@gmail.com"
          method="POST"
          className="mt-14 grid grid-cols-1 sm:grid-cols-2 gap-6 text-left"
        >
          {/* FormSubmit configuration (hidden) */}
          <input type="hidden" name="_subject" value="New Golden Passport Enquiry — Blue Ports Foundation" />
          <input type="hidden" name="_captcha" value="false" />
          <input type="hidden" name="_template" value="table" />
          <input type="text" name="_honey" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />

          <div>
            <label className={labelClass} htmlFor="firstName">First name</label>
            <input id="firstName" name="First Name" type="text" required maxLength={80} className={fieldClass} />
          </div>
          <div>
            <label className={labelClass} htmlFor="lastName">Last name</label>
            <input id="lastName" name="Last Name" type="text" required maxLength={80} className={fieldClass} />
          </div>
          <div>
            <label className={labelClass} htmlFor="email">Email</label>
            <input id="email" name="Email" type="email" required maxLength={120} className={fieldClass} />
          </div>
          <div>
            <label className={labelClass} htmlFor="phone">Phone number</label>
            <input id="phone" name="Phone" type="tel" required maxLength={40} className={fieldClass} />
          </div>
          <div>
            <label className={labelClass} htmlFor="nationality">Current nationality</label>
            <input id="nationality" name="Nationality" type="text" required maxLength={80} className={fieldClass} />
          </div>
          <div>
            <label className={labelClass} htmlFor="desiredCountry">Country of desired passport</label>
            <input
              id="desiredCountry"
              name="Desired Passport Country"
              type="text"
              required
              maxLength={80}
              placeholder="e.g. Portugal, Malta, Greece"
              className={fieldClass}
            />
          </div>
          <div>
            <label className={labelClass} htmlFor="age">Age</label>
            <input id="age" name="Age" type="number" min={18} max={110} required className={fieldClass} />
          </div>
          <div>
            <label className={labelClass} htmlFor="family">Family members in application</label>
            <input
              id="family"
              name="Family Members"
              type="number"
              min={0}
              max={30}
              required
              placeholder="Including spouse, children, parents"
              className={fieldClass}
            />
          </div>
          <div className="sm:col-span-2">
            <label className={labelClass} htmlFor="reason">
              Tell us a few things about yourself and your family
            </label>
            <textarea
              id="reason"
              name="Purpose & Motivation"
              required
              rows={5}
              maxLength={1500}
              className={fieldClass}
            />
          </div>

          <div className="sm:col-span-2 flex flex-col items-center gap-4 pt-4">
            <button
              type="submit"
              className="bg-gold text-primary px-10 py-4 text-sm tracking-[0.25em] uppercase font-medium hover:bg-gold-soft transition-colors shadow-gold"
            >
              Submit Confidential Enquiry
            </button>
            <p className="text-xs uppercase tracking-[0.25em] text-primary-foreground/60 text-center">
              Confidential · No obligation · Replied within 24 hours
            </p>
          </div>
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="bg-background border-t border-border">
      <div className="mx-auto max-w-7xl px-6 py-14 grid md:grid-cols-4 gap-10">
        <div className="md:col-span-2">
          <div className="flex items-center gap-3">
            <img src={logoWave} alt="Blue Ports Foundation" className="h-10 w-10 object-contain" />
            <span className="font-display text-xl">Blue Ports Foundation</span>
          </div>
          <p className="mt-4 text-sm text-muted-foreground max-w-sm font-light">
            Private advisors in European residence and citizenship by property investment.
            Offices in Lisbon, Valletta, and Limassol.
          </p>
        </div>
        <div>
          <div className="eyebrow text-muted-foreground mb-4">Program</div>
          <ul className="space-y-2 text-sm">
            <li><a href="#program" className="hover:text-gold">Golden Passport</a></li>
            <li><a href="#destinations" className="hover:text-gold">Destinations</a></li>
            <li><a href="#process" className="hover:text-gold">Process</a></li>
          </ul>
        </div>
        <div>
          <div className="eyebrow text-muted-foreground mb-4">Contact</div>
          <ul className="space-y-2 text-sm">
            <li>private@bluelagoonfoundation.eu</li>
            <li>+351 21 000 0000</li>
          </ul>
        </div>
      </div>
      <div className="border-t border-border">
        <div className="mx-auto max-w-7xl px-6 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-muted-foreground">
          <div>© {new Date().getFullYear()} Blue Ports Foundation. All rights reserved.</div>
          <div>Investment advisory subject to jurisdictional regulation.</div>
        </div>
      </div>
    </footer>
  );
}
src/routes/__root.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
  Outlet,
  Link,
  createRootRouteWithContext,
  useRouter,
  HeadContent,
  Scripts,
} from "@tanstack/react-router";
import { useEffect, type ReactNode } from "react";

import appCss from "../styles.css?url";
import { reportLovableError } from "../lib/lovable-error-reporting";

function NotFoundComponent() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <div className="max-w-md text-center">
        <h1 className="text-7xl font-bold text-foreground">404</h1>
        <h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
        <p className="mt-2 text-sm text-muted-foreground">
          The page you're looking for doesn't exist or has been moved.
        </p>
        <div className="mt-6">
          <Link
            to="/"
            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            Go home
          </Link>
        </div>
      </div>
    </div>
  );
}

function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
  console.error(error);
  const router = useRouter();
  useEffect(() => {
    reportLovableError(error, { boundary: "tanstack_root_error_component" });
  }, [error]);

  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <div className="max-w-md text-center">
        <h1 className="text-xl font-semibold tracking-tight text-foreground">
          This page didn't load
        </h1>
        <p className="mt-2 text-sm text-muted-foreground">
          Something went wrong on our end. You can try refreshing or head back home.
        </p>
        <div className="mt-6 flex flex-wrap justify-center gap-2">
          <button
            onClick={() => {
              router.invalidate();
              reset();
            }}
            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            Try again
          </button>
          <a
            href="/"
            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
          >
            Go home
          </a>
        </div>
      </div>
    </div>
  );
}

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  head: () => ({
    meta: [
      { charSet: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { title: "Blue Ports Foundation — Golden Passport Advisory" },
      { name: "description", content: "European residence and citizenship by property investment." },
      { property: "og:site_name", content: "Blue Ports Foundation" },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
    links: [
      { rel: "preconnect", href: "https://fonts.googleapis.com" },
      { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap",
      },
      {
        rel: "stylesheet",
        href: appCss,
      },
    ],
  }),
  shellComponent: RootShell,
  component: RootComponent,
  notFoundComponent: NotFoundComponent,
  errorComponent: ErrorComponent,
});

function RootShell({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

function RootComponent() {
  const { queryClient } = Route.useRouteContext();

  return (
    <QueryClientProvider client={queryClient}>
      {/* Required: nested routes render here. Removing <Outlet /> breaks all child routes. */}
      <Outlet />
    </QueryClientProvider>
  );
}
src/router.tsx
import { QueryClient } from "@tanstack/react-query";
import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

export const getRouter = () => {
  const queryClient = new QueryClient();

  const router = createRouter({
    routeTree,
    context: { queryClient },
    scrollRestoration: true,
    defaultPreloadStaleTime: 0,
  });

  return router;
};
src/routeTree.gen.ts
/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import { Route as rootRouteImport } from './routes/__root'
import { Route as IndexRouteImport } from './routes/index'

const IndexRoute = IndexRouteImport.update({
  id: '/',
  path: '/',
  getParentRoute: () => rootRouteImport,
} as any)

export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
}
export interface FileRoutesByTo {
  '/': typeof IndexRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: '/'
  fileRoutesByTo: FileRoutesByTo
  to: '/'
  id: '__root__' | '/'
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
}

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/': {
      id: '/'
      path: '/'
      fullPath: '/'
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
  }
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes<FileRouteTypes>()

import type { getRouter } from './router.tsx'
import type { startInstance } from './start.ts'
declare module '@tanstack/react-start' {
  interface Register {
    ssr: true
    router: Awaited<ReturnType<typeof getRouter>>
    config: Awaited<ReturnType<typeof startInstance.getOptions>>
  }
}
src/server.ts
import "./lib/error-capture";

import { consumeLastCapturedError } from "./lib/error-capture";
import { renderErrorPage } from "./lib/error-page";

type ServerEntry = {
  fetch: (request: Request, env: unknown, ctx: unknown) => Promise<Response> | Response;
};

let serverEntryPromise: Promise<ServerEntry> | undefined;

async function getServerEntry(): Promise<ServerEntry> {
  if (!serverEntryPromise) {
    serverEntryPromise = import("@tanstack/react-start/server-entry").then(
      (m) => (m.default ?? m) as ServerEntry,
    );
  }
  return serverEntryPromise;
}

// h3 swallows in-handler throws into a normal 500 Response with body
// {"unhandled":true,"message":"HTTPError"} — try/catch alone never fires for those.
async function normalizeCatastrophicSsrResponse(response: Response): Promise<Response> {
  if (response.status < 500) return response;
  const contentType = response.headers.get("content-type") ?? "";
  if (!contentType.includes("application/json")) return response;

  const body = await response.clone().text();
  if (!body.includes('"unhandled":true') || !body.includes('"message":"HTTPError"')) {
    return response;
  }

  console.error(consumeLastCapturedError() ?? new Error(`h3 swallowed SSR error: ${body}`));
  return new Response(renderErrorPage(), {
    status: 500,
    headers: { "content-type": "text/html; charset=utf-8" },
  });
}

export default {
  async fetch(request: Request, env: unknown, ctx: unknown) {
    try {
      const handler = await getServerEntry();
      const response = await handler.fetch(request, env, ctx);
      return await normalizeCatastrophicSsrResponse(response);
    } catch (error) {
      console.error(error);
      return new Response(renderErrorPage(), {
        status: 500,
        headers: { "content-type": "text/html; charset=utf-8" },
      });
    }
  },
};
src/start.ts
import { createStart, createMiddleware } from "@tanstack/react-start";

import { renderErrorPage } from "./lib/error-page";

const errorMiddleware = createMiddleware().server(async ({ next }) => {
  try {
    return await next();
  } catch (error) {
    if (error != null && typeof error === "object" && "statusCode" in error) {
      throw error;
    }
    console.error(error);
    return new Response(renderErrorPage(), {
      status: 500,
      headers: { "content-type": "text/html; charset=utf-8" },
    });
  }
});

export const startInstance = createStart(() => ({
  requestMiddleware: [errorMiddleware],
}));
src/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
src/lib/config.server.ts
import process from "node:process";

// Server-only config. The .server.ts suffix prevents Vite from bundling
// this file into the client — values here never reach the browser.
//
// On Cloudflare Workers, env binds at REQUEST time. Module-scope reads
// (e.g. `const x = process.env.X`) resolve to undefined — always read
// process.env INSIDE a function or handler.
//
// When to use which env-access pattern:
//   - .server.ts module (this file): server-only helpers reused across
//     handlers. Wrap reads in a function so they run per-request.
//   - inline process.env inside a createServerFn handler: one-off reads
//     not reused elsewhere.
//   - import.meta.env.VITE_FOO: PUBLIC config readable from both client
//     and server (analytics IDs, public URLs). Define in .env with the
//     VITE_ prefix. Never put secrets here — they ship to the browser.

export function getServerConfig() {
  return {
    nodeEnv: process.env.NODE_ENV,
    // Add server-only values here, e.g.:
    //   databaseUrl: process.env.DATABASE_URL,
    //   stripeSecretKey: process.env.STRIPE_SECRET_KEY,
  };
}
src/lib/error-capture.ts
// Captures the original Error out-of-band so server.ts can recover the stack
// when h3 has already swallowed the throw into a generic 500 Response.

let lastCapturedError: { error: unknown; at: number } | undefined;
const TTL_MS = 5_000;

function record(error: unknown) {
  lastCapturedError = { error, at: Date.now() };
}

if (typeof globalThis.addEventListener === "function") {
  globalThis.addEventListener("error", (event) => record((event as ErrorEvent).error ?? event));
  globalThis.addEventListener("unhandledrejection", (event) =>
    record((event as PromiseRejectionEvent).reason),
  );
}

export function consumeLastCapturedError(): unknown {
  if (!lastCapturedError) return undefined;
  if (Date.now() - lastCapturedError.at > TTL_MS) {
    lastCapturedError = undefined;
    return undefined;
  }
  const { error } = lastCapturedError;
  lastCapturedError = undefined;
  return error;
}
src/lib/error-page.ts
export function renderErrorPage(): string {
  return `<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>This page didn't load</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body { font: 15px/1.5 system-ui, -apple-system, sans-serif; background: #fafafa; color: #111; display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 1.5rem; }
      .card { max-width: 28rem; width: 100%; text-align: center; padding: 2rem; }
      h1 { font-size: 1.25rem; margin: 0 0 0.5rem; }
      p { color: #4b5563; margin: 0 0 1.5rem; }
      .actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
      a, button { padding: 0.5rem 1rem; border-radius: 0.375rem; font: inherit; cursor: pointer; text-decoration: none; border: 1px solid transparent; }
      .primary { background: #111; color: #fff; }
      .secondary { background: #fff; color: #111; border-color: #d1d5db; }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>This page didn't load</h1>
      <p>Something went wrong on our end. You can try refreshing or head back home.</p>
      <div class="actions">
        <button class="primary" onclick="location.reload()">Try again</button>
        <a class="secondary" href="/">Go home</a>
      </div>
    </div>
  </body>
</html>`;
}
src/lib/lovable-error-reporting.ts
type LovableErrorOptions = {
  mechanism?: "manual" | "onerror" | "unhandledrejection" | "react_error_boundary";
  handled?: boolean;
  severity?: "error" | "warning" | "info";
};

type LovableEvents = {
  captureException?: (
    error: unknown,
    context?: Record<string, unknown>,
    options?: LovableErrorOptions,
  ) => void;
};

declare global {
  interface Window {
    __lovableEvents?: LovableEvents;
  }
}

export function reportLovableError(error: unknown, context: Record<string, unknown> = {}) {
  if (typeof window === "undefined") return;
  window.__lovableEvents?.captureException?.(
    error,
    {
      source: "react_error_boundary",
      route: window.location.pathname,
      ...context,
    },
    {
      mechanism: "react_error_boundary",
      handled: false,
      severity: "error",
    },
  );
}
src/lib/api/example.functions.ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

import { getServerConfig } from "../config.server";

// Example createServerFn. Server-side handler invoked from the client:
//   const result = await getGreeting({ data: { name: "Ada" } })
// The .handler body runs server-only — imports used only inside it (like
// .server.ts modules) are tree-shaken from the client bundle. Module-level
// code here still ships to the client; for truly server-only helpers, put
// them in a .server.ts file. Use this pattern instead of Supabase Edge
// Functions for server logic.

export const getGreeting = createServerFn({ method: "POST" })
  .inputValidator(z.object({ name: z.string().min(1) }))
  .handler(async ({ data }) => {
    const config = getServerConfig();
    return {
      greeting: `Hello, ${data.name}!`,
      mode: config.nodeEnv ?? "unknown",
    };
  });
src/hooks/use-mobile.tsx
import * as React from "react";

const MOBILE_BREAKPOINT = 768;

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    };
    mql.addEventListener("change", onChange);
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    return () => mql.removeEventListener("change", onChange);
  }, []);

  return !!isMobile;
}
src/routes/README.md
# Routes

TanStack Start uses **file-based routing**. Every `.tsx` file in this directory
is a route. Do **not** create `src/pages/`, `src/routes/_app/index.tsx`, or
`app/layout.tsx` — those are Next.js / Remix conventions. The only root layout
is `src/routes/__root.tsx`.

## Conventions

|
 File 
|
 URL 
|
|
---
|
---
|
|
`index.tsx`
|
`/`
|
|
`about.tsx`
|
`/about`
|
|
`users/index.tsx`
|
`/users`
|
|
`users/$id.tsx`
|
`/users/:id`
 (dynamic — bare 
`$`
, no curly braces) 
|
|
`posts/{-$category}.tsx`
|
`/posts/:category?`
 (optional segment) 
|
|
`files/$.tsx`
|
`/files/*`
 (splat — read via 
`_splat`
 param, never 
`*`
) 
|
|
`_layout.tsx`
|
 layout route (renders children via 
`<Outlet />`
) 
|
|
`__root.tsx`
|
 app shell — wraps every page; preserve 
`<Outlet />`
|

`routeTree.gen.ts` is auto-generated. Don't edit it by hand.
Assets
Files in src/assets/:

algarve.jpg
beach-greece.jpg
capri-new.jpg
coast-italy.jpg
coast-portugal.jpg
hero-coast.jpg
ibiza.png
logo-wave.png
meganisi.jpg
mykonos-new.jpg
passport-eu.jpg
passports-stack.jpg
santorini.jpg