Optimizations implemented:
- Added hardware acceleration for smooth animations (will-change, transform3d)
- Optimized touch targets for mobile (minimum 48x48px)
- Added explicit image dimensions to prevent CLS
- Implemented comprehensive SEO meta tags and Open Graph
- Added structured data for LocalBusiness and Service schemas
- Configured resource hints (preconnect, dns-prefetch, preload)
- Added lazy loading to non-critical images
- Improved button accessibility with touch-action: manipulation
These optimizations improve Core Web Vitals, mobile UX, and SEO visibility.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace easeInOutSine with linear easing (return t)
- Reduce duration from 1200ms to 800ms for snappier feel
- Update all component references to use new duration
Linear easing provides constant-speed scrolling without any
acceleration or deceleration, eliminating the jarring effect.
- Replace easeInOutQuad with easeInOutSine for natural motion
- Add user interruption handling (cancel on wheel/touch/keyboard)
- Add accessibility support for prefers-reduced-motion
- Optimize duration from 1800ms to 1200ms
- Add proper cleanup of event listeners and animation frames
- Update all component references to use new duration
The sine-based easing creates smooth, consistent motion throughout
the entire scroll duration without jarring speed changes.
- Changed from easeInOutCubic to easeInOutQuad for smoother motion
- Increased duration from 1.5 to 1.8 seconds
- Fixed jerky acceleration/deceleration issue
- Now provides consistent, smooth scrolling throughout entire motion
The scrolling is now properly smooth without the sudden speed changes.
Features added:
- Custom smooth scroll composable with adjustable duration (1.5 seconds)
- Replaced native browser smooth scroll with custom implementation
- Added 'Scroll to explore' text with chevron at bottom of hero
- Animated bounce effect for scroll indicator
- Chevron icon with subtle animation
- Click handler to scroll to services section
- Hidden on mobile for cleaner experience
All anchor links now scroll more slowly and smoothly for better UX.
- Made navbar brand (logo + title) clickable with cursor pointer
- Added scrollToTop function to smoothly scroll to page top
- Especially useful on mobile devices for quick navigation
Users can now tap the Harbor Smith logo or title to return to top.
- Removed app.vue file that was interfering with navbar scroll behavior
- Restored min-h-screen in default.vue layout
- Restored min-height in body CSS
- Kept the mobile footer fixes which are working correctly
The header now properly changes to white background when scrolling past hero.
Hero Section Viewport Fix:
- Changed body from min-height to height:100% for proper iOS inheritance
- Updated layout wrapper from min-h-screen to h-full
- Created app.vue with explicit height wrapper for Nuxt root
- Maintains complete height inheritance chain: html > body > #__nuxt > layout
Mobile Footer Fix:
- Fixed CSS conflict: removed grid-template-columns from flex container
- Added proper flex column layout for mobile stacking
- Removed margin-left:auto that was causing horizontal overflow
- Added word-wrap and padding for proper text wrapping
- Centered all footer content on mobile devices
These changes ensure the hero section fills the entire iPhone Safari viewport
including the URL bar area, and the footer displays correctly without cutoff.
- Removed safe area padding from .hero-voyage container (was reducing height)
- Simplified video container positioning to fill parent (top:0, bottom:0)
- Applied safe area padding only to .hero-content to protect text/buttons
- Container now uses full viewport height without reduction
The issue was that adding safe area padding to the container itself was
reducing the available height instead of extending it. Safe areas should
only protect content from being obscured, not shrink containers.
- Add viewport-fit=cover to meta tag for safe area extension
- Implement iOS-specific height handling with -webkit-fill-available
- Use dynamic viewport height (100dvh) for proper mobile behavior
- Extend video container beyond safe areas with negative positioning
- Add safe area padding with env() variables for content positioning
- Include mobile-specific @supports queries for better compatibility
This ensures the hero section fills the entire iPhone viewport from top to bottom, extending behind the status bar and home indicator while keeping content readable within safe areas.
- Remove poster image to eliminate jarring flash
- Add white gradient overlay that fades when video ready
- Implement smooth 800ms transition for premium UX
- Add video preload link tag for faster loading
- Works seamlessly on both mobile and desktop
The white overlay approach provides a clean loading experience that matches the luxury brand aesthetic while the video loads in the background.
- Add loadeddata and play events in addition to canplaythrough
- Add fallback timeout to ensure video becomes visible after 1.5s
- This ensures video will display even if autoplay events don't fire properly
- Change video preload from metadata to auto for faster loading
- Add fade-in transition for smooth video appearance
- Remove transform scale(1.1) that caused horizontal overflow
- Add comprehensive overflow-x: hidden to html, body, and hero containers
- Add max-width: 100vw constraints at multiple levels
- Add contain: layout to hero section for better overflow control
- Implement proper loading states to prevent fallback image flash
- Implement dynamic viewport units (dvh) for proper mobile scaling
- Add fluid typography using clamp() functions
- Fix iOS-specific viewport issues with -webkit-fill-available
- Add scroll-margin-top to prevent section overlaps
- Improve touch targets to 50px minimum for mobile UX
- Add CSS custom properties for consistent responsive spacing
- Fix hero section to properly fill mobile viewport
- Update service cards for better mobile layout
- Increase hero content size for better mobile visibility
- Expand buttons and touch targets to recommended sizes
- Fix section padding and container widths for mobile
- Ensure all cards and grids use full width on mobile
- Update typography scaling for better readability
- Set proper viewport base font size (16px)
- Add comprehensive mobile layout fixes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update viewport meta to prevent zoom-out issues
- Add video preload and smooth fallback transitions
- Implement iOS overscroll bounce prevention
- Center service offering buttons properly
- Add mobile-specific padding and touch target sizing
- Optimize video loading with canplaythrough event
- Add fade-out transition for fallback image
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix testimonial stars to display horizontally
- Make booking section buttons always visible
- Align footer Get in Touch section to the right
- Add proper video overlay gradients for text visibility
- Fix booking card visibility with white backgrounds
- Improve mobile responsiveness with smaller buttons
- Create 2x2 stats grid for mobile view
- Add Harbor Smith logo as favicon
- Remove scroll indicator from hero section
- Add animated counter for seafarers (0 to 100+)
- Center and resize mobile buttons properly
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
