feat(resources): add curated design galleries page

app/(main)/resources/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+
+import { ResourcesShell } from "@/components/resources/resources-shell";
+
+export const metadata: Metadata = {
+  title: "Resources",
+  description: "Sites we use while building animata.",
+  openGraph: {
+    title: "Resources",
+    description: "Sites we use while building animata.",
+  },
+};
+
+export default function ResourcesPage() {
+  return <ResourcesShell />;
+}

components/resources/grid-backdrop.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+
+export function GridBackdrop({
+  className,
+  fade = "bottom",
+}: {
+  className?: string;
+  fade?: "bottom" | "none" | "both";
+}) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--foreground)/0.04)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--foreground)/0.04)_1px,transparent_1px)] bg-size-[72px_72px]",
+        fade === "bottom" &&
+          "mask-[linear-gradient(to_bottom,black_0%,black_72%,transparent_100%)]",
+        fade === "both" &&
+          "mask-[linear-gradient(to_bottom,transparent_0%,black_12%,black_88%,transparent_100%)]",
+        className,
+      )}
+    />
+  );
+}

components/resources/resource-grid-item.tsx

@@ -0,0 +1,34 @@
+import { withOutboundRef } from "@/lib/outbound-ref";
+import type { Resource } from "@/lib/resources";
+
+export function ResourceGridItem({ resource }: { resource: Resource }) {
+  return (
+    <li>
+      <a
+        href={withOutboundRef(resource.href)}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >
+        <div className="overflow-hidden rounded-md bg-[hsl(var(--surface-alt))] ring-1 ring-foreground/[0.08]">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={resource.ogImage}
+            alt=""
+            loading="lazy"
+            className="aspect-[1200/630] w-full object-cover object-top opacity-90 transition-opacity group-hover:opacity-100"
+          />
+        </div>
+
+        <div className="mt-3 flex min-w-0 flex-row items-baseline justify-between gap-3">
+          <span className="min-w-0 max-w-[calc(100%-5.5rem)] truncate text-sm font-medium text-foreground">
+            {resource.title}
+          </span>
+          <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+            {resource.domain}
+          </span>
+        </div>
+      </a>
+    </li>
+  );
+}

components/resources/resource-grid.tsx

@@ -0,0 +1,12 @@
+import { ResourceGridItem } from "@/components/resources/resource-grid-item";
+import type { Resource } from "@/lib/resources";
+
+export function ResourceGrid({ resources }: { resources: Resource[] }) {
+  return (
+    <ul className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:mt-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:grid-cols-3">
+      {resources.map((resource) => (
+        <ResourceGridItem key={resource.id} resource={resource} />
+      ))}
+    </ul>
+  );
+}

components/resources/resources-shell.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+
+import { ResourceGrid } from "@/components/resources/resource-grid";
+import { withOutboundRef } from "@/lib/outbound-ref";
+import {
+  getResources,
+  RESOURCES_CLOSING,
+  RESOURCES_DISCLAIMER,
+  RESOURCES_INTRO,
+} from "@/lib/resources";
+
+export function ResourcesShell() {
+  const resources = getResources();
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-5 py-16 sm:px-8 md:py-24">
+      <header className="max-w-2xl">
+        <h1 className="font-(family-name:--font-display) text-3xl tracking-[-0.02em] text-foreground md:text-4xl lg:text-5xl">
+          Resources
+        </h1>
+        <p className="mt-4 text-sm leading-relaxed text-[hsl(var(--text-secondary))] md:text-base">
+          {RESOURCES_INTRO}
+        </p>
+      </header>
+
+      <ResourceGrid resources={resources} />
+
+      <footer className="mt-14 max-w-2xl sm:mt-16">
+        <p className="text-sm leading-relaxed text-[hsl(var(--text-secondary))]">
+          {RESOURCES_CLOSING}
+        </p>
+        <p className="mt-4">
+          <Link
+            href={withOutboundRef("https://github.com/codse/animata")}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-foreground underline decoration-foreground/20 underline-offset-4 hover:decoration-foreground/50"
+          >
+            Suggest one
+          </Link>
+        </p>
+        <p className="mt-8 text-xs leading-relaxed text-muted-foreground">{RESOURCES_DISCLAIMER}</p>
+      </footer>
+    </div>
+  );
+}

lib/outbound-ref.ts

@@ -7,10 +7,13 @@ export function withOutboundRef(href: string, ref = OUTBOUND_REF) {
     return href;
   }
 
-  const url = new URL(href);
-  if (!url.searchParams.has("ref")) {
-    url.searchParams.set("ref", ref);
+  try {
+    const url = new URL(href);
+    if (!url.searchParams.has("ref")) {
+      url.searchParams.set("ref", ref);
+    }
+    return url.toString();
+  } catch {
+    return href;
   }
-
-  return url.toString();
 }