Staging

package.json

@@ -1,6 +1,6 @@
 {
   "name": "waifu-it-website",
-  "version": "2.1.2",
+  "version": "2.2.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -25,11 +25,13 @@
     "js-cookie": "^3.0.5",
     "mongoose": "^7.4.2",
     "next": "^15.0.3",
+    "nprogress": "^0.2.0",
     "postcss": "^8.4.27",
     "react": "18.2.0",
     "react-confirm-alert": "^3.0.6",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
+    "react-progressbar": "^15.4.1",
     "react-query": "^3.39.3",
     "react-table": "^7.8.0",
     "react-toastify": "^9.1.3",

src/pages/_app.js

@@ -1,11 +1,11 @@
-// pages/_app.js
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import "tailwindcss/tailwind.css";
 import "../styles/globals.css";
 import "tailwind-scrollbar";
 import Head from "next/head";
 import Script from "next/script";
+import ProgressBar from "./components/ProgressBar"; // Import ProgressBar
 
 const queryClient = new QueryClient();
 
@@ -31,6 +31,7 @@ function MyApp({ Component, pageProps }) {
           gtag('js', new Date()); gtag('config', 'G-7CXJQ1G63J');
         `}
       </Script>
+      <ProgressBar /> {/* Global Progress Bar */}
       <Component {...pageProps} />
       <ReactQueryDevtools />
     </QueryClientProvider>

src/pages/api/membership.js

@@ -0,0 +1,36 @@
+export default async function handler(req, res) {
+  try {
+    // Construct the external API URL with query parameters
+    const queryParams = req.url.includes("?") ? req.url.split("?")[1] : "";
+    const apiUrl = `${process.env.API_URL}/membership${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+
+    // Call the external API with the required headers
+    const response = await fetch(apiUrl, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        key: process.env.ACCESS_KEY,
+      },
+    });
+
+    // Handle errors from the external API
+    if (!response.ok) {
+      const errorData = await response.text(); // Capture the error response
+      console.error("API Error Response:", errorData);
+      return res
+        .status(response.status)
+        .json({ message: "Error fetching membership data", error: errorData });
+    }
+
+    // Parse and return the response
+    const data = await response.json();
+    res.status(200).json(data);
+  } catch (error) {
+    console.error("Internal Server Error:", error); // Log full error details
+    res
+      .status(500)
+      .json({ message: "Internal Server Error", error: error.message });
+  }
+}

src/pages/components/ProgressBar.js

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+// Customizing the progress bar speed and look
+NProgress.configure({ showSpinner: false, speed: 500, minimum: 0.2 });
+
+const ProgressBar = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleStart = () => {
+      NProgress.start();
+    };
+    const handleStop = () => {
+      setTimeout(() => NProgress.done(), 500); // Delay finishing to prevent flashing
+    };
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleStop);
+    router.events.on("routeChangeError", handleStop);
+
+    return () => {
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleStop);
+      router.events.off("routeChangeError", handleStop);
+    };
+  }, [router]);
+
+  return null;
+};
+
+export default ProgressBar;

src/pages/components/hooks/useTypewriter.js

@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+
+export function useTypewriter(
+  text,
+  speed = 150,
+  eraseSpeed = 75,
+  delay = 1000
+) {
+  const [displayText, setDisplayText] = useState("");
+  const [index, setIndex] = useState(0);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [cursorVisible, setCursorVisible] = useState(true);
+
+  useEffect(() => {
+    let timeout;
+
+    if (!isDeleting && index < text.length) {
+      // Typing effect
+      timeout = setTimeout(() => {
+        setDisplayText((prev) => prev + text[index]);
+        setIndex(index + 1);
+      }, speed);
+    } else if (isDeleting && index > 0) {
+      // Erasing effect
+      timeout = setTimeout(() => {
+        setDisplayText((prev) => prev.slice(0, -1));
+        setIndex(index - 1);
+      }, eraseSpeed);
+    } else {
+      // Pause before deleting or restarting
+      timeout = setTimeout(() => {
+        setIsDeleting((prev) => !prev);
+      }, delay);
+    }
+
+    return () => clearTimeout(timeout);
+  }, [index, isDeleting, text, speed, eraseSpeed, delay]);
+
+  // Cursor blinking effect
+  useEffect(() => {
+    const cursorInterval = setInterval(() => {
+      setCursorVisible((prev) => !prev);
+    }, 500);
+
+    return () => clearInterval(cursorInterval);
+  }, []);
+
+  return `${displayText}${cursorVisible ? "|" : ""}`;
+}

src/pages/dashboard.js

@@ -307,7 +307,7 @@ const Dashboard = () => {
                   } p-4 rounded-md mb-4`}
                   style={{ marginTop: "140px" }}
                 >
-                  <div className="flex justify-between items-center mb-2">
+                  <div className="flex justify-between items-center mb-2 select-none">
                     <span className="text-sm font-medium">Token:</span>
                   </div>
                   <div className="relative max-w-xs md:max-w-full">
@@ -322,7 +322,7 @@ const Dashboard = () => {
                   ? "bg-gray-700 border border-gray-600 placeholder-gray-400 text-white"
                   : "bg-white border border-gray-300 placeholder-gray-400 text-black"
               } 
-              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+              focus:outline-none
             `}
                     />
                     <div
