Content Section One

1'use client'
2 
3import type { ComponentType } from 'react'
4 
5import { DesignedForFocusIllustration } from '@/components/illustrations/DesignedForFocusIllustration'
6import { FastByDefaultIllustration } from '@/components/illustrations/FastByDefaultIllustration'
7import { FlexibleAtScaleIllustration } from '@/components/illustrations/FlexibleAtScaleIllustration'
8 
9type Principle = {
10  title: string
11  description: string
12  illustration: ComponentType
13}
14 
15const principles: readonly Principle[] = [
16  {
17    title: 'Fast by default',
18    description: 'Common actions stay immediate, predictable, and close to where work happens.',
19    illustration: FastByDefaultIllustration,
20  },
21  {
22    title: 'Designed for focus',
23    description: 'Clear hierarchy and restrained interfaces keep attention on the current task.',
24    illustration: DesignedForFocusIllustration,
25  },
26  {
27    title: 'Flexible at scale',
28    description: 'Start with simple workflows and add structure as your product and team evolve.',
29    illustration: FlexibleAtScaleIllustration,
30  },
31]
32 
33export default function ContentSectionOne() {
34  return (
35    <section className="overflow-hidden py-16 text-foreground md:py-24">
36      <div className="mx-auto max-w-6xl px-5 sm:px-8">
37        <div className="grid gap-8 pb-12 md:grid-cols-[1fr_0.7fr] md:items-end md:border-b">
38          <h2 className="max-w-3xl text-3xl font-semibold tracking-tighter text-balance sm:text-4xl lg:text-5xl">
39            Software should remove friction, not create more of it.
40          </h2>
41 
42          <p className="max-w-md text-base leading-7 text-muted-foreground md:justify-self-end">
43            Every interaction is designed to make complex workflows feel direct, calm, and
44            understandable.
45          </p>
46        </div>
47 
48        <div className="-mx-5 [scrollbar-width:none] overflow-x-auto px-5 pt-8 pb-2 sm:-mx-8 sm:px-8 md:mx-0 md:overflow-visible md:px-0 md:pt-0 md:pb-0 [&::-webkit-scrollbar]:hidden">
49          <div className="flex w-max gap-4 md:grid md:w-full md:grid-cols-3 md:gap-0 md:border-b">
50            {principles.map((principle, index) => {
51              const Illustration = principle.illustration
52 
53              return (
54                <article
55                  key={principle.title}
56                  className={[
57                    'w-[min(82vw,20rem)] shrink-0 rounded-lg border bg-card',
58                    'md:w-auto md:rounded-none md:border-0 md:bg-transparent',
59                    index > 0 ? 'md:border-l' : '',
60// … truncated