Skip to content

Commit 0764831

Browse files
authored
Merge pull request #123 from Avelero/feature/about-page
About page.
2 parents 6aad591 + b202883 commit 0764831

File tree

9 files changed

+187
-263
lines changed

9 files changed

+187
-263
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,3 +137,6 @@ sort-and-filter-plan.md
137137
*.local.json
138138
shopify-credentials*.json
139139
integration-credentials*.json
140+
141+
# SEO & GEO audit files
142+
seo-geo-audit-march-2026.md

apps/web/public/about.webp

33.7 KB
Loading

apps/web/src/app/about/page.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { RelatedUpdates } from "@/components/related-updates";
2+
import type { Metadata } from "next";
3+
import { PageImage } from "@/components/page-image";
4+
import { AboutText } from "@/components/about-text";
5+
import about from "../../../public/about.webp";
6+
7+
export const metadata: Metadata = {
8+
title: "About",
9+
description: "About Avelero, the story and its people.",
10+
alternates: {
11+
canonical: "https://avelero.com/about/",
12+
},
13+
openGraph: {
14+
title: "About | Avelero",
15+
description: "About Avelero, the story and its people.",
16+
type: "website",
17+
},
18+
};
19+
20+
export default async function AboutPage() {
21+
return (
22+
<main className="h-[calc(100%-102px)] w-full flex flex-col items-center justify-center">
23+
<div className="w-full pt-[58px] pb-[45px] sm:pt-[92px] sm:pb-[62px] flex flex-col gap-8 md:gap-16">
24+
<div className="flex flex-col gap-4">
25+
<h5 className="text-h5 text-foreground/50">About</h5>
26+
<h1 className="text-[10vw] sm:text-[clamp(3.8rem,9.5vw,4.8rem)] md:text-[clamp(4.8rem,10vw,6.7rem)] lg:text-[clamp(6.7rem,10.5vw,8.625rem)] xl:text-[8.625rem] leading-none text-foreground">
27+
<span className="text-primary">We care</span>{" "}
28+
about product passpo<span className="tracking-wide">rt</span>s
29+
</h1>
30+
</div>
31+
</div>
32+
<PageImage src={about} alt="About Avelero" />
33+
<AboutText />
34+
<RelatedUpdates currentSlug="about" />
35+
</main>
36+
);
37+
}
Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
export function AboutText() {
2+
return (
3+
<section className="w-full flex flex-col">
4+
{/* Row 1 */}
5+
<div className="w-full py-[45px] sm:py-[62px] grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16">
6+
<h2 className="text-h5 text-foreground">
7+
<span>Fashion brands are investing more in sustainability than ever before.</span>{" "}
8+
<span className="text-foreground/40">
9+
The Digital Product Passport is the infrastructure to make that
10+
work visible. We're building the tools to get you there.
11+
</span>
12+
</h2>
13+
<div className="flex flex-col gap-4 text-small text-foreground/50">
14+
<p>
15+
Brands are making real progress on materials, sourcing, and
16+
production practices. But most of that effort stays invisible to
17+
the people buying the product. The EU's Digital Product Passport
18+
changes that. It gives brands a standardized way to share
19+
environmental impact data, material origins, and care information
20+
directly with consumers, at the product level.
21+
</p>
22+
<p>
23+
Most tools in this space treat the DPP as a compliance problem. They
24+
collect supply chain data, generate a document, and move on. The
25+
result is a digital passport that reads like a government form. Dense,
26+
unbranded, and ignored. If the goal is to help consumers make more
27+
conscious decisions, the passport needs to be something people
28+
actually want to read.
29+
</p>
30+
<p>
31+
Avelero exists because we believe environmental transparency
32+
should be accessible, well-designed, and built into the product
33+
from the start. Not bolted on as an afterthought. Not locked behind
34+
enterprise contracts. Available to every brand that wants to do
35+
this right.
36+
</p>
37+
</div>
38+
</div>
39+
40+
{/* Row 2 */}
41+
<div className="w-full py-[45px] sm:py-[62px] grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16">
42+
<h2 className="text-h5 text-foreground">
43+
<span>We care deeply about the quality of our work</span>
44+
</h2>
45+
<div className="flex flex-col gap-4 text-small text-foreground/50">
46+
<p>
47+
A product passport is only useful if people engage with it. That
48+
means the design has to be good. Not good enough, but genuinely good.
49+
Typography, layout, color, spacing. Every passport generated through
50+
Avelero can be customized to feel like an extension of the brand it
51+
represents, not a third-party compliance page.
52+
</p>
53+
<p>
54+
On the data side, lifecycle environmental impact is the single
55+
hardest requirement for most brands to fill. Carbon footprint and
56+
water scarcity calculations typically require a separate LCA tool,
57+
a dedicated sustainability team, or both. We built a machine learning
58+
prediction engine directly into the platform that calculates these
59+
values from your material compositions and production data. No
60+
separate subscriptions. No five-figure consulting engagements.
61+
</p>
62+
<p>
63+
Speed matters too. Most DPP platforms require months of integration
64+
work across multiple teams. Avelero is designed to go live in days.
65+
Connect your product data, configure your design, generate your QR
66+
codes. The regulation is coming, and brands shouldn't need an
67+
enterprise budget or timeline to be ready for it.
68+
</p>
69+
</div>
70+
</div>
71+
72+
{/* Row 3 */}
73+
<div className="w-full py-[45px] sm:py-[62px] grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16">
74+
<h2 className="text-h5 text-foreground">
75+
<span>Built in Amsterdam</span>
76+
</h2>
77+
<div className="flex flex-col gap-4 text-small text-foreground/50">
78+
<p>
79+
<strong>Rafaël Mevis</strong> · Co-founder. Five years of building
80+
products, with a background in fashion and computer science. Worked
81+
at an Amsterdam-based fashion brand where he first encountered the
82+
complexity of product sustainability data firsthand. Obsessed with
83+
design, raised by graphic designers, and driven by the conviction
84+
that environmental transparency tools should be as well-crafted as
85+
the products they represent.
86+
</p>
87+
<p>
88+
<strong>Moussa Ouallaf</strong> · Co-founder. ML engineer and
89+
computer scientist with a deep interest in physics, mathematics, and
90+
hard technical problems. Previously built machine learning systems at
91+
an Amsterdam-based startup. At Avelero, he architects the LCA
92+
prediction engine that makes product-level environmental impact
93+
calculations accessible without dedicated sustainability
94+
infrastructure.
95+
</p>
96+
</div>
97+
</div>
98+
</section>
99+
);
100+
}

