Hero with Diagram Component
Hero section component that integrates a Mermaid decision tree diagram for the "How Festa Works" page. Features trauma-informed UX, responsive layouts, and WCAG 2.2 AA compliance.
📋 Component Specifications
Props
headline- Main page headlinesubheadline- Supporting subheadlinediagramCode- Mermaid diagram syntaxcta- Call to action object (text, url)layout- Layout variant (default, centered, split)
Features
- ✓ Integrated Mermaid diagram rendering
- ✓ Responsive mobile/tablet/desktop layouts
- ✓ Festa calm gradient backgrounds
- ✓ WCAG 2.2 AA color contrast compliance
- ✓ Keyboard accessible navigation
- ✓ Trauma-informed visual hierarchy
Version 1: Default Layout (Text Above, Diagram Below)
Traditional hero layout with headline/subheadline stacked above the diagram. Best for prioritizing text content.
Three Ways We Partner for Impact
Whether you need to build internal capacity, implement a full-scale project, or co-create something entirely new, we meet you where you are.
organization need?"} Question -->|"Build internal
capacity"| DesignForGood["💡 We Design for Good
Build Your Team's
Design Capacity"] Question -->|"Full project
implementation"| HumanityForGood["❤️ Humanity for Good
In-House Social
Impact Projects"] Question -->|"Co-creation &
partnership"| CollaborationForGood["🤲 Collaboration for Good
Full Partnership
Co-Design"] style Start fill:#007f4e,stroke:#00a65c,stroke-width:3px,color:#fff style Question fill:#72b043,stroke:#447728,stroke-width:3px,color:#fff style DesignForGood fill:#007f4e,stroke:#00a65c,stroke-width:3px,color:#fff style HumanityForGood fill:#72b043,stroke:#447728,stroke-width:3px,color:#fff style CollaborationForGood fill:#f37324,stroke:#ea580c,stroke-width:3px,color:#fff
Not sure which approach is right for you? Book a free consultation and we'll help you figure it out together.
Version 2: Centered Layout (Diagram Emphasized)
Centered layout with diagram as primary visual element. Best for visual learners and decision-making clarity.
Three Ways We Partner for Impact
We meet you where you are—whether building capacity, implementing projects, or co-creating solutions.
Partnership Path"} Question -->|"Capacity"| Design["💡 Design
for Good"] Question -->|"Projects"| Humanity["❤️ Humanity
for Good"] Question -->|"Partnership"| Collab["🤲 Collaboration
for Good"] style Start fill:#007f4e,stroke:#00a65c,stroke-width:4px,color:#fff style Question fill:#72b043,stroke:#447728,stroke-width:4px,color:#fff style Design fill:#007f4e,stroke:#00a65c,stroke-width:3px,color:#fff style Humanity fill:#72b043,stroke:#447728,stroke-width:3px,color:#fff style Collab fill:#f37324,stroke:#ea580c,stroke-width:3px,color:#fff
Version 3: Split Layout (50/50 Text & Diagram)
Side-by-side layout balancing text and diagram. Best for desktop viewing with ample explanation space.
Three Ways We Partner for Impact
Whether you need to build internal capacity, implement a full-scale project, or co-create something entirely new, we meet you where you are.
Each partnership model is designed to address specific organizational needs while maintaining our commitment to trauma-informed design, accessibility, and measurable social impact.
Learn MoreNeeds"] --> Question{"What do you
need most?"} Question -->|"Build
Capacity"| Design["💡 Design
for Good"] Question -->|"Full
Project"| Humanity["❤️ Humanity
for Good"] Question -->|"True
Partnership"| Collab["🤲 Collaboration
for Good"] style Start fill:#007f4e,stroke:#00a65c,stroke-width:3px,color:#fff style Question fill:#72b043,stroke:#447728,stroke-width:3px,color:#fff style Design fill:#007f4e,stroke:#00a65c,stroke-width:2px,color:#fff style Humanity fill:#72b043,stroke:#447728,stroke-width:2px,color:#fff style Collab fill:#f37324,stroke:#ea580c,stroke-width:2px,color:#fff
Version 4: Minimal Layout (Compact for Mobile-First)
Streamlined mobile-first layout with minimal text and simplified diagram. Best for quick decision-making.
How Festa Works
Three partnership paths for social impact organizations
Implementation Notes
Design Considerations
- ✓ Mobile-First: All layouts tested on mobile, tablet, and desktop breakpoints
- ✓ Gradient Backgrounds: Festa calm colors optimized for WCAG 2.2 AA contrast
- ✓ Diagram Visibility: Mermaid colors tested on all gradient backgrounds
- ✓ Responsive Typography: Text scales appropriately across devices
- ✓ Visual Hierarchy: Clear progression from headline → diagram → CTA
Accessibility Features
- ✓ Color Contrast: All text meets WCAG 2.2 AA standards (4.5:1 minimum)
- ✓ Focus Indicators: Visible focus rings on all interactive elements
- ✓ Semantic HTML: Proper heading hierarchy (h1 → h2 → h3)
- ✓ Keyboard Navigation: All CTAs and links fully keyboard accessible
- ✓ Screen Reader Support: ARIA labels and descriptive link text
Trauma-Informed Design
- ✓ Clear Navigation: Decision tree provides predictable pathways
- ✓ No Sudden Movement: Diagram is static, no auto-animations
- ✓ Empowering Language: "We meet you where you are" messaging
- ✓ Visual Breathing Room: Generous spacing prevents cognitive overwhelm
- ✓ User Control: User chooses when to interact with diagram or proceed to CTA
Usage Guidelines
When to Use Each Layout
Version 1: Default Layout
Use when text content needs to be prioritized and read before viewing the diagram. Best for pages requiring detailed explanation.
Version 2: Centered Layout
Use when the diagram is the primary communication tool. Best for visual learners and quick decision-making.
Version 3: Split Layout
Use on desktop-focused pages where you have significant explanatory content alongside the diagram. Best for detailed service pages.
Version 4: Minimal Layout
Use for mobile-first experiences or when space is limited. Best for overview pages or navigation hubs.