admin/gw-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design language tweaks v3

Browse Source
This commit is contained in:
ponzischeme89
2026-05-15 16:27:39 +12:00
parent 580d600c47
commit b950229003
14 changed files with 2746 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AboutPage.svelte
+159 -21
View File
@@ -3,6 +3,7 @@
import { reveal } from '$lib/actions/reveal';
import CtaCard from '$lib/components/CtaCard.svelte';
import PageHeader from '$lib/components/PageHeader.svelte';
import Icon from '$lib/components/Icon.svelte';
import { getEnhancedImage } from '$lib/enhanced-images';
import type { AboutPageContent } from '$lib/types';
@@ -90,24 +91,49 @@
{/if}
</div>
<div class="about-founder-copy">
{#if founderSection.eyebrow}
<span class="about-eyebrow">{founderSection.eyebrow}</span>
{/if}
<h2 class="about-founder-heading">
<span class="about-founder-heading-desktop">
<span class="about-founder-title-main">{founderHeadingLead}</span>
<br />
<span class="about-founder-title-highlight">{founderHeadingHighlight}</span>
</span>
<span class="about-founder-heading-mobile">
<span class="about-founder-title-main">{founderHeadingLead}</span>
<span class="about-founder-title-highlight">{founderHeadingHighlight}</span>
</span>
</h2>
{#each founderSection.body as paragraph}
<p>{paragraph}</p>
{/each}
<a href="/contact-us" class="btn btn-green btn-mobile-center">Book a free Meet &amp; Greet</a>
<article class="about-founder-note">
{#if founderSection.eyebrow}
<span class="about-eyebrow about-founder-kicker">{founderSection.eyebrow}</span>
{/if}
<h2 class="about-founder-heading">
<span class="about-founder-heading-desktop">
<span class="about-founder-title-main">{founderHeadingLead}</span>
<br />
<span class="about-founder-title-highlight">{founderHeadingHighlight}</span>
</span>
<span class="about-founder-heading-mobile">
<span class="about-founder-title-main">{founderHeadingLead}</span>
<span class="about-founder-title-highlight">{founderHeadingHighlight}</span>
</span>
</h2>
<div class="about-founder-body">
{#each founderSection.body as paragraph}
<p>{paragraph}</p>
{/each}
</div>
<div class="about-founder-signoff">
<div class="about-founder-signoff-text">
<span class="about-founder-name">Aless</span>
<span class="about-founder-role">Goodwalk founder</span>
</div>
</div>
<a
class="about-founder-contact-note"
href="mailto:info@goodwalk.co.nz"
aria-label="Email Aless at Goodwalk"
>
<span class="about-founder-contact-icon">
<Icon name="fas fa-envelope" />
</span>
<span>If you are unsure about anything, feel free to email me anytime.</span>
</a>
<a href="/contact-us" class="btn btn-green btn-mobile-center about-founder-cta">
Book a free Meet &amp; Greet
</a>
</article>
</div>
</div>
</section>
@@ -267,6 +293,20 @@
color: #0d1a0d;
}
.about-founder-note {
padding: 40px 42px 34px;
background: linear-gradient(180deg, rgba(251, 251, 251, 0.98) 0%, rgba(247, 248, 246, 1) 100%);
border: 1px solid rgba(17, 20, 24, 0.08);
border-radius: 28px;
box-shadow: var(--shadow-panel-elevated);
}
.about-founder-kicker {
display: block;
width: fit-content;
margin-bottom: 18px;
}
.about-founder-heading-desktop {
display: block;
}
@@ -321,16 +361,91 @@
}
.about-founder-copy p {
margin: 14px 0 0;
margin: 0;
color: #34363a;
font-size: 17px;
line-height: 1.75;
}
.about-founder-copy .btn {
.about-founder-body {
display: grid;
gap: 14px;
}
.about-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);
}
.about-founder-signoff-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.about-founder-name {
color: #0d1a0d;
font-family: var(--font-head);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.about-founder-role {
color: var(--gray);
font-size: 13px;
line-height: 1.3;
}
.about-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;
}
.about-founder-contact-icon {
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);
color: var(--gw-green);
font-size: 13px;
flex: 0 0 auto;
}
.about-founder-cta {
display: flex;
width: fit-content;
margin: 28px auto 0;
margin: 28px 0 0;
}
@media (hover: hover) {
.about-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);
}
}
/* ── FAQs ── */
@@ -421,6 +536,11 @@
gap: 28px;
}
.about-founder-note {
padding: 26px 24px 24px;
border-radius: 24px;
}
.about-founder-copy h2 {
font-size: 26px;
line-height: 1.02;
@@ -440,6 +560,24 @@
line-height: 1.7;
}
.about-founder-kicker {
margin-left: auto;
margin-right: auto;
}
.about-founder-contact-note {
display: flex;
width: 100%;
font-size: 13px;
padding: 11px 14px;
text-align: center;
}
.about-founder-cta {
width: 100%;
justify-content: center;
}
.about-faq {
padding: 60px 0;
}