Refactor text content in GlobeView component and add PwaInstall compo…

…nent

components/pages/home/GlobeView.tsx

@@ -415,7 +415,7 @@ export function GlobeView() {
             We are from worldwide
           </h2>
           <p className="text-center text-base md:text-lg font-normal text-neutral-700 dark:text-neutral-200 max-w-md mt-2 mx-auto">
-            Our ethnic diersity is our strength. Our students are from all over the world. We are a global team.
+            Our ethnic dievrsity is our strength. We are from all over the world. We are a global team.
           </p>
         </motion.div>
         <div className="absolute w-full bottom-0 inset-x-0 h-40 bg-gradient-to-b pointer-events-none select-none from-transparent dark:to-black to-white z-40" />

components/pwa-install.jsx

@@ -0,0 +1,86 @@
+// @ts-nocheck
+"use client";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+const PwaInstall = () => {
+  const [deferredPrompt, setDeferredPrompt] = useState(null);
+
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (event) => {
+      // Prevent the default installation prompt
+      event.preventDefault();
+      // Store the event for later use
+      setDeferredPrompt(event);
+    };
+
+    // Listen for the beforeinstallprompt event
+    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+    // warn the user if the app is already installed
+
+    // Cleanup: remove the event listener when the component is unmounted
+    return () => {
+      window.removeEventListener(
+        "beforeinstallprompt",
+        handleBeforeInstallPrompt,
+      );
+    };
+  }, []);
+  const handleEmailOpen = (event) => {
+    event.preventDefault();
+    window.location.href = "mailto:[email protected]";
+
+  };
+  const handleInstallClick = (event) => {
+    event.preventDefault();
+
+    // Display confirmation alert to install from the user
+    // if (
+    //   window.confirm(
+    //     "The app is still in development stage. Some devices might face flickering issues. Please use the website for better experience. Click OK to continue."
+    //   )
+    // ) {
+    if (deferredPrompt) {
+      // Show the installation prompt
+      deferredPrompt.prompt();
+
+      // Wait for the user to respond to the prompt
+      deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === "accepted") {
+          console.log("User accepted the installation");
+        } else {
+          console.log("User dismissed the installation");
+        }
+
+        // Reset the deferredPrompt variable
+        setDeferredPrompt(null);
+      });
+    }
+    // }
+  };
+
+  return (
+    <div>
+      <Button
+        onClick={handleInstallClick}
+        variant={'default'}
+        size={'lg'}
+        style={{ display: deferredPrompt ? 'block' : 'none' }}
+        className=" md:px-4 md:py-2 px-2 py-1 md:mt-24 mt-8 z-30 w-fit mx-auto "
+      >
+        Get Our App
+      </Button>
+      <Button
+        onClick={handleEmailOpen}
+        variant={'default'}
+        size={'lg'}
+        style={{ display: deferredPrompt ? 'none' : 'block' }}
+        className=" md:px-4 md:py-2 px-2 py-1 md:mt-24 mt-8 z-30 w-fit mx-auto "
+      >
+        Contact Us
+      </Button>
+    </div>
+  )
+};
+
+export default PwaInstall;

components/ui/google-gemini-effect.tsx

@@ -1,7 +1,10 @@
 "use client";
-import { cn } from "@/lib/utils";
 import { motion, MotionValue } from "framer-motion";
 import React from "react";
+
+import PwaInstall from '@/components/pwa-install'
+import { cn } from "@/lib/utils";
+
 import { Button } from "./button";
 
 const transition = {
@@ -21,19 +24,16 @@ export const GoogleGeminiEffect = ({
   className?: string;
 }) => {
   return (
-    <div className={cn("sticky top-80", className)}>
+    <div className={cn('sticky top-80', className)}>
       <p className="text-lg md:text-7xl font-normal pb-4 text-center bg-clip-text bg-gradient-to-b from-neutral-100 to-neutral-300">
-        {title || `Build with Aceternity UI`}
+        Let&apos;s stay connected
       </p>
       <p className="text-xs md:text-xl font-normal text-center text-neutral-400 mt-4 max-w-lg mx-auto">
         {description ||
-          `Scroll this component and see the bottom SVG come to life wow this
-        works!`}
+          `Install the app on your device for an optimal experience. You can also contact us via email.`}
       </p>
-      <div className="w-full h-[890px] -top-60 md:-top-48  flex items-center justify-center bg-red-transparent absolute ">
-        <Button variant={"default"} size={"lg"} className=" md:px-4 md:py-2 px-2 py-1 md:mt-24 mt-8 z-30 w-fit mx-auto ">
-          Get Our App
-        </Button>
+      <div className="w-full h-[890px] -top-60 md:-top-48 z-30  flex items-center justify-center bg-red-transparent absolute ">
+        <PwaInstall />
       </div>
       <svg
         width="1440"
@@ -158,5 +158,5 @@ export const GoogleGeminiEffect = ({
         </defs>
       </svg>
     </div>
-  );
+  )
 };

public/manifest.json

@@ -5,8 +5,8 @@
   "name": "HSTU ECE21",
   "short_name": "RINATTOK21",
   "description": "Documentary of HSTU ECE21 Batch. A project by Shahriar Hasan.",
-  "theme_color": "#FFFFFF",
-  "background_color": "#000000",
+  "theme_color": "#000000",
+  "background_color": "#FFFFFF",
   "icons": [
     {
       "src": "AppImages/android/android-launchericon-192-192.png",