letsbe/LetsBeBiz-Site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): wire about page visible content to translations

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-04-10 15:00:12 -04:00
parent 9ffd0885a2
commit ce6f029093
1 changed files with 28 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/app/(frontend)/[locale]/about/page.tsx
View File

@@ -43,32 +43,6 @@ export function generateStaticParams() {
return routing.locales.map((locale) => ({ locale }));
}
// ─── Data ─────────────────────────────────────────────────────────────────────
const PILLARS = [
{
id: 'craftsmanship',
Icon: PenTool,
title: 'Craftsmanship First',
description:
'The gap between a website that works and one that lasts is craft. We sweat the typography, the transitions, the performance, the edge cases. Every interface we ship is something we\'d be proud to sign.',
},
{
id: 'one-team',
Icon: Users,
title: 'One Team, Everything',
description:
'Design, development, hosting, infrastructure — one team, one point of contact, one standard of quality. No handoffs between agencies. No juggling freelancers. Just people who care about the whole thing.',
},
{
id: 'ownership',
Icon: Shield,
title: 'Built to Be Yours',
description:
'Everything we build, you own — the code, the data, the infrastructure. No vendor lock-in, no platform dependencies. We hand over work that outlasts the engagement.',
},
];
// ─── Sub-components ───────────────────────────────────────────────────────────
function PillarCard({
@@ -118,6 +92,14 @@ export default async function AboutPage({ params }: Props) {
const { locale } = await params;
setRequestLocale(locale);
const t = await getTranslations({ locale, namespace: 'aboutPage' });
const PILLARS = [
{ id: 'craftsmanship', Icon: PenTool, title: t('pillars.craftsmanship.title'), description: t('pillars.craftsmanship.description') },
{ id: 'one-team', Icon: Users, title: t('pillars.oneTeam.title'), description: t('pillars.oneTeam.description') },
{ id: 'ownership', Icon: Shield, title: t('pillars.ownership.title'), description: t('pillars.ownership.description') },
];
return (
<main>
@@ -127,21 +109,18 @@ export default async function AboutPage({ params }: Props) {
<div className="max-w-4xl mx-auto flex flex-col items-center text-center gap-8">
<ScrollReveal variant="fadeIn">
<span className="label-md text-primary">About LetsBe.</span>
<span className="label-md text-primary">{t('hero.eyebrow')}</span>
</ScrollReveal>
<ScrollReveal variant="fadeUp" delay={0.1}>
<h1 className="font-serif font-semibold text-on-surface text-5xl md:text-6xl lg:text-[4rem] leading-[1.05] tracking-[-0.03em]">
Great businesses deserve
<br />
great digital partners.
{t('hero.title')}
</h1>
</ScrollReveal>
<ScrollReveal variant="fadeUp" delay={0.2}>
<p className="text-outline text-xl leading-relaxed max-w-2xl">
We design and build custom websites, software, and digital platforms for businesses
that care about quality — and want a team that does too.
{t('hero.subtitle')}
</p>
</ScrollReveal>
@@ -158,29 +137,16 @@ export default async function AboutPage({ params }: Props) {
<div className="lg:col-span-5 flex flex-col gap-10">
<ScrollReveal variant="slideLeft" className="flex flex-col gap-4">
<span className="label-md text-primary">Our Story</span>
<span className="label-md text-primary">{t('story.eyebrow')}</span>
<h2 className="font-serif text-4xl md:text-[2.75rem] font-semibold text-on-surface leading-[1.1] tracking-[-0.02em]">
Built for businesses<br />
like yours.
{t('story.title')}
</h2>
</ScrollReveal>
<ScrollReveal variant="fadeUp" delay={0.1} className="flex flex-col gap-5 text-outline leading-relaxed text-[0.9375rem]">
<p>
LetsBe. started with a simple belief: that ambitious businesses deserve digital
tools as carefully considered as the work they do. Not templates. Not off-the-shelf
platforms. Real design and engineering, built from scratch.
</p>
<p>
Our early clients were founders and operators who needed more than a website —
they needed a technical partner who could design, build, host, and maintain
everything under one roof. Those projects shaped how we work today.
</p>
<p>
We build platforms meant to be owned, not rented. We document everything, we hand
over codebases that outlast the engagement, and we never lock clients into systems
they can&rsquo;t leave. That&rsquo;s not a feature — it&rsquo;s how we think business should work.
</p>
<p>{t('story.p1')}</p>
<p>{t('story.p2')}</p>
<p>{t('story.p3')}</p>
</ScrollReveal>
</div>
@@ -226,13 +192,13 @@ export default async function AboutPage({ params }: Props) {
/>
</div>
<blockquote className="font-serif italic text-lg text-on-surface leading-relaxed pr-8">
&ldquo;Build fewer things. Build them better. Build them to last.&rdquo;
"{t('story.quote')}"
</blockquote>
<div
className="w-8 h-px bg-primary/40 my-4"
aria-hidden="true"
/>
<p className="label-md text-outline">LetsBe. founding principle</p>
<p className="label-md text-outline">{t('story.quoteAttrib')}</p>
</div>
</ScrollReveal>
@@ -246,12 +212,12 @@ export default async function AboutPage({ params }: Props) {
<div className="container mx-auto px-6">
<ScrollReveal variant="fadeUp" className="flex flex-col items-center text-center gap-4 mb-16">
<span className="label-md text-primary">Our Beliefs</span>
<span className="label-md text-primary">{t('pillars.eyebrow')}</span>
<h2 className="font-serif font-semibold text-on-surface text-4xl md:text-5xl leading-[1.1] tracking-[-0.02em] max-w-2xl">
What We Believe
{t('pillars.title')}
</h2>
<p className="text-outline text-lg leading-relaxed max-w-xl mt-1">
Three principles behind every project we take on.
{t('pillars.subtitle')}
</p>
</ScrollReveal>
@@ -281,12 +247,11 @@ export default async function AboutPage({ params }: Props) {
/>
<blockquote className="font-serif italic text-white text-3xl md:text-[2.25rem] leading-[1.3] tracking-[-0.02em]">
&ldquo;We don&rsquo;t just build websites — we build the foundation your business
runs on.&rdquo;
"{t('quote.text')}"
</blockquote>
<p className="label-md text-white/40">
&mdash; LetsBe. founding philosophy
&mdash; {t('quote.attrib')}
</p>
</div>
@@ -301,26 +266,25 @@ export default async function AboutPage({ params }: Props) {
<div className="max-w-3xl mx-auto flex flex-col items-center text-center gap-8">
<div className="flex flex-col gap-3 items-center">
<span className="label-md text-primary">Work With Us</span>
<span className="label-md text-primary">{t('cta.eyebrow')}</span>
<h2 className="font-serif font-semibold text-on-surface text-3xl md:text-4xl leading-[1.1] tracking-[-0.02em]">
Let&rsquo;s build something together.
{t('cta.title')}
</h2>
<p className="text-outline text-lg leading-relaxed max-w-lg">
Whether you have a clear brief or just an early idea, we&rsquo;d love to talk
through what&rsquo;s possible.
{t('cta.subtitle')}
</p>
</div>
<div className="flex flex-col sm:flex-row items-center gap-4">
<Button variant="primary" size="lg" arrow href="/#configure">
Start your project
{t('cta.primary')}
</Button>
<Button
variant="secondary"
size="lg"
href="mailto:hello@letsbe.biz"
>
Book a call
{t('cta.secondary')}
</Button>
</div>