Services 1
---
import Services1Block from "@/components/blocks/services-1.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---
<Services1Block
badge="What we do"
title="A simple services section for agencies and internal platform teams"
buttons={[{ label: "View all services", href: "#" }]}
services={[
{
image: { src: PlaceholderImage, alt: "" },
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: "/blocks/",
},
{
image: { src: PlaceholderImage, alt: "" },
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: "/components/",
},
{
image: { src: PlaceholderImage, alt: "" },
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: "/docs/installation/",
},
{
image: { src: PlaceholderImage, alt: "" },
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: "/docs/",
},
]}
/>Services 2
---
import Services2Block from "@/components/blocks/services-2.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---
<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: "" },
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: "About discovery", href: "#" },
},
{
image: { src: PlaceholderImage, alt: "" },
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: "About prototyping", href: "#" },
},
{
image: { src: PlaceholderImage, alt: "" },
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: "About shipping", href: "#" },
},
]}
/>Services 3
---
import Services3Block from "@/components/blocks/services-3.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---
<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: "#" },
{ label: "View case studies", href: "#" },
]}
services={[
{
image: { src: PlaceholderImage, alt: "" },
title: "Strategy workshops",
description:
"Guide teams through product discovery and service definition with structured facilitation.",
button: { label: "About workshops", href: "#" },
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Component audits",
description:
"Review existing design systems and recommend improvements for consistency and scale.",
button: { label: "About audits", href: "#" },
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Section implementation",
description:
"Translate designs into production-ready, responsive section layouts.",
button: { label: "About implementation", href: "#" },
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Launch support",
description:
"Dedicated hands-on support for shipping day and the critical first week.",
button: { label: "About launch support", href: "#" },
},
]}
/>Services 4
---
import Services4Block from "@/components/blocks/services-4.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---
<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: "#" }]}
services={[
{
image: { src: PlaceholderImage, alt: "" },
title: "Research",
description: "Understand the problem space before designing solutions.",
link: { label: "About research", href: "/docs/" },
},
{
image: { src: PlaceholderImage, alt: "" },
title: "System design",
description: "Architect scalable systems that grow with your team.",
link: { label: "About system design", href: "/blocks/" },
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Build",
description: "Translate refined designs into production-ready code.",
link: { label: "About build", href: "/components/" },
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Rollout",
description: "Deploy and support the launch across all environments.",
link: { label: "About rollout", href: "/docs/installation/" },
},
]}
/>Services 5
---
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.",
link: { label: "About documentation systems", href: "/docs/" },
},
{
icon: "pencil-ruler",
title: "Launch pages",
description:
"Pair concise cards with a broader framing message. Design high-converting pages that ship on schedule.",
link: { label: "About launch pages", href: "/blocks/" },
},
{
icon: "code",
title: "Editorial redesigns",
description:
"Pair concise cards with a broader framing message. Modernize editorial layouts without disrupting the content pipeline.",
link: { label: "About editorial redesigns", href: "/components/" },
},
{
icon: "rocket",
title: "Platform migration",
description:
"Pair concise cards with a broader framing message. Move between platforms without losing content or momentum.",
link: { label: "About platform migration", href: "/docs/installation/" },
},
]}
/>Services 6
---
import Services6Block from "@/components/blocks/services-6.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---
<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: "#" },
{ label: "View work", href: "#" },
]}
services={[
{
image: { src: PlaceholderImage, alt: "" },
title: "Strategy workshops",
description:
"Guide teams through product discovery and service definition.",
href: "/blocks/",
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Component audits",
description:
"Review existing systems and recommend improvements for scale.",
href: "/components/",
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Section implementation",
description: "Translate designs into production-ready section layouts.",
href: "/docs/installation/",
},
{
image: { src: PlaceholderImage, alt: "" },
title: "Launch support",
description:
"Hands-on support for shipping day and the first week after.",
href: "/docs/",
},
]}
/>Services 7
---
import Services7Block from "@/components/blocks/services-7.astro"
import PlaceholderImage from "@/assets/placeholder.svg"
---
<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: "#" },
{ label: "Read reviews", href: "#" },
]}
services={[
{
image: { src: PlaceholderImage, alt: "" },
label: "Featured",
title: "Brand strategy & identity",
description:
"A comprehensive service that covers positioning, visual identity, and brand guidelines for teams scaling fast.",
href: "/blocks/",
},
{
image: { src: PlaceholderImage, alt: "" },
label: "Core",
title: "Design systems",
description: "Component libraries and tokens built for production scale.",
href: "/components/",
},
{
image: { src: PlaceholderImage, alt: "" },
label: "Core",
title: "Front-end development",
description:
"Production-ready code from responsive layouts to interactions.",
href: "/docs/installation/",
},
]}
linkLabel="View service"
/>