From 3716d5f754a1c918df9ef05460ab35ec61c6795b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 10 Jun 2026 19:55:23 +0000
Subject: [PATCH] Update src/app/checkout/page.tsx

---
 src/app/checkout/page.tsx | 57 +++++++++------------------------------
 1 file changed, 12 insertions(+), 45 deletions(-)

diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 73575dd..c84c8f6 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -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"