Services

---
import Services1Block from "@/components/blocks/services-1.astro"
import PlaceholderImage from "@/assets/placeholder.webp"
---

<Services1Block
  badge="What we do"
  title="A simple services section for agencies and internal platform teams"
  buttons={[{ label: "View all services", href: "#", variant: "outline" }]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "Page strategy" },
      label: "Strategy",
      title: "Page strategy",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Section implementation" },
      label: "Development",
      title: "Section implementation",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Design system tuning" },
      label: "Design",
      title: "Design system tuning",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Performance audits" },
      label: "Optimization",
      title: "Performance audits",
      description:
        "Describe the service in one or two sentences and let the next section handle process or case studies.",
      href: "#",
    },
  ]}
/>

---
import Services2Block from "@/components/blocks/services-2.astro"
import PlaceholderImage from "@/assets/placeholder.webp"
---

<Services2Block
  badge="Our process"
  title="A horizontal layout for when each service needs visual context"
  description="This layout pairs each service with an image, giving clients a clear picture of the deliverable."
  services={[
    {
      image: { src: PlaceholderImage, alt: "Audit" },
      label: "Step 01",
      title: "Audit & discovery",
      description:
        "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "Refine" },
      label: "Step 02",
      title: "Refine & prototype",
      description:
        "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "Ship" },
      label: "Step 03",
      title: "Ship & iterate",
      description:
        "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
      button: { label: "Learn more", href: "#" },
    },
  ]}
/>

---
import Services3Block from "@/components/blocks/services-3.astro"
import PlaceholderImage from "@/assets/placeholder.webp"
---

<Services3Block
  badge="Consulting"
  title="Bold image overlays for when positioning matters"
  description="This style is useful for advisory or studio work where the offer should feel premium and deliberate."
  buttons={[
    { label: "Start a project", href: "#", variant: "default" },
    { label: "View case studies", href: "#", variant: "outline" },
  ]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "Strategy workshops" },
      title: "Strategy workshops",
      description:
        "Guide teams through product discovery and service definition with structured facilitation.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "Component audits" },
      title: "Component audits",
      description:
        "Review existing design systems and recommend improvements for consistency and scale.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "Section implementation" },
      title: "Section implementation",
      description:
        "Translate designs into production-ready, responsive section layouts.",
      button: { label: "Learn more", href: "#" },
    },
    {
      image: { src: PlaceholderImage, alt: "Launch support" },
      title: "Launch support",
      description:
        "Dedicated hands-on support for shipping day and the critical first week.",
      button: { label: "Learn more", href: "#" },
    },
  ]}
/>

---
import Services4Block from "@/components/blocks/services-4.astro"
import PlaceholderImage from "@/assets/placeholder.webp"
---

<Services4Block
  title="Clean cards when each service speaks for itself"
  description="A minimal approach where the image and title do the heavy lifting."
  buttons={[{ label: "Get started", href: "#", variant: "default" }]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "Research" },
      title: "Research",
      description: "Understand the problem space before designing solutions.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "System design" },
      title: "System design",
      description: "Architect scalable systems that grow with your team.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Build" },
      title: "Build",
      description: "Translate refined designs into production-ready code.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Rollout" },
      title: "Rollout",
      description: "Deploy and support the launch across all environments.",
      href: "#",
    },
  ]}
/>

---
import Services5Block from "@/components/blocks/services-5.astro"
---

<Services5Block
  badge="Specialties"
  title="Icon-based cards for a quick service overview"
  description="Use this layout when the service list is concise and each entry benefits from a visual anchor rather than an image."
  services={[
    {
      icon: "search",
      title: "Documentation systems",
      description:
        "Pair concise cards with a broader framing message. Structure content for discoverability and maintainability.",
      href: "#",
    },
    {
      icon: "pencil-ruler",
      title: "Launch pages",
      description:
        "Pair concise cards with a broader framing message. Design high-converting pages that ship on schedule.",
      href: "#",
    },
    {
      icon: "code",
      title: "Editorial redesigns",
      description:
        "Pair concise cards with a broader framing message. Modernize editorial layouts without disrupting the content pipeline.",
      href: "#",
    },
    {
      icon: "rocket",
      title: "Platform migration",
      description:
        "Pair concise cards with a broader framing message. Move between platforms without losing content or momentum.",
      href: "#",
    },
  ]}
/>

---
import Services6Block from "@/components/blocks/services-6.astro"
import PlaceholderImage from "@/assets/placeholder.webp"
---

<Services6Block
  badge="Studio work"
  title="Use a side description with overlay cards when the offer should feel premium"
  description="A sticky sidebar provides context while the service cards scroll into view."
  buttons={[
    { label: "Start a project", href: "#", variant: "default" },
    { label: "View work", href: "#", variant: "outline" },
  ]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "Strategy workshops" },
      title: "Strategy workshops",
      description:
        "Guide teams through product discovery and service definition.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Component audits" },
      title: "Component audits",
      description:
        "Review existing systems and recommend improvements for scale.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Section implementation" },
      title: "Section implementation",
      description: "Translate designs into production-ready section layouts.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Launch support" },
      title: "Launch support",
      description:
        "Hands-on support for shipping day and the first week after.",
      href: "#",
    },
  ]}
/>

---
import Services7Block from "@/components/blocks/services-7.astro"
import PlaceholderImage from "@/assets/placeholder.webp"
---

<Services7Block
  badge="High-touch offer"
  title="A featured layout where the first service takes center stage"
  description="This layout uses a larger featured card alongside smaller cards for a hierarchy-driven grid."
  buttons={[
    { label: "Start conversation", href: "#", variant: "default" },
    { label: "Read reviews", href: "#", variant: "outline" },
  ]}
  services={[
    {
      image: { src: PlaceholderImage, alt: "Brand strategy" },
      label: "Featured",
      title: "Brand strategy & identity",
      description:
        "A comprehensive service that covers positioning, visual identity, and brand guidelines for teams scaling fast.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Design systems" },
      label: "Core",
      title: "Design systems",
      description: "Component libraries and tokens built for production scale.",
      href: "#",
    },
    {
      image: { src: PlaceholderImage, alt: "Development" },
      label: "Core",
      title: "Front-end development",
      description:
        "Production-ready code from responsive layouts to interactions.",
      href: "#",
    },
  ]}
/>