adds community not found page with necessary emoji animation

open-format · Jan 2, 2025 · a1f71b7 · a1f71b7
1 parent 9b57381
commit a1f71b7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
@@ -8,6 +8,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { fetchCommunity, fetchUserProfile, generateLeaderboard } from "@/lib/openformat";
 import { getCurrentUser } from "@/lib/privy";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 
 export default async function CommunityPage({ params }: { params: Promise<{ slug: string }> }) {
   const slug = (await params).slug;
@@ -18,11 +19,19 @@ export default async function CommunityPage({ params }: { params: Promise<{ slug
 
   if (!community) {
     return (
-      <div className="text-center p-8 rounded-lg bg-muted">
-        <h2 className="text-2xl font-semibold mb-2">Well...this is awkward.</h2>
-        <p className="text-muted-foreground">
-          We couldn&apos;t find a community at this URL. Please verify the address and try again.
+      <div className="text-center min-h-[100vh] flex flex-col items-center justify-center p-12 rounded-lg bg-background text-foreground space-y-8">
+        <h2 className="text-4xl md:text-5xl font-bold">
+          Community Not Found <span className="inline-block animate-look-around">👀</span>
+        </h2>
+        <p className="text-xl max-w-2xl">
+          We looked, but couldn&apos;t find a community at this URL. Why not claim it before someone else does? 😏
         </p>
+        <Link
+          href="/auth"
+          className="inline-block px-8 py-4 text-lg rounded-lg border hover:bg-foreground/10 transition-colors"
+        >
+          Create Your Community →
+        </Link>
       </div>
     );
   }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -70,25 +70,22 @@ const config: Config = {
       },
       keyframes: {
         "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
         "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "look-around": {
+          "0%, 100%": { transform: "scaleX(1)" },
+          "50%": { transform: "scaleX(-1)" },
         },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "look-around": "look-around 2s",
       },
     },
   },