Design Language tweaks
This commit is contained in:
@@ -1,254 +1,246 @@
|
||||
<script lang="ts">
|
||||
import { reveal } from '$lib/actions/reveal';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import { getEnhancedImage } from '$lib/enhanced-images';
|
||||
import type { FounderStoryContent } from '$lib/types';
|
||||
|
||||
export let founderStory: FounderStoryContent;
|
||||
|
||||
const founderStoryParagraphs = [
|
||||
'Goodwalk started with my own little dog and the kind of relationship I have always had with animals. Growing up in Italy with a German Shepherd, I saw early on how much joy, comfort, personality, and companionship dogs bring into a home. They are not just pets. They become part of your family and your daily life.',
|
||||
'When I moved to Auckland, I noticed a lot of dog walking felt rushed, overcrowded, or impersonal, especially for smaller dogs. So I built Goodwalk around the kind of care I would want for my own dog: familiar faces, safe and social little groups, lots of fun, and genuine relationships with every dog we walk.',
|
||||
'The Tiny Gang is built around routine, trust, and dogs having the absolute best part of their day together. Older dogs help younger ones settle in, nervous dogs build confidence, and playful dogs get to burn energy with their friends.',
|
||||
'You know exactly who is caring for your dog. Your dog knows who is at the door. And you come home to a happy, fulfilled dog that has had a proper adventure. Ready to join the Tiny Gang?'
|
||||
];
|
||||
|
||||
$: founderStoryEnhanced = getEnhancedImage(founderStory.imageUrl);
|
||||
</script>
|
||||
|
||||
<section id="promise">
|
||||
<div class="promise-inner">
|
||||
<div class="promise-text">
|
||||
<span class="promise-kicker">Founder story</span>
|
||||
<div class="promise-mobile-intro">
|
||||
<div class="promise-mobile-avatar">
|
||||
<section id="promise" use:reveal={{ delay: 20 }} class="reveal-block">
|
||||
<div class="founder-inner">
|
||||
<article class="founder-note">
|
||||
<span class="eyebrow founder-kicker">A note from Aless</span>
|
||||
|
||||
<h2 class="founder-heading">
|
||||
<span class="founder-heading-main">Hi, Welcome to Goodwalk.</span>
|
||||
</h2>
|
||||
|
||||
<div class="founder-body">
|
||||
{#each founderStoryParagraphs as paragraph}
|
||||
<p>{paragraph}</p>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="founder-signoff">
|
||||
<div class="founder-avatar">
|
||||
{#if founderStoryEnhanced}
|
||||
<enhanced:img
|
||||
class="founder-avatar-img"
|
||||
src={founderStoryEnhanced}
|
||||
alt={founderStory.imageAlt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<img src={founderStory.imageUrl} alt={founderStory.imageAlt} loading="lazy" decoding="async" />
|
||||
<img
|
||||
class="founder-avatar-img"
|
||||
src={founderStory.imageUrl}
|
||||
alt={founderStory.imageAlt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="promise-mobile-caption">Auckland Central walks led personally by Aless.</p>
|
||||
<div class="founder-signoff-text">
|
||||
<span class="founder-name">Aless</span>
|
||||
<span class="founder-role">Goodwalk founder</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="promise-heading">
|
||||
<span class="promise-heading-desktop">
|
||||
<span class="promise-title-main">{founderStory.title}</span>
|
||||
<br />
|
||||
<span class="promise-title-highlight">{founderStory.subtitle}</span>
|
||||
</span>
|
||||
<span class="promise-heading-mobile">
|
||||
<span class="promise-title-main">{founderStory.title}</span>
|
||||
<span class="promise-title-highlight">{founderStory.subtitle}</span>
|
||||
</span>
|
||||
</h2>
|
||||
<a class="founder-contact-note" href="mailto:info@goodwalk.co.nz" aria-label="Email Aless at Goodwalk">
|
||||
<span class="founder-contact-wave" aria-hidden="true">👋</span>
|
||||
<span>If you are unsure about anything, feel free to email me anytime.</span>
|
||||
</a>
|
||||
|
||||
{#each founderStory.body as paragraph, idx}
|
||||
<p>
|
||||
{paragraph}
|
||||
{#if idx === founderStory.body.length - 1}
|
||||
<strong>{founderStory.emphasis}</strong>
|
||||
{/if}
|
||||
</p>
|
||||
{/each}
|
||||
|
||||
<a href={founderStory.cta.href} class="btn btn-green">{founderStory.cta.label}</a>
|
||||
</div>
|
||||
|
||||
<div class="promise-img">
|
||||
<div class="promise-img-frame">
|
||||
{#if founderStoryEnhanced}
|
||||
<enhanced:img
|
||||
src={founderStoryEnhanced}
|
||||
alt={founderStory.imageAlt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<img src={founderStory.imageUrl} alt={founderStory.imageAlt} loading="lazy" decoding="async" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<a href={founderStory.cta.href} class="btn btn-green btn-with-arrow founder-cta">
|
||||
{founderStory.cta.label}
|
||||
<Icon name="fas fa-arrow-right" />
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.promise-kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 14px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(33, 48, 33, 0.07);
|
||||
color: var(--gw-green);
|
||||
font-family: var(--font-head);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
|
||||
/* A quiet, letter-style sign-off — left-aligned, one clean panel, no ornament. */
|
||||
.founder-inner {
|
||||
max-width: var(--max-w);
|
||||
margin: 0 auto;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.promise-heading {
|
||||
margin: 0 0 22px;
|
||||
max-width: 14ch;
|
||||
.founder-note {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
padding: 42px 52px 34px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(17, 20, 24, 0.08);
|
||||
border-radius: 28px;
|
||||
box-shadow: var(--shadow-panel-elevated);
|
||||
}
|
||||
|
||||
.promise-mobile-intro {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.promise-heading-desktop {
|
||||
.founder-kicker {
|
||||
display: block;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.promise-heading-mobile {
|
||||
display: none;
|
||||
.founder-heading {
|
||||
margin: 0 0 26px;
|
||||
}
|
||||
|
||||
.promise-heading-mobile .promise-title-main,
|
||||
.promise-heading-mobile .promise-title-highlight {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.promise-title-main {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(13, 26, 13, 0.68);
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(15px, 1.3vw, 18px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.promise-title-highlight {
|
||||
.founder-heading-main {
|
||||
display: block;
|
||||
color: #0d1a0d;
|
||||
font-size: clamp(42px, 5.2vw, 64px);
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(32px, 3.6vw, 46px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 0.96;
|
||||
text-wrap: balance;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.promise-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.founder-body {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.founder-body p {
|
||||
margin: 0;
|
||||
color: #4c5056;
|
||||
font-size: var(--body-copy-size);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.founder-signoff {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 28px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(17, 20, 24, 0.08);
|
||||
}
|
||||
|
||||
.founder-avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: #ede4d2;
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.07);
|
||||
}
|
||||
|
||||
.founder-avatar-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 20%;
|
||||
}
|
||||
|
||||
.founder-signoff-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.founder-name {
|
||||
color: #0d1a0d;
|
||||
font-family: var(--font-head);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.founder-role {
|
||||
color: var(--gray);
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.founder-cta {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.founder-contact-note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(33, 48, 33, 0.05);
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
|
||||
color: var(--gw-green);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.founder-contact-wave {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.07);
|
||||
font-size: 16px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.founder-contact-note:hover {
|
||||
background: rgba(33, 48, 33, 0.08);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.08),
|
||||
0 10px 22px rgba(17, 20, 24, 0.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#promise {
|
||||
padding-top: 42px;
|
||||
padding-bottom: var(--space-section-featured-y);
|
||||
.founder-inner {
|
||||
padding: 0 var(--space-container-x-mobile);
|
||||
}
|
||||
|
||||
.promise-kicker {
|
||||
margin-bottom: 12px;
|
||||
padding: 7px 12px;
|
||||
font-size: 11px;
|
||||
.founder-note {
|
||||
padding: 26px 24px 24px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.promise-text {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.promise-heading {
|
||||
max-width: none;
|
||||
margin-bottom: 22px;
|
||||
.founder-heading {
|
||||
margin: 0 0 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.promise-heading-desktop {
|
||||
display: none;
|
||||
.founder-body p {
|
||||
font-size: var(--body-copy-size-mobile);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.promise-heading-mobile {
|
||||
.founder-contact-note {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.promise-heading-mobile .promise-title-main,
|
||||
.promise-heading-mobile .promise-title-highlight {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.promise-mobile-intro {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin: 0 0 16px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, #fbf6e8 0%, #efe4c8 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.65),
|
||||
0 10px 22px rgba(17, 20, 24, 0.06),
|
||||
inset 0 0 0 1px rgba(242, 191, 47, 0.12);
|
||||
}
|
||||
|
||||
.promise-mobile-avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 18px rgba(17, 20, 24, 0.08);
|
||||
}
|
||||
|
||||
.promise-mobile-avatar img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 20%;
|
||||
font-size: 13px;
|
||||
padding: 11px 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.promise-mobile-caption {
|
||||
margin: 0;
|
||||
color: #34363a;
|
||||
font-family: var(--font-head);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.promise-title-main {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.promise-title-highlight {
|
||||
font-size: clamp(36px, 11vw, 54px);
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.promise-text p,
|
||||
.promise-text .btn {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.promise-text p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.promise-text .btn {
|
||||
.founder-cta {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.promise-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user