matt/puffin-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore old project color scheme for checkout success page
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m21s
Details

Browse Source 
- Replace all blue/cyan gradients with clean white/gray backgrounds
- Change all slate colors to gray (gray-50, gray-600, gray-700, gray-800)
- Change all buttons and accents to green-500/600
- Simplify header to white background with gray border
- Remove fancy gradients and shadows for clean, simple design
- Match exact color scheme from original Vite project
This commit is contained in:
Matt 2025-11-03 14:32:58 +01:00
parent fe0c1c182f
commit baa2849352
1 changed files with 53 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
app/checkout/success/page.tsx
View File

@ -73,14 +73,14 @@ export default function CheckoutSuccessPage() {
if (loading) { if (loading) {
return ( return (
<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"> <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
className="text-center" className="text-center"
> >
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500 mx-auto"></div> <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-slate-600 font-medium">Loading your order details...</p> <p className="mt-4 text-gray-700 font-medium">Loading your order details...</p>
</motion.div> </motion.div>
</div> </div>
); );
@ -88,18 +88,18 @@ export default function CheckoutSuccessPage() {
if (error || !orderDetails) { if (error || !orderDetails) {
return ( return (
<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"> <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="max-w-md w-full bg-white rounded-2xl shadow-luxury p-8 text-center" className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center"
> >
<div className="text-red-500 text-5xl mb-4">⚠️</div> <div className="text-red-500 text-5xl mb-4">⚠️</div>
<h2 className="text-2xl font-bold text-slate-800 mb-2">Order Not Found</h2> <h2 className="text-2xl font-bold text-gray-800 mb-2">Order Not Found</h2>
<p className="text-slate-600 mb-6">{error || 'Unable to retrieve order details'}</p> <p className="text-gray-600 mb-6">{error || 'Unable to retrieve order details'}</p>
<button <button
onClick={() => router.push('/')} onClick={() => router.push('/')}
className="inline-block px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors" className="inline-block px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
> >
Return to Home Return to Home
</button> </button>
@ -276,7 +276,7 @@ export default function CheckoutSuccessPage() {
} }
`}</style> `}</style>
<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"> <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4 sm:p-6">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
@ -284,39 +284,32 @@ export default function CheckoutSuccessPage() {
className="max-w-full sm:max-w-4xl lg:max-w-5xl w-full print-receipt" className="max-w-full sm:max-w-4xl lg:max-w-5xl w-full print-receipt"
> >
{/* Receipt Container - Page 1 */} {/* Receipt Container - Page 1 */}
<div className="bg-white rounded-3xl shadow-2xl overflow-hidden print:rounded-none print:shadow-none print-page-break"> <div className="bg-white rounded-lg shadow-xl overflow-hidden print:rounded-none print:shadow-none print-page-break">
{/* Header with Logo */} {/* Header with Logo */}
<motion.div <motion.div
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }} transition={{ delay: 0.1 }}
className="bg-gradient-to-br from-cyan-400 to-blue-400 p-8 text-center" className="p-8 text-center border-b-2 border-gray-200"
> >
<img <img
src="/puffinOffset.webp" src="/puffinOffset.webp"
alt="Puffin Offset" alt="Puffin Offset"
className="h-24 mx-auto mb-4 print-logo" className="h-24 mx-auto mb-4 print-logo"
/> />
<h1 className="text-3xl md:text-4xl font-bold text-white mb-2"> <div className="flex items-center justify-center mb-4">
Order Confirmed <div className="bg-green-500 text-white rounded-full p-4 shadow-lg">
</h1> <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </div>
</div>
<h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
Order Confirmed
</h1>
<p className="text-gray-600 text-lg">
Thank you for your carbon offset purchase
</p>
</motion.div> </motion.div>
{/* Order Details Section */} {/* Order Details Section */}
@ -326,42 +319,42 @@ export default function CheckoutSuccessPage() {
transition={{ delay: 0.3 }} transition={{ delay: 0.3 }}
className="px-8 py-6" className="px-8 py-6"
> >
<h2 className="text-2xl font-bold text-slate-800 mb-6 pb-3 border-b-2 border-slate-200"> <h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 border-gray-200">
Order Summary Order Summary
</h2> </h2>
<div className="space-y-1 mb-6"> <div className="space-y-1 mb-6">
{/* Carbon Offset - Highlighted */} {/* Carbon Offset - Highlighted */}
<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="bg-gray-50 rounded-lg p-6 mb-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<span className="text-sm text-emerald-700 font-medium uppercase tracking-wide">Carbon Offset</span> <span className="text-sm text-gray-600 font-medium">Carbon Offset</span>
<p className="text-3xl font-bold text-emerald-900 mt-1">{order.tons} tons CO₂</p> <p className="text-3xl font-bold text-gray-900 mt-1">{order.tons} tons CO₂</p>
</div> </div>
<div className="text-emerald-600"> <div className="text-green-500">
<Leaf className="w-16 h-16" /> <Leaf className="w-16 h-16" />
</div> </div>
</div> </div>
</div> </div>
{/* Pricing Breakdown */} {/* Pricing Breakdown */}
<div className="bg-slate-50 rounded-lg p-5 my-4 space-y-3"> <div className="bg-gray-50 rounded-lg p-5 my-4 space-y-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-slate-700">Offset Cost</span> <span className="text-gray-700">Offset Cost</span>
<span className="text-slate-900 font-semibold"> <span className="text-gray-900 font-semibold">
${formatCurrency(baseAmount)} ${formatCurrency(baseAmount)}
</span> </span>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-slate-700">Processing Fee (3%)</span> <span className="text-gray-700">Processing Fee (3%)</span>
<span className="text-slate-900 font-semibold"> <span className="text-gray-900 font-semibold">
${formatCurrency(processingFee)} ${formatCurrency(processingFee)}
</span> </span>
</div> </div>
<div className="border-t-2 border-slate-300 pt-3 mt-3"> <div className="border-t-2 border-gray-300 pt-3 mt-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-slate-800 font-bold text-lg">Total Paid</span> <span className="text-gray-800 font-bold text-lg">Total Paid</span>
<span className="text-blue-600 font-bold text-3xl"> <span className="text-gray-900 font-bold text-3xl">
${formatCurrency(totalAmount)} ${formatCurrency(totalAmount)}
</span> </span>
</div> </div>
@ -370,24 +363,24 @@ export default function CheckoutSuccessPage() {
</div> </div>
{/* Order Metadata */} {/* Order Metadata */}
<div className="bg-gradient-to-r from-slate-50 to-blue-50 rounded-lg p-5 space-y-4"> <div className="bg-gray-50 rounded-lg p-5 space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-5"> <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
{/* Payment ID (Stripe) */} {/* Payment ID (Stripe) */}
<div> <div>
<span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Payment ID</span> <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Payment ID</span>
<p className="text-slate-800 font-mono text-xs mt-1 break-all">{order.stripeSessionId}</p> <p className="text-gray-800 font-mono text-xs mt-1 break-all">{order.stripeSessionId}</p>
</div> </div>
{/* Offsetting Order ID (Wren) - Only show if fulfilled */} {/* Offsetting Order ID (Wren) - Only show if fulfilled */}
{order.wrenOrderId && ( {order.wrenOrderId && (
<div> <div>
<span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Offsetting Order ID</span> <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Offsetting Order ID</span>
<p className="text-slate-800 font-mono text-xs mt-1 break-all">{order.wrenOrderId}</p> <p className="text-gray-800 font-mono text-xs mt-1 break-all">{order.wrenOrderId}</p>
</div> </div>
)} )}
<div className={order.wrenOrderId ? '' : 'md:col-start-2'}> <div className={order.wrenOrderId ? '' : 'md:col-start-2'}>
<span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Status</span> <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Status</span>
<p className="mt-2"> <p className="mt-2">
<span className={`inline-block px-4 py-1.5 rounded-full text-sm font-bold ${statusDisplay.className}`}> <span className={`inline-block px-4 py-1.5 rounded-full text-sm font-bold ${statusDisplay.className}`}>
{statusDisplay.label} {statusDisplay.label}
@ -397,14 +390,14 @@ export default function CheckoutSuccessPage() {
{session.customerEmail && ( {session.customerEmail && (
<div className="md:col-span-2"> <div className="md:col-span-2">
<span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Email</span> <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Email</span>
<p className="text-slate-800 font-medium mt-1">{session.customerEmail}</p> <p className="text-gray-800 font-medium mt-1">{session.customerEmail}</p>
</div> </div>
)} )}
<div className="md:col-span-2"> <div className="md:col-span-2">
<span className="text-xs uppercase tracking-wide text-slate-500 font-semibold">Date</span> <span className="text-xs uppercase tracking-wide text-gray-500 font-semibold">Date</span>
<p className="text-slate-800 font-medium mt-1"> <p className="text-gray-800 font-medium mt-1">
{new Date().toLocaleDateString('en-US', { {new Date().toLocaleDateString('en-US', {
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
@ -425,11 +418,11 @@ export default function CheckoutSuccessPage() {
transition={{ delay: 0.35 }} transition={{ delay: 0.35 }}
className="mt-6" className="mt-6"
> >
<div className="bg-white rounded-3xl shadow-2xl overflow-hidden p-8 print:rounded-none print:shadow-none print:border-none print-page-break"> <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-slate-800 mb-2 text-center print:text-xl"> <h2 className="text-2xl font-bold text-gray-800 mb-2 text-center print:text-xl">
Your Carbon Offset Distribution Your Carbon Offset Distribution
</h2> </h2>
<p className="text-slate-600 text-center mb-8 print:text-sm print:mb-4"> <p className="text-gray-600 text-center mb-8 print:text-sm print:mb-4">
Your {order.tons} tons of CO₂ offsets are distributed across these verified projects: Your {order.tons} tons of CO₂ offsets are distributed across these verified projects:
</p> </p>
<RechartsPortfolioPieChart <RechartsPortfolioPieChart
@ -447,7 +440,7 @@ export default function CheckoutSuccessPage() {
transition={{ delay: 0.4 }} transition={{ delay: 0.4 }}
className="mt-6" className="mt-6"
> >
<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"> <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">
<CarbonImpactComparison tons={order.tons} variant="success" count={3} /> <CarbonImpactComparison tons={order.tons} variant="success" count={3} />
</div> </div>
</motion.div> </motion.div>
@ -461,19 +454,19 @@ export default function CheckoutSuccessPage() {
> >
<button <button
onClick={() => router.push('/')} onClick={() => router.push('/')}
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" className="px-8 py-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-bold text-center"
> >
Return to Home Return to Home
</button> </button>
<button <button
onClick={() => router.push('/calculator')} onClick={() => router.push('/calculator')}
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" className="px-8 py-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-bold text-center"
> >
Calculate Another Offset Calculate Another Offset
</button> </button>
<button <button
onClick={() => window.print()} onClick={() => window.print()}
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" 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"
> >
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <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" /> <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" />
@ -490,8 +483,8 @@ export default function CheckoutSuccessPage() {
transition={{ delay: 0.6 }} transition={{ delay: 0.6 }}
className="text-center mt-6 no-print" className="text-center mt-6 no-print"
> >
<div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg inline-block"> <div className="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg inline-block">
<p className="text-blue-800 font-medium"> <p className="text-green-800 font-medium">
<svg className="w-5 h-5 inline mr-2" fill="currentColor" viewBox="0 0 20 20"> <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="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" /> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
@ -507,7 +500,7 @@ export default function CheckoutSuccessPage() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.7 }} transition={{ delay: 0.7 }}
className="text-center text-slate-500 text-sm mt-8 pb-6 no-print" className="text-center text-gray-500 text-sm mt-8 pb-6 no-print"
> >
<p>Thank you for making a positive impact on our planet</p> <p>Thank you for making a positive impact on our planet</p>
<p className="mt-2">Questions? Contact us at support@puffinoffset.com</p> <p className="mt-2">Questions? Contact us at support@puffinoffset.com</p>