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

Update src/app/checkout/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 19:55:23 +00:00
parent 356acf09b9
commit 3716d5f754
1 changed files with 12 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/checkout/page.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import { ThemeProvider } from 'next-themes';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
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';
@@ -15,7 +14,6 @@ export default function CheckoutPage() {
return (
<ThemeProvider
attribute="class"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
@@ -27,51 +25,20 @@ export default function CheckoutPage() {
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">
<div id="nav" data-section="nav">
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
</div>
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div id="social-proof-section" data-section="social-proof-section">
<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'
title="Checkout Details"
description="Complete your purchase."
names={['Payment Secured', 'Fast Delivery', 'Easy Returns']}
textboxLayout="default"
showCard={true}
useInvertedBackground={false}
/>
</section>
</div>
</main>
<FooterBaseReveal
logoText="Webild"