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

Design language tweaks, improvements

Browse Source
This commit is contained in:
ponzischeme89
2026-05-13 20:44:01 +12:00
parent de8b60b9c3
commit baafafabdb
22 changed files with 1302 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AboutPage.svelte
+19 -130
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { accordion } from '$lib/actions/accordion';
import { reveal } from '$lib/actions/reveal';
import Icon from '$lib/components/Icon.svelte';
import CtaCard from '$lib/components/CtaCard.svelte';
import PageHeader from '$lib/components/PageHeader.svelte';
import { getEnhancedImage } from '$lib/enhanced-images';
import type { AboutPageContent } from '$lib/types';
@@ -46,7 +46,7 @@
class="about-section reveal-block"
class:about-section-gradient={section.accent === 'gradient'}
>
<div class="about-inner about-section-grid" class:about-section-reverse={section.reverse}>
<div class="page-inner about-section-grid" class:about-section-reverse={section.reverse}>
<div class="about-copy">
{#if section.eyebrow}
<span class="about-eyebrow">{section.eyebrow}</span>
@@ -71,7 +71,7 @@
{#if founderSection}
{@const founderEnhanced = getEnhancedImage(founderSection.imageUrl)}
<section use:reveal={{ delay: 50 }} class="about-founder reveal-block">
<div class="about-inner about-founder-grid">
<div class="page-inner about-founder-grid">
<div class="about-founder-media">
{#if founderEnhanced}
<enhanced:img
@@ -116,7 +116,7 @@
<!-- ── FAQs ── -->
{#if pageContent.faqs && pageContent.faqs.length}
<section use:reveal={{ delay: 30 }} class="about-faq reveal-block">
<div class="about-inner">
<div class="page-inner">
<div class="about-faq-header">
<span class="about-eyebrow">FAQ</span>
<h2>{pageContent.faqTitle ?? 'Common questions'}</h2>
@@ -135,28 +135,16 @@
<!-- ── Contact CTA ── -->
<section use:reveal={{ delay: 50 }} class="about-contact reveal-block">
<div class="about-inner">
<div class="about-contact-card">
<span class="about-contact-eyebrow">Get in touch</span>
<h2>{pageContent.contact.title}</h2>
<p class="about-contact-desc">Questions, pricing, or your first Meet &amp; Greet — start here and we'll reply within 24 hours.</p>
<a class="btn btn-yellow btn-mobile-center about-contact-btn" href={pageContent.contact.cta.href}>
{pageContent.contact.cta.label}
</a>
<div class="about-contact-links">
<a class="about-contact-link" href={`mailto:${pageContent.contact.email}`}>
<Icon name="fas fa-envelope" />
{pageContent.contact.email}
</a>
<a
class="about-contact-link"
href={`tel:${pageContent.contact.phone.replace(/[^0-9+]/g, '')}`}
>
<Icon name="fas fa-phone" />
{pageContent.contact.phone}
</a>
</div>
</div>
<div class="page-inner">
<CtaCard
title={pageContent.contact.title}
description="Questions, pricing, or your first Meet &amp; Greet — start here and we'll reply within 24 hours."
ctaHref={pageContent.contact.cta.href}
ctaLabel={pageContent.contact.cta.label}
email={pageContent.contact.email}
phone={pageContent.contact.phone}
showIcons={true}
/>
</div>
</section>
@@ -167,36 +155,21 @@
background: var(--off-white);
}
.about-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 50px;
}
/* ── Shared eyebrow ── */
.about-eyebrow,
.about-contact-eyebrow {
/* ── Eyebrow ── */
.about-eyebrow {
display: inline-block;
margin-bottom: 14px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(33, 48, 33, 0.08);
color: var(--gw-green);
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.about-eyebrow {
background: rgba(33, 48, 33, 0.08);
color: var(--gw-green);
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
}
.about-contact-eyebrow {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.about-chip-stars {
color: var(--yellow);
letter-spacing: 1px;
@@ -394,75 +367,6 @@
padding: 0 0 88px;
}
.about-contact-card {
background: var(--gw-green);
color: #fff;
border-radius: 28px;
padding: 56px 48px;
text-align: center;
box-shadow: 0 20px 48px rgba(33, 48, 33, 0.18);
}
.about-contact-card h2 {
margin: 0 0 10px;
font-family: var(--font-head);
font-size: clamp(28px, 3vw, 42px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.03em;
color: #fff;
}
.about-contact-desc {
max-width: 440px;
margin: 0 auto 28px;
color: rgba(255, 255, 255, 0.75);
font-size: 16px;
line-height: 1.6;
}
.about-contact-btn {
display: inline-flex;
}
.about-contact-links {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
margin-top: 22px;
}
.about-contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: color 0.18s ease;
}
.about-contact-link:hover {
color: #fff;
}
/* ── Reveal ── */
:global(.reveal-ready.reveal-block) {
opacity: 0;
transform: translate3d(0, var(--reveal-distance, 24px), 0);
transition:
opacity 0.55s ease,
transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: var(--reveal-delay, 0ms);
}
:global(.reveal-visible.reveal-block) {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ── Tablet ── */
@media (max-width: 1024px) {
.about-section-grid,
@@ -483,10 +387,6 @@
/* ── Mobile ── */
@media (max-width: 768px) {
.about-inner {
padding: 0 24px;
}
.about-section {
padding: 60px 0;
}
@@ -537,17 +437,6 @@
.about-contact {
padding-bottom: 60px;
}
.about-contact-card {
padding: 36px 24px;
border-radius: 24px;
}
.about-contact-links {
flex-direction: column;
align-items: center;
gap: 14px;
}
}
@media (prefers-reduced-motion: reduce) {