feat: add direct payment page.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "easy-invoice",
   "description": "A Request Network demo app for easy invoice creation using Request API",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "MIT",
   "scripts": {
     "dev": "chmod +x dev/dev-startup.sh && ./dev/dev-startup.sh ",
@@ -56,6 +56,7 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "ulid": "^2.3.0",
+    "validator": "^13.12.0",
     "viem": "^2.21.48",
     "zod": "^3.23.8"
   },
@@ -66,6 +67,7 @@
     "@types/pg": "^8.11.10",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/validator": "^13.12.2",
     "dotenv-cli": "^7.3.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",

src/app/direct-payment/page.tsx

@@ -0,0 +1,41 @@
+import { BackgroundWrapper } from "@/components/background-wrapper";
+import { DirectPayment } from "@/components/direct-payment";
+import { Footer } from "@/components/footer";
+import { Header } from "@/components/header";
+import { getCurrentSession } from "@/server/auth";
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+  title: "Direct Payment | Easy Invoice",
+  description: "Send payments directly without creating a request first",
+};
+
+export default async function DirectPaymentPage() {
+  const { user } = await getCurrentSession();
+
+  // Redirect to home if not logged in
+  if (!user) {
+    redirect("/");
+  }
+
+  return (
+    <BackgroundWrapper
+      topGradient={{ from: "blue-100", to: "indigo-200" }}
+      bottomGradient={{ from: "zinc-100", to: "zinc-200" }}
+    >
+      <Header user={user} />
+      <main className="flex-grow flex flex-col max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
+        <h1 className="mb-2 text-4xl font-bold tracking-tight">
+          Direct Payment
+        </h1>
+        <p className="mb-8 text-lg text-muted-foreground">
+          Send payments quickly without having to create a request first.
+        </p>
+
+        <DirectPayment />
+      </main>
+      <Footer />
+    </BackgroundWrapper>
+  );
+}

src/components/background-wrapper.tsx

@@ -23,17 +23,48 @@ export function BackgroundWrapper({
     to: "zinc-200",
   },
 }: BackgroundWrapperProps) {
+  // Convert Tailwind color names to CSS variables or hex values
+  const getTailwindColor = (colorName: string): string => {
+    const colors: Record<string, string> = {
+      // Orange colors
+      "orange-100": "#ffedd5",
+      "orange-200": "#fed7aa",
+
+      // Blue colors
+      "blue-100": "#dbeafe",
+      "blue-200": "#bfdbfe",
+
+      // Indigo colors
+      "indigo-100": "#e0e7ff",
+      "indigo-200": "#c7d2fe",
+
+      // Zinc colors
+      "zinc-100": "#f4f4f5",
+      "zinc-200": "#e4e4e7",
+
+      // Add any other colors you need here
+    };
+
+    return colors[colorName] || "#f4f4f5"; // Default to zinc-100 if color not found
+  };
+
   return (
     <div className="min-h-screen relative overflow-hidden bg-[#FAFAFA]">
       {/* Decorative elements */}
       <div className="absolute top-0 right-0 w-[600px] h-[600px] -translate-y-1/2 translate-x-1/2">
         <div
-          className={`w-full h-full rounded-full bg-gradient-to-br from-${topGradient.from} to-${topGradient.to} opacity-30 blur-3xl`}
+          className="w-full h-full rounded-full opacity-30 blur-3xl"
+          style={{
+            background: `linear-gradient(to bottom right, ${getTailwindColor(topGradient.from)}, ${getTailwindColor(topGradient.to)})`,
+          }}
         />
       </div>
       <div className="absolute bottom-0 left-0 w-[600px] h-[600px] translate-y-1/2 -translate-x-1/2">
         <div
-          className={`w-full h-full rounded-full bg-gradient-to-tr from-${bottomGradient.from} to-${bottomGradient.to} opacity-30 blur-3xl`}
+          className="w-full h-full rounded-full opacity-30 blur-3xl"
+          style={{
+            background: `linear-gradient(to top right, ${getTailwindColor(bottomGradient.from)}, ${getTailwindColor(bottomGradient.to)})`,
+          }}
         />
       </div>