apps/web/src/components/footer.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,15 @@ export function Footer() {
9292
Updates
9393
</Link>
9494
</li>
95+
<li>
96+
<Link
97+
aria-label="Go to about page"
98+
className="inline-block text-small text-foreground hover:text-foreground/70 transition-colors duration-100 py-1"
99+
href="/about/"
100+
>
101+
About
102+
</Link>
103+
</li>
95104
</ul>
96105
</div>
97106
<div>

apps/web/src/components/header.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -81,18 +81,18 @@ export function Header() {
8181
Designer
8282
</Link>
8383
<Link
84-
href="/#automation"
85-
aria-label="Go to automation section"
84+
href="/#compliance"
85+
aria-label="Go to compliance section"
8686
className="text-button px-2 py-3 text-foreground hover:text-foreground/70 transition-colors duration-150"
8787
>
88-
Automation
88+
Compliance
8989
</Link>
9090
<Link
91-
href="/#compliance"
92-
aria-label="Go to compliance section"
91+
href="/about/"
92+
aria-label="Go to about page"
9393
className="text-button px-2 py-3 text-foreground hover:text-foreground/70 transition-colors duration-150"
9494
>
95-
Compliance
95+
About
9696
</Link>
9797
<Link
9898
href="/updates/"
@@ -162,20 +162,20 @@ export function Header() {
162162
Designer
163163
</Link>
164164
<Link
165-
href="/#automation"
166-
aria-label="Go to automation section"
165+
href="/#compliance"
166+
aria-label="Go to compliance section"
167167
className="text-2xl font-medium text-foreground hover:text-foreground/70 transition-colors duration-150"
168168
onClick={() => setIsMobileMenuOpen(false)}
169169
>
170-
Automation
170+
Compliance
171171
</Link>
172172
<Link
173-
href="/#compliance"
174-
aria-label="Go to compliance section"
173+
href="/about/"
174+
aria-label="Go to about page"
175175
className="text-2xl font-medium text-foreground hover:text-foreground/70 transition-colors duration-150"
176176
onClick={() => setIsMobileMenuOpen(false)}
177177
>
178-
Compliance
178+
About
179179
</Link>
180180
<Link
181181
href="/updates/"
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Image, { type StaticImageData } from "next/image";
2+
3+
interface PageImageProps {
4+
src: StaticImageData | string;
5+
alt: string;
6+
}
7+
8+
export function PageImage({ src, alt }: PageImageProps) {
9+
return (
10+
<div className="w-full py-[45px] sm:py-[62px]">
11+
<div className="relative w-full aspect-[18/10] overflow-hidden">
12+
<Image
13+
src={src}
14+
alt={alt}
15+
fill
16+
priority
17+
sizes="(max-width: 639px) calc(100vw - 3rem), (max-width: 1279px) calc(100vw - 8rem), 1152px"
18+
className="object-cover"
19+
quality={90}
20+
/>
21+
</div>
22+
</div>
23+
);
24+
}

apps/web/src/components/related-updates.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getAllUpdates } from "@/lib/updates";
22
import Link from "next/link";
3+
import { ChevronRight } from "lucide-react";
34
import { UpdateCard } from "./update-card";
45

56
interface RelatedUpdatesProps {
@@ -32,7 +33,7 @@ export async function RelatedUpdates({ currentSlug }: RelatedUpdatesProps) {
3233
href="/updates/"
3334
className="text-button text-foreground hover:text-foreground/70 transition-colors duration-150"
3435
>
35-
See more
36+
See more <ChevronRight className="inline size-[14px]" />
3637
</Link>
3738
</div>
3839

0 commit comments

Comments
 (0)