About 1

1import { aboutCopy, stats, story, values } from "@/components/data/about-1-data"
2 
3/**
4 * Deliberately free of hooks, handlers and animation, so it renders as a React Server
5 * Component with no `'use client'` boundary — narrative content reads worse with
6 * entrance choreography, and the about page is usually the most static page on a site.
7 * `about-2` carries this section's motion variant.
8 */
9export function About1() {
10  return (
11    <section aria-labelledby='about-heading' className='w-full py-16 sm:py-24'>
12      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
13        <div className='max-w-2xl'>
14          <p className='text-primary text-sm font-semibold'>{aboutCopy.eyebrow}</p>
15          <h2
16            id='about-heading'
17            className='mt-3 text-3xl font-semibold tracking-tight sm:text-4xl'
18          >
19            {aboutCopy.heading}
20          </h2>
21          <p className='text-muted-foreground mt-4 text-lg'>{aboutCopy.lede}</p>
22        </div>
23 
24        <div className='mt-12 grid gap-10 lg:grid-cols-12 lg:gap-16'>
25          <div className='order-2 lg:order-1 lg:col-span-7'>
26            {/* Measure capped so the body never exceeds a comfortable 65-75 characters. */}
27            <div className='text-muted-foreground flex max-w-prose flex-col gap-5 leading-7'>
28              {story.map(paragraph => (
29                <p key={paragraph.slice(0, 24)}>{paragraph}</p>
30              ))}
31            </div>
32          </div>
33 
34          <div className='order-1 lg:order-2 lg:col-span-5'>
35            <img
36              src={aboutCopy.imageSrc}
37              alt={aboutCopy.imageAlt}
38              width={900}
39              height={675}
40              className='bg-muted aspect-[4/3] w-full rounded-2xl object-cover'
41            />
42          </div>
43        </div>
44 
45        <h3 className='sr-only'>What we value</h3>
46        <ul className='mt-16 grid gap-8 sm:grid-cols-3'>
47          {values.map(value => (
48            <li key={value.title}>
49              <span
50                aria-hidden='true'
51                className='bg-muted text-foreground flex size-10 items-center justify-center rounded-lg'
52              >
53                <value.icon className='size-5' />
54              </span>
55              <p className='mt-4 font-medium'>{value.title}</p>
56              <p className='text-muted-foreground mt-2 text-sm leading-6'>{value.description}</p>
57            </li>
58          ))}
59        </ul>
60 
61// … truncated