Heads Up! Slowdown Detected:
Ghostery Ad Blocker Impacts Website Speed. Please Disable for Optimal Browsing.

Blocks catalog

Pick something on the left — only that one shows here, nothing else to scroll past. Full written guide: src/components/blocks/README.md.

How to use these blocks

This is the whole process — no files, no folders, nothing technical required:

1. Add a block to a page

  1. Say which block you want and which page it's for. Two ways to say it:
    • In plain words — "the image + text block, on the features page."
    • Or by its short command, shown at the top of every block's page in this catalog (next to its name, e.g. /imagetext) — "put /stepsslider on the agency page." Click a block in the menu on the left to see its command and exactly what it looks like.
  2. Give Claude your words — the title and paragraph, exactly as you want them to read.
  3. Give Claude your image or video the easy way:
    • Have an image file? Drag it into the chat — that's it, no upload step.
    • Image already online somewhere? Paste the link.
    • Want a video instead? Say "use this video" and paste the Vidalytics/YouTube/Vimeo link or id — same block, no extra steps.
    • A GIF works exactly like an image — drag it in or paste its link.
  4. Claude puts it on the page and sends you a link to check how it looks.

2. Change how a block looks, any time after

Every block has its colors and sizes built to be edited in one shot — you never need to describe where in the code something is, just say what should change:

  • "Make that title bigger" / "make the body text smaller"
  • "Change the background to purple instead of blue"
  • "Make the card taller" / "make the icons bigger"
  • "Make the image on the right side bigger"
You never have to open a file, find a folder, or know what a "prop" is — that's the part Claude handles. Just describe what you want and hand over the content, or say what should change on something already on the page.
Technical details (for developers)
  1. Open the page file under astro/src/pages/ (e.g. astro/src/pages/features.astro).
  2. Import the block near the top, between the --- lines: import ImageTextBlock from '../components/blocks/ImageTextBlock.astro';
  3. Paste the block's code (copied from any block's page in this catalog) where it should appear.
  4. Text lives in title="..." / text="..." — edit the words in the quotes directly.
  5. Images/gifs: save the file under astro/public/images/, then set image="/images/your-file-name.png" — or set image to any external URL directly.
  6. Video: set videoId="..." instead of image (where supported).
  7. To restyle it, open the block's own file in astro/src/components/blocks/ and look for the EASY EDITS comment at the top of its <style> block — every block has one, with a named variable (and a comment explaining it) for text color, background color, title size, body text size, card size, image size, and icon size. Change the value, nothing else needs to move.
  8. Run npm run dev and check the page in the browser.

Full written version of all of this: astro/src/components/blocks/README.md. Registry of every block that exists: astro/src/components/BLOCKS.md. The team-wide rule for when to save something as a block:docs/WEBSITE-SOP.md.

Or jump straight to something