matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reflow hero layout and update iOS status bar style
All checks were successful
build-website / build (push) Successful in 1m37s
Details

Browse Source
This commit is contained in:
matt
2025-09-21 15:42:39 +02:00
parent 36046ca864
commit c9e8dce4d4
3 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/website/components/HeroSection.vue
View File

@@ -31,27 +31,28 @@
</div>
<div class="hero-content" :class="{ 'is-ready': videoLoaded }">
<div class="hero-logo animate-fade-in">
<img src="/HARBOR-SMITH-white.png" alt="Harbor Smith" width="400" height="250">
</div>
<div class="hero-main">
<div class="hero-logo animate-fade-in">
<img src="/HARBOR-SMITH-white.png" alt="Harbor Smith" width="400" height="250">
</div>
<p class="hero-subtext animate-fade-up-delay">
<span style="font-size: 1.5rem; font-weight: 500; text-transform: none; letter-spacing: normal; margin-bottom: 10px; display: block;">
Personalized Service Maintenance for Your Boat
</span>
Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!
</p>
<p class="hero-subtext animate-fade-up-delay">
<span style="font-size: 1.5rem; font-weight: 500; text-transform: none; letter-spacing: normal; margin-bottom: 10px; display: block;">
Personalized Service Maintenance for Your Boat
</span>
Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!
</p>
<div class="hero-actions animate-fade-up-delay-2">
<button class="btn-primary-warm" @click="handlePhoneClick">
<LucidePhone class="btn-icon" />
Call (510) 701-2535
</button>
<button class="btn-secondary-warm" @click="handleServicesClick">
<LucideWrench class="btn-icon" />
View Our Services
</button>
<div class="hero-actions animate-fade-up-delay-2">
<button class="btn-primary-warm" @click="handlePhoneClick">
<LucidePhone class="btn-icon" />
Call (510) 701-2535
</button>
<button class="btn-secondary-warm" @click="handleServicesClick">
<LucideWrench class="btn-icon" />
View Our Services
</button>
</div>
</div>
<!-- Scroll to explore indicator -->
@@ -205,11 +206,20 @@ onMounted(() => {
max-width: 100vw !important;
}
.hero-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
width: min(720px, 100%);
margin: 0 auto;
}
/* Scroll to explore indicator */
.scroll-to-explore {
margin-top: auto;
margin-bottom: calc(max(var(--safe-area-cover-bottom, 0px), var(--space-lg)));
margin-bottom: calc(max(var(--safe-area-cover-bottom, 0px), clamp(2.5rem, 10vh, 4rem)));
display: flex;
flex-direction: column;
align-items: center;