{{ . | markdownify }}
{{end}} - {{ with $block.content.text }}{{ . | $page.RenderString | emojify }}
{{end}} + {{ with $block.content.text }}{{ . | $page.RenderString | emojify }}
{{end}} {{ if $block.content.primary_action.url }} {{ $link := $block.content.primary_action.url }} diff --git a/modules/blox-tailwind/blox/hero/component.jsx b/modules/blox-tailwind/blox/hero/component.jsx index 8f39eca8..d3bbfeb4 100644 --- a/modules/blox-tailwind/blox/hero/component.jsx +++ b/modules/blox-tailwind/blox/hero/component.jsx @@ -79,7 +79,7 @@ export const HeroBlock = ({content, design, id, icon_svg}) => { {/* Subtitle/Text */} {content.text && ( - + )} {/* Action Buttons */} diff --git a/modules/blox-tailwind/blox/logos/README.md b/modules/blox-tailwind/blox/logos/README.md new file mode 100644 index 00000000..e182c845 --- /dev/null +++ b/modules/blox-tailwind/blox/logos/README.md @@ -0,0 +1,220 @@ +# Logos Block + +Display partner, sponsor, or collaborator logos with modern interactive effects and multiple display modes. Perfect for showcasing affiliations, building trust, and highlighting collaborations. + +## Features + +- **Multiple Display Modes**: Grid, carousel, or marquee layouts +- **Interactive Effects**: Grayscale to color on hover, smooth scaling +- **Clickable Logos**: Link to partner websites +- **Hover Tooltips**: Show partner descriptions on hover +- **Responsive Design**: Adapts perfectly to all screen sizes +- **Smooth Animations**: Professional transitions and effects +- **Flexible Configuration**: Use structured data or folder-based logos +- **Performance Optimized**: Lazy loading and WebP format support +- **Dark Mode Support**: Seamless theme switching + +## Display Modes + +### Grid Mode (Default) +Classic responsive grid layout with hover effects: +- 2 columns on mobile +- 3-6 columns on larger screens +- Grayscale to color transition on hover +- Scale animation on hover + +### Carousel Mode +Auto-scrolling horizontal carousel: +- Continuous smooth scrolling +- Pauses on hover +- Duplicate items for seamless loop +- Ideal for many logos + +### Marquee Mode +Traditional marquee scroll effect: +- Continuous horizontal movement +- Lightweight and performant +- Good for header/footer placement + +## Usage + +### Basic Grid Layout +```yaml +sections: + - block: logos + content: + title: Our Partners & Collaborators + subtitle: Working with leading institutions worldwide + text: We collaborate with top universities and research centers + logos: + - name: MIT + image: partners/mit.png + url: https://mit.edu + description: Massachusetts Institute of Technology + - name: Stanford University + image: partners/stanford.svg + url: https://stanford.edu + description: Leading research university + - name: Google Research + image: partners/google.png + url: https://research.google + description: AI and ML research + - name: Microsoft Research + image: partners/microsoft.svg + url: https://www.microsoft.com/research + description: Computing research lab + design: + display_mode: grid + css_class: "bg-gray-50 dark:bg-gray-900" +``` + +### Carousel Display +```yaml +sections: + - block: logos + content: + title: Trusted By Industry Leaders + logos: + # Add 8-12 logos for best carousel effect + - name: Company 1 + image: sponsors/company1.png + url: https://example.com + # ... more logos + design: + display_mode: carousel +``` + +### Legacy Folder Mode +For backward compatibility or quick setup: +```yaml +sections: + - block: logos + content: + title: Our Sponsors + logo_folder: sponsors # Loads all images from assets/media/sponsors/ + design: + display_mode: grid +``` + +## Options + +### Content Options + +- **title**: Main heading for the section +- **subtitle**: Optional subtitle (shown in accent color) +- **text**: Description text below title +- **logos**: Array of logo configurations + - `name`: Partner/sponsor name (shown in tooltip) + - `image`: Path relative to `assets/media/` + - `url`: Website URL + - `external`: Open in new tab (default: true) + - `description`: Hover tooltip text +- **logo_folder**: Legacy option to load all images from a folder +- **cta**: Optional call-to-action button + - `text`: Button text + - `url`: Button link + - `icon`: Optional icon + +### Design Options + +- **display_mode**: Choose layout style + - `grid`: Responsive grid (default) + - `carousel`: Auto-scrolling carousel + - `marquee`: Classic marquee effect +- **show_pattern**: Add decorative background pattern (default: false) + +## Image Guidelines + +### Recommended Formats +- **SVG**: Best for logos (scalable, small file size) +- **PNG**: For logos with transparency +- **WebP**: Modern format with best compression + +### Size Recommendations +- **Grid Mode**: 280x140px (will be auto-fitted) +- **Carousel Mode**: 280x140px minimum +- **Aspect Ratio**: 2:1 or square works best + +### Optimization Tips +1. Use SVG when possible for crisp rendering +2. Optimize PNGs with tools like TinyPNG +3. Keep file sizes under 50KB per logo +4. Use consistent dimensions for visual harmony + +## Styling + +### Hover Effects +- Grayscale filter removed on hover +- Opacity increases from 60% to 100% +- Smooth scale transformation (110%) +- Background highlight on hover + +### Custom CSS +Add custom styles to enhance the block: + +```css +/* Example: Custom logo sizing */ +.logos-block img { + max-height: 80px; +} + +/* Example: Remove grayscale on specific logo */ +.partner-featured img { + filter: none !important; + opacity: 1 !important; +} +``` + +## Best Practices + +1. **Logo Quality**: Use high-resolution logos (2x display size) +2. **Consistency**: Keep logos similar in visual weight +3. **Accessibility**: Always provide alt text via `name` field +4. **Performance**: Optimize images before adding +5. **Responsive**: Test on mobile devices +6. **Links**: Verify all external links work +7. **Copyright**: Ensure you have permission to display logos + +## Examples + +### Research Lab Partners +```yaml +logos: + - name: National Science Foundation + image: partners/nsf.svg + url: https://nsf.gov + description: Federal funding agency + - name: NIH + image: partners/nih.png + url: https://nih.gov + description: National Institutes of Health +``` + +### Conference Sponsors +```yaml +logos: + - name: Gold Sponsor - Microsoft + image: sponsors/microsoft-gold.png + url: https://microsoft.com + description: Gold level sponsor +``` + +### Industry Collaborations +```yaml +logos: + - name: OpenAI + image: collaborators/openai.svg + url: https://openai.com + description: AI research partnership +``` + +## Animation Speed + +To adjust animation speeds, modify the CSS: + +```yaml +design: + css_style: | + .animate-marquee { animation-duration: 20s; } + .animate-scroll { animation-duration: 30s; } +``` diff --git a/modules/blox-tailwind/blox/logos/block.html b/modules/blox-tailwind/blox/logos/block.html new file mode 100644 index 00000000..cf25fc8c --- /dev/null +++ b/modules/blox-tailwind/blox/logos/block.html @@ -0,0 +1,235 @@ +{{/* Hugo Blox: Logos Block */}} +{{/* Documentation: https://hugoblox.com/blocks/ */}} +{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}} + +{{/* Initialise */}} +{{ $page := .wcPage }} +{{ $block := .wcBlock }} +{{ $display_mode := $block.design.display_mode | default "grid" }} + +{{ $title := $block.content.title | emojify | $page.RenderString }} +{{ $subtitle := $block.content.subtitle | emojify | $page.RenderString }} +{{ $text := $block.content.text | emojify | $page.RenderString }} + +
+ {{/* Background Pattern */}}
+ {{ if $block.design.show_pattern }}
+
+
+{{/* Custom CSS for Animations */}}
+
diff --git a/modules/blox-tailwind/blox/logos/manifest.json b/modules/blox-tailwind/blox/logos/manifest.json
new file mode 100644
index 00000000..3846e485
--- /dev/null
+++ b/modules/blox-tailwind/blox/logos/manifest.json
@@ -0,0 +1,13 @@
+{
+ "id": "logos",
+ "name": "Logos",
+ "version": "1.0.0",
+ "license": "MIT",
+ "category": "content",
+ "tags": ["logos", "partners", "sponsors", "collaborators", "brands", "clients", "affiliations"],
+ "description": "Display partner, sponsor, or collaborator logos with interactive effects and multiple display modes",
+ "author": "Hugo Blox",
+ "homepage": "https://hugoblox.com/blocks/",
+ "repository": "https://github.com/HugoBlox/hugo-blox-builder",
+ "keywords": ["hugo", "static-site", "logos", "partners", "sponsors", "carousel", "marquee"]
+}
diff --git a/modules/blox-tailwind/blox/logos/schema.json b/modules/blox-tailwind/blox/logos/schema.json
new file mode 100644
index 00000000..265e0fa1
--- /dev/null
+++ b/modules/blox-tailwind/blox/logos/schema.json
@@ -0,0 +1,106 @@
+{
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "$id": "https://hugoblox.com/schemas/blocks/logos.json",
+ "title": "Logos Block Schema",
+ "description": "Schema for the Logos block - displays partner/sponsor logos with various display modes",
+ "allOf": [
+ {
+ "$ref": "../shared/schemas/base-block.json"
+ },
+ {
+ "type": "object",
+ "properties": {
+ "block": {
+ "const": "logos"
+ },
+ "content": {
+ "type": "object",
+ "description": "Content configuration for the logos block",
+ "properties": {
+ "title": {
+ "type": "string",
+ "description": "Main section title"
+ },
+ "subtitle": {
+ "type": "string",
+ "description": "Section subtitle"
+ },
+ "text": {
+ "type": "string",
+ "description": "Section description text"
+ },
+ "logos": {
+ "type": "array",
+ "description": "Array of logo items with details",
+ "items": {
+ "type": "object",
+ "properties": {
+ "name": {
+ "type": "string",
+ "description": "Partner/sponsor name"
+ },
+ "image": {
+ "type": "string",
+ "description": "Path to logo image relative to assets/media/"
+ },
+ "url": {
+ "type": "string",
+ "description": "Link to partner website"
+ },
+ "external": {
+ "type": "boolean",
+ "description": "Open link in new tab",
+ "default": true
+ },
+ "description": {
+ "type": "string",
+ "description": "Short description shown on hover"
+ }
+ }
+ }
+ },
+ "logo_folder": {
+ "type": "string",
+ "description": "Legacy: Folder containing logo images (deprecated, use logos array instead)"
+ },
+ "cta": {
+ "type": "object",
+ "description": "Call to action button",
+ "properties": {
+ "text": {
+ "type": "string",
+ "description": "Button text"
+ },
+ "url": {
+ "type": "string",
+ "description": "Button URL"
+ },
+ "icon": {
+ "type": "string",
+ "description": "Optional icon name"
+ }
+ }
+ }
+ }
+ },
+ "design": {
+ "type": "object",
+ "description": "Design options for the logos block",
+ "properties": {
+ "display_mode": {
+ "type": "string",
+ "enum": ["grid", "carousel", "marquee"],
+ "description": "How to display the logos",
+ "default": "grid"
+ },
+ "show_pattern": {
+ "type": "boolean",
+ "description": "Show decorative background pattern",
+ "default": false
+ }
+ }
+ }
+ }
+ }
+ ]
+}
diff --git a/modules/blox-tailwind/blox/research-areas/README.md b/modules/blox-tailwind/blox/research-areas/README.md
new file mode 100644
index 00000000..179493a2
--- /dev/null
+++ b/modules/blox-tailwind/blox/research-areas/README.md
@@ -0,0 +1,292 @@
+# Research Areas Block
+
+Display your research focus areas with stunning visuals, metrics, and interactive layouts. Perfect for research labs, academic groups, and R&D departments to showcase their areas of expertise.
+
+## Features
+
+- **Multiple Layout Options**: Cards, hexagon, or timeline layouts
+- **Rich Visual Options**: Icons, emojis, images, or gradient backgrounds
+- **Metrics Display**: Team size, publications, funding
+- **Interactive Elements**: Hover effects, status badges, CTAs
+- **Topic Keywords**: Highlight key research topics
+- **Responsive Design**: Beautiful on all devices
+- **Dark Mode Support**: Seamless theme switching
+- **Performance Optimized**: Lazy loading and WebP support
+
+## Layout Options
+
+### Cards Layout (Default)
+Modern card-based design with:
+- Large visual header (image/icon/emoji)
+- Rich content area
+- Hover animations
+- Status badges
+- Metrics display
+
+### Hexagon Layout
+Unique hexagonal grid for visual impact:
+- Geometric design
+- Gradient backgrounds
+- Compact information display
+- Great for 3-6 areas
+
+### Timeline Layout
+Chronological or priority-based display:
+- Vertical timeline
+- Alternating left/right cards
+- Visual progression
+- Good for research evolution
+
+## Usage Examples
+
+### Basic Research Areas with Cards
+```yaml
+sections:
+ - block: research-areas
+ content:
+ title: Research Focus Areas
+ subtitle: Advancing Science Through Innovation
+ text: Our lab conducts cutting-edge research across multiple domains
+ items:
+ - name: Computational Biology
+ description: Developing algorithms for genomic analysis and protein structure prediction
+ emoji: 🧬
+ gradient: from-green-400 to-blue-500
+ status: active
+ topics:
+ - Genomics
+ - Proteomics
+ - Bioinformatics
+ - Systems Biology
+ team_size: 12 researchers
+ publications: 45 papers
+ funding: $2.5M
+ cta:
+ text: Learn More
+ url: /research/computational-biology
+
+ - name: Machine Learning
+ description: Advancing deep learning methods for scientific discovery
+ emoji: 🤖
+ gradient: from-purple-400 to-pink-500
+ status: active
+ topics:
+ - Deep Learning
+ - Neural Networks
+ - Computer Vision
+ - NLP
+ team_size: 8 researchers
+ publications: 32 papers
+ funding: $1.8M
+
+ - name: Materials Science
+ description: Designing novel materials through computational modeling
+ emoji: 🔬
+ gradient: from-orange-400 to-red-500
+ status: emerging
+ topics:
+ - Nanomaterials
+ - Quantum Materials
+ - Polymers
+ team_size: 6 researchers
+ publications: 28 papers
+ funding: $1.2M
+ design:
+ layout: cards
+```
+
+### Using Icons Instead of Emojis
+```yaml
+items:
+ - name: Artificial Intelligence
+ description: Building next-generation AI systems
+ icon: hero/cpu-chip
+ gradient: from-blue-500 to-indigo-600
+ # ... rest of configuration
+```
+
+### Using Images
+```yaml
+items:
+ - name: Climate Science
+ description: Understanding and mitigating climate change
+ image: research/climate-hero.jpg
+ status: active
+ # ... rest of configuration
+```
+
+### Hexagon Layout for Visual Impact
+```yaml
+sections:
+ - block: research-areas
+ content:
+ title: Core Research Pillars
+ items:
+ - name: AI & ML
+ description: Artificial intelligence research
+ icon: hero/cpu-chip
+ gradient: from-blue-400 to-purple-600
+ - name: Quantum
+ description: Quantum computing systems
+ icon: hero/sparkles
+ gradient: from-green-400 to-teal-600
+ # ... more items
+ design:
+ layout: hexagon
+```
+
+### Timeline Layout for Evolution
+```yaml
+sections:
+ - block: research-areas
+ content:
+ title: Research Evolution
+ subtitle: Our Journey of Discovery
+ items:
+ - name: Foundation (2015-2018)
+ description: Established core ML research
+ icon: hero/academic-cap
+ - name: Expansion (2018-2021)
+ description: Added biomedical applications
+ icon: hero/beaker
+ - name: Current Focus (2021-Present)
+ description: AI for scientific discovery
+ icon: hero/sparkles
+ design:
+ layout: timeline
+```
+
+## Configuration Options
+
+### Content Options
+
+- **title**: Main section heading
+- **subtitle**: Section subtitle (accent color)
+- **text**: Description paragraph
+- **items**: Array of research areas
+ - `name`: Area name (required)
+ - `description`: Area description (required)
+ - `icon`: Icon identifier (e.g., 'hero/beaker')
+ - `emoji`: Emoji alternative to icon
+ - `image`: Image path relative to assets/media/
+ - `gradient`: Tailwind gradient classes
+ - `url`: Link to detailed page
+ - `status`: 'active', 'emerging', or 'planning'
+ - `topics`: Array of keywords/topics
+ - `team_size`: Team member count
+ - `publications`: Publication count
+ - `funding`: Funding amount
+ - `cta`: Individual area CTA with text and url
+- **cta**: Global call-to-action button
+
+### Design Options
+
+- **layout**: Visual layout style
+ - `cards`: Modern card grid (default)
+ - `hexagon`: Hexagonal grid
+ - `timeline`: Vertical timeline
+
+## Visual Guidelines
+
+### Gradients
+Use Tailwind gradient classes for visual appeal:
+```yaml
+gradient: from-blue-400 to-purple-600
+gradient: from-green-500 to-teal-400
+gradient: from-orange-400 to-red-500
+```
+
+### Icons vs Emojis vs Images
+- **Icons**: Professional, consistent style
+- **Emojis**: Friendly, universal, no loading
+- **Images**: Rich visuals, specific imagery
+
+### Status Badges
+- `active`: Green - Currently active research
+- `emerging`: Yellow - Growing area
+- `planning`: Blue - Future direction
+
+## Best Practices
+
+1. **Consistency**: Use the same visual type (icons OR emojis OR images) across all areas
+2. **Metrics**: Include quantifiable achievements
+3. **Keywords**: 3-5 relevant topics per area
+4. **Descriptions**: Keep concise (50-100 words)
+5. **CTAs**: Link to detailed pages for each area
+6. **Gradients**: Choose complementary colors
+7. **Status**: Be transparent about research maturity
+
+## Responsive Behavior
+
+### Cards Layout
+- Mobile: Single column
+- Tablet: 2 columns
+- Desktop: 3 columns
+
+### Hexagon Layout
+- Mobile: Stacked hexagons
+- Desktop: Honeycomb grid
+
+### Timeline Layout
+- Mobile: Single column timeline
+- Desktop: Alternating left/right
+
+## Performance Tips
+
+1. **Images**: Optimize to <100KB
+2. **WebP Format**: Use for better compression
+3. **Lazy Loading**: Automatic for images
+4. **Icon Usage**: Prefer icons/emojis over images for speed
+
+## Accessibility
+
+- Semantic HTML structure
+- Proper heading hierarchy
+- Alt text for images
+- Keyboard navigable
+- Screen reader friendly
+- High contrast for text
+
+## Examples by Field
+
+### AI/ML Lab
+```yaml
+items:
+ - name: Deep Learning
+ emoji: 🧠
+ gradient: from-purple-500 to-pink-500
+ - name: Computer Vision
+ emoji: 👁️
+ gradient: from-blue-500 to-cyan-500
+ - name: NLP
+ emoji: 💬
+ gradient: from-green-500 to-teal-500
+```
+
+### Biology Lab
+```yaml
+items:
+ - name: Genomics
+ emoji: 🧬
+ gradient: from-green-400 to-emerald-600
+ - name: Cell Biology
+ emoji: 🦠
+ gradient: from-purple-400 to-indigo-600
+ - name: Neuroscience
+ emoji: 🧠
+ gradient: from-pink-400 to-rose-600
+```
+
+### Physics Lab
+```yaml
+items:
+ - name: Quantum Computing
+ emoji: ⚛️
+ gradient: from-indigo-500 to-purple-600
+ - name: Particle Physics
+ emoji: 🌌
+ gradient: from-blue-500 to-indigo-600
+ - name: Condensed Matter
+ emoji: 💎
+ gradient: from-cyan-500 to-blue-600
+```
diff --git a/modules/blox-tailwind/blox/research-areas/block.html b/modules/blox-tailwind/blox/research-areas/block.html
new file mode 100644
index 00000000..2835514c
--- /dev/null
+++ b/modules/blox-tailwind/blox/research-areas/block.html
@@ -0,0 +1,263 @@
+{{/* Hugo Blox: Research Areas Block */}}
+{{/* Documentation: https://hugoblox.com/blocks/ */}}
+{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
+
+{{/* Initialise */}}
+{{ $page := .wcPage }}
+{{ $block := .wcBlock }}
+{{ $layout := $block.design.layout | default "cards" }}
+
+{{ $title := $block.content.title | emojify | $page.RenderString }}
+{{ $subtitle := $block.content.subtitle | emojify | $page.RenderString }}
+{{ $text := $block.content.text | emojify | $page.RenderString }}
+
+
+
+
+ {{ end }}
+
+
+
+ {{/* Section Header */}}
+
+
+ {{ with $title }}
+
+
+ {{/* Grid Display Mode */}}
+ {{ if eq $display_mode "grid" }}
+ + {{ . }} +
+ {{ end }} + + {{ with $subtitle }} ++ {{ . }} +
+ {{ end }} + + {{ with $text }} ++ {{ . }} +
+ {{ end }} +
+
+ {{/* Logo Items from Data */}}
+ {{ if $block.content.logos }}
+ {{ range $block.content.logos }}
+
+
+ {{/* Carousel Display Mode */}}
+ {{ else if eq $display_mode "carousel" }}
+
+ {{ $link := .url | default "#" }}
+ {{ $target := cond .external "_blank" "_self" }}
+
+
+ {{ end }}
+
+ {{/* Logo Images from Folder (Legacy Support) */}}
+ {{ else if $block.content.logo_folder }}
+ {{ $images := resources.Match (printf "media/%s/*.{svg,png,jpg,webp}" $block.content.logo_folder) }}
+ {{ range $images }}
+
+ {{/* Logo Image */}}
+ {{ if .image }}
+ {{ $img := resources.Get (printf "media/%s" .image) }}
+ {{ if $img }}
+ {{ $isSVG := eq $img.MediaType.SubType "svg" }}
+ {{ if not $isSVG }}
+ {{ $img = $img.Fit "280x140 webp" }}
+ {{ end }}
+ 
+ {{ end }}
+ {{ end }}
+
+ {{/* Tooltip on Hover */}}
+ {{ with .description }}
+
+
+
+ {{ . }}
+
+
+ {{ end }}
+
+
+ {{ end }}
+ {{ end }}
+
+ {{ $image := . }}
+ {{ $isSVG := eq $image.MediaType.SubType "svg" }}
+ {{ if not $isSVG }}
+ {{ $image = $image.Fit "280x140 webp" }}
+ {{ end }}
+ 
+
+
+
+
+ {{/* Marquee Display Mode */}}
+ {{ else if eq $display_mode "marquee" }}
+
+ {{/* Duplicate items for continuous scroll */}}
+ {{ $items := slice }}
+ {{ if $block.content.logos }}
+ {{ $items = $block.content.logos }}
+ {{ else if $block.content.logo_folder }}
+ {{ $images := resources.Match (printf "media/%s/*.{svg,png,jpg,webp}" $block.content.logo_folder) }}
+ {{ range $images }}
+ {{ $items = $items | append (dict "image" .Name) }}
+ {{ end }}
+ {{ end }}
+
+ {{/* First set of logos */}}
+ {{ range $items }}
+
+
+ {{ if .image }}
+ {{ $img := resources.Get (printf "media/%s" .image) }}
+ {{ if $img }}
+ {{ $isSVG := eq $img.MediaType.SubType "svg" }}
+ {{ if not $isSVG }}
+ {{ $img = $img.Fit "280x140 webp" }}
+ {{ end }}
+
+ {{ end }}
+ {{ end }}
+
+ {{ end }}
+
+ {{/* Duplicate for seamless loop */}}
+ {{ range $items }}
+
+ {{ if .image }}
+ {{ $img := resources.Get (printf "media/%s" .image) }}
+ {{ if $img }}
+ {{ $isSVG := eq $img.MediaType.SubType "svg" }}
+ {{ if not $isSVG }}
+ {{ $img = $img.Fit "280x140 webp" }}
+ {{ end }}
+
+ {{ end }}
+ {{ end }}
+
+ {{ end }}
+
+
+ {{ end }}
+
+ {{/* Call to Action */}}
+ {{ with $block.content.cta }}
+
+ {{ end }}
+
+
+
+ {{ if $block.content.logos }}
+ {{ range $block.content.logos }}
+
+
+ {{ if .image }}
+ {{ $img := resources.Get (printf "media/%s" .image) }}
+ {{ if $img }}
+ {{ $isSVG := eq $img.MediaType.SubType "svg" }}
+ {{ if not $isSVG }}
+ {{ $img = $img.Fit "280x140 webp" }}
+ {{ end }}
+
+ {{ end }}
+ {{ end }}
+
+ {{ end }}
+ {{ end }}
+
+
+
+{{/* Custom CSS for Hexagon Layout */}}
+{{ if eq $layout "hexagon" }}
+
+{{ end }}
diff --git a/modules/blox-tailwind/blox/research-areas/manifest.json b/modules/blox-tailwind/blox/research-areas/manifest.json
new file mode 100644
index 00000000..a93efb7d
--- /dev/null
+++ b/modules/blox-tailwind/blox/research-areas/manifest.json
@@ -0,0 +1,13 @@
+{
+ "id": "research-areas",
+ "name": "Research Areas",
+ "version": "1.0.0",
+ "license": "MIT",
+ "category": "content",
+ "tags": ["research", "areas", "focus", "topics", "science", "lab", "academic", "showcase"],
+ "description": "Display research focus areas with rich visuals, metrics, and interactive layouts",
+ "author": "Hugo Blox",
+ "homepage": "https://hugoblox.com/blocks/",
+ "repository": "https://github.com/HugoBlox/hugo-blox-builder",
+ "keywords": ["hugo", "static-site", "research", "areas", "academic", "lab", "science"]
+}
diff --git a/modules/blox-tailwind/blox/research-areas/schema.json b/modules/blox-tailwind/blox/research-areas/schema.json
new file mode 100644
index 00000000..870861bd
--- /dev/null
+++ b/modules/blox-tailwind/blox/research-areas/schema.json
@@ -0,0 +1,139 @@
+{
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "$id": "https://hugoblox.com/schemas/blocks/research-areas.json",
+ "title": "Research Areas Block Schema",
+ "description": "Schema for the Research Areas block - displays research focus areas with rich visuals and metrics",
+ "allOf": [
+ {
+ "$ref": "../shared/schemas/base-block.json"
+ },
+ {
+ "type": "object",
+ "properties": {
+ "block": {
+ "const": "research-areas"
+ },
+ "content": {
+ "type": "object",
+ "description": "Content configuration for the research areas block",
+ "properties": {
+ "title": {
+ "type": "string",
+ "description": "Section title"
+ },
+ "subtitle": {
+ "type": "string",
+ "description": "Section subtitle"
+ },
+ "text": {
+ "type": "string",
+ "description": "Section description text"
+ },
+ "items": {
+ "type": "array",
+ "description": "Array of research area items",
+ "items": {
+ "type": "object",
+ "properties": {
+ "name": {
+ "type": "string",
+ "description": "Research area name",
+ "required": true
+ },
+ "description": {
+ "type": "string",
+ "description": "Research area description",
+ "required": true
+ },
+ "icon": {
+ "type": "string",
+ "description": "Icon identifier (e.g., 'hero/beaker', 'devicon/python')"
+ },
+ "emoji": {
+ "type": "string",
+ "description": "Emoji as alternative to icon"
+ },
+ "image": {
+ "type": "string",
+ "description": "Image path relative to assets/media/"
+ },
+ "gradient": {
+ "type": "string",
+ "description": "Tailwind gradient classes (e.g., 'from-blue-400 to-purple-400')"
+ },
+ "url": {
+ "type": "string",
+ "description": "Link to detailed page"
+ },
+ "status": {
+ "type": "string",
+ "enum": ["active", "emerging", "planning"],
+ "description": "Research area status"
+ },
+ "topics": {
+ "type": "array",
+ "description": "Key topics/keywords",
+ "items": {
+ "type": "string"
+ }
+ },
+ "team_size": {
+ "type": "string",
+ "description": "Number of team members (e.g., '12 researchers')"
+ },
+ "publications": {
+ "type": "string",
+ "description": "Number of publications (e.g., '45 papers')"
+ },
+ "funding": {
+ "type": "string",
+ "description": "Funding amount (e.g., '$2.5M')"
+ },
+ "cta": {
+ "type": "object",
+ "description": "Call to action for this area",
+ "properties": {
+ "text": {
+ "type": "string"
+ },
+ "url": {
+ "type": "string"
+ }
+ }
+ }
+ }
+ }
+ },
+ "cta": {
+ "type": "object",
+ "description": "Global call to action",
+ "properties": {
+ "text": {
+ "type": "string"
+ },
+ "url": {
+ "type": "string"
+ },
+ "icon": {
+ "type": "string"
+ }
+ }
+ }
+ }
+ },
+ "design": {
+ "type": "object",
+ "description": "Design options for the research areas block",
+ "properties": {
+ "layout": {
+ "type": "string",
+ "enum": ["cards", "hexagon", "timeline"],
+ "description": "Layout style for research areas",
+ "default": "cards"
+ }
+ }
+ }
+ }
+ }
+ ]
+}
diff --git a/modules/blox-tailwind/blox/stats/README.md b/modules/blox-tailwind/blox/stats/README.md
index 7f4db247..81653850 100644
--- a/modules/blox-tailwind/blox/stats/README.md
+++ b/modules/blox-tailwind/blox/stats/README.md
@@ -1,59 +1,227 @@
# Stats Block
-**Let your numbers tell your success story**
+Display impressive statistics with modern animations, icons, and engaging visual effects. Perfect for showcasing lab achievements, research metrics, and organizational highlights.
-Showcase your achievements, milestones, and key metrics with the Stats block - a powerful component that transforms dry numbers into compelling visual statements that build credibility and demonstrate your impact.
+## Key Features
-## ✨ Key Features
+- **🎬 Counter Animations**: Numbers count up on scroll with easing
+- **📊 Visual Icons**: Icons for each statistic enhance comprehension
+- **🎨 Multiple Layouts**: Cards, compact, or minimal display modes
+- **📱 Responsive Design**: Adapts beautifully to all screen sizes
+- **🌙 Dark Mode Ready**: Seamless theme switching
+- **⚡ Performance**: CSS-first animations with minimal JavaScript
+- **🎯 Intersection Observer**: Animations trigger when scrolled into view
+- **✨ Hover Effects**: Subtle interactions for engagement
-- **Bold Typography**: Extra-large numbers (4xl to 6xl) that command attention
-- **Three-Column Grid**: Perfect layout for highlighting your top 3 metrics
-- **Visual Separators**: Subtle borders that organize information without clutter
-- **Responsive Design**: Adapts beautifully from mobile to desktop
-- **Markdown Support**: Rich formatting for both statistics and descriptions
-- **Optional Header**: Add context with title and descriptive text
-- **Professional Styling**: Clean, modern design that builds trust
+## Layout Options
-## 🎯 Perfect For
+### Cards Layout (Default)
+Modern card-based design featuring:
+- Individual cards with shadows and hover effects
+- Icons with background circles
+- Gradient hover states
+- Staggered animation entry
+- Optimal for 2-4 statistics
-- **Business Metrics**: Revenue, customers served, years in business
-- **Product Statistics**: Downloads, users, installations, success rates
-- **Company Achievements**: Awards won, projects completed, team size
-- **Performance Data**: Uptime, response times, satisfaction scores
-- **Social Proof**: Followers, testimonials, reviews, case studies
-- **Impact Metrics**: Lives changed, money saved, time reduced
+### Compact Layout
+Single card with divided sections:
+- Unified background
+- Bordered divisions
+- Space-efficient
+- Good for 3-6 statistics
-## 🚀 Why Choose Stats Block?
+### Minimal Layout
+Clean, icon-centric design:
+- No backgrounds or borders
+- Focus on typography
+- Suitable for headers/footers
+- Works well with many statistics
-**Instant Credibility**: Large, prominent numbers immediately establish authority and success
+## Usage Examples
-**Social Proof**: Quantified achievements provide concrete evidence of your value
+### Research Lab Metrics (Enhanced)
+```yaml
+sections:
+ - block: stats
+ content:
+ title: Impact by the Numbers
+ text: Driving scientific discovery through measurable achievements
+ items:
+ - statistic: "150+"
+ description: Publications in top-tier journals
+ sub_metric: Nature, Science, Cell, PNAS
+ icon: hero/document-text
+
+ - statistic: "25"
+ description: Brilliant researchers and scientists
+ sub_metric: From 12 countries worldwide
+ icon: hero/user-group
+
+ - statistic: "$12M"
+ description: Active research funding
+ sub_metric: NSF, NIH, DOE grants
+ icon: hero/currency-dollar
+
+ - statistic: "8"
+ description: Breakthrough discoveries
+ sub_metric: Patent applications filed
+ icon: hero/light-bulb
+ design:
+ layout: cards
+ css_class: "bg-gradient-to-b from-primary-50 to-white dark:from-primary-900/20 dark:to-gray-800"
+```
-**Visual Impact**: Bold typography and clean layout make statistics impossible to ignore
+### University Department Stats
+```yaml
+content:
+ items:
+ - statistic: "2,500"
+ description: Students enrolled
+ icon: hero/academic-cap
+ - statistic: "95%"
+ description: Graduation rate
+ icon: hero/chart-bar
+ - statistic: "40+"
+ description: Countries represented
+ icon: hero/globe-alt
+design:
+ layout: compact
+```
-**Trust Building**: Professional presentation of metrics builds confidence in your offering
+### Startup Metrics
+```yaml
+content:
+ items:
+ - statistic: "$2.5M"
+ description: Funding raised
+ icon: hero/banknotes
+ - statistic: "10K+"
+ description: Active users
+ icon: hero/users
+ - statistic: "98.5%"
+ description: Uptime reliability
+ icon: hero/chart-line
+design:
+ layout: minimal
+```
-## 📊 Psychology of Numbers
+## Animation Features
-- **Cognitive Ease**: Large numbers are processed faster by the human brain
-- **Authority Signaling**: Impressive statistics position you as an industry leader
-- **Decision Shortcuts**: Metrics help visitors make quick trust decisions
-- **Competitive Advantage**: Quantified success differentiates you from competitors
+### Counter Animation
+- **Easing**: Smooth ease-out cubic function
+- **Duration**: 2 seconds for optimal viewing
+- **Trigger**: Intersection Observer when 50% visible
+- **Number Extraction**: Automatically extracts numbers from text
-## 💡 Best Practices
+### Entrance Animation
+- **Staggered Entry**: Items animate in sequence
+- **Fade + Slide**: Combines opacity and translateY
+- **Delay Timing**: 150ms between items
+- **Threshold**: Triggers 100px before entering viewport
-- Choose your three most impressive and relevant metrics
-- Use round numbers when possible (1M+ instead of 987,432)
-- Include context in descriptions ("Happy Customers", "Projects Delivered")
-- Update regularly to maintain accuracy and freshness
-- Order statistics by impact or importance
+### Hover Effects
+- **Scale Transform**: Icons scale 110% on hover
+- **Color Transitions**: Text color changes
+- **Background Glow**: Subtle gradient overlay
+- **Shadow Enhancement**: Deeper shadows on hover
-## 🎨 Visual Design
+## Configuration Options
-- **High Contrast**: Bold numbers against clean backgrounds
-- **Generous Spacing**: Prevents overwhelming busy appearance
-- **Consistent Sizing**: Uniform treatment creates professional cohesion
-- **Mobile-First**: Stacks gracefully on smaller screens
+### Content Fields
+- **title**: Optional section heading
+- **text**: Optional description
+- **items**: Array of statistics
+ - `statistic`: Number or value (required)
+ - `description`: What the number represents (required)
+ - `icon`: Icon identifier (optional)
+ - `sub_metric`: Additional context (optional)
-Perfect for SaaS companies, agencies, consultants, and any business that has measurable achievements worth celebrating. Turn your success metrics into powerful marketing assets that speak louder than words.
+### Design Options
+- **layout**: Visual layout
+ - `cards`: Individual cards (default)
+ - `compact`: Single divided card
+ - `minimal`: Clean typography focus
+## Icon Guidelines
+
+### Recommended Icons for Common Stats
+
+**Publications/Research:**
+- `hero/document-text` - Publications
+- `hero/beaker` - Research projects
+- `hero/light-bulb` - Discoveries/innovations
+- `hero/trophy` - Awards/recognition
+
+**People/Team:**
+- `hero/user-group` - Team members
+- `hero/academic-cap` - Students/graduates
+- `hero/users` - Community/users
+- `hero/heart` - Satisfaction ratings
+
+**Financial/Business:**
+- `hero/currency-dollar` - Funding/revenue
+- `hero/banknotes` - Investments
+- `hero/chart-bar` - Growth metrics
+- `hero/building-office` - Locations
+
+**Technology/Digital:**
+- `hero/cpu-chip` - Computing power
+- `hero/globe-alt` - Global reach
+- `hero/chart-line` - Performance metrics
+- `hero/server` - Infrastructure
+
+## Performance Notes
+
+### JavaScript Usage
+Minimal JavaScript for:
+- Intersection Observer (viewport detection)
+- Counter animation (number progression)
+- Modern browser APIs only
+
+### CSS Animations
+- Hardware accelerated transforms
+- Optimized for 60fps
+- Respects `prefers-reduced-motion`
+- Fallbacks for older browsers
+
+### Image Optimization
+- SVG icons preferred (scalable, fast)
+- WebP fallbacks for raster images
+- Lazy loading for non-critical images
+
+## Best Practices
+
+1. **Number Selection**: Choose impactful, verifiable metrics
+2. **Descriptions**: Keep concise but descriptive
+3. **Icons**: Match icons to metric meaning
+4. **Sub-metrics**: Add credibility with specific details
+5. **Layout**: Choose based on number of items (2-4: cards, 5+: compact)
+6. **Consistency**: Use similar metric types (all percentages, all counts)
+7. **Context**: Include timeframes where relevant
+
+## Advanced Customization
+
+### Custom Animations
+Override animation timing:
+```css
+.stats-item {
+ transition-duration: 1s;
+ transition-delay: 0.2s;
+}
+```
+
+### Custom Counters
+For complex number formatting:
+```yaml
+statistic: "99.9%" # Will animate 0 → 99
+statistic: "$2.5M" # Will animate 0 → 2.5
+statistic: "1st" # Will animate 0 → 1
+```
+
+### Accessibility
+- Numbers are announced by screen readers
+- Animations respect motion preferences
+- High contrast maintained
+- Keyboard navigation supported
+
+The enhanced Stats block creates visual impact while maintaining professional credibility - essential for research lab websites targeting academic and industry audiences.
\ No newline at end of file
diff --git a/modules/blox-tailwind/blox/stats/block.html b/modules/blox-tailwind/blox/stats/block.html
index afa93275..d43ff259 100644
--- a/modules/blox-tailwind/blox/stats/block.html
+++ b/modules/blox-tailwind/blox/stats/block.html
@@ -7,31 +7,264 @@
{{ $block := .wcBlock }}
{{ $title := $block.content.title | emojify | $page.RenderString }}
{{ $text := $block.content.text | emojify | $page.RenderString }}
+{{ $layout := $block.design.layout | default "cards" }}
-
-
+
+ {{/* Section Header */}}
+
+
+ {{ with $title }}
+
+
+ {{/* Cards Layout */}}
+ {{ if eq $layout "cards" }}
+ + {{ . }} +
+ {{ end }} + + {{ with $subtitle }} ++ {{ . }} +
+ {{ end }} + + {{ with $text }} ++ {{ . }} +
+ {{ end }} +
+ {{ range $idx, $item := $block.content.items }}
+
+
+ {{/* Hexagon Layout */}}
+ {{ else if eq $layout "hexagon" }}
+
+
+ {{ end }}
+
+
+ {{/* Card Image/Icon Header */}}
+ {{ $header_content := "" }}
+ {{ if $item.image }}
+ {{ $img := resources.Get (printf "media/%s" $item.image) }}
+ {{ if $img }}
+ {{ $img = $img.Fill "600x400 Center webp" }}
+ {{ $header_content = printf "![\"%s\"](\"%s\")
" $img.RelPermalink $item.name }}
+ {{ end }}
+ {{ else if $item.icon }}
+ {{ $icon_html := partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-24 h-24 text-white/80 group-hover:scale-110 transition-transform duration-300\"") }}
+ {{ $header_content = printf "
+ %s
" $icon_html }}
+ {{ end }}
+
+ {{ if and $item.cta.url $header_content }}
+
+ {{ $header_content | safeHTML }}
+
+ {{ else }}
+
+ {{ $header_content | safeHTML }}
+
+ {{ end }}
+
+
+ {{/* Status Badge */}}
+ {{ with $item.status }}
+
+
+ {{ . | title }}
+
+
+ {{ end }}
+
+ {{/* Card Content - Flexible layout */}}
+
+ {{/* Main Content */}}
+
+
+
+
+ {{/* Footer Section - Always at bottom */}}
+ + {{ if $item.url }} + + {{ $item.name }} + {{ partial "functions/get_icon" (dict "name" "hero/arrow-top-right-on-square" "attributes" "class=\"inline-block w-4 h-4 ml-1\"") }} + + {{ else }} + {{ $item.name }} + {{ end }} +
+ ++ {{ $item.description }} +
+ + {{/* Key Topics/Keywords */}} + {{ with $item.topics }} +
+ {{ range first 3 . }}
+
+ {{ . }}
+
+ {{ end }}
+ {{ if gt (len .) 3 }}
+
+ +{{ sub (len .) 3 }} more
+
+ {{ end }}
+
+ {{ end }}
+
+ {{/* Stats/Metrics */}}
+ {{ if or $item.team_size $item.publications $item.funding }}
+
+
+ {{ with $item.team_size }}
+
+ {{ end }}
+
+ {{/* Call to Action */}}
+ {{ with $item.cta }}
+
+ {{ .text }}
+ {{ partial "functions/get_icon" (dict "name" "hero/arrow-right" "attributes" "class=\"ml-1 w-4 h-4\"") }}
+
+ {{ end }}
+
+ {{ partial "functions/get_icon" (dict "name" "hero/user-group" "attributes" "class=\"w-4 h-4 mx-auto mb-1\"") }}
+ {{ . | replaceRE " researchers" "" }}
+ team
+
+ {{ end }}
+ {{ with $item.publications }}
+
+ {{ partial "functions/get_icon" (dict "name" "hero/document-text" "attributes" "class=\"w-4 h-4 mx-auto mb-1\"") }}
+ {{ . | replaceRE " papers" "" }}
+ papers
+
+ {{ end }}
+ {{ with $item.funding }}
+
+ {{ partial "functions/get_icon" (dict "name" "hero/currency-dollar" "attributes" "class=\"w-4 h-4 mx-auto mb-1\"") }}
+ {{ . }}
+ funding
+
+ {{ end }}
+
+ {{ range $idx, $item := $block.content.items }}
+
+
+ {{/* Timeline Layout */}}
+ {{ else if eq $layout "timeline" }}
+
+
+ {{ end }}
+
+
+
+ {{ if $item.icon }}
+ {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-12 h-12 text-white mb-3\"") }}
+ {{ end }}
+
+ {{ $item.name }}
+{{ $item.description | truncate 60 }}
+
+ {{/* Vertical Line */}}
+
+
+
+ {{ end }}
+
+ {{/* Global Call to Action */}}
+ {{ with $block.content.cta }}
+
+ {{ end }}
+
+ {{ range $idx, $item := $block.content.items }}
+
+
+ {{/* Timeline dot */}}
+
+
+
+ {{ end }}
+
+
+
+
+
+ {{ if $item.icon }}
+
+
+ {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-5 h-5 text-primary-600 dark:text-primary-400\"") }}
+
+ {{ end }}
+ {{ $item.name }}
+{{ $item.description }}
+
-
- {{ with $title }}
-
-
-
{{.}}
+
+
+
+ {{/* Section Header */}}
+ {{ if or $title $text }}
+
- {{ end }}
+ {{ end }}
-
+ {{ with $title }}
+
- + {{ . }} +
+ {{ end }} {{ with $text }} -{{.}}
++ {{ . }} +
{{ end }}
- {{ range $idx, $item := $block.content.items }}
-
+
+{{/* Enhanced Animation CSS */}}
+
+
+{{/* Animation JavaScript for Counter and Intersection Observer */}}
+
\ No newline at end of file
diff --git a/modules/blox-tailwind/blox/stats/manifest.json b/modules/blox-tailwind/blox/stats/manifest.json
index 744cbf7f..62ce6b2a 100644
--- a/modules/blox-tailwind/blox/stats/manifest.json
+++ b/modules/blox-tailwind/blox/stats/manifest.json
@@ -1,11 +1,11 @@
{
"id": "stats",
"name": "Stats",
- "version": "1.0.0",
+ "version": "2.0.0",
"license": "MIT",
"category": "content",
- "tags": ["statistics", "numbers", "metrics", "achievements", "data", "showcase", "grid"],
- "description": "Showcase impressive statistics and achievements in a clean, impactful grid layout",
+ "tags": ["statistics", "numbers", "metrics", "achievements", "data", "showcase", "grid", "animated", "counters", "icons"],
+ "description": "Showcase impressive statistics with modern animations, icons, and multiple layout options - enhanced for 2025/2026",
"author": "Hugo Blox",
"homepage": "https://hugoblox.com/blocks/",
"repository": "https://github.com/HugoBlox/hugo-blox-builder",
diff --git a/modules/blox-tailwind/blox/stats/schema.json b/modules/blox-tailwind/blox/stats/schema.json
index fbb5c9f9..b5d2e4bc 100644
--- a/modules/blox-tailwind/blox/stats/schema.json
+++ b/modules/blox-tailwind/blox/stats/schema.json
@@ -38,6 +38,14 @@
"description": {
"type": "string",
"description": "Description of the statistic (supports Markdown)"
+ },
+ "icon": {
+ "type": "string",
+ "description": "Icon identifier (e.g., 'hero/chart-bar', 'hero/user-group')"
+ },
+ "sub_metric": {
+ "type": "string",
+ "description": "Additional context or sub-metric (supports Markdown)"
}
},
"required": ["statistic", "description"]
@@ -45,6 +53,18 @@
}
},
"required": ["items"]
+ },
+ "design": {
+ "type": "object",
+ "description": "Design options for the stats block",
+ "properties": {
+ "layout": {
+ "type": "string",
+ "enum": ["cards", "compact", "minimal"],
+ "description": "Display layout style",
+ "default": "cards"
+ }
+ }
}
}
}
diff --git a/modules/blox-tailwind/blox/team-showcase/README.md b/modules/blox-tailwind/blox/team-showcase/README.md
new file mode 100644
index 00000000..d5dc8646
--- /dev/null
+++ b/modules/blox-tailwind/blox/team-showcase/README.md
@@ -0,0 +1,109 @@
+# Team Showcase Block
+
+Display your team members with a beautiful, responsive grid layout featuring rich profiles, social links, and customizable grouping.
+
+## Features
+
+- **Responsive Grid Layout**: Automatically adjusts from 1-4 columns based on screen size
+- **User Groups**: Organize team members by role (e.g., Principal Investigators, PhD Students)
+- **Rich Profiles**: Display avatar, name, role, bio, interests, and social links
+- **Customizable Display**: Toggle visibility of role, organization, interests, and social links
+- **Sorting**: Sort team members by last name or custom field
+- **Hover Effects**: Smooth image zoom and shadow effects on hover
+- **Call to Action**: Optional button to recruitment or team page
+
+## Usage
+
+```yaml
+sections:
+ - block: team-showcase
+ content:
+ title: Meet Our Team
+ subtitle: World-class researchers advancing science
+ text: Our diverse team brings together expertise from multiple disciplines.
+ user_groups:
+ - Principal Investigators
+ - Postdoctoral Researchers
+ - PhD Students
+ sort_by: 'Params.last_name'
+ sort_ascending: true
+ cta:
+ text: Join Our Team
+ url: /opportunities
+ icon: user-plus
+ design:
+ show_role: true
+ show_organizations: false
+ show_interests: true
+ show_social: true
+ # Section background color (CSS class)
+ css_class: "bg-gray-50 dark:bg-gray-900"
+```
+
+## Content Structure
+
+Team members should be created in the `content/authors/` directory. Each team member needs:
+
+```yaml
+# content/authors/jane-doe/_index.md
+---
+title: Dr. Jane Doe
+role: Postdoctoral Researcher
+bio: Research interests include machine learning and computational biology.
+interests:
+ - Machine Learning
+ - Computational Biology
+ - Data Science
+organizations:
+ - name: University of Excellence
+ url: https://example.edu
+social:
+ - icon: envelope
+ icon_pack: fas
+ link: 'mailto:jane@example.edu'
+ - icon: twitter
+ icon_pack: fab
+ link: https://twitter.com/janedoe
+ - icon: github
+ icon_pack: fab
+ link: https://github.com/janedoe
+user_groups:
+ - Postdoctoral Researchers
+---
+
+Full biography content here...
+```
+
+## Options
+
+### Content Options
+
+- **title**: Main heading for the team section
+- **subtitle**: Optional subtitle
+- **text**: Optional description text (supports Markdown)
+- **user_groups**: Array of group names to display
+- **sort_by**: Field to sort by (default: "Params.last_name")
+- **sort_ascending**: Sort direction (default: true)
+- **cta**: Optional call-to-action button with text, url, and icon
+
+### Design Options
+
+- **show_role**: Display team member roles (default: true)
+- **show_organizations**: Display affiliated organizations (default: false)
+- **show_interests**: Display research interests (default: false)
+- **show_social**: Display social media links (default: true)
+
+## Styling
+
+The block uses Tailwind CSS classes and supports:
+- Dark mode
+- Custom background colors via `css_class`
+- Responsive breakpoints
+- Smooth hover transitions
+
+## Tips
+
+1. **Optimize Images**: Use square avatar images (minimum 400x400px) for best results
+2. **User Groups**: Create logical groupings that reflect your organization structure
+3. **Bio Length**: Keep bios concise (2-3 lines) for the card view
+4. **Social Links**: Include relevant professional networks (ORCID, Google Scholar, GitHub)
diff --git a/modules/blox-tailwind/blox/team-showcase/block.html b/modules/blox-tailwind/blox/team-showcase/block.html
new file mode 100644
index 00000000..882cfe1b
--- /dev/null
+++ b/modules/blox-tailwind/blox/team-showcase/block.html
@@ -0,0 +1,177 @@
+{{/* Hugo Blox: Team Showcase */}}
+{{/* Documentation: https://hugoblox.com/blocks/ */}}
+{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
+
+{{/* Initialise */}}
+{{ $page := .wcPage }}
+{{ $block := .wcBlock }}
+{{ $show_social := $block.design.show_social | default true }}
+{{ $show_interests := $block.design.show_interests | default false }}
+{{ $show_role := $block.design.show_role | default true }}
+{{ $show_organizations := $block.design.show_organizations | default false }}
+
+{{ $title := $block.content.title | emojify | $page.RenderString }}
+{{ $subtitle := $block.content.subtitle | emojify | $page.RenderString }}
+{{ $text := $block.content.text | emojify | $page.RenderString }}
+
+
-
- {{- .statistic | $page.RenderString -}} -
-- {{- .description | $page.RenderString -}} -
+ {{/* Cards Layout */}} + {{ if eq $layout "cards" }} +
+ {{ range $idx, $item := $block.content.items }}
+
+
+ {{/* Compact Layout */}}
+ {{ else if eq $layout "compact" }}
+
+
+ {{/* Background Gradient */}}
+
+
+
+ {{ end }}
+
+ {{/* Icon */}}
+ {{ if $item.icon }}
+
+
+ {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-8 h-8 text-primary-600 dark:text-primary-400\"") }}
+
+ {{ end }}
+
+ {{/* Statistic */}}
+
+
+
+ {{/* Description */}}
+ + {{ $item.statistic | $page.RenderString }} +
++ {{ $item.description | $page.RenderString }} +
+ + {{/* Optional Sub-metric */}} + {{ with $item.sub_metric }} ++ {{ . }} +
+ {{ end }} +
+
+
+ {{/* Minimal Layout */}}
+ {{ else }}
+
+ {{ range $idx, $item := $block.content.items }}
+
+
+ {{ if $item.icon }}
+
+ {{ end }}
+
+ {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-6 h-6 text-primary-600 dark:text-primary-400\"") }}
+
+ {{ end }}
+
+ + {{ $item.statistic | $page.RenderString }} +
+ ++ {{ $item.description | $page.RenderString }} +
+
+ {{ range $item := $block.content.items }}
+
{{ end }}
+ {{ if $item.icon }}
+
+ {{ end }}
+ {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-7 h-7 text-primary-600 dark:text-primary-400\"") }}
+
+ {{ end }}
+
+ + {{ $item.statistic | $page.RenderString }} +
+ ++ {{ $item.description | $page.RenderString }} +
+
+
+ {{/* Section Header */}}
+
diff --git a/modules/blox-tailwind/blox/team-showcase/manifest.json b/modules/blox-tailwind/blox/team-showcase/manifest.json
new file mode 100644
index 00000000..2913d567
--- /dev/null
+++ b/modules/blox-tailwind/blox/team-showcase/manifest.json
@@ -0,0 +1,13 @@
+{
+ "id": "team-showcase",
+ "name": "Team Showcase",
+ "version": "1.0.0",
+ "license": "MIT",
+ "category": "content",
+ "tags": ["team", "people", "members", "staff", "lab", "research", "organization"],
+ "description": "Display team members with customizable grouping, filtering, and rich profiles",
+ "author": "Hugo Blox",
+ "homepage": "https://hugoblox.com/blocks/",
+ "repository": "https://github.com/HugoBlox/hugo-blox-builder",
+ "keywords": ["hugo", "static-site", "team", "people", "organization", "research-lab"]
+}
diff --git a/modules/blox-tailwind/blox/team-showcase/schema.json b/modules/blox-tailwind/blox/team-showcase/schema.json
new file mode 100644
index 00000000..8f226bda
--- /dev/null
+++ b/modules/blox-tailwind/blox/team-showcase/schema.json
@@ -0,0 +1,98 @@
+{
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "$id": "https://hugoblox.com/schemas/blocks/team-showcase.json",
+ "title": "Team Showcase Block Schema",
+ "description": "Schema for the Team Showcase block - displays team members with filtering and grouping",
+ "allOf": [
+ {
+ "$ref": "../shared/schemas/base-block.json"
+ },
+ {
+ "type": "object",
+ "properties": {
+ "block": {
+ "const": "team-showcase"
+ },
+ "content": {
+ "type": "object",
+ "description": "Content configuration for the team showcase block",
+ "properties": {
+ "title": {
+ "type": "string",
+ "description": "Section title (supports Markdown)"
+ },
+ "subtitle": {
+ "type": "string",
+ "description": "Section subtitle (supports Markdown)"
+ },
+ "text": {
+ "type": "string",
+ "description": "Section description (supports Markdown)"
+ },
+ "user_groups": {
+ "type": "array",
+ "description": "User groups to display (e.g., 'Principal Investigators', 'PhD Students')",
+ "items": {
+ "type": "string"
+ }
+ },
+ "sort_by": {
+ "type": "string",
+ "description": "Field to sort team members by",
+ "default": "Params.last_name"
+ },
+ "sort_ascending": {
+ "type": "boolean",
+ "description": "Sort in ascending order",
+ "default": true
+ },
+ "cta": {
+ "type": "object",
+ "description": "Call to action button",
+ "properties": {
+ "text": {
+ "type": "string",
+ "description": "Button text"
+ },
+ "url": {
+ "type": "string",
+ "description": "Button URL"
+ },
+ "icon": {
+ "type": "string",
+ "description": "Optional icon name"
+ }
+ }
+ }
+ }
+ },
+ "design": {
+ "type": "object",
+ "description": "Design options for the team showcase",
+ "properties": {
+ "show_role": {
+ "type": "boolean",
+ "description": "Show team member roles",
+ "default": true
+ },
+ "show_organizations": {
+ "type": "boolean",
+ "description": "Show team member organizations",
+ "default": false
+ },
+ "show_interests": {
+ "type": "boolean",
+ "description": "Show team member interests",
+ "default": false
+ },
+ "show_social": {
+ "type": "boolean",
+ "description": "Show social media links",
+ "default": true
+ }
+ }
+ }
+ }
+ }
+ ]
+}
+ {{ with $title }}
+
+
+ {{/* Team Grid */}}
+ + {{ . }} +
+ {{ end }} + + {{ with $subtitle }} ++ {{ . }} +
+ {{ end }} + + {{ with $text }} +
+ {{ . }}
+
+ {{ end }}
+
+
+ {{ range $block.content.user_groups }}
+ {{ $group_name := . }}
+ {{ $query := where (where site.Pages "Section" "authors") ".Params.user_groups" "intersect" (slice .) }}
+
+ {{/* Sort */}}
+ {{ $sort_by := $block.content.sort_by | default "Params.last_name" }}
+ {{ $sort_by = partial "functions/get_sort_by_parameter" $sort_by }}
+ {{ $sort_ascending := $block.content.sort_ascending | default true }}
+ {{ $sort_order := cond $sort_ascending "asc" "desc" }}
+ {{ $query = sort $query $sort_by $sort_order }}
+
+ {{/* Group Header (if multiple groups) */}}
+ {{ if and $query (gt (len $block.content.user_groups) 1) }}
+
+
+ {{/* Call to Action */}}
+ {{ with $block.content.cta }}
+
+ {{ end }}
+
+
+
+ {{ end }}
+
+ {{/* Team Members */}}
+ {{ range $person := $query }}
+ {{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
+ {{ $link := "" }}
+ {{ with site.GetPage (printf "/authors/%s" (path.Base .File.Dir)) }}
+ {{ $link = .RelPermalink }}
+ {{ end }}
+
+ + {{ $group_name | markdownify }} +
+
+
+ {{ end }}
+ {{ end }}
+
+
+ {{/* Avatar */}}
+ {{ if $avatar }}
+
+ {{ $image := $avatar.Fill "400x400 Center webp" }}
+
+
+ {{/* Gradient Overlay */}}
+
+
+ {{ end }}
+
+ {{/* Content */}}
+
+
+ {{/* Name */}}
+
+ + + {{ .Title }} + +
+ + {{/* Role & Organization */}} + {{ if $show_role }} +
+ {{ with .Params.role }}
+
+ {{ end }}
+
+ {{/* Bio */}}
+ {{ with .Params.bio }}
+ {{ . }}
+ {{ end }} + + {{ if and $show_organizations .Params.organizations }} + {{ range first 1 .Params.organizations }} +{{ .name }}
+ {{ end }} + {{ end }} ++ {{ . }} +
+ {{ end }} + + {{/* Interests */}} + {{ if and $show_interests .Params.interests }} +
+
+ {{ end }}
+
+ {{/* Social Links */}}
+ {{ if $show_social }}
+
+ {{ range first 3 .Params.interests }}
+
+ {{ . }}
+
+ {{ end }}
+
+
+ {{ range .Params.social }}
+ {{ $link := .url | default .link }}
+ {{ $scheme := (urls.Parse $link).Scheme }}
+ {{ $target := "" }}
+ {{ if not $scheme }}
+ {{ $link = (.url | default .link) | relLangURL }}
+ {{ if eq (path.Ext $link) ".pdf" }}{{ $target = "target=\"_blank\" rel=\"noopener\"" }}{{ end }}
+ {{ else if in (slice "http" "https") $scheme }}
+ {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+ {{ end }}
+
+
+ {{ partial "functions/get_icon" (dict "name" .icon "attributes" "class=\"w-5 h-5\"") }}
+
+ {{ end }}
+
+ {{ end }}
+