Content Section Three

1'use client'
2 
3import type { ComponentProps } from 'react'
4import { ArrowUpRight } from 'lucide-react'
5 
6import {
7  defaultReleaseWorkflow,
8  ReleaseWorkflowIllustration,
9  type ContentSectionThreeWorkflow,
10} from '@/components/illustrations/ReleaseWorkflowIllustration'
11import { cn } from '@/lib/utils'
12 
13export type {
14  ContentSectionThreeRelease,
15  ContentSectionThreeWorkflow,
16} from '@/components/illustrations/ReleaseWorkflowIllustration'
17 
18export type ContentSectionThreeContent = {
19  eyebrow: string
20  heading: string
21  description: string
22  link?: {
23    label: string
24    href: string
25  }
26}
27 
28export type ContentSectionThreeProps = Omit<ComponentProps<'section'>, 'children' | 'content'> & {
29  content?: ContentSectionThreeContent
30  workflow?: ContentSectionThreeWorkflow
31  autoPlay?: boolean
32  interval?: number
33}
34 
35const defaultContent: ContentSectionThreeContent = {
36  eyebrow: 'Release tracking',
37  heading: 'Show exactly what shipped and where it landed.',
38  description: 'Track every release with its status, environment, commit, and notes in one place.',
39  link: {
40    label: 'Browse release history',
41    href: '#release-workflow',
42  },
43}
44 
45export function ContentSectionThree({
46  className,
47  content = defaultContent,
48  workflow = defaultReleaseWorkflow,
49  autoPlay = true,
50  interval = 4000,
51  ...props
52}: ContentSectionThreeProps) {
53  return (
54    <section
55      data-slot="content-section-three"
56      className={cn(
57        'relative overflow-hidden border-y bg-background py-20 text-foreground sm:py-28',
58        className,
59      )}
60      {...props}
61    >
62      <div className="relative mx-auto grid w-full max-w-6xl items-center gap-12 px-5 sm:px-8 lg:grid-cols-[minmax(0,0.95fr)_minmax(22rem,0.75fr)] lg:gap-16">
63        <div className="max-w-2xl">
64          <p className="text-sm font-medium text-muted-foreground">{content.eyebrow}</p>
65 
66          <h2 className="mt-4 text-2xl font-semibold tracking-tight text-balance sm:text-3xl lg:text-4xl">
67            {content.heading}
68          </h2>
69 
70          <p className="mt-5 max-w-xl text-base leading-7 text-balance text-muted-foreground">
71            {content.description}
72          </p>
73 
74          {content.link ? (
75            <a
76              href={content.link.href}
77              className={cn(
78                'mt-12 inline-flex min-h-11 items-center gap-2 text-sm font-medium',
79                'underline-offset-4 hover:underline',
80// … truncated