Content Section Two

1import type { ComponentProps } from 'react'
2import Image from 'next/image'
3import { ArrowUpRight } from 'lucide-react'
4 
5import { cn } from '@/lib/utils'
6 
7export type ContentSectionTwoContent = {
8  eyebrow: string
9  heading: string
10  supportingHeading: string
11  paragraphs: readonly string[]
12  link?: {
13    label: string
14    href: string
15  }
16}
17 
18export type ContentSectionTwoMedia = {
19  src: string
20  alt: string
21  caption?: string
22  metadata?: string
23}
24 
25export type ContentSectionTwoProps = Omit<ComponentProps<'section'>, 'children' | 'content'> & {
26  content?: ContentSectionTwoContent
27  media?: ContentSectionTwoMedia
28}
29 
30const defaultContent: ContentSectionTwoContent = {
31  eyebrow: 'Designed for focus',
32  heading: 'The best tools stay out of your way.',
33  supportingHeading:
34    'Great software makes complex work feel clear without hiding the details that matter.',
35  paragraphs: [
36    'Every screen should have a clear purpose. Actions appear where people need them, navigation remains predictable, and important information stays easy to scan.',
37    'Instead of adding more controls, we remove unnecessary decisions so people spend less time figuring out the interface.',
38  ],
39  link: {
40    label: 'Read our design principles',
41    href: '#principles',
42  },
43}
44 
45const defaultMedia: ContentSectionTwoMedia = {
46  src: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlHGWyumqHjv3VPCtBSMksEJOn7pmfxyc9IoU5',
47  alt: 'A focused product workspace with navigation, project metrics, and activity insights',
48  caption: 'One workspace keeps the important context visible without competing for attention.',
49  metadata: 'Product system · 2026',
50}
51 
52export function ContentSectionTwo({
53  className,
54  content = defaultContent,
55  media = defaultMedia,
56  ...props
57}: ContentSectionTwoProps) {
58  return (
59    <section
60      data-slot="content-section-two"
61      className={cn('bg-background py-20 text-foreground selection:bg-muted sm:py-28', className)}
62      {...props}
63    >
64      <div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
65        <div className="grid gap-9 lg:grid-cols-[0.78fr_1.22fr] lg:gap-20">
66          <header>
67            <p className="text-xs font-medium text-muted-foreground">{content.eyebrow}</p>
68            <h2 className="mt-4 max-w-md text-3xl font-semibold tracking-tight text-balance lg:text-4xl">
69              {content.heading}
70            </h2>
71          </header>
72 
73          <div className="max-w-2xl">
74// … truncated