Merge branch 'staging' into starredPapers

Author: abhitrueprogrammer

public/papers_logo.png

@@ -11,6 +11,8 @@ import man from "@/assets/man.svg" assert { type: "image/svg" };
 import man1 from "@/assets/man1.svg" assert { type: "image/svg" };
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import PWAInstallButton from "../ui/PWAInstallButton";
+
 
 function Info() {
   return (
@@ -74,6 +76,27 @@ function Info() {
         />
       </div>
     </section>
+      </section>
+
+      {/* Create Request Section */}
+      <section className="flex flex-col items-center justify-center gap-4 px-6 py-12 text-center">
+        <h2 className="font-vipnabd text-2xl font-semibold text-black dark:text-white md:text-3xl">
+          Can’t Find a Specific Paper?
+        </h2>
+        <Link href="/request">
+          <Button
+            variant="outline"
+            className="group border-[1.5px] border-[#4A55FF] bg-transparent px-6 py-3 text-sm font-medium text-[#4A55FF] transition-all duration-200 hover:bg-[#4A55FF] hover:text-white dark:border-[#9EA8FF] dark:text-[#9EA8FF] dark:hover:bg-[#9EA8FF] dark:hover:text-black"
+          >
+            Create Request
+            <ArrowUpRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+          </Button>
+        </Link>
+      </section>
+      <div className="flex justify-center py-4 z-50">
+  <PWAInstallButton />
+</div>
+    </>
   );
 }
 

src/components/screens/Info.tsx

@@ -0,0 +1,62 @@
+
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { Download } from "lucide-react";
+
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{
+    outcome: "accepted" | "dismissed";
+    platform: string;
+  }>;
+}
+
+const PWAInstallButton = () => {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [showInstall, setShowInstall] = useState(false);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      e.preventDefault();
+      setDeferredPrompt(e as BeforeInstallPromptEvent);
+      setShowInstall(true);
+    };
+
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => window.removeEventListener("beforeinstallprompt", handler);
+  }, []);
+
+  const handleInstall = async () => {
+    if (!deferredPrompt) return;
+
+    deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+    if (outcome === "accepted") {
+      setShowInstall(false);
+      setDeferredPrompt(null);
+    }
+  };
+
+  if (!showInstall) return null;
+
+  return (
+    <div className="md:hidden flex items-center justify-between rounded-full bg-[#2b2343] px-4 py-2 shadow-md text-white w-fit">
+      <div className="flex items-center gap-3">
+        <Image src="/papers_logo.png" alt="Papers App" width={32} height={32} />
+        <span className="font-semibold text-lg">Papers App</span>
+      </div>
+      <button
+        onClick={handleInstall}
+        className="ml-6 flex items-center gap-2 rounded-full border border-gray-500 bg-[#1e1e24] px-4 py-1 text-sm font-semibold transition hover:bg-[#2b2b30]"
+      >
+        <Download className="h-4 w-4" />
+        Install
+      </button>
+    </div>
+  );
+};
+
+export default PWAInstallButton;