From 372e4ae33eaafa3f907c67d5efbd7592b5e04815 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Mon, 3 Nov 2025 15:05:11 +0100
Subject: [PATCH] Fix checkout success page styling to match old Vite version
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change header gradient from cyan-400/blue-400 to cyan-500/blue-500/indigo-600 (vibrant 3-color gradient)
- Exclude /checkout/success from RootLayoutClient wrapper for fullscreen layout
- Update color scheme throughout: gray → slate, green → blue/cyan/emerald
- Add floating success badge below header
- Add gradient backgrounds to offset sections
- Update button styles with gradients and transform effects

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/checkout/success/page.tsx   | 113 +++++++++++++++++---------------
 components/RootLayoutClient.tsx |   5 +-
 2 files changed, 63 insertions(+), 55 deletions(-)

diff --git a/app/checkout/success/page.tsx b/app/checkout/success/page.tsx
index b4f4eed..9bd388a 100644
--- a/app/checkout/success/page.tsx
+++ b/app/checkout/success/page.tsx
@@ -73,14 +73,14 @@ export default function CheckoutSuccessPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-6">
         <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           className="text-center"
         >
-          <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-green-500 mx-auto"></div>
-          <p className="mt-4 text-gray-700 font-medium">Loading your order details...</p>
+          <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
+          <p className="mt-4 text-slate-600 font-medium">Loading your order details...</p>
         </motion.div>
       </div>
     );
