Add CTA Components and Dynamic Tool Count

Summary

Created reusable call-to-action components with different visual weights and implemented a dynamic tool counter that displays the number of tools in the tooling collection.

Why Care

These components enhance the UI by providing consistent, reusable call-to-action elements with different visual weights, allowing for better visual hierarchy in the interface. The dynamic tool count adds contextual information without requiring manual updates when tools are added or removed.

Implementation

Changes Made

  • New Components:
    • site/src/components/basics/cta/ButtonLoud.astro: High-visibility button with bright background for primary actions
    • site/src/components/basics/cta/TextCTA.astro: Subtle text-based CTA with gradient text and animated underline
    • site/src/components/basics/ToolCount.astro: Dynamic component that displays the number of tools in the tooling collection
  • Updated Files:
    • site/astro.config.mjs: Configuration updates to support new components
    • site/src/components/MainContent.astro: Integrated ToolCount component
    • site/src/components/basics/messages/AlternatingSideImage.astro: Updated to use new CTA components
    • site/src/styles/global.css: Added shamrock-fountain gradient variable for consistent styling

Technical Details

  • Both CTA components support both link (<a>) and button (<button>) elements depending on whether an href is provided
  • Components accept custom CSS classes and onClick handlers for flexibility
  • TextCTA uses background-clip: text technique to apply gradient to text
  • ToolCount dynamically fetches the number of tools from the tooling collection
  • Added accessibility features including focus states

Integration Points

  • AlternatingSideImage now uses the new CTA components instead of inline styling
  • MainContent displays the dynamic tool count alongside the "Tools" heading
  • Global CSS includes a new gradient variable that can be reused across components

Documentation

  • Components include comprehensive JSDoc comments explaining props and usage
  • Example usage is available in the AlternatingSideImage and MainContent components