4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T11a1,import type { ComponentProps } from 'react' import Image from 'next/image' import { ArrowUpRight } from 'lucide-react' import { cn } from '@/lib/utils' export type ContentSectionTwoContent = { eyebrow: string heading: string supportingHeading: string paragraphs: readonly string[] link?: { label: string href: string } } export type ContentSectionTwoMedia = { src: string alt: string caption?: string metadata?: string } export type ContentSectionTwoProps = Omit, 'children' | 'content'> & { content?: ContentSectionTwoContent media?: ContentSectionTwoMedia } const defaultContent: ContentSectionTwoContent = { eyebrow: 'Designed for focus', heading: 'The best tools stay out of your way.', supportingHeading: 'Great software makes complex work feel clear without hiding the details that matter.', paragraphs: [ 'Every screen should have a clear purpose. Actions appear where people need them, navigation remains predictable, and important information stays easy to scan.', 'Instead of adding more controls, we remove unnecessary decisions so people spend less time figuring out the interface.', ], link: { label: 'Read our design principles', href: '#principles', }, } const defaultMedia: ContentSectionTwoMedia = { src: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlHGWyumqHjv3VPCtBSMksEJOn7pmfxyc9IoU5', alt: 'A focused product workspace with navigation, project metrics, and activity insights', caption: 'One workspace keeps the important context visible without competing for attention.', metadata: 'Product system · 2026', } export function ContentSectionTwo({ className, content = defaultContent, media = defaultMedia, ...props }: ContentSectionTwoProps) { return (

{content.eyebrow}

{content.heading}

{content.supportingHeading}

{content.paragraphs.map((paragraph) => (

{paragraph}

))}

{content.link ? ( {content.link.label} ) : null}

{media.alt} — {media.caption ? {media.caption} : } {media.metadata ? ( {media.metadata} ) : null}

) } export default ContentSectionTwo 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.navdeepsingh.dev/r/content-section-two.json","proxyUrl":"https://shadcnregistry.com/r/navui/content-section-two","itemId":"@navui/content-section-two"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/blocks/content/content-section-two.tsx","content":"$51","type":"registry:component","target":"@components/blocks/content/content-section-two.tsx"}]}]]}],"$L52"]}]

Content Section Two

Installation

Files

@components

Styles