bender/c28ac08f-6b0d-454a-af65-cdbd5a1677a3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/app/checkout/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 19:52:08 +00:00
parent d9ef3f77b2
commit 87f0446c39
1 changed files with 96 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/app/checkout/page.tsx Normal file
View File

@@ -0,0 +1,96 @@
'use client';
import { ThemeProvider } from 'next-themes';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextBox from '@/components/Textbox';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
export default function CheckoutPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Cart", id: "/cart" },
{ name: "Checkout", id: "/checkout" },
{ name: "Order Conf", id: "/order-confirmation" }
];
return (
<ThemeProvider
attribute="class"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
<main className="flex min-h-screen flex-col items-center justify-between p-4 md:p-8">
<section id="checkout" data-section="checkout" className="w-full max-w-4xl py-12">
<TextBox
title="Complete Your Order"
description="Fill in your shipping and payment details to finalize your purchase. Your information is securely handled."
textboxLayout="default"
buttons={[
{
text: "Place Order", href: "/order-confirmation"
},
]}
>
<div className="mt-8 space-y-6">
<h3 className="font-semibold text-xl">Shipping Information</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" placeholder="Full Name" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="Address Line 1" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="Address Line 2 (Optional)" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="City" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="State/Province" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="Postal Code" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="Country" className="p-3 border rounded-lg w-full" />
</div>
<h3 className="font-semibold text-xl mt-8">Payment Information</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" placeholder="Card Number" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="Name on Card" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="Expiration (MM/YY)" className="p-3 border rounded-lg w-full" />
<input type="text" placeholder="CVV" className="p-3 border rounded-lg w-full" />
</div>
</div>
</TextBox>
</section>
<section id="trust-signals-checkout" data-section="trust-signals-checkout" className="w-full max-w-4xl py-12">
<SocialProofOne
title="Your Payment is Secure"
description="We use industry-leading encryption to protect your payment information."
names={['PCI DSS', 'HTTPS', '256-bit SSL', 'Fraud Protection']}
textboxLayout='default'
showCard={true}
/>
</section>
</main>
<FooterBaseReveal
logoText="Webild"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "/" },
{ label: "Contact", href: "/" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
]}
copyrightText="© 2023 Webild. All rights reserved."
/>
</ThemeProvider>
);
}