Solutions pages

.github/workflows/cdn.yml

@@ -0,0 +1,37 @@
+name: Deploy CDN assets
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "public/cdn/**"
+      - ".github/workflows/cdn.yml"
+  workflow_dispatch:
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
+      AWS_DEFAULT_REGION: ${{ secrets.S3_REGION || 'auto' }}
+      AWS_REQUEST_CHECKSUM_CALCULATION: when_required
+      AWS_RESPONSE_CHECKSUM_VALIDATION: when_required
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Ensure public/cdn is populated
+        run: |
+          if [ -z "$(find public/cdn -type f 2>/dev/null)" ]; then
+            echo "public/cdn is empty — refusing to sync (would delete web/static)." >&2
+            exit 1
+          fi
+
+      - name: Sync public/cdn to S3-compatible storage (web/static)
+        run: |
+          aws s3 sync public/cdn "s3://${{ secrets.S3_BUCKET }}/web/static" \
+            --endpoint-url "${{ secrets.S3_ENDPOINT }}" \
+            --delete \
+            --no-progress \
+            --cache-control "public, max-age=604800"

.migration/dialog.md

@@ -37,7 +37,7 @@ Positioner); typecheck + full build clean.
   - Close button, header/footer/title/description classes, `showCloseButton`
     prop, `data-slot` attributes: UNCHANGED.
   - Leftover scan clean: `grep -n "radix-ui\|@radix-ui\|data-\[state="
-    src/components/ui/dialog.tsx` → no matches.
+src/components/ui/dialog.tsx` → no matches.
 
 - `src/components/CookieConsentModal.tsx` (consumer)
   - Removed the three Radix-only dismiss handlers from `<DialogContent>`:

package.json

@@ -7,7 +7,8 @@
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start",
-    "format": "oxfmt"
+    "format": "oxfmt",
+    "cdn:fetch": "bash scripts/fetch-cdn-assets.sh"
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
@@ -26,7 +27,7 @@
     "cnfast": "^0.1.0",
     "daisyui": "^5.7.16",
     "elysia": "^1.4.29",
-    "gsap": "^3.15.0",
+    "gsap": "^3.13.0",
     "lucide-react": "^1.31.0",
     "maath": "^0.10.8",
     "motion": "^12.43.0",

src/app/[locale]/(homepage)/page.tsx

@@ -11,19 +11,18 @@ import DecryptedText from "@/components/DecryptedText";
 import CurvedLoop from "@/components/CurvedLoop";
 import ScrollFloat from "@/components/ScrollFloat";
 import SplitText from "@/components/SplitText";
-import { OSSProductCard } from "@/components/OSSProductCard";
+import { SolutionsFolder } from "@/components/SolutionsFolder";
 import { VRM } from "@/components/vrm";
-import { IdCard } from "lucide-react";
 
 import NeodyLogo from "@/assets/img/NeodyLogo.png";
 import KuronekoLogo from "@/assets/img/kuroneko.png";
 import RTLogo from "@/assets/img/rt.png";
 import TakasumiLogo from "@/assets/img/takasumi.png";
-import KaraSnapIcon from "@/assets/img/karasnap.png";
 
 export default function IndexPage() {
   const t = useTranslations("home");
   const [showCircularText, setShowCircularText] = useState(false);
+  const [folderOpen, setFolderOpen] = useState(false);
 
   return (
     <main className="flex flex-col items-center justify-center w-full overflow-x-hidden">
@@ -100,21 +99,19 @@ export default function IndexPage() {
           <h3 className="text-lg md:text-xl text-gray-400 text-center w-full md:w-11/12">
             {t("OpenSourceBlurb")}
           </h3>
-          <div className={"grid grid-cols-1 md:grid-cols-2 w-full mt-5 gap-4"}>
-            <OSSProductCard
-              name={t("ossProducts.karaSnap.title")}
-              description={t("ossProducts.karaSnap.description")}
-              icon={KaraSnapIcon.src}
-              repoUrl="https://github.com/mikndotdev/karasnap"
-              websiteUrl="https://karasnap.mikn.dev"
-            />
-            <OSSProductCard
-              name={t("ossProducts.nextDiscordAuth.title")}
-              description={t("ossProducts.nextDiscordAuth.description")}
-              icon={IdCard}
-              repoUrl="https://github.com/mikndotdev/next-discord-auth"
-              websiteUrl="https://npm.im/@mikandev/next-discord-auth"
-            />
+          <div className="flex flex-col items-center gap-12 mt-10 pt-16">
+            <SolutionsFolder onOpenChange={setFolderOpen} />
+            <div
+              className={`transition-transform duration-300 ease-in-out ${
+                folderOpen ? "translate-y-20" : ""
+              }`}
+            >
+              <Link href={"/solutions"}>
+                <Button variant="default" size="lg">
+                  {t("hero.primaryCta")}
+                </Button>
+              </Link>
+            </div>
           </div>
         </div>
 

src/app/[locale]/(pages)/solutions/[solution]/page.tsx

@@ -0,0 +1,33 @@
+import { use } from "react";
+import { notFound } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { setRequestLocale } from "next-intl/server";
+
+import { SolutionHero } from "@/components/SolutionHero";
+import { SolutionList } from "@/constants/solutions";
+
+export function generateStaticParams() {
+  return SolutionList.map((solution) => ({ solution: solution.slug }));
+}
+
+export default function SolutionPage({
+  params,
+}: {
+  params: Promise<{ locale: string; solution: string }>;
+}) {
+  const { locale, solution: slug } = use(params);
+  setRequestLocale(locale);
+  const t = useTranslations();
+
+  const solution = SolutionList.find((entry) => entry.slug === slug);
+  if (!solution) notFound();
+
+  return (
+    <SolutionHero
+      name={t(solution.name)}
+      source={solution.source}
+      url={solution.url}
+      cover={solution.cover}
+    />
+  );
+}

src/app/[locale]/(pages)/solutions/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { SolutionCard } from "@/components/SolutionCard";
+import { SolutionList } from "@/constants/solutions";
+
+export default function SolutionsPage() {
+  const t = useTranslations("solutions");
+
+  return (
+    <main>
+      <div className="flex flex-col items-center gap-4 text-center">
+        <h1 className="text-4xl font-bold text-white lg:text-6xl">{t("title")}</h1>
+        <p className="max-w-2xl text-lg text-muted-foreground">{t("subtitle")}</p>
+      </div>
+
+      <div className="mx-auto mt-12 grid w-full max-w-7xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {SolutionList.map((solution) => (
+          <SolutionCard key={solution.name} solution={solution} />
+        ))}
+      </div>
+    </main>
+  );
+}

src/app/not-found.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Noto_Sans_JP } from "next/font/google";
 import { Button } from "@/components/animate-ui/components/buttons/button";
+import { ConfusedCorner } from "@/components/ConfusedCorner";
 import "./globals.css";
 
 const notoSansJP = Noto_Sans_JP({
@@ -20,6 +21,7 @@ export default function NotFound() {
               <Button className={"mt-5"}>Take me back</Button>
             </Link>
           </div>
+          <ConfusedCorner />
         </body>
       </html>
     </>