@@ -88,18 +88,18 @@ export default function CheckoutSuccessPage() {
 
   if (error || !orderDetails) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center"
+          className="max-w-md w-full bg-white rounded-2xl shadow-luxury p-8 text-center"
         >
           <div className="text-red-500 text-5xl mb-4">⚠️</div>
-          <h2 className="text-2xl font-bold text-gray-800 mb-2">Order Not Found</h2>
-          <p className="text-gray-600 mb-6">{error || 'Unable to retrieve order details'}</p>
+          <h2 className="text-2xl font-bold text-slate-800 mb-2">Order Not Found</h2>
+          <p className="text-slate-600 mb-6">{error || 'Unable to retrieve order details'}</p>
           <button
             onClick={() => router.push('/')}
-            className="inline-block px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+            className="inline-block px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
           >
             Return to Home
           </button>
@@ -276,7 +276,7 @@ export default function CheckoutSuccessPage() {
         }
       `}</style>
 
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4 sm:p-6">
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-4 sm:p-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -284,34 +284,41 @@ export default function CheckoutSuccessPage() {
           className="max-w-full sm:max-w-4xl lg:max-w-5xl w-full print-receipt"
         >
           {/* Receipt Container - Page 1 */}
-          <div className="bg-white rounded-lg shadow-xl overflow-hidden print:rounded-none print:shadow-none print-page-break">
+          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden print:rounded-none print:shadow-none print-page-break">
             {/* Header with Logo */}
             <motion.div
               initial={{ opacity: 0, y: -20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
-              className="p-8 text-center border-b-2 border-gray-200"
+              className="bg-gradient-to-br from-cyan-500 via-blue-500 to-indigo-600 p-8 text-center"
             >
               <img
                 src="/puffinOffset.webp"
                 alt="Puffin Offset"
                 className="h-24 mx-auto mb-4 print-logo"
               />
-              <div className="flex items-center justify-center mb-4">
-                <div className="bg-green-500 text-white rounded-full p-4 shadow-lg">
-                  <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                  </svg>
-                </div>
-              </div>
-              <h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
+              <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
                 Order Confirmed
               </h1>
-              <p className="text-gray-600 text-lg">
+              <p className="text-cyan-50 text-lg">
                 Thank you for your carbon offset purchase
               </p>
             </motion.div>
 
+            {/* Success Badge */}
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
+              className="flex justify-center -mt-8 mb-6 no-print"
+            >
+              <div className="bg-green-500 text-white rounded-full p-6 shadow-xl border-4 border-white">
+                <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+            </motion.div>
+
             {/* Order Details Section */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -319,42 +326,42 @@ export default function CheckoutSuccessPage() {
               transition={{ delay: 0.3 }}
               className="px-8 py-6"
             >
-              <h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 border-gray-200">
+              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-3 border-b-2 border-slate-200">
                 Order Summary
               </h2>
 
               <div className="space-y-1 mb-6">
                 {/* Carbon Offset - Highlighted */}
-                <div className="bg-gray-50 rounded-lg p-6 mb-4">
+                <div className="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl p-6 mb-4 border-l-4 border-emerald-500">
                   <div className="flex justify-between items-center">
                     <div>
-                      <span className="text-sm text-gray-600 font-medium">Carbon Offset</span>
-                      <p className="text-3xl font-bold text-gray-900 mt-1">{order.tons} tons CO₂</p>
+                      <span className="text-sm text-emerald-700 font-medium uppercase tracking-wide">Carbon Offset</span>
+                      <p className="text-3xl font-bold text-emerald-900 mt-1">{order.tons} tons CO₂</p>
                     </div>
-                    <div className="text-green-500">
+                    <div className="text-emerald-600">
                       <Leaf className="w-16 h-16" />
                     </div>
                   </div>
                 </div>
 
                 {/* Pricing Breakdown */}
-                <div className="bg-gray-50 rounded-lg p-5 my-4 space-y-3">
+                <div className="bg-slate-50 rounded-lg p-5 my-4 space-y-3">
                   <div className="flex justify-between items-center">
-                    <span className="text-gray-700">Offset Cost</span>
-                    <span className="text-gray-900 font-semibold">
+                    <span className="text-slate-700">Offset Cost</span>
+                    <span className="text-slate-900 font-semibold">
                       ${formatCurrency(baseAmount)}
                     </span>
                   </div>
                   <div className="flex justify-between items-center">
-                    <span className="text-gray-700">Processing Fee (3%)</span>
-                    <span className="text-gray-900 font-semibold">
+                    <span className="text-slate-700">Processing Fee (3%)</span>
+                    <span className="text-slate-900 font-semibold">
                       ${formatCurrency(processingFee)}
                     </span>
                   </div>
-                  <div className="border-t-2 border-gray-300 pt-3 mt-3">
+                  <div className="border-t-2 border-slate-300 pt-3 mt-3">
                     <div className="flex justify-between items-center">
-                      <span className="text-gray-800 font-bold text-lg">Total Paid</span>
-                      <span className="text-gray-900 font-bold text-3xl">
+                      <span className="text-slate-800 font-bold text-lg">Total Paid</span>
+                      <span className="text-blue-600 font-bold text-3xl">
                         ${formatCurrency(totalAmount)}
                       </span>
                     </div>
@@ -363,24 +370,24 @@ export default function CheckoutSuccessPage() {
               </div>
 
               {/* Order Metadata */}
-              <div className="bg-gray-50 rounded-lg p-5 space-y-4">
+              <div className="bg-gradient-to-r from-slate-50 to-blue-50 rounded-lg p-5 space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                   {/* Payment ID (Stripe) */}
                   <div>
-                    <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Payment ID</span>
-                    <p className="text-gray-800 font-mono text-xs mt-1 break-all">{order.stripeSessionId}</p>
+                    <span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Payment ID</span>
+                    <p className="text-slate-800 font-mono text-xs mt-1 break-all">{order.stripeSessionId}</p>
                   </div>
 
                   {/* Offsetting Order ID (Wren) - Only show if fulfilled */}
                   {order.wrenOrderId && (
                     <div>
-                      <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Offsetting Order ID</span>
-                      <p className="text-gray-800 font-mono text-xs mt-1 break-all">{order.wrenOrderId}</p>
+                      <span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Offsetting Order ID</span>
+                      <p className="text-slate-800 font-mono text-xs mt-1 break-all">{order.wrenOrderId}</p>
                     </div>
                   )}
 
                   <div className={order.wrenOrderId ? '' : 'md:col-start-2'}>
-                    <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Status</span>
+                    <span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Status</span>
                     <p className="mt-2">
                       <span className={`inline-block px-4 py-1.5 rounded-full text-sm font-bold ${statusDisplay.className}`}>
                         {statusDisplay.label}
@@ -390,14 +397,14 @@ export default function CheckoutSuccessPage() {
 
                   {session.customerEmail && (
                     <div className="md:col-span-2">
-                      <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Email</span>
-                      <p className="text-gray-800 font-medium mt-1">{session.customerEmail}</p>
+                      <span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Email</span>
+                      <p className="text-slate-800 font-medium mt-1">{session.customerEmail}</p>
                     </div>
                   )}
 
                   <div className="md:col-span-2">
-                    <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Date</span>
-                    <p className="text-gray-800 font-medium mt-1">
+                    <span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Date</span>
+                    <p className="text-slate-800 font-medium mt-1">
                       {new Date().toLocaleDateString('en-US', {
                         year: 'numeric',
                         month: 'long',
@@ -418,11 +425,11 @@ export default function CheckoutSuccessPage() {
               transition={{ delay: 0.35 }}
               className="mt-6"
             >
-              <div className="bg-white rounded-lg shadow-xl overflow-hidden p-8 print:rounded-none print:shadow-none print:border-none print-page-break">
-                <h2 className="text-2xl font-bold text-gray-800 mb-2 text-center print:text-xl">
+              <div className="bg-white rounded-3xl shadow-2xl overflow-hidden p-8 print:rounded-none print:shadow-none print:border-none print-page-break">
+                <h2 className="text-2xl font-bold text-slate-800 mb-2 text-center print:text-xl">
                   Your Carbon Offset Distribution
                 </h2>
-                <p className="text-gray-600 text-center mb-8 print:text-sm print:mb-4">
+                <p className="text-slate-600 text-center mb-8 print:text-sm print:mb-4">
                   Your {order.tons} tons of CO₂ offsets are distributed across these verified projects:
                 </p>
                 <RechartsPortfolioPieChart
@@ -440,7 +447,7 @@ export default function CheckoutSuccessPage() {
             transition={{ delay: 0.4 }}
             className="mt-6"
           >
-            <div className="bg-white rounded-lg p-8 shadow-xl print:rounded-none print:shadow-none print:bg-white print:border print:border-gray-300 print-page-break">
+            <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-3xl p-8 shadow-2xl print:rounded-none print:shadow-none print:bg-white print:border print:border-gray-300 print-page-break">
               <CarbonImpactComparison tons={order.tons} variant="success" count={3} />
             </div>
           </motion.div>
@@ -454,19 +461,19 @@ export default function CheckoutSuccessPage() {
           >
             <button
               onClick={() => router.push('/')}
-              className="px-8 py-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-bold text-center"
+              className="px-8 py-4 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-xl hover:from-blue-600 hover:to-cyan-600 transition-all hover:shadow-xl font-bold text-center transform hover:scale-105"
             >
               Return to Home
             </button>
             <button
               onClick={() => router.push('/calculator')}
-              className="px-8 py-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-bold text-center"
+              className="px-8 py-4 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl hover:from-green-600 hover:to-emerald-600 transition-all hover:shadow-xl font-bold text-center transform hover:scale-105"
             >
               Calculate Another Offset
             </button>
             <button
               onClick={() => window.print()}
-              className="px-8 py-4 bg-white text-gray-700 rounded-lg hover:bg-gray-100 transition-colors font-bold border-2 border-gray-300 flex items-center justify-center gap-2"
+              className="px-8 py-4 bg-white text-slate-700 rounded-xl hover:bg-slate-50 transition-all hover:shadow-xl font-bold border-2 border-slate-300 flex items-center justify-center gap-2 transform hover:scale-105"
             >
               <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
@@ -483,8 +490,8 @@ export default function CheckoutSuccessPage() {
               transition={{ delay: 0.6 }}
               className="text-center mt-6 no-print"
             >
-              <div className="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg inline-block">
-                <p className="text-green-800 font-medium">
+              <div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg inline-block">
+                <p className="text-blue-800 font-medium">
                   <svg className="w-5 h-5 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                     <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
@@ -500,7 +507,7 @@ export default function CheckoutSuccessPage() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.7 }}
-            className="text-center text-gray-500 text-sm mt-8 pb-6 no-print"
+            className="text-center text-slate-500 text-sm mt-8 pb-6 no-print"
           >
             <p>Thank you for making a positive impact on our planet</p>
             <p className="mt-2">Questions? Contact us at support@puffinoffset.com</p>
diff --git a/components/RootLayoutClient.tsx b/components/RootLayoutClient.tsx
index f99a929..d7953e3 100644
--- a/components/RootLayoutClient.tsx
+++ b/components/RootLayoutClient.tsx
@@ -7,9 +7,10 @@ import { Footer } from './Footer';
 export function RootLayoutClient({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const isAdminRoute = pathname?.startsWith('/admin');
+  const isCheckoutSuccess = pathname?.startsWith('/checkout/success');
 
-  if (isAdminRoute) {
-    // Admin routes render without header/footer
+  if (isAdminRoute || isCheckoutSuccess) {
+    // Admin routes and checkout success render without header/footer
     return <>{children}</>;
   }