componenets standardization 1

frontend/src/pages/Payment.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate, Link } from "react-router-dom";
 import { useAuthStore } from "../store/authStore";
+import InputField from "../components/form/input/InputField";
+import TextArea from "../components/form/input/TextArea";
+import Label from "../components/form/Label";
+import Button from "../components/ui/button/Button";
 
 const PLAN_COPY: Record<string, { name: string; price: string; content: string }> = {
   starter: { name: "Starter", price: "$49/mo", content: "50 content pieces/month" },
@@ -76,42 +80,39 @@ export default function Payment() {
         )}
 
         <div className="space-y-4">
-          <label className="block text-sm font-medium text-gray-800">
-            Contact email
-            <input
-              type="email"
-              value={contactEmail}
-              onChange={(e) => setContactEmail(e.target.value)}
-              placeholder="you@example.com"
-              className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none"
-            />
-          </label>
-          <label className="block text-sm font-medium text-gray-800">
-            Notes (optional)
-            <textarea
+          <InputField
+            label="Contact email"
+            type="email"
+            value={contactEmail}
+            onChange={(e) => setContactEmail(e.target.value)}
+            placeholder="you@example.com"
+          />
+          <div>
+            <Label className="mb-2">Notes (optional)</Label>
+            <TextArea
               value={note}
-              onChange={(e) => setNote(e.target.value)}
+              onChange={(value) => setNote(value)}
               placeholder="Company name, billing contact, or questions"
-              className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none"
               rows={3}
             />
-          </label>
+          </div>
         </div>
 
         <div className="flex items-center justify-between">
           <Link to="/signup" className="text-sm text-gray-600 hover:text-gray-800">
             Prefer the free plan? Start your trial
           </Link>
-          <a
-            href={mailtoHref || "#"}
-            onClick={handleRequest}
-            className={`inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold text-white ${
-              contactEmail.trim() ? "bg-brand-600 hover:bg-brand-700" : "bg-brand-400 cursor-not-allowed"
-            }`}
-            aria-disabled={!contactEmail.trim()}
+          <Button
+            onClick={() => {
+              if (mailtoHref && contactEmail.trim()) {
+                window.location.href = mailtoHref;
+              }
+            }}
+            disabled={!contactEmail.trim()}
+            variant="primary"
           >
             Request payment instructions
-          </a>
+          </Button>
         </div>
         {error && <p className="text-sm text-error-600">{error}</p>}
       </div>