From 6aa4284c7bb29bfc9b11ea3879d6292b4f4296cc Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 23 Sep 2025 00:00:21 +0200
Subject: [PATCH] Fix marina image top alignment to match heading

- Adjusted image container to align precisely with Connect with us heading
- Top of image now starts at the same level as the C in the heading
- Used CSS grid and proper height calculation for accurate alignment
- Changed object-position to center top for better visual alignment
---
 src/app/page.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6981b4d..893d9b2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -539,27 +539,29 @@ export default function Home() {
           // Desktop Layout - Responsive with aligned image
           <div className="min-h-screen flex flex-col relative pt-[10vh] lg:pt-[15vh] xl:pt-[200px]">
             <div className="w-full max-w-[1600px] mx-auto px-8 lg:px-[80px]">
-              <div className="flex flex-col lg:flex-row gap-8 lg:gap-0">
+              <div className="flex flex-col lg:grid lg:grid-cols-[45%_55%] gap-8 lg:gap-0">
                 {/* Left Side - Marina Image Container */}
-                <div className="order-2 lg:order-1 w-full lg:w-[45%]">
-                  <div className="lg:pr-[40px] h-full">
-                    {/* On mobile: fixed height, on desktop: match form height */}
-                    <div className="relative h-[400px] lg:h-full">
-                      <Image
-                        src="/marina.jpg"
-                        alt="Port Amador Marina"
-                        fill
-                        className="object-cover object-center"
-                        sizes="(max-width: 1024px) 100vw, 45vw"
-                        priority
-                        style={{ objectPosition: 'center' }}
-                      />
+                <div className="order-2 lg:order-1">
+                  <div className="lg:pr-[40px] h-[400px] lg:h-auto">
+                    {/* Image positioned to align with heading */}
+                    <div className="relative h-full lg:sticky lg:top-0">
+                      <div className="absolute inset-0 lg:relative lg:h-[calc(72px+3rem+400px)]">
+                        <Image
+                          src="/marina.jpg"
+                          alt="Port Amador Marina"
+                          fill
+                          className="object-cover"
+                          sizes="(max-width: 1024px) 100vw, 45vw"
+                          priority
+                          style={{ objectPosition: 'center top' }}
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
 
                 {/* Right Side - Form Section */}
-                <div className="order-1 lg:order-2 w-full lg:w-[55%]">
+                <div className="order-1 lg:order-2">
                   <div className="lg:pl-[40px]">
                     {/* Form content wrapper */}
                     <div className="flex flex-col">