e.xyehr.cn
forked from
standard.site/standard.site
Standard.site landing page built in Next.js
aka.dad
1'use client'
2
3import { PRINCIPLES } from '@/app/data/content'
4import { AnimateIn } from '@/app/components'
5
6export function IntroductionSection() {
7 return (
8 <section id="introduction" className="flex flex-col gap-8 @container/intro">
9 <AnimateIn
10 as="h2"
11 viewportDelay={ 0.5 }
12 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content"
13 >
14 Introduction
15 </AnimateIn>
16
17 <AnimateIn delay={ 0.1 } viewportDelay={ 0.6 } className="text-base sm:text-xl leading-snug tracking-tight text-muted">
18 <p className="mb-4">
19 <span className="font-medium text-base-content">Standard.site</span>{ ' ' }
20 began as a conversation between developers building long-form platforms on AT Protocol.
21 Each had working implementations. Each had defined similar schemas.
22 Coordination was the missing piece.
23 </p>
24 <p>Four principles guide the project:</p>
25 </AnimateIn>
26
27 <div className="grid @xl/intro:grid-cols-2 gap-1 rounded-2xl border border-border bg-base-200 p-1">
28 { PRINCIPLES.map((principle, index) => (
29 <AnimateIn
30 key={ principle.title }
31 delay={ 0.2 + index * 0.1 }
32 viewportDelay={ 0.7 + index * 0.1 }
33 className="flex flex-col gap-6 rounded-xl border border-border bg-card p-4"
34 >
35 <span className="font-mono font-medium text-base leading-tight tracking-tight text-muted-content">
36 { String(index + 1).padStart(2, '0') }.
37 </span>
38 <div className="flex flex-col gap-2">
39 <h3 className="font-display font-semibold text-xl sm:text-[1.35rem] leading-tight tracking-tight text-base-content">
40 { principle.title }
41 </h3>
42 <p className="text-base leading-snug tracking-tight text-muted">
43 { principle.description }
44 </p>
45 </div>
46 </AnimateIn>
47 )) }
48 </div>
49
50 <AnimateIn as="p" delay={ 0.6 } viewportDelay={ 1.1 } className="text-base sm:text-xl leading-snug tracking-tight text-muted">
51 The lexicons focus on metadata: what a publication is, what a document
52 contains, and where it lives. Content format is left to each platform.
53 The standard grows when builders identify shared needs and align on
54 solutions.
55 </AnimateIn>
56 </section>
57 )
58}