From f1bd41ffa2751eb90acd6110efa7ca4a080ff31f Mon Sep 17 00:00:00 2001 From: George Cushen Date: Thu, 4 Sep 2025 00:18:06 +0100 Subject: [PATCH] feat: add block metadata --- .../blox-tailwind/blox/collection/README.md | 43 ++++ .../blox/collection/manifest.json | 14 ++ .../blox-tailwind/blox/collection/preview.svg | 21 ++ .../blox-tailwind/blox/collection/schema.json | 118 +++++++++++ .../blox/cta-button-list/README.md | 50 +++++ .../blox/cta-button-list/manifest.json | 14 ++ .../blox/cta-button-list/preview.svg | 20 ++ .../blox/cta-button-list/schema.json | 49 +++++ modules/blox-tailwind/blox/cta-card/README.md | 50 +++++ .../blox-tailwind/blox/cta-card/manifest.json | 14 ++ .../blox-tailwind/blox/cta-card/preview.svg | 21 ++ .../blox-tailwind/blox/cta-card/schema.json | 49 +++++ .../blox/cta-image-paragraph/README.md | 51 +++++ .../blox/cta-image-paragraph/manifest.json | 14 ++ .../blox/cta-image-paragraph/preview.svg | 30 +++ .../blox/cta-image-paragraph/schema.json | 76 ++++++++ modules/blox-tailwind/blox/features/README.md | 51 +++++ .../blox-tailwind/blox/features/manifest.json | 14 ++ .../blox-tailwind/blox/features/preview.svg | 38 ++++ .../blox-tailwind/blox/features/schema.json | 57 ++++++ modules/blox-tailwind/blox/hero/README.md | 52 +++++ modules/blox-tailwind/blox/hero/manifest.json | 14 ++ modules/blox-tailwind/blox/hero/preview.svg | 26 +++ modules/blox-tailwind/blox/hero/schema.json | 94 +++++++++ modules/blox-tailwind/blox/markdown/README.md | 59 ++++++ .../blox-tailwind/blox/markdown/manifest.json | 14 ++ .../blox-tailwind/blox/markdown/preview.svg | 31 +++ .../blox-tailwind/blox/markdown/schema.json | 35 ++++ .../blox/resume-awards/README.md | 58 ++++++ .../blox/resume-awards/manifest.json | 14 ++ .../blox/resume-awards/preview.svg | 36 ++++ .../blox/resume-awards/schema.json | 56 ++++++ .../blox/resume-biography-3/README.md | 60 ++++++ .../blox/resume-biography-3/manifest.json | 14 ++ .../blox/resume-biography-3/preview.svg | 43 ++++ .../blox/resume-biography-3/schema.json | 100 ++++++++++ .../blox/resume-biography/README.md | 63 ++++++ .../blox/resume-biography/manifest.json | 14 ++ .../blox/resume-biography/preview.svg | 34 ++++ .../blox/resume-biography/schema.json | 100 ++++++++++ .../blox/resume-experience/README.md | 65 +++++++ .../blox/resume-experience/manifest.json | 14 ++ .../blox/resume-experience/preview.svg | 43 ++++ .../blox/resume-experience/schema.json | 57 ++++++ .../blox/resume-languages/README.md | 61 ++++++ .../blox/resume-languages/manifest.json | 14 ++ .../blox/resume-languages/preview.svg | 41 ++++ .../blox/resume-languages/schema.json | 39 ++++ .../blox/resume-skills/README.md | 67 +++++++ .../blox/resume-skills/manifest.json | 14 ++ .../blox/resume-skills/preview.svg | 63 ++++++ .../blox/resume-skills/schema.json | 56 ++++++ .../blox/shared/schemas/README.md | 138 +++++++++++++ .../blox/shared/schemas/base-block.json | 184 ++++++++++++++++++ .../blox/shared/schemas/landing-page.json | 103 ++++++++++ .../blox/shared/schemas/sections.json | 27 +++ modules/blox-tailwind/blox/stats/README.md | 59 ++++++ .../blox-tailwind/blox/stats/manifest.json | 14 ++ modules/blox-tailwind/blox/stats/preview.svg | 41 ++++ modules/blox-tailwind/blox/stats/schema.json | 53 +++++ .../blox-tailwind/blox/testimonials/README.md | 60 ++++++ .../blox/testimonials/manifest.json | 14 ++ .../blox/testimonials/preview.svg | 35 ++++ .../blox/testimonials/schema.json | 61 ++++++ 64 files changed, 3034 insertions(+) create mode 100644 modules/blox-tailwind/blox/collection/README.md create mode 100644 modules/blox-tailwind/blox/collection/manifest.json create mode 100644 modules/blox-tailwind/blox/collection/preview.svg create mode 100644 modules/blox-tailwind/blox/collection/schema.json create mode 100644 modules/blox-tailwind/blox/cta-button-list/README.md create mode 100644 modules/blox-tailwind/blox/cta-button-list/manifest.json create mode 100644 modules/blox-tailwind/blox/cta-button-list/preview.svg create mode 100644 modules/blox-tailwind/blox/cta-button-list/schema.json create mode 100644 modules/blox-tailwind/blox/cta-card/README.md create mode 100644 modules/blox-tailwind/blox/cta-card/manifest.json create mode 100644 modules/blox-tailwind/blox/cta-card/preview.svg create mode 100644 modules/blox-tailwind/blox/cta-card/schema.json create mode 100644 modules/blox-tailwind/blox/cta-image-paragraph/README.md create mode 100644 modules/blox-tailwind/blox/cta-image-paragraph/manifest.json create mode 100644 modules/blox-tailwind/blox/cta-image-paragraph/preview.svg create mode 100644 modules/blox-tailwind/blox/cta-image-paragraph/schema.json create mode 100644 modules/blox-tailwind/blox/features/README.md create mode 100644 modules/blox-tailwind/blox/features/manifest.json create mode 100644 modules/blox-tailwind/blox/features/preview.svg create mode 100644 modules/blox-tailwind/blox/features/schema.json create mode 100644 modules/blox-tailwind/blox/hero/README.md create mode 100644 modules/blox-tailwind/blox/hero/manifest.json create mode 100644 modules/blox-tailwind/blox/hero/preview.svg create mode 100644 modules/blox-tailwind/blox/hero/schema.json create mode 100644 modules/blox-tailwind/blox/markdown/README.md create mode 100644 modules/blox-tailwind/blox/markdown/manifest.json create mode 100644 modules/blox-tailwind/blox/markdown/preview.svg create mode 100644 modules/blox-tailwind/blox/markdown/schema.json create mode 100644 modules/blox-tailwind/blox/resume-awards/README.md create mode 100644 modules/blox-tailwind/blox/resume-awards/manifest.json create mode 100644 modules/blox-tailwind/blox/resume-awards/preview.svg create mode 100644 modules/blox-tailwind/blox/resume-awards/schema.json create mode 100644 modules/blox-tailwind/blox/resume-biography-3/README.md create mode 100644 modules/blox-tailwind/blox/resume-biography-3/manifest.json create mode 100644 modules/blox-tailwind/blox/resume-biography-3/preview.svg create mode 100644 modules/blox-tailwind/blox/resume-biography-3/schema.json create mode 100644 modules/blox-tailwind/blox/resume-biography/README.md create mode 100644 modules/blox-tailwind/blox/resume-biography/manifest.json create mode 100644 modules/blox-tailwind/blox/resume-biography/preview.svg create mode 100644 modules/blox-tailwind/blox/resume-biography/schema.json create mode 100644 modules/blox-tailwind/blox/resume-experience/README.md create mode 100644 modules/blox-tailwind/blox/resume-experience/manifest.json create mode 100644 modules/blox-tailwind/blox/resume-experience/preview.svg create mode 100644 modules/blox-tailwind/blox/resume-experience/schema.json create mode 100644 modules/blox-tailwind/blox/resume-languages/README.md create mode 100644 modules/blox-tailwind/blox/resume-languages/manifest.json create mode 100644 modules/blox-tailwind/blox/resume-languages/preview.svg create mode 100644 modules/blox-tailwind/blox/resume-languages/schema.json create mode 100644 modules/blox-tailwind/blox/resume-skills/README.md create mode 100644 modules/blox-tailwind/blox/resume-skills/manifest.json create mode 100644 modules/blox-tailwind/blox/resume-skills/preview.svg create mode 100644 modules/blox-tailwind/blox/resume-skills/schema.json create mode 100644 modules/blox-tailwind/blox/shared/schemas/README.md create mode 100644 modules/blox-tailwind/blox/shared/schemas/base-block.json create mode 100644 modules/blox-tailwind/blox/shared/schemas/landing-page.json create mode 100644 modules/blox-tailwind/blox/shared/schemas/sections.json create mode 100644 modules/blox-tailwind/blox/stats/README.md create mode 100644 modules/blox-tailwind/blox/stats/manifest.json create mode 100644 modules/blox-tailwind/blox/stats/preview.svg create mode 100644 modules/blox-tailwind/blox/stats/schema.json create mode 100644 modules/blox-tailwind/blox/testimonials/README.md create mode 100644 modules/blox-tailwind/blox/testimonials/manifest.json create mode 100644 modules/blox-tailwind/blox/testimonials/preview.svg create mode 100644 modules/blox-tailwind/blox/testimonials/schema.json diff --git a/modules/blox-tailwind/blox/collection/README.md b/modules/blox-tailwind/blox/collection/README.md new file mode 100644 index 00000000..7db1a760 --- /dev/null +++ b/modules/blox-tailwind/blox/collection/README.md @@ -0,0 +1,43 @@ +# Collection Block + +**Transform your content into stunning, organized displays** + +The Collection block is your ultimate content curation tool, designed to showcase your blog posts, publications, projects, or any content type in beautifully organized, filterable displays. + +## ✨ Key Features + +- **Smart Filtering**: Filter by folders, tags, categories, authors, publication types, and more +- **Flexible Sorting**: Sort by date, title, or any custom field in ascending or descending order +- **Multiple Views**: Choose from card, compact, showcase, citation, list, or masonry layouts +- **Pagination Ready**: Built-in support for limiting items and pagination +- **Archive Integration**: Automatic "See All" links to full archive pages +- **Responsive Design**: Perfectly optimized for all screen sizes + +## 🎯 Perfect For + +- **Blog Showcases**: Display your latest blog posts with beautiful card layouts +- **Publication Lists**: Showcase academic papers and research with citation views +- **Project Galleries**: Present your portfolio work in stunning visual grids +- **News & Updates**: Keep visitors informed with filtered content streams +- **Content Archives**: Create organized content hubs by topic or category + +## 🚀 Why Choose Collection Block? + +**Effortless Content Management**: No manual updates needed - your content automatically appears as you publish + +**Advanced Filtering**: Powerful filtering system that works with Hugo's built-in taxonomies and custom parameters + +**SEO Optimized**: Clean markup and semantic HTML structure for better search engine visibility + +**Performance First**: Lightweight and fast, with optimized queries and lazy loading support + +## 📊 Use Cases + +- Academic portfolios showcasing publications by research area +- Corporate blogs with category-based content organization +- Creative portfolios with project filtering by type or client +- News sites with topic-based content streams +- Personal blogs with tag-based content discovery + +Start building engaging content displays that keep your visitors exploring and discovering more of what you have to offer. + diff --git a/modules/blox-tailwind/blox/collection/manifest.json b/modules/blox-tailwind/blox/collection/manifest.json new file mode 100644 index 00000000..0e393d37 --- /dev/null +++ b/modules/blox-tailwind/blox/collection/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "collection", + "name": "Collection", + "version": "1.0.0", + "license": "MIT", + "category": "content", + "tags": ["collection", "blog", "publications", "filter", "sort", "content-display", "archive"], + "description": "Display filtered and sorted collections of pages with customizable views and pagination", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "static-site", "content", "blog", "publications", "filtering"] +} + diff --git a/modules/blox-tailwind/blox/collection/preview.svg b/modules/blox-tailwind/blox/collection/preview.svg new file mode 100644 index 00000000..954d5f64 --- /dev/null +++ b/modules/blox-tailwind/blox/collection/preview.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/collection/schema.json b/modules/blox-tailwind/blox/collection/schema.json new file mode 100644 index 00000000..89325e44 --- /dev/null +++ b/modules/blox-tailwind/blox/collection/schema.json @@ -0,0 +1,118 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/collection.json", + "title": "Collection Block Schema", + "description": "Schema for the Collection block - displays filtered and sorted collections of pages", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "collection" + }, + "content": { + "type": "object", + "description": "Content configuration for the collection block", + "properties": { + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Section description (supports Markdown)" + }, + "count": { + "type": "number", + "description": "Maximum number of items to display", + "minimum": 0, + "default": 5 + }, + "offset": { + "type": "number", + "description": "Number of items to skip", + "minimum": 0, + "default": 0 + }, + "page_type": { + "type": "string", + "description": "Filter by page type (e.g., 'post', 'publication')" + }, + "sort_by": { + "type": "string", + "description": "Field to sort by", + "default": "Date" + }, + "sort_ascending": { + "type": "boolean", + "description": "Sort in ascending order", + "default": false + }, + "order": { + "type": "string", + "enum": ["asc", "desc"], + "description": "Sort order (alternative to sort_ascending)" + }, + "filters": { + "type": "object", + "description": "Content filtering options", + "properties": { + "folders": { + "type": "array", + "description": "Filter by content folders/sections", + "items": { + "type": "string" + } + }, + "tag": { + "type": "string", + "description": "Filter by tag" + }, + "category": { + "type": "string", + "description": "Filter by category" + }, + "publication_type": { + "type": "string", + "description": "Filter by publication type" + }, + "exclude_publication_type": { + "type": "string", + "description": "Exclude specific publication type" + }, + "author": { + "type": "string", + "description": "Filter by author" + }, + "featured_only": { + "type": "boolean", + "description": "Show only featured content", + "default": false + }, + "exclude_featured": { + "type": "boolean", + "description": "Exclude featured content", + "default": false + }, + "exclude_past": { + "type": "boolean", + "description": "Exclude past-dated content", + "default": false + }, + "exclude_future": { + "type": "boolean", + "description": "Exclude future-dated content", + "default": false + } + } + } + } + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/cta-button-list/README.md b/modules/blox-tailwind/blox/cta-button-list/README.md new file mode 100644 index 00000000..d7e153d4 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-button-list/README.md @@ -0,0 +1,50 @@ +# CTA Button List Block + +**Drive action with beautiful, conversion-focused button lists** + +Transform your visitors into engaged users with the CTA Button List block - a sleek, modern way to present multiple call-to-action options in an organized, visually appealing format. + +## ✨ Key Features + +- **Icon Integration**: Add engaging icons to every button for visual impact +- **Hover Animations**: Smooth scale and transition effects that invite interaction +- **Responsive Design**: Perfect button sizing and spacing across all devices +- **External Link Support**: Built-in support for external links with proper security attributes +- **Markdown Support**: Rich text formatting for button labels +- **Clean Styling**: Modern card-based design with subtle shadows and borders + +## 🎯 Perfect For + +- **Social Media Links**: Create an elegant "link in bio" style page +- **Resource Collections**: Direct visitors to your key resources and tools +- **Service Offerings**: Showcase different services or products you offer +- **Contact Options**: Multiple ways for visitors to reach you +- **Download Centers**: Organize files, guides, and resources for easy access +- **Partner Links**: Highlight collaborations and partnerships + +## 🚀 Why Choose CTA Button List? + +**High Conversion Design**: Proven button styling that encourages clicks and engagement + +**Flexible & Scalable**: Add as many buttons as needed without compromising design + +**Professional Appeal**: Clean, modern aesthetic that works for any industry or use case + +**Easy Maintenance**: Simple configuration that keeps your links organized and up-to-date + +## 📊 Conversion Benefits + +- Increased click-through rates with prominent, well-designed buttons +- Better user experience with clear visual hierarchy +- Reduced bounce rates by providing multiple engagement paths +- Improved accessibility with proper labeling and focus states + +## 💡 Pro Tips + +- Use contrasting icons to make each button distinct +- Keep button text concise but descriptive +- Order buttons by priority or user journey importance +- Test different icon styles to match your brand aesthetic + +Perfect for entrepreneurs, creators, businesses, and anyone who wants to turn their website visitors into active participants in their ecosystem. + diff --git a/modules/blox-tailwind/blox/cta-button-list/manifest.json b/modules/blox-tailwind/blox/cta-button-list/manifest.json new file mode 100644 index 00000000..e14e5a54 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-button-list/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "cta-button-list", + "name": "CTA Button List", + "version": "1.0.0", + "license": "MIT", + "category": "marketing", + "tags": ["cta", "buttons", "links", "social", "marketing", "conversion", "list"], + "description": "Create compelling vertical lists of call-to-action buttons with icons and hover effects", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "cta", "buttons", "conversion", "marketing", "social-links"] +} + diff --git a/modules/blox-tailwind/blox/cta-button-list/preview.svg b/modules/blox-tailwind/blox/cta-button-list/preview.svg new file mode 100644 index 00000000..d8f86b16 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-button-list/preview.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/cta-button-list/schema.json b/modules/blox-tailwind/blox/cta-button-list/schema.json new file mode 100644 index 00000000..4a6030d7 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-button-list/schema.json @@ -0,0 +1,49 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/cta-button-list.json", + "title": "CTA Button List Block Schema", + "description": "Schema for the CTA Button List block - displays a vertical list of call-to-action buttons", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "cta-button-list" + }, + "content": { + "type": "object", + "description": "Content configuration for the CTA button list block", + "properties": { + "buttons": { + "type": "array", + "description": "Array of buttons to display", + "items": { + "type": "object", + "properties": { + "url": { + "type": "string", + "description": "Button URL" + }, + "text": { + "type": "string", + "description": "Button text (supports Markdown)" + }, + "icon": { + "type": "string", + "description": "Optional button icon (icon pack format: pack/icon-name)" + } + }, + "required": ["url", "text"] + } + } + }, + "required": ["buttons"] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/cta-card/README.md b/modules/blox-tailwind/blox/cta-card/README.md new file mode 100644 index 00000000..0eb75137 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-card/README.md @@ -0,0 +1,50 @@ +# CTA Card Block + +**Create irresistible calls-to-action that convert** + +Make a bold statement and drive immediate action with the CTA Card block - a high-impact, conversion-optimized component designed to capture attention and compel your visitors to take the next step. + +## ✨ Key Features + +- **Bold Typography**: Eye-catching large text that commands attention +- **Customizable Styling**: Full control over background colors, CSS classes, and custom styles +- **High-Contrast Design**: Dark backgrounds with light text for maximum readability +- **Prominent Button**: Conversion-optimized button styling with hover effects +- **Markdown Support**: Rich text formatting for titles and descriptions +- **Mobile Responsive**: Scales beautifully from mobile to desktop + +## 🎯 Perfect For + +- **Newsletter Signups**: Encourage email subscriptions with compelling copy +- **Product Launches**: Announce new products or services with impact +- **Event Promotions**: Drive registrations and attendance +- **Lead Generation**: Capture leads with irresistible offers +- **Content Downloads**: Promote whitepapers, guides, and resources +- **Service Inquiries**: Convert visitors into prospects and clients + +## 🚀 Why Choose CTA Card? + +**Maximum Visual Impact**: Bold design that stands out on any page and captures immediate attention + +**Conversion Focused**: Every element is optimized for driving action, from typography to button placement + +**Brand Flexible**: Fully customizable styling to match your brand colors and aesthetic + +**Proven Results**: Based on high-converting design patterns used by top marketing teams + +## 📊 Conversion Psychology + +- **Contrast Principle**: Dark background creates visual separation and focus +- **Size Hierarchy**: Large headlines establish clear information priority +- **Action Clarity**: Single, prominent button reduces decision paralysis +- **Emotional Appeal**: Space for compelling copy that connects with your audience + +## 💡 Best Practices + +- Keep headlines short and benefit-focused +- Use action-oriented button text ("Get Started", "Download Now", "Join Today") +- Ensure your copy addresses a specific pain point or desire +- Test different background colors to maximize contrast with your site + +Transform casual visitors into engaged users with a CTA Card that's impossible to ignore. + diff --git a/modules/blox-tailwind/blox/cta-card/manifest.json b/modules/blox-tailwind/blox/cta-card/manifest.json new file mode 100644 index 00000000..0627492b --- /dev/null +++ b/modules/blox-tailwind/blox/cta-card/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "cta-card", + "name": "CTA Card", + "version": "1.0.0", + "license": "MIT", + "category": "marketing", + "tags": ["cta", "card", "conversion", "marketing", "hero", "call-to-action", "banner"], + "description": "Create high-impact call-to-action cards with bold typography and compelling buttons", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "cta", "marketing", "conversion", "banner", "card"] +} + diff --git a/modules/blox-tailwind/blox/cta-card/preview.svg b/modules/blox-tailwind/blox/cta-card/preview.svg new file mode 100644 index 00000000..f7e20551 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-card/preview.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/cta-card/schema.json b/modules/blox-tailwind/blox/cta-card/schema.json new file mode 100644 index 00000000..6564bf24 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-card/schema.json @@ -0,0 +1,49 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/cta-card.json", + "title": "CTA Card Block Schema", + "description": "Schema for the CTA Card block - displays a prominent call-to-action card with title, text, and button", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "cta-card" + }, + "content": { + "type": "object", + "description": "Content configuration for the CTA card block", + "properties": { + "title": { + "type": "string", + "description": "Card title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Card description text (supports Markdown)" + }, + "button": { + "type": "object", + "description": "Call-to-action button", + "properties": { + "url": { + "type": "string", + "description": "Button URL" + }, + "text": { + "type": "string", + "description": "Button text" + } + }, + "required": ["url", "text"] + } + } + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/cta-image-paragraph/README.md b/modules/blox-tailwind/blox/cta-image-paragraph/README.md new file mode 100644 index 00000000..9a2ebdc1 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-image-paragraph/README.md @@ -0,0 +1,51 @@ +# CTA Image Paragraph Block + +**Tell your story with stunning visuals and compelling copy** + +Engage your audience with the CTA Image Paragraph block - a powerful storytelling component that combines beautiful imagery, descriptive content, feature highlights, and strategic calls-to-action in an alternating layout that keeps visitors scrolling. + +## ✨ Key Features + +- **Alternating Layout**: Images automatically alternate left/right for visual rhythm +- **Responsive Images**: Smart image processing with multiple sizes and WebP support +- **Feature Lists**: Highlight key benefits with customizable icons +- **GIF Support**: Full support for animated GIFs alongside static images +- **CTA Integration**: Strategic button placement for maximum conversion +- **Markdown Rich**: Full Markdown support for titles and descriptions +- **Mobile Optimized**: Stacks beautifully on mobile devices + +## 🎯 Perfect For + +- **Product Showcases**: Highlight different product features with supporting visuals +- **Service Explanations**: Break down complex services into digestible sections +- **Company Story**: Tell your brand story with compelling narratives and imagery +- **Feature Announcements**: Introduce new features with visual demonstrations +- **Process Explanations**: Guide users through multi-step processes +- **Benefits Highlighting**: Showcase the value proposition of your offerings + +## 🚀 Why Choose CTA Image Paragraph? + +**Visual Storytelling**: Combine the power of images and words for maximum engagement + +**Conversion Optimized**: Strategic placement of features and CTAs guides users toward action + +**Professional Polish**: Alternating layout creates visual interest and professional appearance + +**Content Flexibility**: Support any number of sections with unique images, copy, and features + +## 📊 Engagement Benefits + +- **Higher Time on Page**: Alternating content keeps visitors engaged longer +- **Better Comprehension**: Visual-text combinations improve understanding and retention +- **Increased Conversions**: Strategic CTA placement at optimal engagement points +- **Mobile Excellence**: Responsive design ensures great experience on all devices + +## 💡 Design Psychology + +- **Visual Rhythm**: Alternating layout creates pleasing visual flow +- **Information Chunking**: Breaking content into sections improves readability +- **Social Proof**: Feature lists build credibility and trust +- **Action Momentum**: Multiple CTAs capture interest at different engagement levels + +Perfect for SaaS companies, service providers, product teams, and anyone who needs to explain complex offerings through engaging visual storytelling. + diff --git a/modules/blox-tailwind/blox/cta-image-paragraph/manifest.json b/modules/blox-tailwind/blox/cta-image-paragraph/manifest.json new file mode 100644 index 00000000..84c385cc --- /dev/null +++ b/modules/blox-tailwind/blox/cta-image-paragraph/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "cta-image-paragraph", + "name": "CTA Image Paragraph", + "version": "1.0.0", + "license": "MIT", + "category": "marketing", + "tags": ["cta", "image", "features", "alternating", "marketing", "storytelling", "visual"], + "description": "Engaging alternating image and text sections with feature lists and call-to-action buttons", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "marketing", "images", "features", "storytelling", "conversion"] +} + diff --git a/modules/blox-tailwind/blox/cta-image-paragraph/preview.svg b/modules/blox-tailwind/blox/cta-image-paragraph/preview.svg new file mode 100644 index 00000000..1f80466c --- /dev/null +++ b/modules/blox-tailwind/blox/cta-image-paragraph/preview.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/cta-image-paragraph/schema.json b/modules/blox-tailwind/blox/cta-image-paragraph/schema.json new file mode 100644 index 00000000..3e03fba1 --- /dev/null +++ b/modules/blox-tailwind/blox/cta-image-paragraph/schema.json @@ -0,0 +1,76 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/cta-image-paragraph.json", + "title": "CTA Image Paragraph Block Schema", + "description": "Schema for the CTA Image Paragraph block - displays alternating image and text sections with features and buttons", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "cta-image-paragraph" + }, + "content": { + "type": "object", + "description": "Content configuration for the CTA image paragraph block", + "properties": { + "items": { + "type": "array", + "description": "Array of image-paragraph items", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Item title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Item description text (supports Markdown)" + }, + "image": { + "type": "string", + "description": "Image filename (in assets/media/)" + }, + "features": { + "type": "array", + "description": "Array of feature list items", + "items": { + "type": "string" + } + }, + "feature_icon": { + "type": "string", + "description": "Icon for feature list items (icon pack format: pack/icon-name)", + "default": "check" + }, + "button": { + "type": "object", + "description": "Optional call-to-action button", + "properties": { + "url": { + "type": "string", + "description": "Button URL" + }, + "text": { + "type": "string", + "description": "Button text" + } + }, + "required": ["url", "text"] + } + }, + "required": ["title", "text", "image"] + } + } + }, + "required": ["items"] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/features/README.md b/modules/blox-tailwind/blox/features/README.md new file mode 100644 index 00000000..bd65c3aa --- /dev/null +++ b/modules/blox-tailwind/blox/features/README.md @@ -0,0 +1,51 @@ +# Features Block + +**Showcase what makes you special with stunning feature grids** + +Present your key features, services, or benefits in a clean, organized grid that helps visitors quickly understand your value proposition. The Features block combines beautiful icons with compelling descriptions to create trust and drive engagement. + +## ✨ Key Features + +- **Responsive Grid**: Automatically adapts from 1 column (mobile) to 3 columns (desktop) +- **Icon Integration**: Beautiful icons that reinforce each feature's purpose +- **Flexible Layout**: 2-3 column layouts that work perfectly with any number of features +- **Brand Consistency**: Cohesive color scheme with your primary brand colors +- **Markdown Support**: Rich text formatting for feature names and descriptions +- **Center-Aligned**: Professional center-aligned layout for maximum impact + +## 🎯 Perfect For + +- **SaaS Features**: Highlight the key capabilities of your software platform +- **Service Offerings**: Present your professional services in an organized manner +- **Product Benefits**: Showcase why customers should choose your product +- **Company Values**: Display your core principles and what sets you apart +- **Process Steps**: Break down your workflow or methodology +- **Technology Stack**: Present your technical capabilities and tools + +## 🚀 Why Choose Features Block? + +**Visual Clarity**: Icons and organized layout help visitors quickly scan and understand your offerings + +**Professional Credibility**: Clean, modern design builds trust and demonstrates attention to detail + +**Conversion Ready**: Well-organized features help visitors make informed decisions faster + +**Brand Reinforcement**: Consistent use of your brand colors creates cohesive visual identity + +## 📊 Business Impact + +- **Faster Decision Making**: Clear feature presentation reduces visitor confusion +- **Higher Engagement**: Visual icons and organized content keep visitors interested +- **Better Communication**: Structured format ensures key benefits are clearly communicated +- **Mobile Excellence**: Responsive design captures mobile traffic effectively + +## 💡 Best Practices + +- Limit features to 3-6 items for optimal impact and readability +- Use consistent icon styles that align with your brand aesthetic +- Keep feature descriptions concise but compelling (1-2 sentences) +- Order features by importance or user journey priority +- Choose icons that instantly communicate each feature's value + +Ideal for startups, SaaS companies, service providers, and any business that needs to clearly communicate their value proposition to potential customers. + diff --git a/modules/blox-tailwind/blox/features/manifest.json b/modules/blox-tailwind/blox/features/manifest.json new file mode 100644 index 00000000..13c4c375 --- /dev/null +++ b/modules/blox-tailwind/blox/features/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "features", + "name": "Features", + "version": "1.0.0", + "license": "MIT", + "category": "content", + "tags": ["features", "grid", "icons", "benefits", "product", "services", "highlights"], + "description": "Showcase features, benefits, or services in an organized grid with icons and descriptions", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "features", "grid", "services", "benefits", "product"] +} + diff --git a/modules/blox-tailwind/blox/features/preview.svg b/modules/blox-tailwind/blox/features/preview.svg new file mode 100644 index 00000000..51354f40 --- /dev/null +++ b/modules/blox-tailwind/blox/features/preview.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/features/schema.json b/modules/blox-tailwind/blox/features/schema.json new file mode 100644 index 00000000..4dc21d5c --- /dev/null +++ b/modules/blox-tailwind/blox/features/schema.json @@ -0,0 +1,57 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/features.json", + "title": "Features Block Schema", + "description": "Schema for the Features block - displays a grid of features with icons, names, and descriptions", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "features" + }, + "content": { + "type": "object", + "description": "Content configuration for the features block", + "properties": { + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Section description (supports Markdown)" + }, + "items": { + "type": "array", + "description": "Array of feature items", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string", + "description": "Feature name/title (supports Markdown)" + }, + "description": { + "type": "string", + "description": "Feature description (supports Markdown)" + }, + "icon": { + "type": "string", + "description": "Feature icon (icon pack format: pack/icon-name)" + } + }, + "required": ["name", "description"] + } + } + }, + "required": ["items"] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/hero/README.md b/modules/blox-tailwind/blox/hero/README.md new file mode 100644 index 00000000..537d60d9 --- /dev/null +++ b/modules/blox-tailwind/blox/hero/README.md @@ -0,0 +1,52 @@ +# Hero Block + +**Make an unforgettable first impression** + +Capture attention and drive action from the moment visitors land on your site with the Hero block - a conversion-optimized centerpiece designed to communicate your value proposition and guide users toward meaningful engagement. + +## ✨ Key Features + +- **Dual CTA Strategy**: Primary and secondary action buttons to capture different user intents +- **Announcement Banner**: Highlight special offers, news, or important updates +- **Typography Hierarchy**: Large, attention-grabbing headlines with supporting descriptive text +- **Icon Support**: Add visual elements to your primary action button +- **Smart Link Handling**: Automatic external link detection with proper security attributes +- **Responsive Typography**: Headlines scale from 4xl to 6xl based on screen size +- **Center-Aligned**: Professional center-aligned layout for maximum impact + +## 🎯 Perfect For + +- **Landing Pages**: Convert visitors into leads with compelling headlines and clear CTAs +- **Product Launches**: Announce new products with maximum visual impact +- **Service Introduction**: Present your core offering with confidence +- **Event Promotion**: Drive registrations and attendance with compelling copy +- **Brand Positioning**: Establish your unique value proposition front and center +- **Lead Generation**: Capture emails, demos, or consultation requests + +## 🚀 Why Choose Hero Block? + +**Conversion Psychology**: Designed using proven principles that drive user action + +**Flexible CTA Options**: Primary button for main action, secondary link for alternative paths + +**Announcement Integration**: Built-in banner for promotions without cluttering the main message + +**Professional Polish**: Clean, modern design that builds trust and credibility instantly + +## 📊 Conversion Elements + +- **Headline Optimization**: Large, scannable headlines that communicate value instantly +- **Announcement Strategy**: Special offers and news that create urgency and relevance +- **Dual Path Design**: Primary and secondary CTAs capture users at different decision stages +- **Visual Hierarchy**: Clear information flow that guides users toward action + +## 💡 Marketing Best Practices + +- Lead with benefits, not features in your headline +- Use announcement banner for limited-time offers or important news +- Make primary CTA action-oriented ("Get Started", "Try Free", "Book Demo") +- Use secondary CTA for lower-commitment actions ("Learn More", "View Demo") +- Test different headline variations to optimize for your audience + +The Hero block is your digital storefront - make it count with compelling copy, strategic CTAs, and professional design that converts visitors into customers. + diff --git a/modules/blox-tailwind/blox/hero/manifest.json b/modules/blox-tailwind/blox/hero/manifest.json new file mode 100644 index 00000000..cecef642 --- /dev/null +++ b/modules/blox-tailwind/blox/hero/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "hero", + "name": "Hero", + "version": "1.0.0", + "license": "MIT", + "category": "marketing", + "tags": ["hero", "landing", "cta", "announcement", "headline", "conversion", "primary"], + "description": "Create compelling hero sections with headlines, announcements, and dual call-to-action buttons", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "hero", "landing-page", "cta", "marketing", "headlines"] +} + diff --git a/modules/blox-tailwind/blox/hero/preview.svg b/modules/blox-tailwind/blox/hero/preview.svg new file mode 100644 index 00000000..99a5fdae --- /dev/null +++ b/modules/blox-tailwind/blox/hero/preview.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/hero/schema.json b/modules/blox-tailwind/blox/hero/schema.json new file mode 100644 index 00000000..8840ae21 --- /dev/null +++ b/modules/blox-tailwind/blox/hero/schema.json @@ -0,0 +1,94 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/hero.json", + "title": "Hero Block Schema", + "description": "Schema for the Hero block - displays prominent hero sections with title, text, and call-to-action buttons", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "hero" + }, + "content": { + "type": "object", + "description": "Content configuration for the hero block", + "properties": { + "title": { + "type": "string", + "description": "Main hero title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Hero description text (supports Markdown)" + }, + "announcement": { + "type": "object", + "description": "Optional announcement banner", + "properties": { + "text": { + "type": "string", + "description": "Announcement text (supports Markdown)" + }, + "link": { + "type": "object", + "description": "Optional announcement link", + "properties": { + "text": { + "type": "string", + "description": "Link text" + }, + "url": { + "type": "string", + "description": "Link URL" + } + }, + "required": ["text", "url"] + } + }, + "required": ["text"] + }, + "primary_action": { + "type": "object", + "description": "Primary call-to-action button", + "properties": { + "url": { + "type": "string", + "description": "Button URL" + }, + "text": { + "type": "string", + "description": "Button text (supports Markdown)" + }, + "icon": { + "type": "string", + "description": "Optional button icon (icon pack format: pack/icon-name)" + } + }, + "required": ["url", "text"] + }, + "secondary_action": { + "type": "object", + "description": "Secondary call-to-action link", + "properties": { + "url": { + "type": "string", + "description": "Link URL" + }, + "text": { + "type": "string", + "description": "Link text (supports Markdown)" + } + }, + "required": ["url", "text"] + } + } + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/markdown/README.md b/modules/blox-tailwind/blox/markdown/README.md new file mode 100644 index 00000000..6893da6f --- /dev/null +++ b/modules/blox-tailwind/blox/markdown/README.md @@ -0,0 +1,59 @@ +# Markdown Block + +**Beautiful typography for your content** + +Transform your written content into beautifully formatted, readable sections with the Markdown block - a clean, minimalist component that puts your words front and center with professional typography and perfect readability. + +## ✨ Key Features + +- **Prose Optimization**: Beautiful typography with the prose class for optimal readability +- **Dark Mode Support**: Automatic dark mode styling with prose-invert +- **Responsive Typography**: Scales from base to large (lg:prose-xl) on bigger screens +- **Markdown Rich**: Full Markdown support including links, formatting, lists, and more +- **Optional Titles**: Add section headers with consistent styling +- **Center-Aligned**: Content centered with optimal line length for reading +- **Emoji Support**: Built-in emoji rendering for expressive content + +## 🎯 Perfect For + +- **About Pages**: Tell your story with beautifully formatted text +- **Blog Content**: Create rich, readable blog post sections +- **Documentation**: Present technical content with professional formatting +- **Company Information**: Share detailed company background and mission +- **Policy Pages**: Format terms, privacy policies, and legal content +- **Long-Form Content**: Any substantial text content that deserves beautiful presentation + +## 🚀 Why Choose Markdown Block? + +**Reading Experience**: Optimized typography that makes long-form content a pleasure to read + +**Flexible Content**: Support for all Markdown features including links, emphasis, lists, and code + +**Consistent Styling**: Professional typography that matches your site's design system + +**Accessibility First**: Semantic HTML structure with proper heading hierarchy and contrast + +## 📊 Content Benefits + +- **Improved Readability**: Optimal line length and spacing reduce eye strain +- **Better Engagement**: Beautiful typography encourages visitors to read more +- **SEO Friendly**: Clean, semantic HTML structure helps search engines understand content +- **Mobile Optimized**: Responsive text sizing ensures readability on all devices + +## 💡 Typography Science + +- **Optimal Line Length**: Content width designed for comfortable reading speed +- **Proper Contrast**: Light and dark mode support ensures accessibility +- **Hierarchical Structure**: Clear visual hierarchy guides readers through content +- **Breathing Room**: Generous spacing prevents information overload + +## 🎨 Use Cases + +- **Storytelling**: Share your journey, mission, or company history +- **Educational Content**: Present tutorials, guides, or learning materials +- **Announcements**: Communicate important updates or changes +- **Content Marketing**: Create engaging blog posts and articles +- **Documentation**: Technical guides, API docs, or user manuals + +Perfect for bloggers, businesses, educators, and anyone who values beautiful, readable content presentation. Make your words shine with typography that respects both your message and your readers. + diff --git a/modules/blox-tailwind/blox/markdown/manifest.json b/modules/blox-tailwind/blox/markdown/manifest.json new file mode 100644 index 00000000..4a666fd0 --- /dev/null +++ b/modules/blox-tailwind/blox/markdown/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "markdown", + "name": "Markdown", + "version": "1.0.0", + "license": "MIT", + "category": "content", + "tags": ["markdown", "content", "text", "prose", "writing", "simple", "flexible"], + "description": "Display rich markdown content with beautiful typography and optional section titles", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "markdown", "content", "typography", "prose", "text"] +} + diff --git a/modules/blox-tailwind/blox/markdown/preview.svg b/modules/blox-tailwind/blox/markdown/preview.svg new file mode 100644 index 00000000..23cac2a2 --- /dev/null +++ b/modules/blox-tailwind/blox/markdown/preview.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/markdown/schema.json b/modules/blox-tailwind/blox/markdown/schema.json new file mode 100644 index 00000000..94ac58e0 --- /dev/null +++ b/modules/blox-tailwind/blox/markdown/schema.json @@ -0,0 +1,35 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/markdown.json", + "title": "Markdown Block Schema", + "description": "Schema for the Markdown block - displays markdown content with optional title", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "markdown" + }, + "content": { + "type": "object", + "description": "Content configuration for the markdown block", + "properties": { + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Markdown content (supports full Markdown syntax)" + } + }, + "required": ["text"] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/resume-awards/README.md b/modules/blox-tailwind/blox/resume-awards/README.md new file mode 100644 index 00000000..1509f490 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-awards/README.md @@ -0,0 +1,58 @@ +# Resume Awards Block + +**Highlight your achievements with professional elegance** + +Showcase your professional accomplishments, certifications, and awards with the Resume Awards block - a sophisticated component that presents your credentials in an organized, visually appealing format that builds trust and demonstrates expertise. + +## ✨ Key Features + +- **Professional Cards**: Clean, shadowed card design for each award or certification +- **Icon Integration**: Brand icons for certifying organizations and institutions +- **Certificate Links**: Direct links to verify credentials with proper external link handling +- **Date Formatting**: Customizable date display (month/year format by default) +- **Markdown Support**: Rich text formatting for award titles and descriptions +- **Chronological Sorting**: Automatic sorting by date (newest first) +- **Responsive Layout**: Perfect display across all screen sizes + +## 🎯 Perfect For + +- **Academic Professionals**: Showcase research awards, grants, and honors +- **Industry Experts**: Display professional certifications and recognitions +- **Corporate Leaders**: Highlight leadership awards and company recognitions +- **Freelancers**: Build credibility with client awards and industry recognition +- **Consultants**: Demonstrate expertise through professional certifications +- **Creative Professionals**: Feature competition wins and industry awards + +## 🚀 Why Choose Resume Awards Block? + +**Credibility Building**: Professional presentation of achievements builds immediate trust + +**Verification Ready**: Direct links to certificates enable easy credential verification + +**Visual Organization**: Card-based layout makes achievements easy to scan and understand + +**Professional Standards**: Consistent formatting that meets CV and portfolio standards + +## 📊 Professional Benefits + +- **Enhanced Credibility**: Visual display of achievements builds professional authority +- **Easy Verification**: Certificate links provide transparency and trust +- **Organized Presentation**: Clean layout prevents information overload +- **Mobile Professional**: Responsive design ensures professional appearance on all devices + +## 💡 Strategic Advantages + +- **Competitive Edge**: Prominent credential display differentiates you from competitors +- **Trust Signals**: Awards and certifications reduce client hesitation +- **Expertise Proof**: Concrete evidence of your skills and knowledge +- **Professional Brand**: Consistent, polished presentation reinforces your personal brand + +## 🎨 Design Philosophy + +- **Visual Hierarchy**: Most recent and important awards get prominence +- **Clean Aesthetics**: Professional card design that doesn't distract from content +- **Information Balance**: Right amount of detail without overwhelming visitors +- **Brand Integration**: Certifying organization icons add visual interest and authenticity + +Perfect for professionals, academics, consultants, and anyone who wants to showcase their achievements in a format that builds confidence and demonstrates expertise. Your accomplishments deserve professional presentation. + diff --git a/modules/blox-tailwind/blox/resume-awards/manifest.json b/modules/blox-tailwind/blox/resume-awards/manifest.json new file mode 100644 index 00000000..1777b4b0 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-awards/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "resume-awards", + "name": "Resume Awards", + "version": "1.0.0", + "license": "MIT", + "category": "resume", + "tags": ["resume", "awards", "certifications", "achievements", "credentials", "professional", "cv"], + "description": "Showcase professional awards and certifications with elegant card layouts and certificate links", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "resume", "awards", "certifications", "cv", "professional"] +} + diff --git a/modules/blox-tailwind/blox/resume-awards/preview.svg b/modules/blox-tailwind/blox/resume-awards/preview.svg new file mode 100644 index 00000000..b1c7d643 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-awards/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/resume-awards/schema.json b/modules/blox-tailwind/blox/resume-awards/schema.json new file mode 100644 index 00000000..54c0827c --- /dev/null +++ b/modules/blox-tailwind/blox/resume-awards/schema.json @@ -0,0 +1,56 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/resume-awards.json", + "title": "Resume Awards Block Schema", + "description": "Schema for the Resume Awards block - displays awards and certifications from author profile", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "resume-awards" + }, + "content": { + "type": "object", + "description": "Content configuration for the resume awards block", + "properties": { + "username": { + "type": "string", + "description": "Author username (references authors/{username}/ page)", + "default": "admin" + }, + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Section description (supports Markdown)" + } + } + }, + "design": { + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json#/properties/design" + }, + { + "type": "object", + "properties": { + "date_format": { + "type": "string", + "description": "Date format for award dates", + "default": "January 2006" + } + } + } + ] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/resume-biography-3/README.md b/modules/blox-tailwind/blox/resume-biography-3/README.md new file mode 100644 index 00000000..c3446f40 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography-3/README.md @@ -0,0 +1,60 @@ +# Resume Biography 3 Block + +**Comprehensive professional profile with integrated academic details** + +Present a complete professional picture with the Resume Biography 3 block - an expanded biography layout that combines personal information, social presence, education history, and interests in one cohesive, horizontally-oriented section. + +## ✨ Key Features + +- **Horizontal Layout**: Desktop-optimized side-by-side arrangement for better space utilization +- **Integrated Education**: Built-in education timeline with institution details +- **Interests Section**: Personal interests display for a well-rounded professional image +- **Social Integration**: Complete social media profile links with proper external handling +- **Avatar Flexibility**: Multiple size and shape options for personal branding +- **Academic Icons**: Beautiful education and achievement icons +- **Responsive Stack**: Gracefully converts to vertical layout on mobile devices + +## 🎯 Perfect For + +- **Academic Professionals**: Researchers who need education prominently featured +- **Career Changers**: Professionals highlighting diverse educational backgrounds +- **Consultants**: Comprehensive profiles that establish expertise across domains +- **Thought Leaders**: Complete professional picture including personal interests +- **Graduate Students**: Academic profiles with research interests and education +- **Multi-Disciplinary Experts**: Professionals with diverse backgrounds and interests + +## 🚀 Why Choose Resume Biography 3? + +**Complete Picture**: Combines biography, education, and interests for comprehensive professional presentation + +**Space Efficient**: Horizontal layout maximizes content display while maintaining readability + +**Academic Focus**: Integrated education section perfect for academic and research professionals + +**Personal Touch**: Interests section adds humanity to professional profiles + +## 📊 Professional Advantages + +- **Comprehensive Credibility**: Education and interests create complete professional narrative +- **Better Engagement**: Personal interests create conversation starters and connections +- **Academic Authority**: Prominent education display builds academic credibility +- **Professional Networking**: Complete profile facilitates meaningful professional connections + +## 💡 Layout Benefits + +- **Desktop Optimization**: Horizontal layout makes excellent use of wider screens +- **Content Density**: More information displayed in less vertical space +- **Visual Balance**: Side-by-side layout creates pleasing visual composition +- **Mobile Adaptation**: Responsive design ensures great experience on all devices + +## 🎨 Educational Excellence + +- **Institution Recognition**: Clear display of educational credentials +- **Timeline Clarity**: Chronological education history with proper date formatting +- **Academic Icons**: Beautiful visual elements that reinforce educational achievements +- **Degree Emphasis**: Prominent display of areas of study and qualifications + +Perfect for academics, researchers, consultants, and professionals who want to present a complete picture of their background, education, and interests in one comprehensive, beautifully designed section. + +Create a professional profile that tells your complete story and opens doors to new opportunities. + diff --git a/modules/blox-tailwind/blox/resume-biography-3/manifest.json b/modules/blox-tailwind/blox/resume-biography-3/manifest.json new file mode 100644 index 00000000..79a5dbff --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography-3/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "resume-biography-3", + "name": "Resume Biography 3", + "version": "1.0.0", + "license": "MIT", + "category": "resume", + "tags": ["resume", "biography", "profile", "horizontal", "education", "interests", "cv", "layout"], + "description": "Horizontal biography layout with integrated education and interests sections", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "resume", "biography", "horizontal", "education", "interests", "cv"] +} + diff --git a/modules/blox-tailwind/blox/resume-biography-3/preview.svg b/modules/blox-tailwind/blox/resume-biography-3/preview.svg new file mode 100644 index 00000000..01f24421 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography-3/preview.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/resume-biography-3/schema.json b/modules/blox-tailwind/blox/resume-biography-3/schema.json new file mode 100644 index 00000000..5555d06f --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography-3/schema.json @@ -0,0 +1,100 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/resume-biography-3.json", + "title": "Resume Biography 3 Block Schema", + "description": "Schema for the Resume Biography 3 block - displays author bio with avatar, interests, and education in horizontal layout", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "resume-biography-3" + }, + "content": { + "type": "object", + "description": "Content configuration for the resume biography 3 block", + "properties": { + "username": { + "type": "string", + "description": "Author username (references authors/{username}/ page)", + "default": "admin" + }, + "text": { + "type": "string", + "description": "Biography text override (supports Markdown). If not provided, uses author page content." + }, + "button": { + "type": "object", + "description": "Optional call-to-action button", + "properties": { + "url": { + "type": "string", + "description": "Button URL" + }, + "text": { + "type": "string", + "description": "Button text" + } + }, + "required": ["url", "text"] + } + } + }, + "design": { + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json#/properties/design" + }, + { + "type": "object", + "properties": { + "avatar": { + "type": "object", + "description": "Avatar styling options", + "properties": { + "size": { + "type": "string", + "enum": ["small", "medium", "large", "xl", "xxl"], + "description": "Avatar size", + "default": "medium" + }, + "shape": { + "type": "string", + "enum": ["circle", "square", "rounded"], + "description": "Avatar shape", + "default": "circle" + } + } + }, + "banner": { + "type": "object", + "description": "Optional banner image", + "properties": { + "filename": { + "type": "string", + "description": "Banner image filename (in assets/media/)" + } + } + }, + "biography": { + "type": "object", + "description": "Biography text styling", + "properties": { + "style": { + "type": "string", + "description": "Custom CSS styles for biography text" + } + } + } + } + } + ] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/resume-biography/README.md b/modules/blox-tailwind/blox/resume-biography/README.md new file mode 100644 index 00000000..9bed5a36 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography/README.md @@ -0,0 +1,63 @@ +# Resume Biography Block + +**Make a powerful personal first impression** + +Present yourself professionally with the Resume Biography block - a comprehensive profile component that combines your photo, personal details, social presence, and biography into one compelling, trust-building section. + +## ✨ Key Features + +- **High-Quality Avatar**: Retina-optimized profile photos with multiple size options (small to xxl) +- **Flexible Shapes**: Choose from circle, square, or rounded avatar styles +- **Social Integration**: Beautiful social media links with icon support +- **Banner Support**: Optional header banner for additional visual impact +- **Name Pronunciation**: Ruby annotation support for proper name pronunciation +- **Pronoun Support**: Inclusive pronoun display for professional clarity +- **Organization Links**: Clickable organization affiliations +- **Download Button**: Optional CV/resume download functionality + +## 🎯 Perfect For + +- **Academic Profiles**: Researchers, professors, and graduate students +- **Professional Portfolios**: Consultants, freelancers, and industry experts +- **Corporate Leadership**: Executive profiles and team member pages +- **Personal Branding**: Entrepreneurs and thought leaders +- **Creative Professionals**: Designers, writers, and artists +- **Job Seekers**: Professional online presence for career opportunities + +## 🚀 Why Choose Resume Biography Block? + +**Professional Standards**: Meets modern professional profile expectations with comprehensive information display + +**Visual Impact**: High-quality imagery and clean layout create strong first impressions + +**Social Connectivity**: Integrated social links help build professional networks + +**Accessibility First**: Inclusive features like pronunciation guides and pronoun support + +## 📊 Personal Branding Benefits + +- **Immediate Recognition**: Professional photo creates memorable personal brand +- **Credibility Signals**: Organization affiliations and social links build trust +- **Accessibility**: Pronunciation guides ensure your name is remembered correctly +- **Professional Network**: Social links facilitate professional connections + +## 💡 Customization Options + +- **Avatar Sizing**: From subtle small avatars to prominent xxl displays +- **Shape Variety**: Match your brand aesthetic with circle, square, or rounded styles +- **Banner Integration**: Add context with professional background images +- **Content Control**: Use custom biography text or pull from author page content + +## 🎨 Design Excellence + +- **High-Resolution Ready**: 2x retina support ensures crisp images on all screens +- **Typography Hierarchy**: Clear information structure from name to details +- **Generous Whitespace**: Clean layout that doesn't overwhelm visitors +- **Dark Mode Support**: Beautiful presentation in both light and dark themes + +## 💼 Professional Impact + +Perfect for building authority, establishing credibility, and creating memorable personal brands. Whether you're building a personal website, company profile, or professional portfolio, the Resume Biography block ensures you make the right first impression. + +Your professional story deserves professional presentation - create a biography section that opens doors and builds connections. + diff --git a/modules/blox-tailwind/blox/resume-biography/manifest.json b/modules/blox-tailwind/blox/resume-biography/manifest.json new file mode 100644 index 00000000..4162393c --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "resume-biography", + "name": "Resume Biography", + "version": "1.0.0", + "license": "MIT", + "category": "resume", + "tags": ["resume", "biography", "profile", "avatar", "social", "about", "personal", "cv"], + "description": "Professional biography section with customizable avatar, social links, and personal information", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "resume", "biography", "profile", "avatar", "social", "cv"] +} + diff --git a/modules/blox-tailwind/blox/resume-biography/preview.svg b/modules/blox-tailwind/blox/resume-biography/preview.svg new file mode 100644 index 00000000..febc8aae --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography/preview.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/resume-biography/schema.json b/modules/blox-tailwind/blox/resume-biography/schema.json new file mode 100644 index 00000000..7cae434d --- /dev/null +++ b/modules/blox-tailwind/blox/resume-biography/schema.json @@ -0,0 +1,100 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/resume-biography.json", + "title": "Resume Biography Block Schema", + "description": "Schema for the Resume Biography block - displays author biography with avatar, social links, and bio text", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "resume-biography" + }, + "content": { + "type": "object", + "description": "Content configuration for the resume biography block", + "properties": { + "username": { + "type": "string", + "description": "Author username (references authors/{username}/ page)", + "default": "admin" + }, + "text": { + "type": "string", + "description": "Biography text override (supports Markdown). If not provided, uses author page content." + }, + "button": { + "type": "object", + "description": "Optional call-to-action button", + "properties": { + "url": { + "type": "string", + "description": "Button URL" + }, + "text": { + "type": "string", + "description": "Button text" + } + }, + "required": ["url", "text"] + } + } + }, + "design": { + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json#/properties/design" + }, + { + "type": "object", + "properties": { + "avatar": { + "type": "object", + "description": "Avatar styling options", + "properties": { + "size": { + "type": "string", + "enum": ["small", "medium", "large", "xl", "xxl"], + "description": "Avatar size", + "default": "medium" + }, + "shape": { + "type": "string", + "enum": ["circle", "square", "rounded"], + "description": "Avatar shape", + "default": "circle" + } + } + }, + "banner": { + "type": "object", + "description": "Optional banner image", + "properties": { + "filename": { + "type": "string", + "description": "Banner image filename (in assets/media/)" + } + } + }, + "biography": { + "type": "object", + "description": "Biography text styling", + "properties": { + "style": { + "type": "string", + "description": "Custom CSS styles for biography text" + } + } + } + } + } + ] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/resume-experience/README.md b/modules/blox-tailwind/blox/resume-experience/README.md new file mode 100644 index 00000000..8ccb90df --- /dev/null +++ b/modules/blox-tailwind/blox/resume-experience/README.md @@ -0,0 +1,65 @@ +# Resume Experience Block + +**Tell your professional journey with timeline elegance** + +Present your career progression and educational background with the Resume Experience block - a sophisticated timeline component that showcases your professional journey in a visually compelling, chronologically organized format. + +## ✨ Key Features + +- **Dual Timeline**: Separate sections for work experience and education +- **Visual Timeline**: Beautiful vertical timeline with connection lines and icons +- **Date Flexibility**: Customizable date formatting with "Present" support for current roles +- **Rich Content**: Markdown support for detailed position descriptions +- **Download Links**: Optional buttons for certificates, portfolios, or additional resources +- **Responsive Design**: Timeline adapts perfectly from desktop to mobile +- **Order Control**: Option to display education before experience + +## 🎯 Perfect For + +- **Job Seekers**: Comprehensive career history for potential employers +- **Career Professionals**: Showcase progression and diverse experience +- **Academic Professionals**: Combined academic and professional timeline +- **Consultants**: Demonstrate expertise across various roles and industries +- **Freelancers**: Highlight diverse project experience and education +- **Recent Graduates**: Emphasize education with growing professional experience + +## 🚀 Why Choose Resume Experience Block? + +**Visual Storytelling**: Timeline format makes career progression easy to follow and understand + +**Professional Standard**: Meets modern resume and CV expectations with comprehensive detail + +**Flexible Organization**: Control whether education or experience appears first based on your background + +**Rich Detail Support**: Markdown formatting allows for detailed role descriptions and achievements + +## 📊 Career Presentation Benefits + +- **Clear Progression**: Visual timeline shows career growth and development +- **Comprehensive View**: Both work and education in one cohesive presentation +- **Easy Scanning**: Timeline format allows quick review of career highlights +- **Professional Polish**: Clean, modern design that makes great first impressions + +## 💡 Timeline Psychology + +- **Sequential Understanding**: Chronological order helps viewers understand your journey +- **Achievement Focus**: Timeline format naturally highlights career milestones +- **Story Narrative**: Creates compelling career story that engages viewers +- **Future Projection**: Shows trajectory that helps employers envision your potential + +## 🎨 Visual Excellence + +- **Beautiful Icons**: Work and education icons that immediately communicate section type +- **Color Coordination**: Primary brand colors create cohesive, professional appearance +- **Typography Hierarchy**: Clear information structure from position titles to descriptions +- **Responsive Timeline**: Maintains visual appeal across all screen sizes + +## 💼 Strategic Advantages + +- **Comprehensive Coverage**: One block covers your entire professional and educational background +- **Flexible Emphasis**: Choose whether to lead with education or experience based on your strengths +- **Detail Control**: Include as much or as little detail as appropriate for your audience +- **Modern Format**: Timeline presentation feels current and engaging + +Perfect for professionals at any career stage who want to present their experience and education in a format that's both comprehensive and visually engaging. Your career journey deserves professional presentation that opens doors to new opportunities. + diff --git a/modules/blox-tailwind/blox/resume-experience/manifest.json b/modules/blox-tailwind/blox/resume-experience/manifest.json new file mode 100644 index 00000000..5d6981ea --- /dev/null +++ b/modules/blox-tailwind/blox/resume-experience/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "resume-experience", + "name": "Resume Experience", + "version": "1.0.0", + "license": "MIT", + "category": "resume", + "tags": ["resume", "experience", "timeline", "work", "education", "career", "professional", "cv"], + "description": "Professional timeline displaying work experience and education history in chronological order", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "resume", "experience", "timeline", "work", "education", "career"] +} + diff --git a/modules/blox-tailwind/blox/resume-experience/preview.svg b/modules/blox-tailwind/blox/resume-experience/preview.svg new file mode 100644 index 00000000..c1c183c4 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-experience/preview.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/resume-experience/schema.json b/modules/blox-tailwind/blox/resume-experience/schema.json new file mode 100644 index 00000000..d4c13913 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-experience/schema.json @@ -0,0 +1,57 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/resume-experience.json", + "title": "Resume Experience Block Schema", + "description": "Schema for the Resume Experience block - displays work experience and education from author profile", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "resume-experience" + }, + "content": { + "type": "object", + "description": "Content configuration for the resume experience block", + "properties": { + "username": { + "type": "string", + "description": "Author username (references authors/{username}/ page)", + "default": "admin" + }, + "text": { + "type": "string", + "description": "Optional section description (supports Markdown)" + } + } + }, + "design": { + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json#/properties/design" + }, + { + "type": "object", + "properties": { + "date_format": { + "type": "string", + "description": "Date format for experience dates", + "default": "January 2006" + }, + "is_education_first": { + "type": "boolean", + "description": "Display education before work experience", + "default": false + } + } + } + ] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/resume-languages/README.md b/modules/blox-tailwind/blox/resume-languages/README.md new file mode 100644 index 00000000..6cfb37b8 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-languages/README.md @@ -0,0 +1,61 @@ +# Resume Languages Block + +**Showcase your multilingual capabilities with visual elegance** + +Highlight your language skills with the Resume Languages block - a visually striking component that uses beautiful circular progress indicators to display language proficiency levels in an immediately understandable, professional format. + +## ✨ Key Features + +- **Circular Progress Bars**: Stunning circular indicators that show proficiency at a glance +- **Percentage Display**: Clear numerical representation of language fluency levels +- **Responsive Layout**: Adapts from vertical (mobile) to horizontal (desktop) arrangement +- **Brand Colors**: Progress bars use your primary brand colors for visual consistency +- **Clean Typography**: Professional language name display with generous spacing +- **Flexible Grid**: Accommodates any number of languages with graceful layout adaptation + +## 🎯 Perfect For + +- **International Professionals**: Showcase multilingual capabilities for global opportunities +- **Translators & Interpreters**: Professional language service providers +- **Academic Researchers**: Demonstrate language skills for international collaboration +- **Travel & Tourism**: Professionals in hospitality and travel industries +- **Global Consultants**: International business professionals and consultants +- **Job Seekers**: Stand out in competitive markets with language advantages + +## 🚀 Why Choose Resume Languages Block? + +**Instant Understanding**: Circular progress bars communicate proficiency levels immediately + +**Professional Credibility**: Visual representation demonstrates serious commitment to language learning + +**Global Appeal**: Multilingual capabilities signal international readiness and cultural awareness + +**Modern Presentation**: Contemporary design that feels current and engaging + +## 📊 Visual Communication Benefits + +- **Quick Assessment**: Employers can instantly gauge your language capabilities +- **Professional Standards**: Percentage-based system aligns with common proficiency frameworks +- **Visual Impact**: Circular progress bars are more engaging than simple text lists +- **Space Efficient**: Compact design accommodates multiple languages without clutter + +## 💡 Proficiency Psychology + +- **Confidence Signaling**: Visual progress indicators demonstrate self-awareness and honesty +- **Competitive Advantage**: Language skills differentiate you in global job markets +- **Cultural Intelligence**: Multilingual display signals adaptability and cultural sensitivity +- **Learning Mindset**: Shows commitment to continuous learning and development + +## 🎨 Design Excellence + +- **Mathematical Precision**: Accurate circular progress calculations with smooth animations +- **Brand Integration**: Primary colors create cohesive visual identity +- **Responsive Behavior**: Transitions elegantly from vertical to horizontal layouts +- **Clean Aesthetics**: Generous whitespace prevents overwhelming appearance + +## 🌍 Global Market Advantages + +Perfect for professionals in increasingly connected global markets where language skills provide significant competitive advantages. Whether you're seeking international opportunities, working with diverse teams, or serving multilingual customers, the Resume Languages block presents your linguistic capabilities with the professionalism they deserve. + +Transform your language skills into visual assets that open doors to global opportunities and demonstrate your readiness for international collaboration. + diff --git a/modules/blox-tailwind/blox/resume-languages/manifest.json b/modules/blox-tailwind/blox/resume-languages/manifest.json new file mode 100644 index 00000000..d12407a6 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-languages/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "resume-languages", + "name": "Resume Languages", + "version": "1.0.0", + "license": "MIT", + "category": "resume", + "tags": ["resume", "languages", "multilingual", "skills", "fluency", "international", "cv", "circular-progress"], + "description": "Showcase language proficiency with beautiful circular progress indicators and percentage displays", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "resume", "languages", "multilingual", "fluency", "skills", "cv"] +} + diff --git a/modules/blox-tailwind/blox/resume-languages/preview.svg b/modules/blox-tailwind/blox/resume-languages/preview.svg new file mode 100644 index 00000000..85128e1f --- /dev/null +++ b/modules/blox-tailwind/blox/resume-languages/preview.svg @@ -0,0 +1,41 @@ + + + + + + + + + 100% + English + + + + + 85% + Spanish + + + + + 70% + French + + + + + 60% + German + + + + + 40% + Japanese + + diff --git a/modules/blox-tailwind/blox/resume-languages/schema.json b/modules/blox-tailwind/blox/resume-languages/schema.json new file mode 100644 index 00000000..abf4abe5 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-languages/schema.json @@ -0,0 +1,39 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/resume-languages.json", + "title": "Resume Languages Block Schema", + "description": "Schema for the Resume Languages block - displays language proficiency with circular progress indicators", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "resume-languages" + }, + "content": { + "type": "object", + "description": "Content configuration for the resume languages block", + "properties": { + "username": { + "type": "string", + "description": "Author username (references authors/{username}/ page)", + "default": "admin" + }, + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Section description (supports Markdown)" + } + } + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/resume-skills/README.md b/modules/blox-tailwind/blox/resume-skills/README.md new file mode 100644 index 00000000..993d953f --- /dev/null +++ b/modules/blox-tailwind/blox/resume-skills/README.md @@ -0,0 +1,67 @@ +# Resume Skills Block + +**Demonstrate expertise with organized skill categories and visual progress** + +Present your technical and professional competencies with the Resume Skills block - a comprehensive component that organizes your skills into clear categories with optional visual progress indicators that immediately communicate your expertise levels. + +## ✨ Key Features + +- **Skill Categories**: Organize skills into logical groups (Technical, Soft Skills, Tools, etc.) +- **Progress Visualization**: Optional progress bars show proficiency levels at a glance +- **Icon Integration**: Beautiful icons for each skill that enhance visual recognition +- **Flexible Layout**: Side-by-side categories on larger screens, stacked on mobile +- **Custom Colors**: Configurable progress bar colors to match your brand +- **Toggle Control**: Option to show or hide percentage indicators +- **Markdown Support**: Rich text formatting for skill names and descriptions + +## 🎯 Perfect For + +- **Software Developers**: Showcase programming languages, frameworks, and tools +- **Designers**: Display creative software proficiency and design skills +- **Data Professionals**: Highlight analytics tools, programming languages, and methodologies +- **Marketing Professionals**: Present digital marketing tools and strategic capabilities +- **Project Managers**: Demonstrate methodologies, tools, and soft skills +- **Technical Consultants**: Comprehensive skill display across multiple domains + +## 🚀 Why Choose Resume Skills Block? + +**Clear Organization**: Skill categories help employers quickly find relevant expertise + +**Visual Proficiency**: Progress bars provide immediate understanding of skill levels + +**Comprehensive Coverage**: Support both technical and soft skills in one organized presentation + +**Professional Standards**: Clean, modern layout that meets current resume expectations + +## 📊 Skill Presentation Benefits + +- **Quick Scanning**: Organized categories allow rapid skill assessment +- **Honest Communication**: Progress bars encourage accurate self-assessment +- **Visual Engagement**: Icons and progress bars are more engaging than text lists +- **Comprehensive View**: Categories ensure no important skills are overlooked + +## 💡 Professional Psychology + +- **Expertise Signaling**: Visual progress bars demonstrate self-awareness and competence +- **Category Logic**: Organized presentation shows systematic thinking +- **Skill Balance**: Mix of technical and soft skills presents well-rounded professional +- **Growth Mindset**: Percentage-based system implies commitment to skill development + +## 🎨 Customization Excellence + +- **Brand Colors**: Progress bars and icons can match your personal or company branding +- **Icon Flexibility**: Support for various icon packs to match your aesthetic +- **Layout Control**: Choose between progress bars or simple lists based on your preference +- **Content Freedom**: Unlimited skill categories and items for comprehensive coverage + +## 💼 Strategic Applications + +- **Career Positioning**: Clearly communicate your unique skill combination +- **Job Matching**: Help employers quickly identify relevant expertise +- **Skill Gaps**: Identify areas for professional development +- **Team Fit**: Demonstrate how your skills complement team needs + +Perfect for technical professionals, creative experts, and anyone who wants to present their skills in an organized, visually appealing format that helps employers quickly understand their capabilities and expertise levels. + +Turn your skill set into a competitive advantage with professional presentation that clearly communicates your value proposition. + diff --git a/modules/blox-tailwind/blox/resume-skills/manifest.json b/modules/blox-tailwind/blox/resume-skills/manifest.json new file mode 100644 index 00000000..0e5b7243 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-skills/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "resume-skills", + "name": "Resume Skills", + "version": "1.0.0", + "license": "MIT", + "category": "resume", + "tags": ["resume", "skills", "technical", "progress-bars", "expertise", "professional", "competencies", "cv"], + "description": "Display technical and professional skills with optional progress bars and organized categories", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "resume", "skills", "technical", "progress", "expertise", "cv"] +} + diff --git a/modules/blox-tailwind/blox/resume-skills/preview.svg b/modules/blox-tailwind/blox/resume-skills/preview.svg new file mode 100644 index 00000000..05c70404 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-skills/preview.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 90% + 70% + 80% + 60% + + 85% + 75% + 88% + 95% + + diff --git a/modules/blox-tailwind/blox/resume-skills/schema.json b/modules/blox-tailwind/blox/resume-skills/schema.json new file mode 100644 index 00000000..d4a45d36 --- /dev/null +++ b/modules/blox-tailwind/blox/resume-skills/schema.json @@ -0,0 +1,56 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/resume-skills.json", + "title": "Resume Skills Block Schema", + "description": "Schema for the Resume Skills block - displays skills from author profile with optional progress bars", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "resume-skills" + }, + "content": { + "type": "object", + "description": "Content configuration for the resume skills block", + "properties": { + "username": { + "type": "string", + "description": "Author username (references authors/{username}/ page)", + "default": "admin" + }, + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Section description (supports Markdown)" + } + } + }, + "design": { + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json#/properties/design" + }, + { + "type": "object", + "properties": { + "show_skill_percentage": { + "type": "boolean", + "description": "Display skill percentage bars", + "default": true + } + } + } + ] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/shared/schemas/README.md b/modules/blox-tailwind/blox/shared/schemas/README.md new file mode 100644 index 00000000..e4ff756a --- /dev/null +++ b/modules/blox-tailwind/blox/shared/schemas/README.md @@ -0,0 +1,138 @@ +# Hugo Blox JSON Schemas + +This directory contains JSON schemas for all Hugo Blox blocks, providing IDE autocomplete, validation, and documentation. + +## Schema Organization + +``` +blox/ + shared/schemas/ + base-block.json # Common parameters for all blocks + sections.json # Schema for the sections array + landing-page.json # Complete landing page front matter schema + README.md # This file + hero/ + schema.json # Hero-specific parameters + features/ + schema.json # Features-specific parameters + ... # Each block has its own schema +``` + +## Usage in IDEs + +### VS Code + +Add to your workspace `.vscode/settings.json`: + +```json +{ + "yaml.schemas": { + "https://hugoblox.com/schemas/landing-page.json": ["content/_index.md", "content/**/index.md"], + "https://hugoblox.com/schemas/sections.json": ["sections"] + }, + "json.schemas": [ + { + "fileMatch": ["**/content/_index.md"], + "url": "https://hugoblox.com/schemas/landing-page.json" + } + ] +} +``` + +### Local Development + +Schemas are mounted to `/static/schemas/` and available at: + +- `https://your-site.com/schemas/landing-page.json` +- `https://your-site.com/schemas/sections.json` +- `https://your-site.com/schemas/blocks/hero.json` + +## Schema Features + +### Base Schema + +All blocks inherit from `base-block.json` which provides: + +- **Block identification**: `block` parameter (required) +- **Legacy support**: `blox` parameter (deprecated) +- **Section styling**: `id`, `demo` flags +- **Design options**: background, spacing, CSS customization +- **Layout options**: columns, view types, etc. + +### Block-Specific Schemas + +Each block extends the base schema with its specific parameters: + +```yaml +# Example: Hero block with full autocomplete support +sections: + - block: hero # ✅ Autocomplete available + content: + title: 'Welcome' # ✅ Validated parameter + text: 'Description' # ✅ Type-checked + primary_action: # ✅ Object structure enforced + url: '/contact' + text: 'Get Started' + icon: 'hero/arrow-right' + design: + background: # ✅ Inherited from base schema + color: 'navy' + text_color_light: true +``` + +### Validation Benefits + +- **Parameter validation**: Catch typos and invalid values +- **Required fields**: Ensure essential parameters are provided +- **Type safety**: String/number/boolean/array validation +- **Enum constraints**: Limited choice fields (e.g., avatar shapes) +- **Deprecation warnings**: Legacy parameter notifications + +## Schema Development + +### Adding New Blocks + +1. Create `blox/my-new-block/schema.json` +2. Extend `base-block.json` +3. Add to `sections.json` oneOf array +4. Document block-specific parameters + +### Schema Template + +```json +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/my-block.json", + "title": "My Block Schema", + "description": "Schema for my custom block", + "allOf": [ + {"$ref": "../shared/schemas/base-block.json"}, + { + "type": "object", + "properties": { + "block": {"const": "my-block"}, + "content": { + "type": "object", + "properties": { + "title": {"type": "string"} + } + } + } + } + ] +} +``` + +## Context-Aware Strategy + +Hugo Blox uses different terminology based on context: + +| Context | Term | Example | +| --------------------- | -------- | ---------------------- | +| **Developer Configs** | `block` | `block: hero` | +| **Source Structure** | `blox/` | `blox/hero/block.html` | +| **UI/Documentation** | "Blox" | "Hugo Blox blocks" | +| **URLs/SEO** | `blocks` | `/blocks/hero` | + +This provides optimal developer experience while maintaining brand identity. + diff --git a/modules/blox-tailwind/blox/shared/schemas/base-block.json b/modules/blox-tailwind/blox/shared/schemas/base-block.json new file mode 100644 index 00000000..72b30769 --- /dev/null +++ b/modules/blox-tailwind/blox/shared/schemas/base-block.json @@ -0,0 +1,184 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/base-block.json", + "title": "Hugo Blox Base Block Schema", + "description": "Common parameters available to all Hugo Blox blocks", + "type": "object", + "properties": { + "block": { + "type": "string", + "description": "Block type identifier (required)" + }, + "blox": { + "type": "string", + "description": "Legacy block type identifier (deprecated, use 'block' instead)", + "deprecated": true + }, + "id": { + "type": "string", + "description": "Optional unique identifier for this section" + }, + "demo": { + "type": "boolean", + "description": "Whether this section should only appear in demo mode", + "default": false + }, + "design": { + "type": "object", + "description": "Design and styling options", + "properties": { + "background": { + "type": "object", + "description": "Background styling options", + "properties": { + "color": { + "type": "string", + "description": "Background color (any valid CSS color)" + }, + "gradient_start": { + "type": "string", + "description": "Gradient start color" + }, + "gradient_end": { + "type": "string", + "description": "Gradient end color" + }, + "gradient_angle": { + "type": "number", + "description": "Gradient angle in degrees", + "minimum": 0, + "maximum": 360, + "default": 90 + }, + "text_color_light": { + "type": "boolean", + "description": "Whether to use light text color (for dark backgrounds)" + }, + "image": { + "type": "object", + "description": "Background image options", + "properties": { + "filename": { + "type": "string", + "description": "Image filename in assets/media/" + }, + "size": { + "type": "string", + "enum": ["cover", "contain", "actual"], + "description": "Background image size behavior", + "default": "cover" + }, + "position": { + "type": "string", + "enum": ["left", "center", "right"], + "description": "Background image position", + "default": "center" + }, + "parallax": { + "type": "boolean", + "description": "Enable parallax effect on desktop", + "default": true + }, + "filters": { + "type": "object", + "properties": { + "brightness": { + "type": "number", + "description": "Image brightness filter (0-1, where 1 is normal)", + "minimum": 0, + "maximum": 1 + } + } + } + } + }, + "video": { + "type": "object", + "description": "Background video options", + "properties": { + "filename": { + "type": "string", + "description": "Video filename in assets/media/" + }, + "flip": { + "type": "boolean", + "description": "Flip video horizontally", + "default": false + } + } + } + } + }, + "spacing": { + "type": "object", + "description": "Spacing options", + "properties": { + "padding": { + "type": "array", + "description": "Padding values [top, right, bottom, left]", + "items": { + "type": "string" + }, + "minItems": 4, + "maxItems": 4 + } + } + }, + "clip_path": { + "type": "string", + "description": "CSS clip-path value" + }, + "css_style": { + "type": "string", + "description": "Custom CSS styles to apply to the section" + }, + "css_class": { + "type": "string", + "description": "Custom CSS classes to apply to the section" + }, + "columns": { + "type": ["string", "number"], + "description": "Number of columns for layout", + "default": "1" + }, + "view": { + "type": "string", + "description": "Display view type (used by collection block)", + "enum": ["card", "compact", "showcase", "citation", "list", "masonry"] + }, + "loop": { + "type": "boolean", + "description": "Enable looping (for slider blocks)", + "default": true + }, + "interval": { + "type": ["string", "number"], + "description": "Interval in milliseconds (for slider blocks)", + "default": "3000" + }, + "no_padding": { + "type": "boolean", + "description": "Disable default padding (for hero block)", + "default": false + }, + "card": { + "type": "object", + "description": "Card styling options (for CTA card block)", + "properties": { + "css_class": { + "type": "string", + "description": "CSS classes for the card" + }, + "css_style": { + "type": "string", + "description": "CSS styles for the card" + } + } + } + } + } + }, + "required": ["block"], + "additionalProperties": true +} + diff --git a/modules/blox-tailwind/blox/shared/schemas/landing-page.json b/modules/blox-tailwind/blox/shared/schemas/landing-page.json new file mode 100644 index 00000000..c527590e --- /dev/null +++ b/modules/blox-tailwind/blox/shared/schemas/landing-page.json @@ -0,0 +1,103 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/landing-page.json", + "title": "Hugo Blox Landing Page Schema", + "description": "Schema for Hugo Blox landing page front matter", + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Page title" + }, + "summary": { + "type": "string", + "description": "Page summary/description" + }, + "date": { + "type": "string", + "format": "date-time", + "description": "Page publication date" + }, + "lastmod": { + "type": "string", + "format": "date-time", + "description": "Page last modified date" + }, + "draft": { + "type": "boolean", + "description": "Whether the page is a draft", + "default": false + }, + "featured": { + "type": "boolean", + "description": "Whether the page is featured", + "default": false + }, + "authors": { + "type": "array", + "description": "Page authors", + "items": { + "type": "string" + } + }, + "tags": { + "type": "array", + "description": "Page tags", + "items": { + "type": "string" + } + }, + "categories": { + "type": "array", + "description": "Page categories", + "items": { + "type": "string" + } + }, + "type": { + "const": "landing", + "description": "Page type (must be 'landing' for landing pages)" + }, + "sections": { + "$ref": "./sections.json", + "description": "Array of content blocks for the landing page" + }, + "design": { + "type": "object", + "description": "Global page design options", + "properties": { + "spacing": { + "type": "string", + "description": "Default section spacing" + } + } + }, + "header": { + "type": "object", + "description": "Page-specific header configuration", + "properties": { + "navbar": { + "type": "object", + "properties": { + "enable": { + "type": "boolean", + "description": "Enable/disable navbar for this page" + }, + "block": { + "type": "string", + "description": "Header block to use (e.g., 'navbar', 'navbar-simple')" + }, + "blox": { + "type": "string", + "description": "Legacy header block parameter (deprecated, use 'block')", + "deprecated": true + } + } + } + } + } + }, + "required": ["type", "sections"], + "additionalProperties": true +} + diff --git a/modules/blox-tailwind/blox/shared/schemas/sections.json b/modules/blox-tailwind/blox/shared/schemas/sections.json new file mode 100644 index 00000000..e267b10e --- /dev/null +++ b/modules/blox-tailwind/blox/shared/schemas/sections.json @@ -0,0 +1,27 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/sections.json", + "title": "Hugo Blox Sections Schema", + "description": "Schema for the sections array in Hugo Blox landing pages", + "type": "array", + "items": { + "oneOf": [ + {"$ref": "../hero/schema.json"}, + {"$ref": "../features/schema.json"}, + {"$ref": "../collection/schema.json"}, + {"$ref": "../markdown/schema.json"}, + {"$ref": "../stats/schema.json"}, + {"$ref": "../testimonials/schema.json"}, + {"$ref": "../cta-button-list/schema.json"}, + {"$ref": "../cta-card/schema.json"}, + {"$ref": "../cta-image-paragraph/schema.json"}, + {"$ref": "../resume-experience/schema.json"}, + {"$ref": "../resume-biography/schema.json"}, + {"$ref": "../resume-biography-3/schema.json"}, + {"$ref": "../resume-skills/schema.json"}, + {"$ref": "../resume-awards/schema.json"}, + {"$ref": "../resume-languages/schema.json"} + ] + } +} + diff --git a/modules/blox-tailwind/blox/stats/README.md b/modules/blox-tailwind/blox/stats/README.md new file mode 100644 index 00000000..7f4db247 --- /dev/null +++ b/modules/blox-tailwind/blox/stats/README.md @@ -0,0 +1,59 @@ +# Stats Block + +**Let your numbers tell your success story** + +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 + +- **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 + +## 🎯 Perfect For + +- **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 + +## 🚀 Why Choose Stats Block? + +**Instant Credibility**: Large, prominent numbers immediately establish authority and success + +**Social Proof**: Quantified achievements provide concrete evidence of your value + +**Visual Impact**: Bold typography and clean layout make statistics impossible to ignore + +**Trust Building**: Professional presentation of metrics builds confidence in your offering + +## 📊 Psychology of Numbers + +- **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 + +## 💡 Best Practices + +- 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 + +## 🎨 Visual Design + +- **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 + +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. + diff --git a/modules/blox-tailwind/blox/stats/manifest.json b/modules/blox-tailwind/blox/stats/manifest.json new file mode 100644 index 00000000..9c72747f --- /dev/null +++ b/modules/blox-tailwind/blox/stats/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "stats", + "name": "Stats", + "version": "1.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", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "statistics", "metrics", "achievements", "data", "numbers"] +} + diff --git a/modules/blox-tailwind/blox/stats/preview.svg b/modules/blox-tailwind/blox/stats/preview.svg new file mode 100644 index 00000000..f00eae55 --- /dev/null +++ b/modules/blox-tailwind/blox/stats/preview.svg @@ -0,0 +1,41 @@ + + + + + + + 1.2M + + + + + + + + 98% + + + + + + + + 500+ + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/stats/schema.json b/modules/blox-tailwind/blox/stats/schema.json new file mode 100644 index 00000000..7489e579 --- /dev/null +++ b/modules/blox-tailwind/blox/stats/schema.json @@ -0,0 +1,53 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/stats.json", + "title": "Stats Block Schema", + "description": "Schema for the Stats block - displays statistics in a grid layout", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "stats" + }, + "content": { + "type": "object", + "description": "Content configuration for the stats block", + "properties": { + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Section description (supports Markdown)" + }, + "items": { + "type": "array", + "description": "Array of statistics to display", + "items": { + "type": "object", + "properties": { + "statistic": { + "type": "string", + "description": "The statistic value/number (supports Markdown)" + }, + "description": { + "type": "string", + "description": "Description of the statistic (supports Markdown)" + } + }, + "required": ["statistic", "description"] + } + } + }, + "required": ["items"] + } + } + } + ] +} + diff --git a/modules/blox-tailwind/blox/testimonials/README.md b/modules/blox-tailwind/blox/testimonials/README.md new file mode 100644 index 00000000..7fefa7d6 --- /dev/null +++ b/modules/blox-tailwind/blox/testimonials/README.md @@ -0,0 +1,60 @@ +# Testimonials Block + +**Transform customer voices into powerful social proof** + +Build unshakeable trust and credibility with the Testimonials block - a sophisticated component that presents authentic customer feedback in a professional, visually appealing format that converts skeptical visitors into confident buyers. + +## ✨ Key Features + +- **Professional Quote Styling**: Beautiful quotation marks and elegant typography +- **Customer Photos**: High-quality avatar display with optimized 2x retina images +- **Complete Attribution**: Customer names and roles for authentic credibility +- **Responsive Layout**: Perfect presentation across all device sizes +- **Multiple Testimonials**: Stack multiple testimonials in a clean, organized format +- **Markdown Support**: Rich text formatting for testimonial content +- **Lazy Loading**: Optimized image loading for better performance + +## 🎯 Perfect For + +- **SaaS Platforms**: Showcase customer success stories and satisfaction +- **Service Providers**: Display client feedback and project results +- **E-commerce**: Build buyer confidence with authentic product reviews +- **Consultants**: Demonstrate expertise through client testimonials +- **Agencies**: Highlight successful partnerships and outcomes +- **Course Creators**: Share student success stories and transformations + +## 🚀 Why Choose Testimonials Block? + +**Social Proof Power**: Authentic customer voices carry more weight than any marketing message + +**Visual Credibility**: Photos and names make testimonials feel genuine and trustworthy + +**Professional Presentation**: Elegant design elevates customer feedback to marketing gold + +**Conversion Catalyst**: Well-placed testimonials can dramatically increase conversion rates + +## 📊 Trust Building Elements + +- **Visual Quote Marks**: Classic quotation styling that signals authentic feedback +- **Human Connection**: Real photos create emotional connection with potential customers +- **Authority Indicators**: Customer roles and companies add context and credibility +- **Clean Layout**: Professional presentation that feels premium and trustworthy + +## 💡 Psychological Impact + +- **Bandwagon Effect**: Seeing others' success motivates similar action +- **Risk Reduction**: Real customer experiences reduce perceived purchase risk +- **Emotional Resonance**: Stories connect with visitors on an emotional level +- **Credibility Transfer**: Customer authority transfers to your brand + +## 🎨 Best Practices + +- Use high-quality, professional customer photos +- Include specific details and outcomes in testimonials +- Add customer roles and companies for context +- Keep quotes authentic and conversational +- Mix different types of customers and use cases +- Update testimonials regularly to maintain freshness + +Transform your happiest customers into your best marketing team with testimonials that build trust, reduce friction, and drive conversions. + diff --git a/modules/blox-tailwind/blox/testimonials/manifest.json b/modules/blox-tailwind/blox/testimonials/manifest.json new file mode 100644 index 00000000..4565f56d --- /dev/null +++ b/modules/blox-tailwind/blox/testimonials/manifest.json @@ -0,0 +1,14 @@ +{ + "id": "testimonials", + "name": "Testimonials", + "version": "1.0.0", + "license": "MIT", + "category": "marketing", + "tags": ["testimonials", "reviews", "social-proof", "quotes", "customers", "trust", "credibility"], + "description": "Build trust with authentic customer testimonials featuring quotes, names, and profile photos", + "author": "Hugo Blox", + "homepage": "https://hugoblox.com/blocks/", + "repository": "https://github.com/HugoBlox/hugo-blox-builder", + "keywords": ["hugo", "testimonials", "social-proof", "reviews", "customers", "trust"] +} + diff --git a/modules/blox-tailwind/blox/testimonials/preview.svg b/modules/blox-tailwind/blox/testimonials/preview.svg new file mode 100644 index 00000000..d37e263e --- /dev/null +++ b/modules/blox-tailwind/blox/testimonials/preview.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/blox-tailwind/blox/testimonials/schema.json b/modules/blox-tailwind/blox/testimonials/schema.json new file mode 100644 index 00000000..c5f582c2 --- /dev/null +++ b/modules/blox-tailwind/blox/testimonials/schema.json @@ -0,0 +1,61 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://hugoblox.com/schemas/blocks/testimonials.json", + "title": "Testimonials Block Schema", + "description": "Schema for the Testimonials block - displays customer testimonials with quotes and author info", + "allOf": [ + { + "$ref": "../shared/schemas/base-block.json" + }, + { + "type": "object", + "properties": { + "block": { + "const": "testimonials" + }, + "content": { + "type": "object", + "description": "Content configuration for the testimonials block", + "properties": { + "title": { + "type": "string", + "description": "Section title (supports Markdown)" + }, + "text": { + "type": "string", + "description": "Section description (supports Markdown)" + }, + "items": { + "type": "array", + "description": "Array of testimonials", + "items": { + "type": "object", + "properties": { + "text": { + "type": "string", + "description": "Testimonial quote text (supports Markdown)" + }, + "name": { + "type": "string", + "description": "Author name" + }, + "role": { + "type": "string", + "description": "Author role/title" + }, + "image": { + "type": "string", + "description": "Author avatar image filename (in assets/media/)" + } + }, + "required": ["text", "name"] + } + } + }, + "required": ["items"] + } + } + } + ] +} +