From 32b3083b77f3cea56d8f497a070f3b7c9f4669c8 Mon Sep 17 00:00:00 2001 From: matt Date: Fri, 19 Sep 2025 01:06:21 +0200 Subject: [PATCH] Fix Vue website to match HTML mockup styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- apps/website/assets/css/main.css | 30 ++++- apps/website/assets/css/voyage-layout.css | 154 ++++++++++++++++++++-- apps/website/components/HeroSection.vue | 39 ++++-- apps/website/nuxt.config.ts | 7 +- 4 files changed, 201 insertions(+), 29 deletions(-) diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css index 21a425a..2b347fa 100644 --- a/apps/website/assets/css/main.css +++ b/apps/website/assets/css/main.css @@ -217,15 +217,39 @@ html { } .hero-overlay { - @apply absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/40; + @apply absolute inset-0; + z-index: 2; + } + + /* Hero Logo Styles */ + .hero-logo img { + height: 250px; + margin: 40px 0; + width: auto; + display: block; + } + + @media (max-width: 768px) { + .hero-logo img { + height: auto; + max-height: 150px; + width: 90%; + max-width: 280px; + margin: 20px auto; + } } .gradient-warm { - background: linear-gradient(135deg, rgba(180, 139, 78, 0.2) 0%, rgba(201, 165, 111, 0.1) 100%); + background: linear-gradient(to bottom, + rgba(0, 31, 63, 0.3) 0%, + rgba(0, 31, 63, 0.5) 50%, + rgba(0, 31, 63, 0.7) 100%); } .gradient-depth { - background: linear-gradient(to top, rgba(30, 58, 95, 0.3) 0%, transparent 100%); + background: linear-gradient(to right, + rgba(220, 20, 60, 0.1) 0%, + transparent 100%); } .hero-content { diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css index 716dda8..b19c6e3 100644 --- a/apps/website/assets/css/voyage-layout.css +++ b/apps/website/assets/css/voyage-layout.css @@ -117,6 +117,7 @@ img { height: 20px; display: inline-block; margin-right: 8px; + flex-shrink: 0; } .spec-icon { @@ -501,6 +502,16 @@ html { .stars { color: var(--warm-yellow); font-size: 1rem; + display: inline-flex; + gap: 2px; +} + +/* Ensure stars icons display horizontally */ +.stars i, +.story-content .stars i, +.testimonial-highlight .stars i { + display: inline-block; + margin-right: 2px; } .hero-headline { @@ -1090,7 +1101,20 @@ html { @media (max-width: 640px) { .service-stats { - grid-template-columns: 1fr; + grid-template-columns: repeat(2, 1fr); /* 2x2 grid on mobile */ + gap: 1rem; + } + + .stat-item { + padding: 1rem; + } + + .stat-item .stat-number { + font-size: 2rem; + } + + .stat-item .stat-label { + font-size: 0.8rem; } } @@ -1332,11 +1356,31 @@ html { transition: var(--transition); } +/* Ensure non-featured cards always show with visible background */ +.booking-card:not(.featured) { + background: rgba(255, 255, 255, 0.95); + border: 2px solid var(--white); +} + +.booking-card:not(.featured) h3, +.booking-card:not(.featured) p { + color: var(--primary-blue); +} + +.booking-card:not(.featured) .booking-icon { + color: var(--warm-orange); +} + .booking-card:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); } +.booking-card:not(.featured):hover { + background: rgba(255, 255, 255, 1); + transform: translateY(-5px); +} + .booking-card.featured { background: var(--gradient-warm); border: none; @@ -1362,18 +1406,29 @@ html { .btn-booking { width: 100%; padding: 0.75rem 1.5rem; - background: rgba(255, 255, 255, 0.2); - color: var(--white); + background: var(--white); + color: var(--primary-blue); border: 2px solid var(--white); border-radius: 50px; font-weight: 600; cursor: pointer; transition: var(--transition); + opacity: 1; + visibility: visible; +} + +/* Non-featured card buttons */ +.booking-card:not(.featured) .btn-booking { + background: var(--primary-blue); + color: var(--white); + border: 2px solid var(--primary-blue); } .btn-booking:hover { - background: var(--white); - color: var(--primary-blue); + background: var(--gradient-warm); + color: var(--white); + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .btn-booking.primary { @@ -1401,12 +1456,22 @@ html { } .footer-content { - display: grid; - grid-template-columns: 2fr 1fr 1fr; + display: flex; + justify-content: space-between; gap: var(--space-2xl); margin-bottom: var(--space-lg); } +.footer-brand { + flex: 1; + max-width: 500px; +} + +.footer-contact { + flex: 0 0 auto; + margin-left: auto; +} + .footer-brand h3 { font-family: var(--font-display); font-size: 2rem; @@ -1582,23 +1647,84 @@ html { /* Responsive */ @media (max-width: 768px) { + .hero-voyage { + padding: 60px 15px; + min-height: 100vh; + } + + .hero-content { + padding: 0 15px; + overflow-x: hidden; + } + + /* Responsive logo */ + .hero-logo { + width: 100%; + max-width: 90%; + margin: 0 auto; + } + + .hero-logo img { + height: auto; + max-height: 150px; + width: 100%; + max-width: 280px; + margin: 20px auto; + object-fit: contain; + } + .hero-headline { - font-size: 3rem; + font-size: 2.25rem; + line-height: 1.2; + margin-bottom: 1rem; + padding: 0 10px; } - + .hero-subtext { - font-size: 1rem; + font-size: 0.95rem; + padding: 0 10px; + margin-bottom: 1.5rem; + line-height: 1.6; } - + .hero-actions { flex-direction: column; width: 100%; - padding: 0 var(--space-md); + padding: 0; + gap: 0.75rem; + align-items: center; } - + + /* Smaller buttons on mobile */ .btn-primary-warm, .btn-secondary-warm { - width: 100%; + width: 85%; + max-width: 260px; + padding: 0.65rem 1rem; + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + gap: 0.5rem; + } + + .btn-primary-warm .btn-icon, + .btn-secondary-warm .btn-icon { + font-size: 0.875rem; + width: 16px; + height: 16px; + margin-right: 0; + } + + .trust-badge { + padding: 0.4rem 1rem; + font-size: 0.8rem; + margin-bottom: 1.5rem; + } + + .scroll-indicator { + display: none; } .welcome-content { diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue index 6f0b65d..7f2adc0 100644 --- a/apps/website/components/HeroSection.vue +++ b/apps/website/components/HeroSection.vue @@ -28,7 +28,7 @@
@@ -41,7 +41,7 @@
- Trusted by 0+ seafarers + Trusted by {{ animatedCount }}+ seafarers

@@ -61,13 +61,6 @@ View Our Services - -

- Scroll to explore -
- -
-
@@ -81,6 +74,7 @@ import { useRipple } from '~/composables/useRipple' const videoLoaded = ref(false) const videoContainer = ref(null) const videoElement = ref(null) +const animatedCount = ref(0) useParallax(videoContainer, 0.5) useIntersectionAnimations() @@ -137,9 +131,36 @@ const initSmoothScroll = () => { }) } +const animateCount = () => { + const duration = 1500 // 1.5 seconds + const targetCount = 100 + const startTime = Date.now() + + const updateCount = () => { + const elapsed = Date.now() - startTime + const progress = Math.min(elapsed / duration, 1) + + // Easing function for smooth animation + const easeOutQuart = 1 - Math.pow(1 - progress, 4) + animatedCount.value = Math.floor(easeOutQuart * targetCount) + + if (progress < 1) { + requestAnimationFrame(updateCount) + } else { + animatedCount.value = targetCount + } + } + + // Start animation after a small delay for better effect + setTimeout(() => { + updateCount() + }, 500) +} + onMounted(() => { handleVideoVisibility() initSmoothScroll() + animateCount() }) diff --git a/apps/website/nuxt.config.ts b/apps/website/nuxt.config.ts index 9d50d59..de2cb26 100644 --- a/apps/website/nuxt.config.ts +++ b/apps/website/nuxt.config.ts @@ -115,15 +115,16 @@ export default defineNuxtConfig({ // App configuration app: { head: { - title: 'Harbor Smith - Premium Yacht Charter & Maintenance', + title: 'Harbor Smith - Personalized Service Maintenance For Your Boat', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, - { name: 'description', content: 'Experience luxury yacht charters and professional maintenance services in San Francisco Bay with Harbor Smith.' }, + { name: 'description', content: 'Professional boat maintenance services in San Francisco Bay. Mobile service at your dock.' }, { name: 'format-detection', content: 'telephone=no' } ], link: [ - { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } + { rel: 'icon', type: 'image/png', href: '/HARBOR-SMITH-navy.png' }, + { rel: 'apple-touch-icon', href: '/HARBOR-SMITH-navy.png' } ] }, pageTransition: { name: 'page', mode: 'out-in' },