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

updates

Browse Source
This commit is contained in:
Matt 2025-06-03 18:18:42 +02:00
parent 1f2e0e8222
commit 8ff0ba44f8
2 changed files with 7 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -85,8 +85,8 @@ function App() {
switch (currentPage) { switch (currentPage) {
case 'calculator': case 'calculator':
return ( return (
<div className="flex flex-col items-center px-4 sm:px-6"> <div className="flex flex-col items-center">
<div className="text-center mb-12 max-w-2xl"> <div className="text-center mb-12 max-w-4xl">
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4"> <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
Calculate & Offset Your Yacht's Carbon Footprint Calculate & Offset Your Yacht's Carbon Footprint
</h2> </h2>
@ -95,7 +95,7 @@ function App() {
</p> </p>
</div> </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 <TripCalculator
vesselData={sampleVessel} vesselData={sampleVessel}
onOffsetClick={handleOffsetClick} onOffsetClick={handleOffsetClick}
@ -212,7 +212,7 @@ function App() {
</div> </div>
</header> </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"> <AnimatePresence mode="wait">
<motion.div <motion.div
key={currentPage + (showOffsetOrder ? '-offset' : '')} key={currentPage + (showOffsetOrder ? '-offset' : '')}

32
src/components/OffsetOrder.tsx
View File

@ -152,7 +152,7 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
return ( return (
<motion.div <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 }} initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }} 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 && ( {portfolio.projects && portfolio.projects.length > 0 && (
<motion.div <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 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }} transition={{ duration: 0.5, delay: 0.3 }}
@ -407,39 +407,13 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
e.stopPropagation(); e.stopPropagation();
handleProjectButtonClick(project); 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" 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"
onMouseDown={(e) => e.preventDefault()}
onTouchStart={(e) => e.preventDefault()}
> >
<span>View Project Details</span> <span>View Project Details</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg> </svg>
</button> </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>
))} ))}
</motion.div> </motion.div>