From 8ff0ba44f867592b6d84632518c110212976d2d6 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 3 Jun 2025 18:18:42 +0200
Subject: [PATCH] updates

---
 src/App.tsx                    |  8 ++++----
 src/components/OffsetOrder.tsx | 32 +++-----------------------------
 2 files changed, 7 insertions(+), 33 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fc5288f..9a3a466 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -85,8 +85,8 @@ function App() {
     switch (currentPage) {
       case 'calculator':
         return (
-          <div className="flex flex-col items-center px-4 sm:px-6">
-            <div className="text-center mb-12 max-w-2xl">
+          <div className="flex flex-col items-center">
+            <div className="text-center mb-12 max-w-4xl">
               <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
                 Calculate & Offset Your Yacht's Carbon Footprint
               </h2>
@@ -95,7 +95,7 @@ function App() {
               </p>
             </div>
 
-            <div className="flex flex-col items-center w-full max-w-2xl space-y-8">
+            <div className="flex flex-col items-center w-full max-w-4xl space-y-8">
               <TripCalculator 
                 vesselData={sampleVessel}
                 onOffsetClick={handleOffsetClick}
@@ -212,7 +212,7 @@ function App() {
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto py-8 sm:py-12 overflow-hidden">
+      <main className="max-w-[1600px] mx-auto py-8 sm:py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
         <AnimatePresence mode="wait">
           <motion.div
             key={currentPage + (showOffsetOrder ? '-offset' : '')}
diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index 63f4de0..6459f3a 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -152,7 +152,7 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
 
   return (
     <motion.div 
-      className="bg-white rounded-lg shadow-xl p-8 max-w-4xl w-full relative"
+      className="bg-white rounded-lg shadow-xl p-4 sm:p-8 max-w-7xl w-full relative mx-auto"
       initial={{ opacity: 0, y: 30 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
@@ -346,7 +346,7 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
             
             {portfolio.projects && portfolio.projects.length > 0 && (
               <motion.div 
-                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"
+                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 mb-6"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.5, delay: 0.3 }}
@@ -407,39 +407,13 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                         e.stopPropagation();
                         handleProjectButtonClick(project);
                       }}
-                      className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2 group-hover:scale-105 transform transition-transform"
-                      onMouseDown={(e) => e.preventDefault()}
-                      onTouchStart={(e) => e.preventDefault()}
+                      className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"
                     >
                       <span>View Project Details</span>
                       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                       </svg>
                     </button>
-
-                    {/* Fallback click area - covers entire card */}
-                    <div
-                      className="absolute inset-0 cursor-pointer z-10"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleProjectClick(project, e);
-                      }}
-                      onTouchEnd={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleProjectClick(project);
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault();
-                          handleProjectClick(project);
-                        }
-                      }}
-                      role="button"
-                      tabIndex={0}
-                      aria-label={`View details for ${project.name}`}
-                    />
                   </motion.div>
                 ))}
               </motion.div>