Redesign phase 1: Homepage polish and design system foundation

- Fix newsletter subscribe box centering on homepage
- Fix header overlap on product pages (pt-[72px] instead of pt-[100px])
- Add scroll-mt-[72px] for smooth scroll anchor offset
- Add HeroVideo component with video hero placeholder
- Add REDESIGN_SPECIFICATION.md with 9-phase design plan
- Clean up globals.css theme declarations and comments
- Update Header with improved sticky behavior and cart
- Update ProductDetail with better layout and spacing
- Update CartDrawer with improved slide-out cart UI
- Add English translations for updated pages
- Various CSS refinements across pages

src/app/checkout/page.tsx

@@ -14,6 +14,29 @@ import {
   CHECKOUT_BILLING_ADDRESS_UPDATE,
   CHECKOUT_COMPLETE,
 } from "@/lib/saleor/mutations/Checkout";
+import type { Checkout } from "@/types/saleor";
+
+// GraphQL Response Types
+interface ShippingAddressUpdateResponse {
+  checkoutShippingAddressUpdate?: {
+    checkout?: Checkout;
+    errors?: Array<{ message: string }>;
+  };
+}
+
+interface BillingAddressUpdateResponse {
+  checkoutBillingAddressUpdate?: {
+    checkout?: Checkout;
+    errors?: Array<{ message: string }>;
+  };
+}
+
+interface CheckoutCompleteResponse {
+  checkoutComplete?: {
+    order?: { number: string };
+    errors?: Array<{ message: string }>;
+  };
+}
 
 interface AddressForm {
   firstName: string;
@@ -94,7 +117,7 @@ export default function CheckoutPage() {
 
     try {
       // Update shipping address
-      const shippingResult = await saleorClient.mutate({
+      const shippingResult = await saleorClient.mutate<ShippingAddressUpdateResponse>({
         mutation: CHECKOUT_SHIPPING_ADDRESS_UPDATE,
         variables: {
           checkoutId: checkout.id,
@@ -105,12 +128,12 @@ export default function CheckoutPage() {
         },
       });
 
-      if (shippingResult.data?.checkoutShippingAddressUpdate?.errors?.length > 0) {
+      if (shippingResult.data?.checkoutShippingAddressUpdate?.errors && shippingResult.data.checkoutShippingAddressUpdate.errors.length > 0) {
         throw new Error(shippingResult.data.checkoutShippingAddressUpdate.errors[0].message);
       }
 
       // Update billing address
-      const billingResult = await saleorClient.mutate({
+      const billingResult = await saleorClient.mutate<BillingAddressUpdateResponse>({
         mutation: CHECKOUT_BILLING_ADDRESS_UPDATE,
         variables: {
           checkoutId: checkout.id,
@@ -121,19 +144,19 @@ export default function CheckoutPage() {
         },
       });
 
-      if (billingResult.data?.checkoutBillingAddressUpdate?.errors?.length > 0) {
+      if (billingResult.data?.checkoutBillingAddressUpdate?.errors && billingResult.data.checkoutBillingAddressUpdate.errors.length > 0) {
         throw new Error(billingResult.data.checkoutBillingAddressUpdate.errors[0].message);
       }
 
       // Complete checkout (creates order)
-      const completeResult = await saleorClient.mutate({
+      const completeResult = await saleorClient.mutate<CheckoutCompleteResponse>({
         mutation: CHECKOUT_COMPLETE,
         variables: {
           checkoutId: checkout.id,
         },
       });
 
-      if (completeResult.data?.checkoutComplete?.errors?.length > 0) {
+      if (completeResult.data?.checkoutComplete?.errors && completeResult.data.checkoutComplete.errors.length > 0) {
         throw new Error(completeResult.data.checkoutComplete.errors[0].message);
       }
 
@@ -154,9 +177,10 @@ export default function CheckoutPage() {
   // Order Success Page
   if (orderComplete) {
     return (
-      <main className="min-h-screen">
+      <>
         <Header />
-        <section className="pt-24 pb-20 px-4">
+        <main className="min-h-screen">
+          <section className="pt-[120px] pb-20 px-4">
           <div className="max-w-2xl mx-auto text-center">
             <div className="mb-6">
               <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -187,16 +211,19 @@ export default function CheckoutPage() {
             </Link>
           </div>
         </section>
-        <Footer />
-      </main>
+        </main>
+        <div className="pt-16">
+          <Footer />
+        </div>
+      </>
     );
   }
 
   return (
-    <main className="min-h-screen">
+    <>
       <Header />
-      
-      <section className="pt-24 pb-20 px-4">
+      <main className="min-h-screen">
+        <section className="pt-[120px] pb-20 px-4">
         <div className="max-w-7xl mx-auto">
           <h1 className="text-3xl font-serif mb-8">Checkout</h1>
           
@@ -457,8 +484,11 @@ export default function CheckoutPage() {
           </div>
         </div>
       </section>
+      </main>
       
-      <Footer />
-    </main>
+      <div className="pt-16">
+        <Footer />
+      </div>
+    </>
   );
 }