Content

---
import Content1Block from "@/components/blocks/content-1.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Content1Block
  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: "#", variant: "secondary" },
  ]}
  image={{ src: placeholderImage, alt: "Content preview" }}
/>

---
import Content2Block from "@/components/blocks/content-2.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Content2Block
  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: "#", variant: "secondary" },
  ]}
  image={{ src: placeholderImage, alt: "Editorial workspace" }}
/>

---
import Content3Block from "@/components/blocks/content-3.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Content3Block
  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: "#", variant: "secondary" },
  ]}
  image={{ src: placeholderImage, alt: "Media preview" }}
/>

---
import Content4Block from "@/components/blocks/content-4.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Content4Block
  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: "#", variant: "secondary" },
  ]}
  image={{ src: placeholderImage, alt: "Feature preview" }}
/>

---
import Content5Block from "@/components/blocks/content-5.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Content5Block
  eyebrow="Editorial proof"
  title="Turn supporting context into a guided product story"
  description="A framed editorial content section with numbered supporting points and an immersive media panel. Use it when a story needs more structure than a plain side-by-side split."
  features={[
    "Framed surface separates the story from surrounding page sections",
    "Numbered points make the argument easy to scan in order",
    "Media panel gets more presence without taking over the copy",
  ]}
  buttons={[
    { label: "Get started", href: "#" },
    { label: "Learn more", href: "#", variant: "secondary" },
  ]}
  image={{ src: placeholderImage, alt: "Editorial product story preview" }}
/>

---
import Content6Block from "@/components/blocks/content-6.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Content6Block
  title="Vary long pages with a reversed content split"
  description="A reversed split content section with media on the left and supporting copy on the right. Use it to vary rhythm across longer pages."
  features={[
    "Media-first layout for visual pacing",
    "Same content API as adjacent content blocks",
    "Useful when repeated sections need a different rhythm",
  ]}
  buttons={[
    { label: "Get started", href: "#" },
    { label: "Learn more", href: "#", variant: "secondary" },
  ]}
  image={{ src: placeholderImage, alt: "Reversed content preview" }}
/>