+))}
+```
+
+### Environment Variables
+```astro
+const site = import.meta.env.PUBLIC_IMAGES_URL;
+```
+
+### Link Handling
+```astro
+
+ {link.title}
+
+```
+
+## Carousel Pattern (Embla)
+
+Components like [TeamCarousel.astro](src/TeamCarousel.astro) use Embla Carousel:
+
+```astro
+
+```
+
+## Technology Radar Pattern
+
+The Technology Radar components provide an interactive visualization of technology adoption. The radar can be added to any CMS-managed page using the `TechnologyRadar` component.
+
+### TechnologyRadar Component (CMS-Driven)
+
+The main CMS component that can be added to any page to display the technology radar.
+
+**Props:**
+- `__component: "ui.technology-radar"` - Component identifier for CMS
+- `title: string` - Title displayed above the radar
+
+**Features:**
+- Automatically fetches all radar items from CMS
+- Renders the complete radar visualization using `RadarChart`
+- Includes tag filtering functionality with toggle buttons
+- Displays all unique tags from radar items
+- Clicking a tag filters radar items to show only those with that tag
+- Clicking the same tag again removes the filter
+- Smooth opacity transitions for filtered items
+- **Hover highlighting**: When hovering over an item in the quadrant list, the corresponding radar item on the chart is highlighted with enhanced visual effects (larger size, color fill, and glow)
+- **Tag filtering**: Stores tag information in `data-tags` attributes on radar items for client-side filtering
+- Uses `initializeOnReady` utility from radarUtils for consistent initialization across page loads
+
+**Usage in CMS:**
+Add the component to any page's components array in Strapi with:
+- Component type: `ui.technology-radar`
+- Title field: e.g., "Our Technology Radar"
+
+**Direct Usage (if needed):**
+```astro
+import { TechnologyRadar } from "@xprtz/ui";
+
+
+```
+
+**Important Notes:**
+- The component handles its own data fetching - no need to pass items
+- Tag filtering is client-side and persists until page reload
+- Links to radar items point to `/radar-items/{slug}` with a `from` query parameter
+- The `from` parameter contains the current page slug for proper back navigation
+- This replaces the old hard-coded expertise page approach
+
+**Back Navigation:**
+- The component automatically detects the current page URL
+- When users click on a radar item, the current page slug is passed as `?from={slug}`
+- The radar item page uses this to create a dynamic "Back" link
+- If no `from` parameter exists, it defaults to `/expertise` for backwards compatibility
+
+### RadarChart Component
+
+The main radar visualization that combines four quadrants into a complete circle with full responsive design support.
+
+**Props:**
+- `items?: RadarItem[]` - Array of radar items from CMS
+- `quadrantSize?: number` - Size of each quadrant in pixels (default: 400)
+- `parentPageSlug?: string` - Slug of the parent page for back navigation (optional)
+
+**Features:**
+- Automatically numbers items sequentially (starting at 1)
+- Distributes items to appropriate quadrants based on `item.quadrant` field
+- Uses predefined colors for each quadrant:
+ - **Techniques**: Blue (#3b82f6)
+ - **Tools**: Green (#10b981)
+ - **Platforms**: Amber (#f59e0b)
+ - **Languages & Frameworks**: Red (#ef4444)
+- 20px margin between quadrants for visual separation
+- Interactive zoom functionality when clicking quadrants
+- Cross-highlighting: hovering list items highlights corresponding radar items
+
+**Responsive Design - Three Distinct States:**
+
+The RadarChart has three distinct view states. **IMPORTANT: Animations for one state must NOT affect animations in other states.**
+
+1. **Full Chart State (> 1024px width)**
+ - Full radar chart with four quadrants displayed
+ - Hover effects dim non-hovered quadrants to 50% opacity
+ - Click to zoom individual quadrants (1.75x scale)
+ - Zoomed quadrant transforms to center-left position
+ - Ring labels (Adopt, Trial, Assess, Hold) transform with zoomed quadrant
+ - Item list appears to the right of the zoomed quadrant
+
+2. **Tiles State (≤ 1024px and > 360px width)**
+ - Radar chart hidden (`display: none`)
+ - Four colored tiles displayed in 2x2 grid
+ - Each tile represents a quadrant with matching colors
+ - Hover effects dim non-hovered tiles to 50% opacity
+ - Click shows item list, hides tiles
+
+3. **Single Column Tiles State (≤ 360px width)**
+ - Tiles stack in single column (1x4 grid)
+ - Hover dim effects disabled (doesn't make sense for single column)
+ - Click shows item list, hides tiles
+
+**Animation Rules:**
+
+1. **Always use CSS keyframes for animations** - CSS transitions have caused issues on mobile devices. All animations must be implemented using `@keyframes`.
+
+2. **State isolation** - Animations defined for one state (Full Chart, Tiles, Single Column) must NOT affect other states. Use appropriate media query scoping.
+
+**State Management:**
+
+The component uses CSS classes to manage states:
+- `list-visible` - When item list is shown
+- `zoomed` - Applied to radar chart when any quadrant is zoomed
+- `zoom-{quadrant}` - Applied alongside `zoomed` to identify which quadrant (e.g., `zoom-tools`)
+- `zoomed-in` - Applied to the specific quadrant being zoomed
+- `visible` - Applied to item list to show it
+- `hovering` - Applied during hover interactions
+- `active` - Applied to the hovered element
+
+**Initialization:**
+
+The component uses the `initializeOnReady` utility function from `radarUtils.ts` for consistent initialization:
+- Handles both Astro page-load events and initial page load
+- Ensures initialization runs exactly once per page load
+- Shared pattern across all radar components
+
+**Usage:**
+```astro
+import { RadarChart } from "@xprtz/ui";
+
+
+```
+
+### RadarQuadrant Component
+
+Individual quadrant representing 90° of the radar (one quarter circle).
+
+**Props:**
+- `gridPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right"` - Position in the 2x2 grid layout
+- `color: string` - Color for the quadrant
+- `size?: number` - Size in pixels (default: 400)
+- `items?: RadarItemWithNumber[]` - Radar items to display
+- `parentPageSlug?: string` - Slug of the parent page for back navigation (optional)
+
+**Features:**
+- Four concentric rings representing adoption stages (defined in `radarUtils.ts`):
+ - **Adopt** (innermost, 25% radius)
+ - **Trial** (50% radius)
+ - **Assess** (75% radius)
+ - **Hold** (outermost, 100% radius)
+- Items displayed as numbered circles (12px radius)
+- Deterministic positioning using golden angle distribution
+- Interactive items with:
+ - SVG tooltips showing "{number}. {title}"
+ - Click to navigate to item detail page
+ - Hover effects (gray background on hover)
+ - Highlight effects when item in list is hovered (colored fill, larger size, glow)
+- Origin point positioned at appropriate corner based on grid position
+- **Tag data**: Each radar item includes a `data-tags` attribute with JSON-serialized tag titles for filtering
+
+**Item Positioning Algorithm:**
+- Items placed within their ring based on `item.ring` value
+- Pseudo-random but deterministic distribution using item number as seed
+- Golden angle (137.508°) for optimal spread
+- Radius variation within ring (30-90% of ring width) to reduce overlap
+- Optimized for 20-30 items per quadrant
+
+**Item Links:**
+- Items link to `/radar-items/{slug}` for individual radar item pages
+- Uses `buildRadarItemLink` utility from `radarUtils.ts` for consistent link generation
+- If `parentPageSlug` is provided, adds `?from={parentPageSlug}` query parameter for back navigation
+- The radar item page reads this parameter to create a dynamic back link
+
+**Usage:**
+```astro
+import { RadarQuadrant } from "@xprtz/ui";
+
+
+```
+
+### RadarItem Types
+
+The radar system uses two related types:
+
+```typescript
+// Base type from CMS (no number property)
+type RadarItem = {
+ slug: string;
+ quadrant: RadarQuadrant;
+ ring: RadarRing;
+ title: string;
+ description: string;
+ pros: ListItem[];
+ cons: ListItem[];
+ conclusion: string;
+ tags: Tag[];
+}
+
+// Extended type with number property (added by UI layer)
+type RadarItemWithNumber = RadarItem & {
+ number: number; // Sequential number (1, 2, 3...)
+}
+```
+
+**Type Usage Flow:**
+1. Fetch `RadarItem[]` from CMS (no numbers)
+2. RadarChart component adds numbers, creating `RadarItemWithNumber[]`
+3. Pass `RadarItemWithNumber[]` to child components (RadarQuadrant, RadarQuadrantItemList)
+
+### RadarQuadrantItemList Component
+
+List view displaying all items within a selected quadrant, grouped by ring.
+
+**Props:**
+- `items: RadarItemWithNumber[]` - Array of radar items for the quadrant
+- `quadrantName: string` - Name of the quadrant
+- `color: string` - Color for the quadrant header
+- `parentPageSlug?: string` - Slug of the parent page for back navigation (optional)
+
+**Features:**
+- Groups items by ring (Adopt, Trial, Assess, Hold) using `RINGS` constant from `radarUtils.ts`
+- Displays item number, title, and description
+- Links to item detail pages with `from` query parameter using `buildRadarItemLink` utility
+- Scrollable list with sticky ring headers
+- "Back to radar" button to return to main view
+- Hidden by default (`display: none`), shown when quadrant is clicked (`.visible` class)
+- **Interactive hover**: Hovering over list items highlights the corresponding radar item on the chart
+- Custom scrollbar styling for better UX in scrollable content
+
+### Shared Utilities (radarUtils.ts)
+
+The radar components share common utilities defined in `radarUtils.ts`:
+
+**Constants:**
+```typescript
+export const RINGS: readonly { readonly label: RadarRing; readonly radiusPosition: number }[] = [
+ { label: "Adopt", radiusPosition: 25 },
+ { label: "Trial", radiusPosition: 50 },
+ { label: "Assess", radiusPosition: 75 },
+ { label: "Hold", radiusPosition: 100 },
+] as const;
+```
+- Single source of truth for ring configuration
+- Used by RadarChart, RadarQuadrant, and RadarQuadrantItemList
+- Ensures consistent ring ordering and positioning across all components
+
+**Functions:**
+
+`buildRadarItemLink(slug: string, parentPageSlug?: string): string`
+- Builds consistent links to radar item pages
+- Adds optional `?from={parentPageSlug}` query parameter for back navigation
+- Used by RadarQuadrant and RadarQuadrantItemList
+
+`initializeOnReady(callback: () => void): void`
+- Handles both Astro page-load events and initial page load
+- Ensures callback runs exactly once when page is ready
+- Used by RadarChart and TechnologyRadar for consistent initialization
+
+### Integration Example
+
+**Using TechnologyRadar (Recommended for CMS pages):**
+```astro
+---
+import { TechnologyRadar } from "@xprtz/ui";
+---
+
+
+
+```
+
+**Using RadarChart directly (Advanced usage):**
+```astro
+---
+import { fetchData, type RadarItem } from "@xprtz/cms";
+import { RadarChart } from "@xprtz/ui";
+
+const allRadarItems = await fetchData>({
+ endpoint: "radar-items",
+ wrappedByKey: "data",
+ query: {
+ "populate[tags][fields][0]": "title",
+ status: "published",
+ },
+});
+---
+
+
+```
+
+## Important Notes
+
+### Do NOT:
+- Add components that don't have matching CMS types
+- Use inline styles (prefer Tailwind)
+- Create dependencies on specific apps
+- Hardcode environment-specific values
+- Skip type definitions
+
+### DO:
+- Follow existing naming conventions
+- Maintain type safety
+- Use Tailwind utility classes
+- Keep components reusable and generic
+- Document complex component logic
+- Test in multiple contexts
+- Ensure accessibility
+- Export all new components from index.ts
+- Use shared utilities from radarUtils.ts for radar components
+- Use `initializeOnReady` for client-side initialization in Astro components
+- **For radar animations**: Always use CSS keyframes (not transitions) and ensure animations for one responsive state don't affect other states
diff --git a/libs/ui/index.ts b/libs/ui/index.ts
index 8bb5790..7b4847b 100644
--- a/libs/ui/index.ts
+++ b/libs/ui/index.ts
@@ -19,6 +19,11 @@ import Listing from "./src/Listing.astro";
import SubtitleWithText from "./src/SubtitleWithText.astro";
import Quote from "./src/Quote.astro";
import Blogs from "./src/Blogs.astro";
+import TechnologyRadar from "./src/radar/TechnologyRadar.astro";
+import RadarQuadrant from "./src/radar/RadarQuadrant.astro";
+import RadarChart from "./src/radar/RadarChart.astro";
+import RadarQuadrantItemList from "./src/radar/RadarQuadrantItemList.astro";
+import { QUADRANTS, RINGS, initializeOnReady } from "./src/radar/radarUtils.js";
import ComponentRenderer from "./src/ComponentRenderer.astro";
@@ -44,5 +49,12 @@ export {
SubtitleWithText,
Quote,
Blogs,
+ TechnologyRadar,
+ RadarQuadrant,
+ RadarChart,
+ RadarQuadrantItemList,
+ QUADRANTS,
+ RINGS,
+ initializeOnReady,
ComponentRenderer
};
diff --git a/libs/ui/src/ComponentRenderer.astro b/libs/ui/src/ComponentRenderer.astro
index f440b91..81304ad 100644
--- a/libs/ui/src/ComponentRenderer.astro
+++ b/libs/ui/src/ComponentRenderer.astro
@@ -14,6 +14,7 @@ import Values from "./Values.astro";
import LogoCloud from "./LogoCloud.astro";
import Directors from "./Directors.astro";
import TeamCarousel from "./TeamCarousel.astro";
+import TechnologyRadar from "./radar/TechnologyRadar.astro";
interface Component {
__component: string;
@@ -42,6 +43,7 @@ const componentMap: Record = {
"ui.klant-logo-s": LogoCloud,
"ui.team": TeamCarousel,
"ui.directeuren": Directors,
+ "ui.technology-radar": TechnologyRadar,
};
---
diff --git a/libs/ui/src/Content.astro b/libs/ui/src/Content.astro
index bdf78ea..e0ae5ab 100644
--- a/libs/ui/src/Content.astro
+++ b/libs/ui/src/Content.astro
@@ -55,7 +55,7 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
+