chore: certificate card showcase

src/app/page.tsx

@@ -1,3 +1,4 @@
+import { CertDemo } from "@/components/cert-demo";
 import { EventButtons } from "@/components/event-buttons";
 import AnimatedShinyText from "@/components/magicui/animated-shiny-text";
 import RetroGrid from "@/components/magicui/retro-grid";
@@ -7,7 +8,7 @@ import Link from "next/link";
 
 export default async function Home() {
   return (
-    <main className="container flex min-h-screen flex-col items-center gap-6 overflow-hidden pt-36 md:gap-8">
+    <main className="container flex h-full min-h-screen flex-col items-center gap-6 pt-36 md:gap-8">
       <div className="flex flex-col items-center gap-2 border-b border-muted/60 pb-6 md:pb-8">
         <div
           className={cn(
@@ -38,6 +39,7 @@ export default async function Home() {
       </p>
 
       <EventButtons />
+      <CertDemo />
       <RetroGrid className="absolute -bottom-64 -z-10 [mask-image:radial-gradient(ellipse_at_bottom,white,transparent_80%)]" />
     </main>
   );

src/components/cert-demo.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import AnimatedShinyText from "@/components/magicui/animated-shiny-text";
+
+export function CertDemo() {
+  return (
+    <Card className="[box-shadow:0_-10px_40px_-20px_#ffffff1f_inset]mx-auto mt-10 w-full max-w-lg scale-110 space-y-1 bg-background/20 backdrop-blur-sm">
+      <CardHeader className="flex flex-col items-center justify-center">
+        <AnimatedShinyText className="group inline-flex items-center justify-center rounded-full border border-white/5 bg-neutral-950 px-4 py-1 text-xs font-medium text-muted-foreground/30 opacity-40 transition ease-out">
+          <span>Certificate of Recognition</span>
+        </AnimatedShinyText>
+
+        <div className="text-center text-muted-foreground/20">
+          <p className="text-nowrap text-xl font-semibold sm:text-2xl">
+            Developer of the Year
+          </p>
+          <p className="text-sm text-muted-foreground/20">
+            is hereby presented to
+          </p>
+        </div>
+      </CardHeader>
+      <CardContent className="">
+        <p className="border-b pb-2 text-center text-xl font-bold uppercase tracking-tighter text-muted-foreground/10 blur-[3px] sm:text-3xl">
+          John Doe Omsimos
+        </p>
+      </CardContent>
+      <CardFooter>
+        <p className="text-center text-sm text-muted-foreground/20">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
+          iste, repellat ad odit fugit quod soluta commodi quibusdam nemo
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}