Fix mobile logo animation and layout positioning

- Remove bounce effect from logo animation by fixing endY calculation
- Adjust logo final position to 10px from top to avoid text collision
- Synchronize scroll anchor with animation endpoint
- Reduce form padding and tighten spacing between elements
- Make submit button more compact
- Ensure footer sits closer to bottom of page
- Update marina image to v3 with object-bottom positioning

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -0,0 +1,18 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__playwright__browser_navigate",
+      "Bash(netstat:*)",
+      "Bash(findstr:*)",
+      "Bash(npm run dev:*)",
+      "Bash(npm install)",
+      "mcp__playwright__browser_resize",
+      "mcp__serena__search_for_pattern",
+      "Bash(taskkill:*)",
+      "mcp__zen__analyze",
+      "mcp__playwright__browser_tabs"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

src/app/page.tsx

@@ -105,7 +105,7 @@ export default function Home() {
   // Memoized animation constants
   const animationConstants = useMemo(() => ({
     mobile: {
-      targetTopPosition: -50,  // Logo ends even higher for better spacing
+      targetTopPosition: 10,  // Logo settles much higher to avoid text
       startYFactor: 0.20,  // Moved up to position logo higher on mobile
       finalScale: 0.5,
       fadeThreshold: 5
@@ -143,7 +143,7 @@ export default function Home() {
   ): Partial<CSSStyleDeclaration> => {
     const { targetTopPosition, startYFactor, finalScale } = animationConstants.mobile;
     const startY = windowHeight * startYFactor;
-    const endY = targetTopPosition + (logoHeight * finalScale) / 2;
+    const endY = targetTopPosition;
     const totalDistance = startY - endY;
     const animationEndScroll = contactTop;
 
@@ -282,11 +282,15 @@ export default function Home() {
       return;
     }
 
-    console.log('Starting scroll animation to:', contactSectionRef.current.offsetTop);
+    // For mobile, adjust scroll position to account for the padding
+    const scrollOffset = isMobile ? 0 : 0; // No offset - scroll exactly to where animation ends
+    const targetPosition = contactSectionRef.current.offsetTop + scrollOffset;
+
+    console.log('Starting scroll animation to:', targetPosition);
 
     // Use native smooth scrolling
     window.scrollTo({
-      top: contactSectionRef.current.offsetTop,
+      top: targetPosition,
       behavior: 'smooth'
     });
   };
@@ -513,10 +517,10 @@ export default function Home() {
       >
         {isMobile ? (
           // Mobile Layout - Stacked with Image
-          <div className="flex flex-col min-h-[85vh] pt-[60px]">
+          <div className="flex flex-col min-h-[85vh] pt-[120px]">
             {/* Form Section */}
             <div className="px-8 pb-12">
-              <h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[40px] mb-8 font-normal text-center">
+              <h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[40px] mb-0 font-normal text-center">
                 Connect with us
               </h2>
               <Form {...form}>
@@ -600,10 +604,10 @@ export default function Home() {
                       </FormItem>
                     )}
                   />
-                  <div className="pt-3">
+                  <div className="pt-1">
                     <Button
                       type="submit"
-                      className="w-full bg-[#C6AE97] text-[#1B233B] hover:bg-[#D4C1AC] font-['bill_corporate_medium'] font-medium text-[16px] uppercase tracking-wider py-3 rounded-[5px]"
+                      className="w-full bg-[#C6AE97] text-[#1B233B] hover:bg-[#D4C1AC] font-['bill_corporate_medium'] font-medium text-[16px] uppercase tracking-wider py-2 rounded-[5px]"
                     >
                       SUBMIT
                     </Button>
@@ -616,10 +620,10 @@ export default function Home() {
             <div className="relative w-full h-[192px] -mt-6 px-4">
               <div className="relative w-full h-full">
                 <Image
-                  src="/marina_cropped.jpg"
+                  src="/marina_cropped_v3.jpg"
                   alt="Port Amador Marina"
                   fill
-                  className="object-cover object-center"
+                  className="object-cover object-bottom"
                   sizes="(max-width: 768px) 90vw, 100vw"
                   priority
                 />
@@ -627,7 +631,7 @@ export default function Home() {
             </div>
 
             {/* Footer Section */}
-            <div className="px-8 py-8 mt-auto">
+            <div className="px-8 pt-8 pb-4 mt-auto">
               <div className="flex justify-between items-end">
                 <div className="flex flex-col space-y-0">
                   <a href="tel:+13109132597" className="font-['bill_corporate_medium'] font-light text-[14px] text-[#C6AE97] hover:text-[#D4C1AC] transition-colors">