app/page.tsx(Landing Menu Page)import Image from "next/image"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"
import { ArrowRight } from "lucide-react"
const schemes = [
{
name: "RSUs",
href: "/rsu",
description:
"Restricted Stock Units vest over time and are taxed as employment income at each vesting date.",
taxSummary: "Income Tax + USC + PRSI at vest. CGT on later disposal.",
taxes: [
{ label: "IT", applies: true },
{ label: "USC", applies: true },
{ label: "PRSI", applies: true },
{ label: "CGT", applies: true },
],
highlight: "Most common for large-cap company executives",
},
{
name: "Stock Options",
href: "/stock-options",
description:
"Unapproved share options are taxed on the spread (market price minus exercise price) when you exercise.",
taxSummary: "Income Tax + USC + PRSI on exercise gain. CGT on disposal.",
taxes: [
{ label: "IT", applies: true },
{ label: "USC", applies: true },
{ label: "PRSI", applies: true },
{ label: "CGT", applies: true },
],
highlight: "Common for pre-IPO and growth-stage companies",
},
{
name: "APSS",
href: "/apss",
description:
"Approved Profit Sharing Schemes allow employers to give shares tax-efficiently if held for 3+ years.",
taxSummary:
"No Income Tax if held 3+ years. USC + PRSI at appropriation. CGT on disposal.",
taxes: [
{ label: "IT", applies: false },
{ label: "USC", applies: true },
{ label: "PRSI", applies: true },
{ label: "CGT", applies: true },
],
highlight: "Up to €12,700/year Income Tax free (3yr hold)",
},
{
name: "SAYE",
href: "/saye",
description:
"Save As You Earn lets you save monthly and buy shares at up to 25% discount with no Income Tax on the discount.",
taxSummary:
"No Income Tax on discount. USC + PRSI on exercise gain. CGT on disposal.",
taxes: [
{ label: "IT", applies: false },
{ label: "USC", applies: true },
{ label: "PRSI", applies: true },
{ label: "CGT", applies: true },
],
highlight: "Save €12–€500/month, buy at up to 25% discount",
},
{
name: "KEEP",
href: "/keep",
description:
"Key Employee Engagement Programme for qualifying SMEs. No income tax, USC, or PRSI on exercise — CGT only.",
taxSummary: "No IT, USC, or PRSI on exercise. CGT only on disposal.",
taxes: [
{ label: "IT", applies: false },
{ label: "USC", applies: false },
{ label: "PRSI", applies: false },
{ label: "CGT", applies: true },
],
highlight: "Most tax-efficient scheme for qualifying SME employees",
},
]
export default function HomePage() {
return (
<main className="min-h-screen bg-background">
{/* Header */}
<header className="border-b border-border bg-primary">
<div className="mx-auto max-w-6xl px-4 py-5 flex items-center gap-3">
<Image
src="/icon-512x512.jpg"
alt="Unio Wealth Management"
width={44}
height={44}
className="rounded-lg"
/>
<div>
<h1 className="text-xl font-bold text-primary-foreground leading-tight text-balance">
Executive Awards Calculator
</h1>
<p className="text-sm text-primary-foreground/70">
Unio Wealth Management — Ireland 2026
</p>
</div>
</div>
</header>
{/* Intro */}
<div className="mx-auto max-w-6xl px-4 pt-8 pb-2">
<div className="flex flex-col gap-2">
<h2 className="text-lg font-bold text-foreground text-balance">
Choose a Share Scheme
</h2>
<p className="text-sm text-muted-foreground leading-relaxed max-w-2xl">
Select an employee share scheme below to calculate the Irish tax
treatment, vesting schedule, and projected values over time.
</p>
</div>
</div>
{/* Scheme Cards */}
<div className="mx-auto max-w-6xl px-4 py-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{schemes.map((scheme) => (
<Link
key={scheme.href}
href={scheme.href}
className="group flex flex-col rounded-xl border border-border bg-card hover:border-accent/50 hover:shadow-md transition-all duration-200 overflow-hidden"
>
{/* Gold accent bar */}
<div className="h-1 bg-accent" />
<div className="flex flex-col gap-4 p-5 flex-1">
{/* Name + arrow */}
<div className="flex items-center justify-between">
<h3 className="text-lg font-bold text-foreground">
{scheme.name}
</h3>
<ArrowRight className="size-5 text-muted-foreground group-hover:text-accent transition-colors" />
</div>
{/* Description */}
<p className="text-sm text-muted-foreground leading-relaxed flex-1">
{scheme.description}
</p>
{/* Highlight */}
<p className="text-xs font-medium text-accent leading-snug">
{scheme.highlight}
</p>
<Separator />
{/* Tax badges */}
<div className="flex flex-wrap gap-2">
{scheme.taxes.map((tax) => (
<span
key={tax.label}
className={`inline-flex items-center rounded-md px-2.5 py-1 text-xs font-semibold ${
tax.applies
? "bg-foreground/10 text-foreground"
: "bg-accent/15 text-accent"
}`}
>
{tax.label}:{" "}
{tax.applies ? "Applies" : "Exempt"}
</span>
))}
</div>
</div>
</Link>
))}
</div>
</div>
{/* Footer */}
<footer className="border-t border-border mt-4">
<div className="mx-auto max-w-6xl px-4 py-6">
<Separator className="mb-4" />
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="text-xs text-muted-foreground leading-relaxed">
Based on Irish Revenue 2026 rates. Not financial or tax advice.
</p>
<p className="text-xs text-muted-foreground">
Unio Wealth Management
</p>
</div>
</div>
</footer>
</main>
)
}Type "next" for components/scheme-layout.tsx (Shared Layout Component).
components/scheme-layout.tsx(Shared Layout Component)"use client"
import { Separator } from "@/components/ui/separator"
import Image from "next/image"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
interface SchemeLayoutProps {
title: string
subtitle: string
children: React.ReactNode
}
export function SchemeLayout({ title, subtitle, children }: SchemeLayoutProps) {
return (
<main className="min-h-screen bg-background">
<header className="border-b border-border bg-primary">
<div className="mx-auto max-w-6xl px-4 py-4 flex items-center gap-3">
<Link
href="/"
className="flex items-center justify-center size-10 rounded-lg hover:bg-primary-foreground/10 transition-colors"
aria-label="Back to schemes"
>
<ArrowLeft className="size-5 text-primary-foreground" />
</Link>
<Image
src="/icon-512x512.jpg"
alt="Unio Wealth Management"
width={36}
height={36}
className="rounded-lg"
/>
<div className="min-w-0">
<h1 className="text-lg font-bold text-primary-foreground leading-tight truncate">
{title}
</h1>
<p className="text-sm text-primary-foreground/70 truncate">
{subtitle}
</p>
</div>
</div>
</header>
{children}
<footer className="border-t border-border mt-8">
<div className="mx-auto max-w-6xl px-4 py-6">
<Separator className="mb-4" />
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="text-xs text-muted-foreground leading-relaxed">
Based on Irish Revenue 2026 rates. Not financial or tax advice.
</p>
<p className="text-xs text-muted-foreground">
Unio Wealth Management
</p>
</div>
</div>
</footer>
</main>
)
}Type "next" for app/rsu/page.tsx (RSU Calculator Page).
You can send messages while the preview loads