@@ -332,7 +332,7 @@ const Dashboard = () => {
                       {getEyeIcon()}
                     </div>
                   </div>
-                  <div className="mt-4 flex justify-end space-x-2">
+                  <div className="mt-4 flex justify-end space-x-2 select-none">
                     <button
                       onClick={handleRegenerateToken}
                       className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"

src/pages/index.js

@@ -9,6 +9,7 @@ import {
   FaArrowRight,
   FaChevronDown,
   FaChevronUp,
+  FaCrown,
 } from "react-icons/fa";
 import { CiLocationArrow1 } from "react-icons/ci";
 import { Transition } from "@headlessui/react";
@@ -62,6 +63,30 @@ const Home = () => {
     setHoveredButton(null);
   };
 
+  const premiumButtonTexts = [
+    "🌟 Upgrade to Premium!",
+    "🚀 Go Premium Now!",
+    "💎 Unlock Premium!",
+    "🔥 Get Premium Access!",
+    "🎉 Join Premium Today!",
+    "🌟 Level Up with Premium!",
+    "💖 Treat Yourself to Premium!",
+    "🚀 Blast Off with Premium!",
+    "🎁 Exclusive Perks Await!",
+    "⭐ Access Premium Features",
+    "💼 Upgrade More Benefits",
+    "🔓 Unlock Exclusive Features",
+    "🎯 Get Best Experience",
+  ];
+
+  const [premiumButtonText, setPremiumButtonText] = useState("");
+  // Select a random button text on each render
+  useEffect(() => {
+    setPremiumButtonText(
+      premiumButtonTexts[Math.floor(Math.random() * premiumButtonTexts.length)]
+    );
+  }, []);
+
   return (
     <>
       <Head>
@@ -112,24 +137,36 @@ const Home = () => {
                 )}
               </button>
               <div className="hidden lg:flex lg:items-center lg:space-x-6">
+                <Link href="/" className="text-white hover:text-gray-300">
+                  Home
+                </Link>
                 <Link
+                  target="_blank"
                   href="https://discord.gg/yyW389c"
                   className="text-white hover:text-gray-300"
                 >
                   Support
                 </Link>
                 <Link
+                  target="_blank"
                   href="https://ko-fi.com/Aeryk"
                   className="text-white hover:text-gray-300"
                 >
                   Donate Us
                 </Link>
                 <Link
+                  target="_blank"
                   href="https://github.com/WaifuAPI"
                   className="text-white hover:text-gray-300"
                 >
                   GitHub
                 </Link>
+                <Link
+                  href="/premium"
+                  className="text-white font-medium px-4 py-2 rounded-md bg-gray-800 hover:bg-white hover:text-gray-900 transition duration-300 border border-gray-600"
+                >
+                  <span className="text-lg">{premiumButtonText}</span>
+                </Link>
               </div>
             </div>
             <Transition
@@ -147,6 +184,12 @@ const Home = () => {
                   className="absolute w-full top-full left-0 lg:hidden bg-gray-900 z-50"
                 >
                   <div className="px-7 pt-2 pb-3 space-y-1">
+                    <Link
+                      href="/"
+                      className="block text-white mt-1 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium"
+                    >
+                      Home
+                    </Link>
                     <Link
                       href="https://discord.gg/yyW389c"
                       className="block text-white mt-1 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium"
@@ -165,6 +208,13 @@ const Home = () => {
                     >
                       GitHub
                     </Link>
+                    <Link
+                      href="/premium"
+                      className="inline-flex items-center gap-2 text-white font-semibold px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-600 transition duration-300"
+                    >
+                      {/* <span className="text-lg">💎 Unlock Premium!</span> */}
+                      <span className="text-lg">{premiumButtonText}</span>
+                    </Link>
                   </div>
                 </div>
               )}
@@ -331,21 +381,24 @@ const Home = () => {
         <footer className="bg-gray-900 py-4 px-12 lg:px-18 mt-auto">
           <div className="container mx-auto px-5 text-center lg:text-left -translate-y-2">
             <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between">
-              <div className="text-white">&copy; Waifu.it 2024</div>
+              <div className="text-white">&copy; Waifu.it 2025</div>
               <div className="flex justify-center lg:justify-start space-x-4">
                 <Link
+                  target="_blank"
                   href="https://raw.githubusercontent.com/WaifuAPI/Waifu.it/production/PRIVACY_POLICY.md"
                   className="text-gray-400 hover:text-white"
                 >
                   Privacy
                 </Link>
                 <Link
-                  href="https://raw.githubusercontent.com/WaifuAPI/Waifu.it/production/LICENCE.md"
+                  target="_blank"
+                  href="https://docs.waifu.it/tos"
                   className="text-gray-400 hover:text-white"
                 >
-                  Terms
+                  Terms of Service
                 </Link>
                 <Link
+                  target="_blank"
                   href="https://ko-fi.com/Aeryk"
                   className="text-gray-400 hover:text-white"
                 >