Add I Hate PDFs app pages

app/ihatepdfs/page.tsx

@@ -0,0 +1,116 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import type { Metadata } from 'next';
+import appIcon from '@/public/images/ihatepdfs/icon.png';
+import mainWindow from '@/public/images/ihatepdfs/main-window.png';
+
+export const metadata: Metadata = {
+    title: 'I Hate PDFs',
+    description: 'A native macOS PDF reader for highlighting, commenting, reviewing, and saving annotated PDFs locally on your Mac.',
+    alternates: {
+        canonical: '/ihatepdfs',
+    },
+    openGraph: {
+        title: 'I Hate PDFs',
+        description: 'A native macOS PDF reader for highlighting, commenting, reviewing, and saving annotated PDFs locally on your Mac.',
+        url: '/ihatepdfs',
+        images: [
+            {
+                url: '/images/ihatepdfs/main-window.png',
+                width: 1440,
+                height: 1440,
+                alt: 'I Hate PDFs macOS app showing a PDF with comments sidebar',
+            },
+        ],
+    },
+};
+
+const features = [
+    'Open local PDF files without uploading them anywhere.',
+    'Highlight text, add comments, underline passages, and place free-text notes.',
+    'Review annotations in a compact comments sidebar with replies, filters, and search.',
+    'Save annotations back into the original PDF or export an annotated copy.',
+    'Customize highlight and comment colors from the macOS Settings window.',
+];
+
+export default function IHatePDFsPage() {
+    return (
+        <div className="page-frame py-20 sm:py-24">
+            <div className="mx-auto max-w-[72rem] space-y-12">
+                <header className="grid gap-8 border-b border-line pb-12 lg:grid-cols-[minmax(0,1fr)_30rem] lg:items-center">
+                    <div className="space-y-6">
+                        <div className="flex items-center gap-3">
+                            <Image
+                                src={appIcon}
+                                alt=""
+                                width={50}
+                                height={50}
+                                className="h-12 w-12 rounded-xl border border-line bg-paper-strong"
+                                priority
+                            />
+                            <p className="eyebrow">macOS PDF reader</p>
+                        </div>
+
+                        <div className="space-y-4">
+                            <h1 className="max-w-[37rem] text-balance font-sans text-5xl font-medium leading-[0.96] text-ink sm:text-6xl lg:text-7xl">
+                                I Hate PDFs
+                            </h1>
+                            <p className="max-w-[36rem] text-[1.04rem] leading-8 text-muted sm:text-[1.1rem]">
+                                A native macOS PDF reader built for local annotation, review, and saving without accounts, tracking, or cloud upload.
+                            </p>
+                        </div>
+
+                        <div className="flex flex-wrap gap-x-6 gap-y-3 text-[0.96rem] text-ink">
+                            <Link href="/ihatepdfs/privacy" className="transition-colors hover:text-accent">
+                                Privacy policy
+                            </Link>
+                            <a href="mailto:mathabbayi@icloud.com" className="transition-colors hover:text-accent">
+                                Contact
+                            </a>
+                        </div>
+                    </div>
+
+                    <div className="relative overflow-hidden rounded-md border border-line bg-paper-strong">
+                        <Image
+                            src={mainWindow}
+                            alt="I Hate PDFs showing a marked-up PDF with the comments sidebar open"
+                            sizes="(max-width: 1024px) 100vw, 30rem"
+                            className="h-auto w-full"
+                            priority
+                        />
+                    </div>
+                </header>
+
+                <section className="grid gap-4 border-b border-line pb-10 lg:grid-cols-[9rem_minmax(0,1fr)]">
+                    <p className="eyebrow lg:pt-1">Features</p>
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        {features.map((feature) => (
+                            <p
+                                key={feature}
+                                className="rounded-md border border-line bg-paper-strong p-4 text-[0.96rem] leading-7 text-muted"
+                            >
+                                {feature}
+                            </p>
+                        ))}
+                    </div>
+                </section>
+
+                <section className="grid gap-4 lg:grid-cols-[9rem_minmax(0,1fr)]">
+                    <p className="eyebrow lg:pt-1">Privacy</p>
+                    <div className="max-w-[42rem] space-y-4 text-[1rem] leading-8 text-muted">
+                        <p>
+                            I Hate PDFs keeps opened PDFs on your Mac. The app does not collect analytics, use advertising, create accounts, or send your documents to a server.
+                        </p>
+                        <p>
+                            See the full{' '}
+                            <Link href="/ihatepdfs/privacy" className="font-medium text-ink underline decoration-line-strong underline-offset-4 transition-colors hover:text-accent hover:decoration-accent">
+                                privacy policy
+                            </Link>
+                            .
+                        </p>
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+}