refactor: refactor the auth pages ui

app/auth/login/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import LoginForm from "@/components/auth/LoginForm";
+
+
+export default function LoginPage() {
+  return <LoginForm />;
+}

app/auth/signup/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import SignupForm from "@/components/auth/SignupForm";
+
+
+export default function SignupPage() {
+  return <SignupForm />;
+}

app/auth/verify/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import VerifyForm from '@/components/auth/VerifyForm'
+
+export default function VerifyPage() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [email, setEmail] = useState<string | null>(null)
+
+  useEffect(() => {
+    const param = searchParams.get('email')
+    if (param) {
+      setEmail(param)
+      router.replace('/auth/verify') // hides ?email= from address bar
+    }
+  }, [searchParams, router])
+
+  if (!email) {
+    return (
+      <div className="min-h-screen flex items-center justify-center text-foreground">
+        <p>Missing email parameter. Please go back and sign up again.</p>
+      </div>
+    )
+  }
+
+  return <VerifyForm email={email} />
+}

app/blog/page.tsx

@@ -111,6 +111,8 @@ export default function BlogPage() {
                             >
                                 <div className="relative h-48 overflow-hidden">
                                     <Image
+                                        width={100}
+                                        height={100}
                                         src={post.image ?? "https://placehold.co/600x400"}
                                         alt={post.title}
                                         className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"

app/dashboard/page.tsx

@@ -9,7 +9,7 @@ import QrPayment from "@/components/dashboard/tabs/qr-payment";
 import PaymentSplit from "@/components/dashboard/tabs/payment-split";
 import Swap from "@/components/dashboard/tabs/swap";
 import Profile from "@/components/dashboard/tabs/profile";
-import AuthPage from "@/components/auth/AuthPage";
+// import AuthPage from "@/components/auth/AuthPage";
 import Logout from "@/components/dashboard/tabs/logout";
 import CreateAddressTab from "@/components/dashboard/tabs/create-address";
 import History from "@/components/dashboard/tabs/history";
@@ -50,7 +50,7 @@ export default function Dashboard() {
               {activeTab === "profile" && <Profile />}
               {activeTab === "Logout" && <Logout />}
               {activeTab === "Receive funds" && <CreateAddressTab />}
-              {activeTab === "sign up" && <AuthPage initialTab="signup" />}
+              {/* {activeTab === "sign up" && <AuthPage initialTab="signup" />} */}
               {activeTab === "History" && <History />}
               {activeTab === "Notification" && <Notifications />}
               {activeTab === "Help" && <Help />}

components/auth/AuthPage.tsx

@@ -1,90 +1,90 @@
-"use client";
+// "use client";
 
-import React, { useState } from "react";
-import LoginForm from "./LoginForm";
-import SignupForm from "./SignupForm";
-import VerifyForm from "./VerifyForm";
-import { Card } from "@/components/ui/Card";
-import Link from "next/link";
+// import React, { useState } from "react";
+// import LoginForm from "./LoginForm";
+// import SignupForm from "./SignupForm";
+// import VerifyForm from "./VerifyForm";
+// import { Card } from "@/components/ui/Card";
+// import Link from "next/link";
 
-export type AuthTab = "login" | "signup" | "verify";
+// export type AuthTab = "login" | "signup" | "verify";
 
-export interface EncryptedWalletData {
-  encryptedMnemonic: string;
-  encryptedWallets: {
-    ethereum: string;
-    bitcoin: string;
-    solana: string;
-    starknet: string;
-  };
-  publicAddresses: {
-    ethereum: string;
-    bitcoin: string;
-    solana: string;
-    starknet: string;
-  };
-}
+// export interface EncryptedWalletData {
+//   encryptedMnemonic: string;
+//   encryptedWallets: {
+//     ethereum: string;
+//     bitcoin: string;
+//     solana: string;
+//     starknet: string;
+//   };
+//   publicAddresses: {
+//     ethereum: string;
+//     bitcoin: string;
+//     solana: string;
+//     starknet: string;
+//   };
+// }
 
-interface AuthPageProps {
-  initialTab?: AuthTab;
-}
+// interface AuthPageProps {
+//   initialTab?: AuthTab;
+// }
 
-export default function AuthPage({ initialTab = "login" }: AuthPageProps) {
-  const [activeTab, setActiveTab] = useState<AuthTab>(initialTab);
-  const [email, setEmail] = useState<string>("");
-  const [walletData, setWalletData] = useState<EncryptedWalletData | null>(
-    null
-  );
+// export default function AuthPage({ initialTab = "login" }: AuthPageProps) {
+//   const [activeTab, setActiveTab] = useState<AuthTab>(initialTab);
+//   const [email, setEmail] = useState<string>("");
+//   const [walletData, setWalletData] = useState<EncryptedWalletData | null>(
+//     null
+//   );
 
-  // Enhanced setActiveTab to accept optional email and wallet data
-  const handleSetActiveTab = (
-    tab: AuthTab,
-    emailArg?: string,
-    walletDataArg?: EncryptedWalletData
-  ) => {
-    setActiveTab(tab);
-    if (emailArg) setEmail(emailArg);
-    if (walletDataArg) setWalletData(walletDataArg);
-  };
+//   // Enhanced setActiveTab to accept optional email and wallet data
+//   const handleSetActiveTab = (
+//     tab: AuthTab,
+//     emailArg?: string,
+//     walletDataArg?: EncryptedWalletData
+//   ) => {
+//     setActiveTab(tab);
+//     if (emailArg) setEmail(emailArg);
+//     if (walletDataArg) setWalletData(walletDataArg);
+//   };
 
-  return (
-    <div className="w-full min-h-screen bg-background flex flex-col md:flex-row">
-      {/* Left side - Branding */}
-      <div className="w-full md:w-1/2 bg-nav flex flex-col items-center justify-center p-8">
-        <div className="w-full max-w-md">
+//   return (
+//     <div className="w-full min-h-screen bg-background flex flex-col md:flex-row">
+//       {/* Left side - Branding */}
+//       <div className="w-full md:w-1/2 bg-nav flex flex-col items-center justify-center p-8">
+//         <div className="w-full max-w-md">
 
-          <h1 className="text-foreground text-custom-3xl font-bold mb-4">
-            Welcome to <Link
-                href={"/"}
-                className="text-5xl font-bold font-[mono] italic rounded-b-2xl border-b-4 text-[#255ff1] "
-              >
-                VELO
-              </Link>
-          </h1>
-          <p className="text-muted-foreground text-custom-lg">
-            The fastest way to manage your crypto payments and splits
-          </p>
-        </div>
-      </div>
+//           <h1 className="text-foreground text-custom-3xl font-bold mb-4">
+//             Welcome to <Link
+//                 href={"/"}
+//                 className="text-5xl font-bold font-[mono] italic rounded-b-2xl border-b-4 text-[#255ff1] "
+//               >
+//                 VELO
+//               </Link>
+//           </h1>
+//           <p className="text-muted-foreground text-custom-lg">
+//             The fastest way to manage your crypto payments and splits
+//           </p>
+//         </div>
+//       </div>
 
-      {/* Right side - Auth forms */}
-      <div className="w-full md:w-1/2 flex items-center justify-center p-8">
-        <Card className="w-full max-w-md p-8 border-none">
-          {activeTab === "login" && (
-            <LoginForm setActiveTab={handleSetActiveTab} />
-          )}
-          {activeTab === "signup" && (
-            <SignupForm setActiveTab={handleSetActiveTab} />
-          )}
-          {activeTab === "verify" && (
-            <VerifyForm
-              setActiveTab={handleSetActiveTab}
-              email={email}
-              walletData={walletData}
-            />
-          )}
-        </Card>
-      </div>
-    </div>
-  );
-}
+//       {/* Right side - Auth forms */}
+//       <div className="w-full md:w-1/2 flex items-center justify-center p-8">
+//         <Card className="w-full max-w-md p-8 border-none">
+//           {activeTab === "login" && (
+//             <LoginForm setActiveTab={handleSetActiveTab} />
+//           )}
+//           {activeTab === "signup" && (
+//             <SignupForm setActiveTab={handleSetActiveTab} />
+//           )}
+//           {activeTab === "verify" && (
+//             <VerifyForm
+//               setActiveTab={handleSetActiveTab}
+//               email={email}
+//               walletData={walletData}
+//             />
+//           )}
+//         </Card>
+//       </div>
+//     </div>
+//   );
+// }