Fasterrr Theme Module Showcase

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Module Showcase
  screenshotPath: ../images/template-previews/module-showcase.png
-->
{% extends "./layouts/base.html" %}

{% block body %}
<div class="body-container body-container--module-showcase">
  {% dnd_area "main_content" label="Main Content" %}

    {# ============================================ #}
    {# INTRO SECTION                               #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "intro"
            path="@hubspot/rich_text",
            label="Intro",
            html="<div style=\"text-align: center; padding: 64px 0 32px 0;\">
<h1 style=\"font-size: 48px; font-weight: 800; margin: 0 0 16px 0;\">Fasterrr Theme Module Showcase</h1>
<p style=\"font-size: 20px; color: var(--color-text-secondary, #6b7280); max-width: 800px; margin: 0 auto;\">A comprehensive demonstration of all available modules with their most complex configurations. Each section includes the module name, description, and a live example.</p>
<p style=\"font-size: 14px; color: var(--color-text-muted, #9ca3af); margin-top: 24px;\">Cards &amp; Data Visualization Modules</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CARDS GRID MODULE                           #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_cards_grid_module"
            path="@hubspot/rich_text",
            label="Desc Cards Grid Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Cards Grid Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Responsive grid layout with HubDB integration, masonry layout, hover effects, and multiple card variants. Supports images, badges, CTAs, and eyebrow text.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "cards_grid_demo"
            path="../modules/cards-grid.module",
            label="Cards Grid Demo",
            data_source="manual",
            advanced={
              "enable_animation": true,
              "lazy_load": true,
              "mobile_optimization": "adaptive",
              "section_subtitle": "Everything you need to scale your business",
              "section_title": "Why Teams Choose Us"
            },
            cards=[
              {
                "badge": "New",
                "content": "<p>Leverage machine learning to automate repetitive tasks and boost productivity by 10x.</p>",
                "cta_text": "Learn More",
                "cta_url": { "href": "/features/automation", "type": "CONTENT" },
                "eyebrow": "Technology",
                "image": { "height": 600, "loading": "lazy", "src": "{{ get_asset_url('../../images/sample/card-tech-circuits.jpg') }}", "width": 800 },
                "image_alt": "AI-powered automation",
                "title": "AI-Powered Automation"
              },
              {
                "content": "<p>Get instant insights with our powerful dashboard. Track KPIs, visualize trends, and make data-driven decisions.</p>",
                "cta_as_button": true,
                "cta_text": "Explore Dashboard",
                "cta_url": { "href": "/features/analytics", "type": "CONTENT" },
                "eyebrow": "Analytics",
                "image": { "height": 600, "loading": "lazy", "src": "{{ get_asset_url('../../images/sample/card-data-code.jpg') }}", "width": 800 },
                "image_alt": "Real-time analytics",
                "title": "Real-Time Analytics"
              },
              {
                "badge": "Featured",
                "content": "<p>SOC2 Type II certified. Your data is protected with end-to-end encryption and role-based access controls.</p>",
                "cta_text": "View Security",
                "cta_url": { "href": "/security", "type": "CONTENT" },
                "eyebrow": "Security",
                "image": { "height": 600, "loading": "lazy", "src": "{{ get_asset_url('../../images/sample/card-security-lock.jpg') }}", "width": 800 },
                "image_alt": "Enterprise security",
                "title": "Enterprise-Grade Security"
              },
              {
                "content": "<p>Work together in real-time. Share documents, assign tasks, and keep everyone aligned.</p>",
                "cta_text": "Start Collaborating",
                "cta_url": { "href": "/features/collaboration", "type": "CONTENT" },
                "eyebrow": "Collaboration",
                "image": { "height": 600, "loading": "lazy", "src": "{{ get_asset_url('../../images/sample/card-office-workspace.jpg') }}", "width": 800 },
                "image_alt": "Collaboration tools",
                "title": "Seamless Team Collaboration"
              },
              {
                "content": "<p>Connect with the tools you already use. Slack, Salesforce, HubSpot, Zapier, and hundreds more.</p>",
                "cta_text": "Browse Integrations",
                "cta_url": { "href": "/integrations", "type": "CONTENT" },
                "eyebrow": "Integrations",
                "image": { "height": 600, "loading": "lazy", "src": "{{ get_asset_url('../../images/sample/card-modern-office.jpg') }}", "width": 800 },
                "image_alt": "Integration hub",
                "title": "500+ Native Integrations"
              },
              {
                "content": "<p>Our dedicated support team is here to help. Average response time under 2 hours.</p>",
                "cta_as_button": true,
                "cta_text": "Contact Support",
                "cta_url": { "href": "/support", "type": "CONTENT" },
                "eyebrow": "Support",
                "image": { "height": 600, "loading": "lazy", "src": "{{ get_asset_url('../../images/sample/card-coworking-space.jpg') }}", "width": 800 },
                "image_alt": "Support team",
                "title": "24/7 World-Class Support"
              }
            ],
            style={
              "align_items": "stretch",
              "card_bg": { "color": "var(--color-bg)", "opacity": 100 },
              "card_border_width": "0",
              "card_padding": "24px",
              "card_radius": "16px",
              "card_shadow": "md",
              "card_text_color": { "color": "var(--color-text)", "opacity": 100 },
              "card_variant": "default",
              "cols_desktop": "3",
              "cols_mobile": "1",
              "cols_tablet": "2",
              "gap": "24px",
              "hover_raise": true,
              "hover_shadow": true,
              "image_aspect": "16/9",
              "image_fit": "cover",
              "image_max_height": "300px",
              "image_min_height": "200px"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CARD BASE MODULE - Description              #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_card_base_module"
            path="@hubspot/rich_text",
            label="Desc Card Base Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Card Base Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Flexible single card component with 6 layout variants: default, no-image, logo-over-image, full-background, image-right, and minimal. Supports structured data for SEO.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# Card Base - 3 columns side by side #}
    {% dnd_section %}
      {% dnd_column offset=0, width=4 %}
        {% dnd_row %}
          {% dnd_module "card_base_1"
            path="../modules/card-base.module",
            label="Card Base 1",
            advanced={ "schema_type": "Article", "structured_data": true },
            content={
              "badge": "Speaker",
              "content": "<p>Visionary leader with 20+ years experience in enterprise software. Previously VP at Microsoft and Google.</p>",
              "cta_text": "Connect on LinkedIn",
              "cta_url": { "href": "https://linkedin.com", "type": "EXTERNAL" },
              "eyebrow": "Leadership",
              "image": { "height": 400, "loading": "lazy", "size_type": "auto", "src": "{{ get_asset_url('../../images/sample/team-executive-man.jpg') }}", "width": 400 },
              "image_alt": "Sarah Chen, CEO",
              "meta": "CEO & Co-Founder",
              "new_tab": true,
              "title": "Sarah Chen",
              "variant": "default"
            },
            style={
              "bg_color": { "color": "var(--color-bg)", "opacity": 100 },
              "hover_raise": true,
              "hover_shadow": true,
              "image_aspect": "1/1",
              "image_fit": "scale-down",
              "padding": "24px",
              "radius": "20px",
              "shadow": "lg"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=4, width=4 %}
        {% dnd_row %}
          {% dnd_module "card_base_2"
            path="../modules/card-base.module",
            label="Card Base 2",
            content={
              "content": "<p>Tech innovator and problem solver. Built systems handling 10M+ requests per second at scale.</p>",
              "cta_text": "View Profile",
              "cta_url": { "href": "/team/marcus", "type": "CONTENT" },
              "eyebrow": "Technology",
              "image": { "height": 400, "loading": "lazy", "size_type": "auto", "src": "{{ get_asset_url('../../images/sample/team-professional-woman.jpg') }}", "width": 400 },
              "image_alt": "Marcus Johnson, CTO",
              "meta": "CTO",
              "title": "Marcus Johnson",
              "variant": "default"
            },
            style={
              "bg_color": { "color": "var(--color-bg)", "opacity": 100 },
              "hover_raise": true,
              "image_aspect": "1/1",
              "image_fit": "cover",
              "padding": "24px",
              "radius": "20px",
              "shadow": "lg"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=8, width=4 %}
        {% dnd_row %}
          {% dnd_module "card_base_3"
            path="../modules/card-base.module",
            label="Card Base 3",
            content={
              "badge": "New",
              "content": "<p>Operations expert who scaled teams from 10 to 500+. MBA from Stanford, 15 years in SaaS.</p>",
              "cta_text": "View Profile",
              "cta_url": { "href": "/team/alex", "type": "CONTENT" },
              "eyebrow": "Operations",
              "image": { "height": 400, "loading": "lazy", "src": "{{ get_asset_url('../../images/sample/team-casual-man.jpg') }}", "width": 400 },
              "image_alt": "Alex Rivera, COO",
              "meta": "COO",
              "title": "Alex Rivera",
              "variant": "default"
            },
            style={
              "bg_color": { "color": "var(--color-bg)", "opacity": 100 },
              "hover_raise": true,
              "image_aspect": "1/1",
              "image_fit": "cover",
              "padding": "24px",
              "radius": "20px",
              "shadow": "lg"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CARD PRICING MODULE - Description           #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_card_pricing_module"
            path="@hubspot/rich_text",
            label="Desc Card Pricing Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Card Pricing Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Individual pricing card with feature lists, popular badges, trial days, and guarantee text. Perfect for single plan highlights or custom enterprise cards.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# Pricing Cards - 3 columns side by side #}
    {% dnd_section %}
      {% dnd_column offset=0, width=4 %}
        {% dnd_row %}
          {% dnd_module "pricing_starter"
            path="../modules/card-pricing.module",
            label="Pricing Starter",
            content={
              "best_for": "Individuals & freelancers",
              "cta_primary_text": "Start Free Trial",
              "cta_primary_url": { "href": "/signup/starter", "type": "CONTENT" },
              "description": "<p>Everything you need to get started. Perfect for trying out our platform.</p>",
              "features": [
                { "feature_label": "5 projects", "included": true },
                { "feature_label": "10GB storage", "included": true },
                { "feature_label": "Email support", "included": true },
                { "feature_label": "API access", "included": false },
                { "feature_label": "Custom domains", "included": false }
              ],
              "plan_name": "Starter",
              "price_value": "$19",
              "price_suffix": "/month",
              "trial_days": 7
            },
            style={
              "accent_color": { "color": "#6366f1", "opacity": 100 },
              "radius": "16px",
              "shadow": "md"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=4, width=4 %}
        {% dnd_row %}
          {% dnd_module "pricing_pro"
            path="../modules/card-pricing.module",
            label="Pricing Pro",
            content={
              "best_for": "Growing teams",
              "cta_primary_text": "Start Free Trial",
              "cta_primary_url": { "href": "/signup/pro", "type": "CONTENT" },
              "description": "<p>Advanced features for teams that need more power and flexibility.</p>",
              "disclaimer": "30-day money-back guarantee",
              "features": [
                { "feature_label": "Unlimited projects", "included": true },
                { "feature_label": "100GB storage", "included": true },
                { "feature_label": "Priority support", "included": true },
                { "feature_label": "API access", "included": true },
                { "feature_label": "Custom domains", "included": true },
                { "feature_label": "SSO/SAML", "included": false }
              ],
              "plan_name": "Professional",
              "popular": true,
              "popular_text": "Most Popular",
              "price_value": "$49",
              "price_suffix": "/user/month",
              "trial_days": 14
            },
            style={
              "accent_color": { "color": "var(--color-primary)", "opacity": 100 },
              "radius": "16px",
              "shadow": "lg"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=8, width=4 %}
        {% dnd_row %}
          {% dnd_module "pricing_enterprise"
            path="../modules/card-pricing.module",
            label="Pricing Enterprise",
            content={
              "best_for": "Large organizations",
              "cta_primary_text": "Contact Sales",
              "cta_primary_url": { "href": "/contact-sales", "type": "CONTENT" },
              "description": "<p>Tailored solutions for enterprise needs with dedicated support.</p>",
              "disclaimer": "Custom onboarding included",
              "features": [
                { "feature_label": "Everything in Pro", "included": true },
                { "feature_label": "Unlimited storage", "included": true },
                { "feature_label": "Dedicated CSM", "included": true },
                { "feature_label": "SSO/SAML", "included": true },
                { "feature_label": "99.99% SLA", "included": true },
                { "feature_label": "Custom contracts", "included": true }
              ],
              "plan_name": "Enterprise",
              "price_value": "Custom",
              "price_suffix": ""
            },
            style={
              "accent_color": { "color": "#8b5cf6", "opacity": 100 },
              "radius": "16px",
              "shadow": "md"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CARDS PRICING TABLE MODULE                  #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_cards_pricing_table_module"
            path="@hubspot/rich_text",
            label="Desc Cards Pricing Table Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Cards Pricing Table Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Complete pricing table with billing toggle (monthly/annual), trust badges, customer logos, FAQ links, and up to 4 plans. Features category grouping and tooltips.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "pricing_table_demo"
            path="../modules/cards-pricingtable.module",
            label="Pricing Table Demo",
            billing={
              "annual_discount": 20,
              "default_cycle": "annual",
              "discount_badge": "Save 20%",
              "show_toggle": true
            },
            cards=[
              {
                "best_for": "Individuals",
                "cta_primary_text": "Start Free Trial",
                "cta_primary_url": { "href": "/signup/starter", "type": "CONTENT" },
                "features": [
                  { "category": "Core Features", "feature_label": "Projects", "included": true, "value": "5" },
                  { "feature_label": "Storage", "included": true, "value": "10GB", "tooltip": "Upgrade anytime as your files grow" },
                  { "feature_label": "Team members", "included": true, "value": "1" },
                  { "category": "Support", "feature_label": "Email support", "included": true },
                  { "feature_label": "Priority support", "included": false },
                  { "category": "Advanced", "feature_label": "API access", "included": false },
                  { "feature_label": "Custom integrations", "included": false }
                ],
                "plan_name": "Starter",
                "price_annual": "$23",
                "price_monthly": "$29",
                "price_suffix": "/month",
                "trial_days": 7
              },
              {
                "best_for": "Small teams",
                "cta_primary_text": "Start Free Trial",
                "cta_primary_url": { "href": "/signup/pro", "type": "CONTENT" },
                "features": [
                  { "category": "Core Features", "feature_label": "Projects", "included": true, "value": "Unlimited" },
                  { "feature_label": "Storage", "included": true, "value": "100GB" },
                  { "feature_label": "Team members", "included": true, "value": "25" },
                  { "category": "Support", "feature_label": "Email support", "included": true },
                  { "feature_label": "Priority support", "included": true, "tooltip": "Guaranteed response within 2 hours" },
                  { "category": "Advanced", "feature_label": "API access", "included": true, "is_new": true },
                  { "feature_label": "Custom integrations", "included": false }
                ],
                "guarantee_text": "30-day money-back guarantee",
                "plan_name": "Professional",
                "popular": true,
                "popular_text": "Most Popular",
                "price_annual": "$63",
                "price_monthly": "$79",
                "price_suffix": "/user/month",
                "savings_text": "Save $192/year",
                "trial_days": 14,
                "users_count": "Used by 5,000+ teams"
              },
              {
                "best_for": "Large orgs",
                "cta_primary_text": "Contact Sales",
                "cta_primary_url": { "href": "/contact-sales", "type": "CONTENT" },
                "cta_secondary_text": "See all features",
                "cta_secondary_url": { "href": "/enterprise", "type": "CONTENT" },
                "features": [
                  { "category": "Core Features", "feature_label": "Projects", "included": true, "value": "Unlimited" },
                  { "feature_label": "Storage", "included": true, "value": "Unlimited" },
                  { "feature_label": "Team members", "included": true, "value": "Unlimited" },
                  { "category": "Support", "feature_label": "Dedicated CSM", "included": true, "tooltip": "A named expert who knows your account" },
                  { "feature_label": "99.99% SLA", "included": true, "tooltip": "Enterprise-grade uptime guarantee with credits" },
                  { "category": "Advanced", "feature_label": "API access", "included": true },
                  { "feature_label": "Custom integrations", "included": true, "value": "Unlimited" }
                ],
                "plan_name": "Enterprise",
                "price_annual": "Custom",
                "price_monthly": "Custom",
                "price_suffix": "Let's talk",
                "setup_fee": "Custom onboarding included"
              }
            ],
            style={
              "card_accent": { "color": "var(--color-primary)", "opacity": 100 },
              "card_padding": "24px",
              "card_radius": "16px",
              "card_shadow": "md",
              "cols_lg": "3",
              "gap": "24px",
              "price_size": "lg"
            },
            trust={
              "faq_link_text": "Have questions? Check our FAQ",
              "faq_link_url": { "href": "/faq", "type": "CONTENT" },
              "guarantee": "30-day money-back guarantee on all plans",
              "header_text": "Simple, transparent pricing",
              "ratings_text": "4.9/5 from 2,000+ reviews on G2",
              "show_logos": false,
              "subheader_text": "No hidden fees. No surprises. Cancel anytime.",
              "trust_badges": "256-bit SSL • SOC2 Type II • GDPR Compliant"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CHART MODULE - Description                  #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_chart_module"
            path="@hubspot/rich_text",
            label="Desc Chart Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Chart Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Interactive Chart.js visualizations with 6 chart types (line, bar, radar, pie, doughnut, polar). Supports sample datasets or HubDB integration for dynamic data.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# Chart Module - 2 columns side by side #}
    {% dnd_section %}
      {% dnd_column offset=0, width=6 %}
        {% dnd_row %}
          {% dnd_module "chart_radar"
            path="../modules/chart.module",
            label="Chart Radar",
            content={
              "chart_type": "radar",
              "data_source": "sample",
              "sample_dataset": "performance-metrics",
              "chart_title": "Performance Metrics Comparison"
            },
            style={
              "chart_height": 400,
              "show_legend": true,
              "legend_position": "bottom"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=6, width=6 %}
        {% dnd_row %}
          {% dnd_module "chart_line"
            path="../modules/chart.module",
            label="Chart Line",
            content={
              "chart_type": "line",
              "data_source": "sample",
              "sample_dataset": "revenue-growth",
              "chart_title": "Revenue Growth (24 Months)"
            },
            style={
              "chart_height": 400,
              "show_legend": true,
              "legend_position": "top"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# BATCH 2 INTRO - Hero & Interactive          #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "batch2_intro"
            path="@hubspot/rich_text",
            label="Batch2 Intro",
            html="<div style=\"text-align: center; padding: 64px 0 32px 0; border-top: 2px solid #e5e7eb; margin-top: 48px;\">
<p style=\"font-size: 14px; color: var(--color-text-muted, #9ca3af); margin: 0;\">Hero &amp; Interactive Modules</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# HERO MODULE                                 #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_hero_module"
            path="@hubspot/rich_text",
            label="Desc Hero Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Hero Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Full-width hero with separate mobile/desktop images, gradient overlays, dual CTAs, and eyebrow text. Optimized for Core Web Vitals with eager loading for above-fold content.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "hero_demo"
            path="../modules/hero.module",
            label="Hero Demo",
            advanced={
              "lazy_load_mobile": false
            },
            content={
              "cta_primary": {
                "style": "solid",
                "text": "Start Free Trial",
                "url": { "href": "/signup", "type": "CONTENT" }
              },
              "cta_secondary": {
                "text": "Watch Demo",
                "url": { "href": "/demo", "type": "CONTENT" }
              },
              "eyebrow": "Introducing Platform 2.0",
              "heading": "Transform Your Business with AI-Powered Automation",
              "subheading": "<p>Join <strong>10,000+ companies</strong> using our platform to streamline operations, boost productivity, and drive growth. Start your free trial today.</p>"
            },
            eyebrow_color={ "color": "#fbbf24", "opacity": 100 },
            images={
              "desktop_background": {
                "alt": "",
                "src": "{{ get_asset_url('../../images/sample/hero-main.jpg') }}"
              },
              "desktop_overlay": "gradient-left",
              "mobile_image": {
                "alt": "Transform your revenue operations",
                "height": 870,
                "loading": "eager",
                "src": "{{ get_asset_url('../../images/sample/hero-side.png') }}",
                "width": 926
              }
            },
            layout={
              "content_position": "left",
              "min_height_desktop": "600px",
              "min_height_mobile": "400px",
              "text_align_desktop": "left",
              "text_align_mobile": "center",
              "vertical_align": "center"
            },
            text_color_desktop={ "color": "var(--color-primary-contrast)", "opacity": 100 },
            text_color_mobile={ "color": "var(--color-text)", "opacity": 100 }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# TABS MODULE                                 #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_tabs_module"
            path="@hubspot/rich_text",
            label="Desc Tabs Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Tabs Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Tabbed content with 4 layouts (horizontal/vertical), icons, auto-rotation, deep linking, and multiple mobile behaviors. Features keyboard navigation and lazy loading for heavy content.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "tabs_demo"
            path="../modules/tabs.module",
            label="Tabs Demo",
            behavior_settings={
              "animation_duration": 400,
              "animation_type": "fade-slide",
              "auto_rotate": true,
              "enable_deep_linking": true,
              "pause_on_hover": true,
              "remember_last_tab": false,
              "rotation_interval": 6000
            },
            layout_settings={
              "content_min_height": 350,
              "desktop_layout": "vertical-left",
              "mobile_behavior": "accordion",
              "tab_alignment": "stretch"
            },
            style={
              "active_tab_background": { "color": "var(--color-primary)", "opacity": 100 },
              "active_tab_text_color": { "color": "var(--color-primary-contrast)", "opacity": 100 },
              "border_radius": 12,
              "content_background": { "color": "var(--color-bg)", "opacity": 100 },
              "content_padding": 40,
              "tab_background": { "color": "var(--color-light)", "opacity": 100 },
              "tab_style": "boxed",
              "tab_text_color": { "color": "var(--color-dark)", "opacity": 100 }
            },
            tabs=[
              {
                "content": "<h3>Workflow Automation</h3><p>Automate repetitive tasks and save hours every week. Our visual workflow builder makes it easy to create complex automations without code.</p><ul><li><strong>Visual Builder</strong> - Drag-and-drop workflow creation</li><li><strong>100+ Triggers</strong> - Start workflows from any event</li><li><strong>Conditional Logic</strong> - Branch based on conditions</li><li><strong>Scheduled Tasks</strong> - Run automations on a schedule</li></ul>",
                "icon_type": "gear",
                "is_open_by_default": true,
                "lazy_load_content": false,
                "tab_label": "Automation"
              },
              {
                "content": "<h3>Real-time Analytics</h3><p>Get instant insights into your performance with our powerful analytics dashboard. Track KPIs, visualize trends, and export reports.</p><ul><li><strong>Custom Dashboards</strong> - Build your perfect view</li><li><strong>Real-time Updates</strong> - Data refreshes every 30 seconds</li><li><strong>Export Options</strong> - PDF, CSV, and API access</li><li><strong>Team Sharing</strong> - Collaborate on insights</li></ul>",
                "icon_type": "chart",
                "is_open_by_default": false,
                "lazy_load_content": true,
                "tab_label": "Analytics"
              },
              {
                "content": "<h3>500+ Native Integrations</h3><p>Connect with the tools you already use. Our marketplace features pre-built integrations with all major platforms.</p><ul><li><strong>CRM</strong> - Salesforce, HubSpot, Pipedrive</li><li><strong>Communication</strong> - Slack, Teams, Email</li><li><strong>Storage</strong> - Google Drive, Dropbox, OneDrive</li><li><strong>Custom</strong> - REST API and webhooks</li></ul>",
                "icon_type": "check",
                "is_open_by_default": false,
                "lazy_load_content": true,
                "tab_label": "Integrations"
              },
              {
                "content": "<h3>Enterprise-Grade Security</h3><p>Your data is protected with industry-leading security measures. We're SOC2 Type II certified and GDPR compliant.</p><ul><li><strong>Encryption</strong> - 256-bit SSL/TLS everywhere</li><li><strong>SSO/SAML</strong> - Enterprise authentication</li><li><strong>Audit Logs</strong> - Complete activity tracking</li><li><strong>Data Residency</strong> - Choose your region</li></ul>",
                "icon_type": "lock",
                "is_open_by_default": false,
                "lazy_load_content": true,
                "tab_label": "Security"
              }
            ]
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# ACCORDION MODULE                            #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_accordion_module"
            path="@hubspot/rich_text",
            label="Desc Accordion Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Accordion Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Expandable FAQ with SEO-optimized JSON-LD schema markup. Uses native HTML details/summary for accessibility. Features plus/chevron icons and custom styling.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "accordion_demo"
            path="../modules/accordion.module",
            label="Accordion Demo",
            behavior={
              "allow_multiple": false,
              "enable_schema": true
            },
            content={
              "items": [
                {
                  "answer": "<p>Getting started is easy! Simply <a href=\"/signup\">sign up for a free account</a> and follow our guided onboarding. You'll be up and running in under 5 minutes.</p>",
                  "is_open": true,
                  "question": "How do I get started?"
                },
                {
                  "answer": "<p>We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers. For enterprise plans, we also offer invoice billing with NET 30 terms.</p>",
                  "is_open": false,
                  "question": "What payment methods do you accept?"
                },
                {
                  "answer": "<p>Absolutely! You can upgrade or downgrade your plan at any time from your account settings. Changes take effect immediately, and we'll prorate your billing.</p><ul><li><strong>Upgrades</strong>: Instant access to new features</li><li><strong>Downgrades</strong>: Effective at next billing cycle</li></ul>",
                  "is_open": false,
                  "question": "Can I change my plan later?"
                },
                {
                  "answer": "<p>Yes! We offer a <strong>14-day free trial</strong> with full access to all features. No credit card required to start.</p>",
                  "is_open": false,
                  "question": "Is there a free trial?"
                },
                {
                  "answer": "<p>Security is our top priority. We use:</p><ul><li>256-bit SSL encryption for all data in transit</li><li>AES-256 encryption for data at rest</li><li>SOC 2 Type II certified infrastructure</li><li>GDPR and CCPA compliant practices</li><li>Daily backups with 99.99% uptime SLA</li></ul>",
                  "is_open": false,
                  "question": "How secure is my data?"
                },
                {
                  "answer": "<p>Yes! When you choose annual billing, you save <strong>20% compared to monthly</strong>. That's like getting 2+ months free!</p>",
                  "is_open": false,
                  "question": "Do you offer discounts for annual billing?"
                }
              ],
              "section_heading": "Frequently Asked Questions",
              "section_subheading": "Everything you need to know about our platform"
            },
            spacing={
              "padding_bottom": "48px",
              "padding_top": "48px"
            },
            style={
              "answer_style": { "font_size": "1rem", "padding": "24px" },
              "card_style": {
                "background": { "color": "var(--color-bg)", "opacity": 100 },
                "border": true,
                "border_radius": "12px",
                "shadow": "sm"
              },
              "icon_style": {
                "color": { "color": "var(--color-primary)", "opacity": 100 },
                "position": "right",
                "type": "chevron"
              },
              "layout": {
                "alignment": "center",
                "dividers": true,
                "gap": "0",
                "max_width": "800px"
              },
              "question_style": { "font_size": "1.125rem", "font_weight": "600", "padding": "24px" }
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# TIMELINE MODULE                             #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_timeline_module"
            path="@hubspot/rich_text",
            label="Desc Timeline Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Timeline Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Visual timeline for history, roadmaps, or process steps. Features alternating/left/right layouts, scroll animations, highlighted events, and customizable icons.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "timeline_demo"
            path="../modules/timeline.module",
            label="Timeline Demo",
            content={
              "subtitle": "From startup to industry leader",
              "timeline_items": [
                {
                  "date": "2019",
                  "description": "<p>Founded in a small garage with a vision to revolutionize how teams work together. Our first prototype was built in just 3 months.</p>",
                  "highlight": false,
                  "icon": "rocket",
                  "title": "The Beginning"
                },
                {
                  "date": "2020",
                  "description": "<p>Reached our first major milestone despite the pandemic. Our remote-first approach resonated with teams worldwide.</p>",
                  "highlight": false,
                  "icon": "star",
                  "title": "First 1,000 Users"
                },
                {
                  "date": "2021",
                  "description": "<p>Raised $15M to accelerate growth. Expanded the team from 10 to 50 people and opened our first international office.</p>",
                  "highlight": true,
                  "icon": "trophy",
                  "title": "Series A Funding"
                },
                {
                  "date": "2022",
                  "description": "<p>Introduced enterprise features including SSO, advanced permissions, and dedicated support. Fortune 500 companies started adopting our platform.</p>",
                  "highlight": false,
                  "icon": "check",
                  "title": "Enterprise Launch"
                },
                {
                  "date": "2023",
                  "description": "<p>Launched AI-powered features that revolutionized workflow automation. Processing over 1 million automated tasks per day.</p>",
                  "highlight": true,
                  "icon": "lightbulb",
                  "title": "AI Integration"
                },
                {
                  "date": "2024",
                  "description": "<p>Now serving 100,000+ customers across 50 countries. Opened data centers in Europe and Asia-Pacific for better performance.</p>",
                  "highlight": false,
                  "icon": "globe",
                  "title": "Global Expansion"
                }
              ],
              "timeline_title": "Our Journey"
            },
            layout={
              "layout_type": "alternating",
              "mobile_layout": "single",
              "show_connecting_line": true
            },
            style={
              "dot_size": 3,
              "card_background": { "color": "var(--color-bg)", "opacity": 100 },
              "card_text_color": { "color": "var(--color-text)", "opacity": 100 },
              "date_color": { "color": "var(--color-secondary)", "opacity": 100 },
              "highlight_color": { "color": "var(--color-warning)", "opacity": 100 },
              "padding_top": 80,
              "padding_bottom": 80,
              "item_spacing": 50,
              "enable_animations": true,
              "animation_type": "fade-up",
              "animation_duration": 600,
              "stagger_delay": 150
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# BATCH 3 INTRO - Media & Trust               #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "batch3_intro"
            path="@hubspot/rich_text",
            label="Batch3 Intro",
            html="<div style=\"text-align: center; padding: 64px 0 32px 0; border-top: 2px solid #e5e7eb; margin-top: 48px;\">
<p style=\"font-size: 14px; color: var(--color-text-muted, #9ca3af); margin: 0;\">Media &amp; Trust Modules</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CAROUSEL MODULE                             #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_carousel_module"
            path="@hubspot/rich_text",
            label="Desc Carousel Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Carousel Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Responsive card carousel with autoplay, navigation dots, infinite loop, and customizable transitions. Pure CSS/JS with no external dependencies.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "carousel_demo"
            path="../modules/carousel.module",
            label="Carousel Demo",
            content={
              "carousel_title": "Featured Products",
              "show_title": true,
              "cards": [
                {
                  "background_image": { "alt": "Enterprise Suite", "src": "../../images/sample/card-laptop-work.jpg", "width": 800, "height": 450 },
                  "button_link": { "url": { "href": "/products/enterprise" } },
                  "button_text": "Learn More",
                  "content": "<p>Complete solution for large organizations with advanced security, compliance, and dedicated support.</p>",
                  "custom_image_height": 220,
                  "image_height_type": "custom",
                  "label_text": "POPULAR",
                  "show_button": true,
                  "show_label": true,
                  "title": "Enterprise Suite"
                },
                {
                  "background_image": { "alt": "Professional Plan", "src": "../../images/sample/card-analytics-dashboard.jpg", "width": 800, "height": 450 },
                  "button_link": { "url": { "href": "/products/professional" } },
                  "button_text": "Learn More",
                  "content": "<p>Perfect for growing teams who need advanced features and priority support.</p>",
                  "custom_image_height": 220,
                  "image_height_type": "custom",
                  "label_text": "BEST VALUE",
                  "show_button": true,
                  "show_label": true,
                  "title": "Professional Plan"
                },
                {
                  "background_image": { "alt": "Starter Package", "src": "../../images/sample/hero-team-collaboration.jpg", "width": 800, "height": 450 },
                  "button_link": { "url": { "href": "/products/starter" } },
                  "button_text": "Learn More",
                  "content": "<p>Everything you need to get started. Ideal for small teams and individuals.</p>",
                  "custom_image_height": 220,
                  "image_height_type": "custom",
                  "show_button": true,
                  "title": "Starter Package"
                },
                {
                  "background_image": { "alt": "Developer API", "src": "../../images/sample/card-team-meeting.jpg", "width": 800, "height": 450 },
                  "button_link": { "url": { "href": "/developers" } },
                  "button_text": "View Docs",
                  "content": "<p>Build custom integrations with our powerful REST API and webhooks.</p>",
                  "custom_image_height": 220,
                  "image_height_type": "custom",
                  "label_text": "NEW",
                  "show_button": true,
                  "show_label": true,
                  "title": "Developer API"
                },
                {
                  "background_image": { "alt": "Security Suite", "src": "../../images/sample/card-security-lock.jpg", "width": 800, "height": 450 },
                  "button_link": { "url": { "href": "/security" } },
                  "button_text": "Learn More",
                  "content": "<p>Enterprise-grade security with SSO, 2FA, and advanced threat protection built-in.</p>",
                  "custom_image_height": 220,
                  "image_height_type": "custom",
                  "label_text": "SECURE",
                  "show_button": true,
                  "show_label": true,
                  "title": "Security Suite"
                }
              ]
            },
            behavior={
              "autoplay_enabled": true,
              "autoplay_speed": 5000,
              "infinite_loop": true,
              "pause_on_hover": true,
              "show_dots": true
            },
            style={
              "button_text_alignment": "left",
              "card_gap": 24,
              "cards_per_view_desktop": 2,
              "cards_per_view_mobile": 1,
              "equal_height": true,
              "image_aspect": "16/9",
              "image_fit": "cover",
              "title_text_alignment": "left",
              "transition_easing": "ease-out",
              "transition_speed": 500,
              "margin_bottom": 48,
              "margin_top": 48,
              "button_color": { "color": "#3b82f6", "opacity": 100 },
              "label_color": { "color": "#16a34a", "opacity": 100 },
              "title_alignment": "center"
            },
            advanced={
              "lazy_load_carousel": true
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# TESTIMONIAL MODULE                          #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_testimonial_module"
            path="@hubspot/rich_text",
            label="Desc Testimonial Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Testimonial Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Customer quotes with photos, star ratings, company info, and logos. Supports single featured, grid, and carousel layouts with customizable quote marks.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "testimonial_demo"
            path="../modules/testimonial.module",
            label="Testimonial Demo",
            author_style={
              "author_layout": "inline",
              "photo_shape": "circle",
              "photo_size": "64px"
            },
            card_style={
              "background": { "color": "var(--color-bg)", "opacity": 100 },
              "border_radius": "16px",
              "padding": "32px",
              "shadow": "sm",
              "show_border": true
            },
            colors={
              "author_color": { "color": "var(--color-text)", "opacity": 100 },
              "meta_color": { "color": "var(--color-secondary)", "opacity": 100 },
              "quote_color": { "color": "var(--color-text)", "opacity": 100 },
              "quote_mark_color": { "color": "var(--color-primary)", "opacity": 20 },
              "star_color": { "color": "var(--color-warning)", "opacity": 100 }
            },
            content={
              "layout_type": "grid",
              "section_heading": "What Our Customers Say",
              "testimonials": [
                {
                  "author_company": "GrowthCo",
                  "author_name": "Sarah Chen",
                  "author_photo": { "alt": "Sarah Chen", "src": "../../images/sample/testimonial-woman-1.jpg", "width": 80, "height": 80 },
                  "author_title": "VP of Marketing",
                  "quote": "<p><strong>Game-changing platform.</strong> We migrated from three different tools and now have everything in one place. The ROI has been incredible.</p>",
                  "rating": 5
                },
                {
                  "author_company": "TechStart Inc",
                  "author_name": "Marcus Johnson",
                  "author_photo": { "alt": "Marcus Johnson", "src": "../../images/sample/testimonial-man-1.jpg", "width": 80, "height": 80 },
                  "author_title": "CTO",
                  "quote": "<p>The onboarding was seamless and support has been outstanding. We were up and running in days, not weeks.</p>",
                  "rating": 5
                },
                {
                  "author_company": "Scale Labs",
                  "author_name": "Emily Rodriguez",
                  "author_photo": { "alt": "Emily Rodriguez", "src": "../../images/sample/testimonial-woman-2.jpg", "width": 80, "height": 80 },
                  "author_title": "Operations Director",
                  "quote": "<p>Best investment we made this year. Our team productivity increased by 40% within the first month.</p>",
                  "rating": 5
                }
              ]
            },
            layout={
              "cols_desktop": "3",
              "gap": "32px",
              "text_alignment": "left"
            },
            quote_style={
              "font_size": "lg",
              "font_style": "normal",
              "quote_mark_style": "large",
              "show_quote_marks": true
            },
            spacing={
              "padding_bottom": "48px",
              "padding_top": "48px"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# VIDEO EMBED MODULE                          #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_video_embed_module"
            path="@hubspot/rich_text",
            label="Desc Video Embed Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Video Embed Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">YouTube/Vimeo with facade pattern for performance. Video only loads when clicked, saving ~500KB of JavaScript. Supports custom thumbnails and privacy mode.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "video_demo"
            path="../modules/video-embed.module",
            label="Video Demo",
            behavior={
              "autoplay": true,
              "privacy_mode": true
            },
            content={
              "caption": "Watch our 5-minute walkthrough of all major features",
              "title": "Product Demo - Complete Platform Tour",
              "video_id": "dQw4w9WgXcQ",
              "video_source": "youtube"
            },
            overlay={
              "overlay_color": { "color": "#000000", "opacity": 30 },
              "play_button_bg": { "color": "var(--color-primary)", "opacity": 90 },
              "play_button_color": { "color": "var(--color-primary-contrast)", "opacity": 100 },
              "play_button_size": "88px",
              "play_button_style": "circle"
            },
            spacing={
              "padding_bottom": "48px",
              "padding_top": "48px"
            },
            style={
              "alignment": "center",
              "aspect_ratio": "16/9",
              "border_radius": "16px",
              "max_width": "960px",
              "shadow": "lg"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# IMAGE REVEAL MODULE - Description           #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_image_reveal_module"
            path="@hubspot/rich_text",
            label="Desc Image Reveal Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Image Reveal Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Scroll-triggered image animations with slide, fade, zoom, and rotate effects. Features customizable timing, easing, and final displacement for creative layouts.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# Image Reveal - 3 columns side by side #}
    {% dnd_section %}
      {% dnd_column offset=0, width=4 %}
        {% dnd_row %}
          {% dnd_module "reveal_1"
            path="../modules/image-reveal.module",
            label="Reveal 1",
            content={
              "image": { "alt": "Feature 1", "height": 600, "src": "{{ get_asset_url('../../images/sample/card-laptop-work.jpg') }}", "width": 800 },
              "show_caption": true,
              "caption": "Slide from left animation"
            },
            animation={
              "animation_type": "slide-left",
              "trigger_threshold": 0.5,
              "trigger_offset": -100
            },
            style={
              "alignment": "center",
              "animation_duration": 1000,
              "animation_delay": 0,
              "animation_distance": 80,
              "animation_easing": "ease-out",
              "caption_color": { "color": "var(--color-secondary)", "opacity": 100 }
            },
            advanced={
              "loading_type": "lazy"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=4, width=4 %}
        {% dnd_row %}
          {% dnd_module "reveal_2"
            path="../modules/image-reveal.module",
            label="Reveal 2",
            content={
              "image": { "alt": "Feature 2", "height": 600, "src": "{{ get_asset_url('../../images/sample/card-analytics-dashboard.jpg') }}", "width": 800 },
              "show_caption": true,
              "caption": "Zoom animation effect"
            },
            animation={
              "animation_type": "zoom",
              "trigger_threshold": 0.5,
              "trigger_offset": -100
            },
            style={
              "alignment": "center",
              "animation_duration": 1200,
              "animation_delay": 150,
              "animation_easing": "ease-out",
              "zoom_start": 0.6,
              "caption_color": { "color": "var(--color-secondary)", "opacity": 100 }
            },
            advanced={
              "loading_type": "lazy"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=8, width=4 %}
        {% dnd_row %}
          {% dnd_module "reveal_3"
            path="../modules/image-reveal.module",
            label="Reveal 3",
            content={
              "image": { "alt": "Feature 3", "height": 600, "src": "{{ get_asset_url('../../images/sample/hero-team-collaboration.jpg') }}", "width": 800 },
              "show_caption": true,
              "caption": "Slide from right animation"
            },
            animation={
              "animation_type": "slide-right",
              "trigger_threshold": 0.5,
              "trigger_offset": -100
            },
            style={
              "alignment": "center",
              "animation_duration": 1000,
              "animation_delay": 300,
              "animation_distance": 80,
              "animation_easing": "ease-out",
              "caption_color": { "color": "var(--color-secondary)", "opacity": 100 }
            },
            advanced={
              "loading_type": "lazy"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# LOGO CLOUD MODULE                           #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_logo_cloud_module"
            path="@hubspot/rich_text",
            label="Desc Logo Cloud Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Logo Cloud Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Display customer/partner logos in row, grid, or infinite carousel. Features grayscale with color-on-hover, CSS-only animation, and configurable spacing.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "logo_cloud_demo"
            path="../modules/logo-cloud.module",
            label="Logo Cloud Demo",
            content={
              "heading": "Trusted by industry leaders",
              "layout_type": "carousel",
              "logos": [
                { "alt_text": "Microsoft", "image": { "alt": "Microsoft", "height": 256, "src": "{{ get_asset_url('../../images/sample/logos/microsoft.png') }}", "width": 256 } },
                { "alt_text": "Google", "image": { "alt": "Google", "height": 256, "src": "{{ get_asset_url('../../images/sample/logos/google.png') }}", "width": 256 } },
                { "alt_text": "Amazon", "image": { "alt": "Amazon", "height": 256, "src": "{{ get_asset_url('../../images/sample/logos/amazon.png') }}", "width": 256 } },
                { "alt_text": "Salesforce", "image": { "alt": "Salesforce", "height": 256, "src": "{{ get_asset_url('../../images/sample/logos/salesforce.png') }}", "width": 256 } },
                { "alt_text": "HubSpot", "image": { "alt": "HubSpot", "height": 256, "src": "{{ get_asset_url('../../images/sample/logos/hubspot.png') }}", "width": 256 } },
                { "alt_text": "Slack", "image": { "alt": "Slack", "height": 256, "src": "{{ get_asset_url('../../images/sample/logos/slack.png') }}", "width": 256 } }
              ]
            },
            spacing={
              "padding_bottom": "48px",
              "padding_top": "48px"
            },
            style={
              "carousel": { "autoplay": true, "direction": "left", "pause_on_hover": true, "speed": 35 },
              "layout": { "alignment": "center", "gap": "64px" },
              "logo_style": { "color_on_hover": true, "grayscale": true, "max_height": "40px", "opacity": 60 }
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# BATCH 4 INTRO - Code & Utility              #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "batch4_intro"
            path="@hubspot/rich_text",
            label="Batch4 Intro",
            html="<div style=\"text-align: center; padding: 64px 0 32px 0; border-top: 2px solid #e5e7eb; margin-top: 48px;\">
<p style=\"font-size: 14px; color: var(--color-text-muted, #9ca3af); margin: 0;\">Code &amp; Utility Modules</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CODE MODULE                                 #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_code_module"
            path="@hubspot/rich_text",
            label="Desc Code Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Code Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Simple code display with syntax highlighting. Supports 10 languages, optional line numbers, and max height for long snippets.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "code_demo"
            path="../modules/code-block.module",
            label="Code Demo",
            content={
              "language": "js",
              "filename": "useFetch.js",
              "code_snippet": "// React hook for fetching data
import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network error');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [url]);

  return { data, loading, error };
}"
            },
            style={ "useLineNumbers": true }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# CODE BLOCK MODULE - Description             #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_code_block_module"
            path="@hubspot/rich_text",
            label="Desc Code Block Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Code Block Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Advanced Prism.js syntax highlighting with HubL support. Ideal for technical documentation, code tutorials, and API examples.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# Code Block - 2 columns side by side #}
    {% dnd_section %}
      {% dnd_column offset=0, width=6 %}
        {% dnd_row %}
          {% dnd_module "code_block_hubl"
            path="../modules/code-block.module",
            label="Code Block Hubl",
            content={
              "language": "jinja2",
              "filename": "feature-cards.html (HubL)",
              "code_snippet": "{% for item in module.items %}
  <div class=\"feature-card\">
    <div class=\"icon\">{{ item.icon }}</div>
    <h3>{{ item.title }}</h3>
    <p>{{ item.description }}</p>
    {% if item.cta_url %}
      <a href=\"{{ item.cta_url }}\" class=\"cta\">
        {{ item.cta_text|default(\"Learn more\") }}
      </a>
    {% endif %}
  </div>
{% endfor %}"
            },
            style={ "useLineNumbers": true }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=6, width=6 %}
        {% dnd_row %}
          {% dnd_module "code_block_node"
            path="../modules/code-block.module",
            label="Code Block Node",
            content={
              "language": "js",
              "filename": "get-contact.js (Node.js)",
              "code_snippet": "const hubspot = require('@hubspot/api-client');

exports.main = async (event, callback) => {
  const client = new hubspot.Client({
    accessToken: process.env.HUBSPOT_ACCESS_TOKEN
  });

  const contact = await client.crm.contacts.basicApi.getById(
    event.inputFields['hs_object_id'],
    ['email', 'firstname', 'lastname']
  );

  callback({
    outputFields: {
      fullName: `${contact.properties.firstname} ${contact.properties.lastname}`,
      email: contact.properties.email
    }
  });
};"
            },
            style={ "useLineNumbers": true }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# QR CODE MODULE - Description                #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_qr_code_module"
            path="@hubspot/rich_text",
            label="Desc Qr Code Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">QR Code Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Client-side QR code generator with customizable colors and download options. Self-hosted library with no external dependencies.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# QR Code - 3 columns side by side #}
    {% dnd_section %}
      {% dnd_column offset=0, width=4 %}
        {% dnd_row %}
          {% dnd_module "qr_demo_1"
            path="../modules/qr-code.module",
            label="Qr Demo 1",
            content={
              "content_type": "custom",
              "custom_content": "https://worksby.design/module-showcase",
              "show_title": true,
              "title": "Visit This Page",
              "show_description": true,
              "description": "Scan to view on mobile",
              "show_download": true,
              "download_text": "Download PNG",
              "format": "png"
            },
            style={
              "size": 180,
              "dark_color": { "color": "#1e3a8a", "opacity": 100 },
              "light_color": { "color": "#ffffff", "opacity": 100 },
              "alignment": "center",
              "qr_padding": 24,
              "border_radius": 12,
              "show_border": true,
              "border_color": { "color": "var(--color-border)", "opacity": 100 },
              "show_shadow": true
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=4, width=4 %}
        {% dnd_row %}
          {% dnd_module "qr_demo_2"
            path="../modules/qr-code.module",
            label="Qr Demo 2",
            content={
              "content_type": "custom",
              "custom_content": "mailto:hello@example.com?subject=Hello",
              "show_title": true,
              "title": "Email Us",
              "show_description": true,
              "description": "Scan to send an email"
            },
            style={
              "size": 180,
              "dark_color": { "color": "#000000", "opacity": 100 },
              "light_color": { "color": "#ffffff", "opacity": 100 },
              "alignment": "center",
              "qr_padding": 24,
              "border_radius": 12,
              "show_border": true,
              "show_shadow": true
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=8, width=4 %}
        {% dnd_row %}
          {% dnd_module "qr_demo_3"
            path="../modules/qr-code.module",
            label="Qr Demo 3",
            content={
              "content_type": "custom",
              "custom_content": "tel:+1234567890",
              "show_title": true,
              "title": "Call Us",
              "show_description": true,
              "description": "Scan to call directly"
            },
            style={
              "size": 180,
              "dark_color": { "color": "#166534", "opacity": 100 },
              "light_color": { "color": "#ffffff", "opacity": 100 },
              "alignment": "center",
              "qr_padding": 24,
              "border_radius": 12,
              "show_border": true,
              "show_shadow": true
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# COMPARISON TABLE MODULE                     #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_comparison_table_module"
            path="@hubspot/rich_text",
            label="Desc Comparison Table Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Comparison Table Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Feature comparison with check/x/partial indicators and custom text values. Supports category rows, CTAs, tooltips, and highlighted columns.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "comparison_demo"
            path="../modules/comparison-table.module",
            label="Comparison Demo",
            colors={
              "check_color": { "color": "var(--color-success)", "opacity": 100 },
              "header_bg": { "color": "var(--color-light)", "opacity": 100 },
              "highlight_color": { "color": "var(--color-primary)", "opacity": 100 },
              "partial_color": { "color": "var(--color-warning)", "opacity": 100 },
              "x_color": { "color": "#d1d5db", "opacity": 100 }
            },
            content={
              "columns": [
                { "column_name": "Starter", "column_subtitle": "$19/month", "cta_text": "Start Free", "cta_url": { "href": "/signup/starter" } },
                { "column_name": "Professional", "column_subtitle": "$49/month", "cta_text": "Try Free", "cta_url": { "href": "/signup/pro" }, "highlight": true, "highlight_text": "Most Popular" },
                { "column_name": "Enterprise", "column_subtitle": "Custom", "cta_text": "Contact Sales", "cta_url": { "href": "/contact" } }
              ],
              "rows": [
                { "feature_name": "Core Features", "is_category": true },
                { "feature_name": "Users", "text_1": "3", "text_2": "25", "text_3": "Unlimited", "value_1": "text", "value_2": "text", "value_3": "text" },
                { "feature_name": "Storage", "text_1": "10GB", "text_2": "100GB", "text_3": "1TB", "value_1": "text", "value_2": "text", "value_3": "text" },
                { "feature_name": "API Access", "value_1": "x", "value_2": "check", "value_3": "check" },
                { "feature_name": "Automation", "is_category": true },
                { "feature_name": "Workflow Builder", "value_1": "x", "value_2": "check", "value_3": "check" },
                { "feature_name": "Custom Triggers", "value_1": "x", "value_2": "partial", "value_3": "check" },
                { "feature_name": "Support", "is_category": true },
                { "feature_name": "Email Support", "value_1": "check", "value_2": "check", "value_3": "check" },
                { "feature_name": "Priority Support", "value_1": "x", "value_2": "check", "value_3": "check" },
                { "feature_name": "Dedicated CSM", "feature_tooltip": "Customer Success Manager assigned to your account", "value_1": "x", "value_2": "x", "value_3": "check" }
              ],
              "section_heading": "Compare Plans",
              "section_subheading": "Find the perfect fit for your team"
            },
            spacing={
              "padding_bottom": "48px",
              "padding_top": "48px"
            },
            style={
              "border_radius": "12px",
              "cell_padding": "16px",
              "row_striping": true,
              "sticky_header": false
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# ICON GRID MODULE                            #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_icon_grid_module"
            path="@hubspot/rich_text",
            label="Desc Icon Grid Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Icon Grid Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Grid of icons with titles and descriptions. Supports emojis, custom SVGs, or images. Perfect for features, benefits, and service offerings.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "icon_grid_demo"
            path="../modules/icon-grid.module",
            label="Icon Grid Demo",
            card_style={
              "border_radius": "16px",
              "hover_effect": true,
              "padding": "32px",
              "variant": "card"
            },
            colors={
              "description_color": { "color": "var(--color-secondary)", "opacity": 100 },
              "title_color": { "color": "var(--color-text)", "opacity": 100 }
            },
            content={
              "items": [
                { "description": "Optimized performance with sub-second load times and instant updates.", "icon_emoji": "🚀", "icon_type": "emoji", "title": "Lightning Fast" },
                { "description": "SOC2 Type II certified with end-to-end encryption and SSO support.", "icon_emoji": "🔒", "icon_type": "emoji", "title": "Enterprise Security" },
                { "description": "Fully responsive design that works beautifully on any device.", "icon_emoji": "📱", "icon_type": "emoji", "title": "Mobile Ready" },
                { "description": "Connect with 500+ tools via native integrations and REST API.", "icon_emoji": "⚡", "icon_type": "emoji", "title": "Easy Integration" },
                { "description": "Track everything with customizable dashboards and reports.", "icon_emoji": "📊", "icon_type": "emoji", "title": "Real-time Analytics" },
                { "description": "Expert help whenever you need it with 2-hour average response time.", "icon_emoji": "💬", "icon_type": "emoji", "title": "24/7 Support" }
              ],
              "section_heading": "Why Choose Our Platform",
              "section_subheading": "Built for teams that want to move fast"
            },
            grid={
              "cols_desktop": "3",
              "cols_mobile": "1",
              "cols_tablet": "2",
              "gap": "32px",
              "text_alignment": "center"
            },
            icon_style={
              "background": true,
              "background_color": { "color": "#eff6ff", "opacity": 100 },
              "background_shape": "rounded",
              "size": "48px"
            },
            spacing={
              "padding_bottom": "48px",
              "padding_top": "48px"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# STATS COUNTER MODULE                        #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_stats_counter_module"
            path="@hubspot/rich_text",
            label="Desc Stats Counter Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Stats Counter Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Animated statistics display with scroll-triggered count-up animation. Features prefix/suffix support, dividers, and highlight colors.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "stats_demo"
            path="../modules/stats-counter.module",
            label="Stats Demo",
            animation={
              "animate_on_scroll": true,
              "animation_duration": 2000
            },
            background={
              "color": { "color": "var(--color-light)", "opacity": 100 },
              "divider_color": { "color": "#d1d5db", "opacity": 100 },
              "padding_bottom": "64px",
              "padding_top": "64px"
            },
            content={
              "section_heading": "Trusted by Industry Leaders",
              "section_subheading": "Our impact in numbers",
              "stats": [
                { "prefix": "$", "stat_label": "Revenue Generated", "suffix": "B+", "value": "2.5" },
                { "highlight": true, "stat_label": "Average ROI", "suffix": "%", "value": "150" },
                { "stat_label": "Active Users", "suffix": "K+", "value": "10" },
                { "stat_label": "Uptime SLA", "suffix": "%", "value": "99.9" }
              ]
            },
            label_style={
              "color": { "color": "var(--color-secondary)", "opacity": 100 },
              "size": "base",
              "uppercase": true
            },
            layout={
              "alignment": "center",
              "cols_desktop": "4",
              "cols_mobile": "2",
              "cols_tablet": "4",
              "gap": "48px",
              "show_dividers": true
            },
            value_style={
              "color": { "color": "var(--color-text)", "opacity": 100 },
              "highlight_color": { "color": "var(--color-primary)", "opacity": 100 },
              "size": "5xl",
              "weight": "extrabold"
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# BUTTON MODULE - Description                 #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_button_module"
            path="@hubspot/rich_text",
            label="Desc Button Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Button Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Customizable CTA button with full styling control. Supports internal/external links, file downloads, and email addresses.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# Button Module - 3 columns side by side #}
    {% dnd_section %}
      {% dnd_column offset=0, width=4 %}
        {% dnd_row %}
          {% dnd_module "button_demo_1"
            path="../modules/button.module",
            label="Button Demo 1",
            button_text="Get Started Free",
            link={
              "open_in_new_tab": false,
              "url": { "href": "/signup", "type": "CONTENT" }
            },
            styles={
              "alignment": { "alignment": "CENTER" },
              "background": { "color": { "color": "#3b82f6", "opacity": 100 } },
              "corner": { "radius": 8 },
              "spacing": { "spacing": { "bottom": { "units": "px", "value": 14 }, "left": { "units": "px", "value": 28 }, "right": { "units": "px", "value": 28 }, "top": { "units": "px", "value": 14 } } },
              "text": { "font": { "color": "#ffffff", "size": 16, "size_unit": "px", "weight": 600 } }
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=4, width=4 %}
        {% dnd_row %}
          {% dnd_module "button_demo_2"
            path="../modules/button.module",
            label="Button Demo 2",
            button_text="Contact Sales",
            link={
              "open_in_new_tab": false,
              "url": { "href": "/contact", "type": "CONTENT" }
            },
            styles={
              "alignment": { "alignment": "CENTER" },
              "background": { "color": { "color": "#ffffff", "opacity": 100 } },
              "border": { "border": { "bottom": { "color": "#3b82f6", "style": "solid", "width": { "units": "px", "value": 2 } }, "left": { "color": "#3b82f6", "style": "solid", "width": { "units": "px", "value": 2 } }, "right": { "color": "#3b82f6", "style": "solid", "width": { "units": "px", "value": 2 } }, "top": { "color": "#3b82f6", "style": "solid", "width": { "units": "px", "value": 2 } } } },
              "corner": { "radius": 8 },
              "spacing": { "spacing": { "bottom": { "units": "px", "value": 12 }, "left": { "units": "px", "value": 28 }, "right": { "units": "px", "value": 28 }, "top": { "units": "px", "value": 12 } } },
              "text": { "font": { "color": "#3b82f6", "size": 16, "size_unit": "px", "weight": 600 } }
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}

      {% dnd_column offset=8, width=4 %}
        {% dnd_row %}
          {% dnd_module "button_demo_3"
            path="../modules/button.module",
            label="Button Demo 3",
            button_text="Download Guide",
            link={
              "open_in_new_tab": true,
              "url": { "href": "#", "type": "EXTERNAL" }
            },
            styles={
              "alignment": { "alignment": "CENTER" },
              "background": { "color": { "color": "#16a34a", "opacity": 100 } },
              "corner": { "radius": 8 },
              "spacing": { "spacing": { "bottom": { "units": "px", "value": 14 }, "left": { "units": "px", "value": 28 }, "right": { "units": "px", "value": 28 }, "top": { "units": "px", "value": 14 } } },
              "text": { "font": { "color": "#ffffff", "size": 16, "size_unit": "px", "weight": 600 } }
            }
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# ============================================ #}
    {# BROWSER CHECK MODULE                        #}
    {# ============================================ #}
    {% dnd_section %}
      {% dnd_column offset=0, width=12 %}
        {% dnd_row %}
          {% dnd_module "desc_browser_check_module"
            path="@hubspot/rich_text",
            label="Desc Browser Check Module",
            html="<div style=\"border-left: 4px solid var(--color-primary, #007BFF); padding-left: 24px; margin: 48px 0 24px 0;\">
<h2 style=\"margin: 0 0 8px 0;\">Browser Check Module</h2>
<p style=\"margin: 0; color: var(--color-text-secondary, #6b7280); font-size: 18px;\">Display upgrade notice for outdated browsers. Configurable minimum versions for Chrome, Firefox, and Safari with custom messaging.</p>
</div>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module "browser_check_demo"
            path="../modules/browser-check.module",
            label="Browser Check Demo",
            enabled=true,
            min_chrome=100,
            min_firefox=95,
            min_safari=15,
            style_settings={
              "background_color": { "color": "#fef3c7", "opacity": 100 },
              "border_color": { "color": "var(--color-warning)", "opacity": 100 },
              "text_color": { "color": "#92400e", "opacity": 100 }
            },
            upgrade_message="<h3>Please Update Your Browser</h3><p>For the best experience on our site, please update to a modern browser.</p><p>Recommended browsers: <a href=\"https://www.google.com/chrome/\">Chrome</a> | <a href=\"https://www.mozilla.org/firefox/\">Firefox</a> | <a href=\"https://www.apple.com/safari/\">Safari</a></p>"
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

  {% end_dnd_area %}
</div>
{% endblock body %}