feat: add html overlay on 3d badge

omsimos · Aug 8, 2024 · 6335c93 · 6335c93
1 parent ab84ba3
commit 6335c93
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/app/event/[name]/badge/components/badge-3d.jsx b/src/app/event/[name]/badge/components/badge-3d.jsx
@@ -45,7 +45,7 @@ export default function Badge3D({ attendee }) {
         <Band attendee={attendee} />
       </Physics>
       <Environment background blur={0.75}>
-        <color attach="background" args={["black"]} />
+        {/* <color attach="background" args={["black"]} /> */}
         <Lightformer
           intensity={2}
           color="white"

diff --git a/src/app/event/[name]/badge/components/badge-showcase.tsx b/src/app/event/[name]/badge/components/badge-showcase.tsx
@@ -8,6 +8,7 @@ import type { Attendee } from "@/lib/types";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useDocumentOnce } from "react-firebase-hooks/firestore";
 import Loading from "../../loading";
+import { Navbar } from "@/components/navbar";
 
 export default function BadgeShowcase() {
   const isDesktop = useMediaQuery("(min-width: 768px)");
@@ -37,10 +38,38 @@ export default function BadgeShowcase() {
   return (
     <>
       {isDesktop ? (
-        <Badge3D attendee={attendee} />
+        <div className="h-screen">
+          <Navbar />
+          <div className="absolute inset-0 flex h-screen flex-col items-center pt-40">
+            <h1 className="bg-zinc-800 from-foreground bg-clip-text text-center text-[10vw] font-bold tracking-tighter text-transparent dark:bg-gradient-to-b dark:to-zinc-400 md:text-8xl">
+              omsimos.com
+            </h1>
+            <p className="max-w-2xl text-center text-muted-foreground md:text-xl">
+              This project is{" "}
+              <span className="font-medium text-foreground">
+                under heavy development.
+              </span>{" "}
+              Changes and updates may happen frequently as we work to improve
+              its functionality and features.
+            </p>
+          </div>
+          <Badge3D attendee={attendee} />
+        </div>
       ) : (
-        <div>
-          <h1 className="mt-40 text-center text-2xl font-semibold">Badge 2D</h1>
+        <div className="container">
+          <div className="h-screen pt-40">
+            <h1 className="bg-zinc-800 from-foreground bg-clip-text text-[12vw] font-bold tracking-tighter text-transparent dark:bg-gradient-to-b dark:to-zinc-400 md:text-8xl">
+              omsimos.com
+            </h1>
+            <p className="max-w-2xl text-muted-foreground md:text-xl">
+              Mobile version of 3D badge is{" "}
+              <span className="font-medium text-foreground">
+                under heavy development.
+              </span>{" "}
+              Changes and updates may happen frequently as we work to improve
+              its functionality and features.
+            </p>
+          </div>
         </div>
       )}
     </>