feat: Implement payment success confirmation page and testimonials form with new icons.

src/components/settings/PaymentSuccessForm.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+interface TransactionDetail {
+  label: string;
+  value: string;
+  bold?: boolean;
+}
+
+const TRANSACTION_DETAILS: TransactionDetail[] = [
+  { label: 'Transaction ID', value: 'REQ-89234475', bold: true },
+  { label: 'Amount Paid', value: '$499.00', bold: true },
+  { label: 'Date', value: 'Oct 24, 2024', bold: true },
+];
+
+export function PaymentSuccessForm() {
+  const router = useRouter();
+
+  return (
+    <>
+      {/* Page Title */}
+      <div className="mb-6">
+        <h1 className="font-fractul font-bold text-[20px] text-[#00293D] mb-2">
+          Payments
+        </h1>
+        <p className="font-serif text-[14px] text-[#00293D]/70">
+          Manage Your billing cycles , upgrade your plan , or boost individual listings
+        </p>
+      </div>
+
+      {/* Payment Success Card */}
+      <div className="border border-[#00293D] rounded-[10px] py-10 px-8">
+        {/* Success Icon */}
+        <div className="flex justify-center mb-5">
+          <Image
+            src="/assets/icons/payment-success-icon.svg"
+            alt="Success"
+            width={40}
+            height={40}
+          />
+        </div>
+
+        {/* Success Title */}
+        <h2 className="font-fractul font-bold text-[20px] text-[#00293D] text-center mb-3">
+          Payment Successful !
+        </h2>
+
+        {/* Success Description */}
+        <p className="font-serif text-[14px] text-[#00293D] text-center mb-8 max-w-[329px] mx-auto leading-[22px]">
+          Your annual membership is now active. You have full access to all premium features
+        </p>
+
+        {/* Transaction Details Section */}
+        <div className="max-w-[430px] mx-auto">
+          {/* Header Row */}
+          <div className="flex items-center justify-between mb-5">
+            <span className="font-serif text-[15px] text-[#00293D]">
+              Transaction Details
+            </span>
+            <div className="flex items-center gap-2">
+              <Image
+                src="/assets/icons/verified-shield-green-icon.svg"
+                alt="Verified"
+                width={20}
+                height={20}
+              />
+              <span className="font-serif text-[14px] text-[#00293D]">
+                Verified User
+              </span>
+            </div>
+          </div>
+
+          {/* Detail Rows */}
+          <div className="space-y-5 mb-6">
+            {TRANSACTION_DETAILS.map((detail) => (
+              <div key={detail.label} className="flex items-center justify-between">
+                <span className="font-serif text-[15px] text-[#00293D]/50">
+                  {detail.label}
+                </span>
+                <span className={`font-serif text-[14px] text-[#00293D] ${detail.bold ? 'font-bold' : ''}`}>
+                  {detail.value}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Divider */}
+          <div className="border-b border-[#00293D]/20 mb-5" />
+
+          {/* Next Renewal Date */}
+          <div className="flex items-center justify-between mb-8">
+            <span className="font-serif text-[15px] text-[#00293D]">
+              Next Renewal Date
+            </span>
+            <span className="font-serif font-bold text-[14px] text-[#e58625]">
+              Oct 24, 2025
+            </span>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex gap-4 mb-6">
+            <button
+              onClick={() => router.push('/agent/dashboard')}
+              className="flex-1 bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors flex items-center justify-center gap-2"
+            >
+              <Image
+                src="/assets/icons/dashboard-white-icon.svg"
+                alt=""
+                width={20}
+                height={20}
+              />
+              Go To Dashboard
+            </button>
+            <button
+              className="flex-1 bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors flex items-center justify-center gap-2"
+            >
+              <Image
+                src="/assets/icons/download-white-icon.svg"
+                alt=""
+                width={20}
+                height={20}
+              />
+              Download Receipt
+            </button>
+          </div>
+
+          {/* Trust Badges */}
+          <div className="flex items-center justify-center gap-8">
+            <div className="flex items-center gap-2">
+              <Image
+                src="/assets/icons/verified-shield-green-icon.svg"
+                alt="Verified"
+                width={20}
+                height={20}
+              />
+              <span className="font-serif text-[14px] text-[#00293D]">
+                Verified User
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Image
+                src="/assets/icons/lock-icon.svg"
+                alt="Secure"
+                width={20}
+                height={20}
+              />
+              <span className="font-serif text-[14px] text-[#00293D]">
+                Secure Checkout
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}