Company Overview
AboutCentered about section with logo, quick links, a hero screenshot, and a two-column capabilities list paired with background story blocks.
Create a Svelte 5 (runes) 'About' section for a company page. Layout, top to bottom, all centered and constrained to max-w-7xl: 1. An optional logo (light/dark variants swapped via `dark:hidden` / `dark:block`), linking home. 2. A row of quick links (e.g. 'Explore our services', 'Get in touch') rendered as inline text links with a small trailing chevron-right SVG icon. 3. A large hero image with a rounded-lg card and shadow-lg, with optional light/dark variants. 4. A two-column grid below the image: the left column has an 'overview' block (heading + paragraph) followed by a 2-column list of short capability strings, each prefixed with a small checkmark-circle icon; the right column stacks additional heading+paragraph 'sections' (e.g. background story, differentiators). Use a shimmering-text component for every heading (an SVG-mask based dual-layer text effect where a lighter overlay text sweeps across the base text on a loop). Add a subtle animated mesh/grid background behind the whole section (absolutely positioned, low opacity, decorative only, aria-hidden). Use a scroll-reveal action on major blocks: fade for the top row, scale for the image, and slide-up for the two-column content, staggered with delays. All content is data-driven via a single `content` prop: `{ logo_light?, logo_dark?, logo_alt?, logo_href?, links: {label,href}[], image, image_dark?, image_alt, overview: {heading,text}, capabilities: string[], sections: {heading,text}[] }`.
<script lang="ts">
import ShimmeringText from '$lib/components/animate-ui/ShimmeringText.svelte';
import DigitalMesh from '$lib/components/backgrounds/DigitalMesh.svelte';
import { reveal } from '$lib/actions/reveal';
type Props = {
content: {
logo_light?: string;
logo_dark?: string;
logo_alt?: string;
logo_href?: string;
links: { label: string; href: string }[];
image: string;
image_dark?: string;
image_alt: string;
overview: { heading: string; text: string };
capabilities: string[];
sections: { heading: string; text: string }[];
};
};
let { content }: Props = $props();
</script>
<section class="relative overflow-hidden isolate bg-background antialiased">
<DigitalMesh />
<div class="relative max-w-7xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
<div class="text-center" use:reveal={{ animation: 'fade' }}>
{#if content.logo_light}
<a href={content.logo_href ?? '/'}>
<img class="object-contain w-auto mx-auto dark:hidden" src={content.logo_light} alt={content.logo_alt} loading="lazy" decoding="async" />
<img class="hidden object-contain w-auto mx-auto dark:block" src={content.logo_dark} alt={content.logo_alt} loading="lazy" decoding="async" />
</a>
{/if}
<div class="flex flex-col items-center justify-center gap-4 mt-4 sm:mt-5 sm:gap-8 sm:flex-row">
{#each content.links as link}
<a href={link.href} class="inline-flex items-center text-base font-semibold leading-tight text-primary hover:underline">
{link.label}
<svg aria-hidden="true" class="w-4 h-4 ml-1.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
{/each}
</div>
</div>
<div class="max-w-5xl mx-auto mt-8 lg:mt-16" use:reveal={{ animation: 'scale', delay: 100 }}>
<img
class="w-full rounded-lg shadow-lg{content.image_dark ? ' dark:hidden' : ''}"
src={content.image}
alt={content.image_alt}
loading="lazy"
decoding="async"
/>
{#if content.image_dark}
<img class="hidden w-full rounded-lg shadow-lg dark:block" src={content.image_dark} alt={content.image_alt} loading="lazy" decoding="async" />
{/if}
</div>
<div class="grid grid-cols-1 gap-8 mt-8 lg:gap-16 lg:grid-cols-2 lg:mt-16" use:reveal={{ animation: 'up', delay: 150 }}>
<div>
<div>
<h3 class="text-2xl font-extrabold text-foreground">
<ShimmeringText text={content.overview.heading} />
</h3>
<p class="mt-2 text-lg font-normal text-muted-foreground">{content.overview.text}</p>
</div>
<ul class="grid grid-cols-1 mt-8 sm:grid-cols-2 gap-x-4 gap-y-3">
{#each content.capabilities as cap}
<li class="flex items-start gap-2.5">
<svg class="w-5 h-5 text-primary shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-base font-normal text-muted-foreground">{cap}</span>
</li>
{/each}
</ul>
</div>
<div class="space-y-8">
{#each content.sections as s}
<div>
<h3 class="text-2xl font-extrabold text-foreground">
<ShimmeringText text={s.heading} />
</h3>
<p class="mt-2 text-lg font-normal text-muted-foreground">{s.text}</p>
</div>
{/each}
</div>
</div>
</div>
</section>