Content Section Four

1import type { ComponentProps } from 'react'
2import Image from 'next/image'
3import { ArrowUpRight } from 'lucide-react'
4 
5import { cn } from '@/lib/utils'
6 
7export type ContentSectionFourContent = {
8  eyebrow: string
9  heading: string
10  description: string
11  link?: {
12    label: string
13    href: string
14  }
15}
16 
17export type ContentSectionFourPanel = {
18  title: string
19  description: string
20  image: {
21    src: string
22    alt: string
23  }
24  metadata?: string
25}
26 
27export type ContentSectionFourProps = Omit<ComponentProps<'section'>, 'children' | 'content'> & {
28  content?: ContentSectionFourContent
29  panels?: readonly ContentSectionFourPanel[]
30}
31 
32const defaultHowItWorksContent: ContentSectionFourContent = {
33  eyebrow: 'How it works',
34  heading: 'Decisions stay connected from planning to release.',
35  description:
36    'Each stage builds on the last, keeping the original context visible throughout the work.',
37  link: {
38    label: 'Explore the workflow',
39    href: '#workflow',
40  },
41}
42 
43const defaultPanels: readonly ContentSectionFourPanel[] = [
44  {
45    title: 'Frame the outcome',
46    description:
47      'Define the customer problem, intended change, and constraints before the work begins.',
48    image: {
49      src: '/projects/project-1.png',
50      alt: 'Project brief for a network infrastructure website',
51    },
52    metadata: 'Brief',
53  },
54  {
55    title: 'Make it tangible',
56    description:
57      'Give the team something concrete to review while decisions remain inexpensive to change.',
58    image: {
59      src: '/sections/design1.png',
60      alt: 'Dark product landing page showing a mobile health interface',
61    },
62    metadata: 'Product review',
63  },
64  {
65    title: 'Publish the useful version',
66    description:
67      'Carry the reason, impact, and essential details of the change into the final release.',
68    image: {
69      src: '/sections/design4.png',
70      alt: 'Concise account recovery interface',
71    },
72    metadata: 'Release',
73  },
74]
75 
76export default function ProcessSectionOne({
77  className,
78  content = defaultHowItWorksContent,
79  panels = defaultPanels,
80  ...props
81}: ContentSectionFourProps) {
82  return (
83    <section
84      data-slot="content-section-four"
85      className={cn('bg-background py-20 text-foreground sm:py-24 lg:py-28', className)}
86      {...props}
87    >
88      <div className="mx-auto grid w-full max-w-7xl gap-12 px-5 sm:px-8 lg:grid-cols-[0.68fr_1.32fr] lg:gap-20">
89        <header className="lg:sticky lg:top-24 lg:self-start lg:pr-4">
90// … truncated