Add src/app/add-funds/page.tsx
This commit is contained in:
137
src/app/add-funds/page.tsx
Normal file
137
src/app/add-funds/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user