Fix Vue website to match HTML mockup styling
All checks were successful
build-website / build (push) Successful in 1m34s
All checks were successful
build-website / build (push) Successful in 1m34s
- 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>
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-logo animate-fade-in">
|
||||
<img src="/HARBOR-SMITH-white.png" alt="Harbor Smith" style="height: 250px; margin: 40px 0;">
|
||||
<img src="/HARBOR-SMITH-white.png" alt="Harbor Smith">
|
||||
</div>
|
||||
|
||||
<div class="trust-badge animate-fade-in">
|
||||
@@ -41,7 +41,7 @@
|
||||
<LucideStar class="star-filled" />
|
||||
</span>
|
||||
</div>
|
||||
<span>Trusted by 0+ seafarers</span>
|
||||
<span>Trusted by {{ animatedCount }}+ seafarers</span>
|
||||
</div>
|
||||
|
||||
<p class="hero-subtext animate-fade-up-delay">
|
||||
@@ -61,13 +61,6 @@
|
||||
View Our Services
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scroll-indicator">
|
||||
<span>Scroll to explore</span>
|
||||
<div class="scroll-arrow">
|
||||
<LucideChevronDown />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -81,6 +74,7 @@ import { useRipple } from '~/composables/useRipple'
|
||||
const videoLoaded = ref(false)
|
||||
const videoContainer = ref<HTMLElement | null>(null)
|
||||
const videoElement = ref<HTMLVideoElement | null>(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()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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' },
|
||||
|
||||
Reference in New Issue
Block a user