Content

import { Content1 } from "@/components/blocks/content-1"

export default function Content1Demo() {
  return (
    <>
      <Content1
        title="Build better products with a system designed for clarity"
        description="A stacked content section that pairs editorial copy with a full-width image below. Use it to explain a feature, process, or value proposition with visual support."
        features={[
          "Clear headline with supporting description",
          "Bullet list for quick feature scanning",
          "Action buttons for next steps",
          "Full-width image below the content",
        ]}
        buttons={[
          { label: "Get started", href: "#" },
          { label: "Learn more", href: "#" },
        ]}
      />
    </>
  )
}

import { Content2 } from "@/components/blocks/content-2"

export default function Content2Demo() {
  return (
    <>
      <Content2
        title="Pair editorial copy with a supporting image"
        description="Use this block when screenshots, diagrams, or photos need to sit beside copy without turning the whole page into a gallery."
        features={[
          "Clear headline and intro with supporting copy",
          "One media surface with rounded treatment",
          "Concise bullet points instead of a heavy card grid",
        ]}
        buttons={[
          { label: "Get started", href: "#" },
          { label: "Learn more", href: "#" },
        ]}
      />
    </>
  )
}

import { Content3 } from "@/components/blocks/content-3"

export default function Content3Demo() {
  return (
    <>
      <Content3
        title="A full-width media section with a spread header"
        description="This variation uses a spread layout with title and description on the left, action buttons on the right, and a prominent full-width image below."
        buttons={[
          { label: "Get started", href: "#" },
          { label: "Learn more", href: "#" },
        ]}
      />
    </>
  )
}

import { Content4 } from "@/components/blocks/content-4"

export default function Content4Demo() {
  return (
    <>
      <Content4
        title="See the difference in every detail"
        description="A 1:2 split layout with a smaller text column on the left and a larger image on the right. Use it for feature highlights where the visual should dominate."
        features={[
          "Compact text column with checklist",
          "Larger image area for visual emphasis",
          "Asymmetric grid for visual hierarchy",
        ]}
        buttons={[
          { label: "Get started", href: "#" },
          { label: "Learn more", href: "#" },
        ]}
      />
    </>
  )
}