Add src/app/add-funds/page.tsx

src/app/add-funds/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function AddFundsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "My Orders", id: "/my-orders" },
+              { name: "Add Funds", id: "/add-funds" },
+              { name: "Profile", id: "/profile" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <div className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-background flex items-center justify-center">
+          <div className="max-w-md w-full bg-card p-8 rounded-lg shadow-md border border-border">
+            <h1 className="text-3xl font-bold text-foreground text-center mb-4">Add Funds</h1>
+            <p className="text-md text-muted-foreground text-center mb-8">Top up your account balance securely.</p>
+
+            <form className="space-y-6">
+              <div>
+                <label htmlFor="amount" className="block text-sm font-medium text-foreground">Amount</label>
+                <div className="mt-1">
+                  <input
+                    type="number"
+                    id="amount"
+                    name="amount"
+                    placeholder="Minimum $10.00"
+                    className="block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                    required
+                    min="10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="paymentMethod" className="block text-sm font-medium text-foreground">Payment Method</label>
+                <div className="mt-1">
+                  <select
+                    id="paymentMethod"
+                    name="paymentMethod"
+                    className="block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                    required
+                  >
+                    <option value="">Select a method</option>
+                    <option value="creditCard">Credit Card</option>
+                    <option value="paypal">PayPal</option>
+                    <option value="crypto">Crypto</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                >
+                  Add Funds
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Instagram", href: "/services#instagram" },
+                  { label: "YouTube", href: "/services#youtube" },
+                  { label: "TikTok", href: "/services#tiktok" },
+                  { label: "Twitter", href: "/services#twitter" },
+                  { label: "Facebook", href: "/services#facebook" },
+                  { label: "Telegram", href: "/services#telegram" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#features" },
+                  { label: "Pricing", href: "/pricing" },
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact", href: "/contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Terms of Service", href: "/terms" },
+                  { label: "Privacy Policy", href: "/privacy" },
+                ],
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Blog", href: "#" },
+                  { label: "API Docs", href: "#" },
+                ],
+              },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}