feat: added the product page and enhanced the UI

- added the product page where the product details is shown
- enhanced the nav bar to handle the rendering
- added the loading screen to the page
- fixed the rendering method to the navigation-menu

1 files changed, 54 insertions, 0 deletions

diff --git a/frontend/src/app/loading.tsx b/frontend/src/app/loading.tsx
new file mode 100644
index 0000000..56455c3
--- /dev/null
+++ b/frontend/src/app/loading.tsx
@@ -0,0 +1,54 @@
+import Image from "next/image";
+
+export default function Loading() {
+  return (
+    <div className="fixed inset-0 z-[9999] bg-background flex items-center justify-center">
+      {/* Background pattern */}
+      <div className="absolute inset-0 bg-gradient-to-br from-background via-background to-muted/20" />
+      
+      {/* Loading content */}
+      <div className="relative z-10 flex flex-col items-center space-y-4">
+        {/* Logo with animation */}
+        <div className="relative">
+          <div className="animate-pulse">
+            <Image
+              src="/black-logo.png"
+              alt="blcklst"
+              width={160}
+              height={50}
+              className="h-12 w-auto block dark:hidden"
+              priority
+            />
+            <Image
+              src="/white-logo.png"
+              alt="blcklst"
+              width={160}
+              height={50}
+              className="h-12 w-auto hidden dark:block"
+              priority
+            />
+          </div>
+        </div>
+
+        {/* Loading text - closer to logo */}
+        <div className="text-center space-y-3 -mt-2">
+          <p className="text-sm text-muted-foreground animate-pulse">
+            not everyone gets blcklsted
+          </p>
+          
+          {/* Loading dots */}
+          <div className="flex items-center justify-center space-x-1">
+            <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
+            <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
+            <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce"></div>
+          </div>
+        </div>
+
+        {/* Progress bar */}
+        <div className="w-64 h-1 bg-muted rounded-full overflow-hidden">
+          <div className="h-full bg-foreground rounded-full animate-[loading_1s_ease-in-out_infinite]"></div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file