diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index f5a7c6c..64cf57b 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -262,6 +262,32 @@ class Index extends Composer
 @endphp
 ```
 
+### Asset Loading in Blade Templates
+**❌ WRONG - Don't use @php blocks for asset logic:**
+```php
+@php
+  $icon_file = match($type) {
+    'arrow' => 'resources/images/icons/arrow.svg',
+    default => 'resources/images/icons/check.svg'
+  };
+@endphp
+<img src="{{ Vite::asset($icon_file) }}">
+```
+
+**✅ CORRECT - Use Blade conditionals and Vite::asset() directly:**
+```php
+@if($type === 'arrow')
+  <img src="{{ Vite::asset('resources/images/icons/arrow.svg') }}">
+@else
+  <img src="{{ Vite::asset('resources/images/icons/check.svg') }}">
+@endif
+```
+
+**Asset Loading Rules:**
+- **Blade Templates**: Use `Vite::asset('path/to/asset')` directly (no import needed)
+- **PHP Files**: Use `use Illuminate\Support\Facades\Vite;` then `Vite::asset()`
+- **No @php blocks**: Avoid @php for asset logic - use Blade conditionals or View Composers
+
 **Key Benefits:**
 - **Separation of Concerns**: Keep data fetching logic out of Blade templates
 - **Reusability**: Share data logic across multiple templates
diff --git a/CLAUDE.md b/CLAUDE.md
index d132cde..8335798 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -160,7 +160,33 @@ With View Composers, Blade templates become clean and focused:
 @foreach($featured_posts as $post)
   {{-- Template logic only --}}
 @endforeach
-```(claude.ai/code) when working with code in this repository.
+```
+
+### Asset Loading in Blade Templates
+**❌ WRONG - Don't use @php blocks for asset logic:**
+```php
+@php
+  $icon_file = match($type) {
+    'arrow' => 'resources/images/icons/arrow.svg',
+    default => 'resources/images/icons/check.svg'
+  };
+@endphp
+<img src="{{ Vite::asset($icon_file) }}">
+```
+
+**✅ CORRECT - Use Blade conditionals directly:**
+```php
+@if($type === 'arrow')
+  <img src="{{ Vite::asset('resources/images/icons/arrow.svg') }}">
+@else
+  <img src="{{ Vite::asset('resources/images/icons/check.svg') }}">
+@endif
+```
+
+**Asset Loading Rules:**
+- **Blade Templates**: Use `Vite::asset()` directly (no import needed)
+- **PHP Files**: Use `use Illuminate\Support\Facades\Vite;` then `Vite::asset()`
+- **No @php blocks**: Keep asset logic in Blade conditionals or View Composers(claude.ai/code) when working with code in this repository.
 
 ## Architecture Overview
 
diff --git a/app/Blocks/ExpertiseDetailAdvantages.php b/app/Blocks/ExpertiseDetailAdvantages.php
new file mode 100644
index 0000000..8da36e8
--- /dev/null
+++ b/app/Blocks/ExpertiseDetailAdvantages.php
@@ -0,0 +1,171 @@
+<?php
+
+namespace App\Blocks;
+
+use Log1x\AcfComposer\Block;
+use Log1x\AcfComposer\Builder;
+
+class ExpertiseDetailAdvantages extends Block
+{
+    /**
+     * The block name.
+     *
+     * @var string
+     */
+    public $name = 'Expertise Detail Advantages';
+
+    /**
+     * The block description.
+     *
+     * @var string
+     */
+    public $description = 'Content section highlighting key benefits/advantages of a service with checkmark-style list items.';
+
+    /**
+     * The block category.
+     *
+     * @var string
+     */
+    public $category = 'thyra-expertise';
+
+    /**
+     * The block icon.
+     *
+     * @var string|array
+     */
+    public $icon = 'yes-alt';
+
+    /**
+     * The block keywords.
+     *
+     * @var array
+     */
+    public $keywords = ['expertise', 'advantages', 'benefits', 'checkmark'];
+
+    /**
+     * The block post type allow list.
+     *
+     * @var array
+     */
+    public $post_types = [];
+
+    /**
+     * The parent block type allow list.
+     *
+     * @var array
+     */
+    public $parent = [];
+
+    /**
+     * The ancestor block type allow list.
+     *
+     * @var array
+     */
+    public $ancestor = [];
+
+    /**
+     * The default block mode.
+     *
+     * @var string
+     */
+    public $mode = 'edit';
+
+    /**
+     * The default block alignment.
+     *
+     * @var string
+     */
+    public $align = '';
+
+    /**
+     * The default block text alignment.
+     *
+     * @var string
+     */
+    public $align_text = '';
+
+    /**
+     * The default block content alignment.
+     *
+     * @var string
+     */
+    public $align_content = '';
+
+    /**
+     * The default block spacing.
+     *
+     * @var array
+     */
+    public $spacing = [
+        'padding' => null,
+        'margin' => null,
+    ];
+
+    /**
+     * The supported block features.
+     *
+     * @var array
+     */
+    public $supports = [
+        'align' => false,
+        'mode' => true,
+        'jsx' => true,
+        'anchor' => true,
+    ];
+
+    /**
+     * The block styles.
+     *
+     * @var array
+     */
+    public $styles = ['light', 'dark'];
+
+    /**
+     * The block preview example data.
+     *
+     * @var array
+     */
+    public $example = [
+        'items' => [
+            ['item' => 'Item one'],
+            ['item' => 'Item two'],
+            ['item' => 'Item three'],
+        ],
+    ];
+
+    /**
+     * The block template.
+     *
+     * @var array
+     */
+    public $template = [
+        'core/heading' => ['placeholder' => 'Hello World'],
+        'core/paragraph' => ['placeholder' => 'Welcome to the Expertise Detail Advantages block.'],
+    ];
+
+    /**
+     * Data to be passed to the block before rendering.
+     */
+    public function with(): array
+    {
+        return [];
+    }
+
+    /**
+     * The block field group.
+     */
+    public function fields(): array
+    {
+        return $this->get('ExpertiseDetailAdvantages');
+    }
+
+    /**
+     * Assets enqueued with 'enqueue_block_assets' when rendering the block.
+     *
+     * @link https://developer.wordpress.org/block-editor/how-to-guides/enqueueing-assets-in-the-editor/#editor-content-scripts-and-styles
+     */
+    public function assets(array $block): void
+    {
+        //
+    }
+}
diff --git a/app/Fields/ExpertiseDetailAdvantages.php b/app/Fields/ExpertiseDetailAdvantages.php
new file mode 100644
index 0000000..e441478
--- /dev/null
+++ b/app/Fields/ExpertiseDetailAdvantages.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Fields;
+
+use Log1x\AcfComposer\Builder;
+use Log1x\AcfComposer\Field;
+
+class ExpertiseDetailAdvantages extends Field
+{
+    /**
+     * The field group.
+     */
+    public function fields(): array
+    {
+        $advantages = Builder::make('expertise_detail_advantages');
+
+        $advantages
+            ->setLocation('block', '==', 'acf/expertise-detail-advantages');
+
+        $advantages
+            ->addText('advantages_pill_text', [
+                'label' => 'Pill Text',
+                'default_value' => 'Benefits',
+                'instructions' => 'Text for the blue pill tag (e.g., "Benefits")'
+            ])
+            ->addText('advantages_main_title', [
+                'label' => 'Main Title',
+                'default_value' => 'What benefits do our services provide',
+                'instructions' => 'Main section heading'
+            ])
+            ->addTextarea('advantages_description', [
+                'label' => 'Description',
+                'default_value' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+                'instructions' => 'Description text below the main title'
+            ])
+            ->addRepeater('advantages_list', [
+                'label' => 'Advantages List',
+                'min' => 1,
+                'max' => 6,
+                'layout' => 'block',
+                'button_label' => 'Add Advantage'
+            ])
+                ->addText('title', [
+                    'label' => 'Advantage Title',
+                    'required' => 0,
+                    'default_value' => 'Advantage Title'
+                ])
+                ->addTextarea('description', [
+                    'label' => 'Advantage Description',
+                    'required' => 0,
+                    'default_value' => 'Description of this advantage...'
+                ])
+                ->addSelect('icon_type', [
+                    'label' => 'Icon Type',
+                    'choices' => [
+                        'checkmark' => 'Checkmark',
+                        'star' => 'Star',
+                        'arrow' => 'Arrow'
+                    ],
+                    'default_value' => 'checkmark'
+                ])
+            ->endRepeater();
+
+        return $advantages->build();
+    }
+}
diff --git a/app/setup.php b/app/setup.php
index 7cac2cf..02fceaa 100644
--- a/app/setup.php
+++ b/app/setup.php
@@ -150,6 +150,29 @@
     add_theme_support('customize-selective-refresh-widgets');
 }, 20);
 
+/**
+ * Register custom block categories for Thyra theme
+ */
+add_filter('block_categories_all', function ($categories) {
+    return array_merge($categories, [
+        [
+            'slug'  => 'thyra-expertise',
+            'title' => 'Thyra Expertise Blocks',
+            'icon'  => 'star-filled',
+        ],
+        [
+            'slug'  => 'thyra-general',
+            'title' => 'Thyra General Blocks',
+            'icon'  => 'admin-customizer',
+        ],
+        [
+            'slug'  => 'thyra-home',
+            'title' => 'Thyra Home Blocks',
+            'icon'  => 'admin-home',
+        ],
+    ]);
+});
+
 /**
  * Register the theme sidebars.
  *
diff --git a/composer.lock b/composer.lock
index 65f15e1..1b0a09f 100644
--- a/composer.lock
+++ b/composer.lock
@@ -6688,12 +6688,12 @@
     ],
     "aliases": [],
     "minimum-stability": "dev",
-    "stability-flags": [],
+    "stability-flags": {},
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
         "php": ">=8.2"
     },
-    "platform-dev": [],
-    "plugin-api-version": "2.3.0"
+    "platform-dev": {},
+    "plugin-api-version": "2.6.0"
 }
diff --git a/docs/MIGRATION.md b/docs/MIGRATION.md
new file mode 100644
index 0000000..dd62b00
--- /dev/null
+++ b/docs/MIGRATION.md
@@ -0,0 +1,621 @@
+# NON-SASS MIGRATION: T3CH Theme to Sage 11 with Tailwind CSS
+
+## Overview
+
+This document outlines the migration plan to convert blocks from the T3CH theme to ACF Composer blocks in the Sage 11 theme, keeping the existing Tailwind CSS setup and converting SCSS to regular CSS with Tailwind utilities.
+
+## Migration Strategy: SCSS to Tailwind CSS
+
+Instead of maintaining the complex SCSS system from T3CH, we'll convert blocks to use Tailwind CSS utilities while preserving the visual design and functionality.
+
+### Why This Approach?
+
+- ✅ **Keep existing Sage 11 + Tailwind setup** - No build system changes needed
+- ✅ **Leverage Tailwind utilities** - Use existing color palette and spacing scale
+- ✅ **Simplified maintenance** - No SCSS compilation or variable management
+- ✅ **Better performance** - Tailwind's purging removes unused CSS
+- ✅ **Design consistency** - Use Tailwind's design tokens throughout
+
+## Phase 1: Setup ACF Composer
+
+### 1.1 Install ACF Composer
+
+```bash
+# Install ACF Composer for block development
+composer require log1x/acf-composer
+
+# Verify installation
+wp acorn list | grep make:block
+```
+
+### 1.2 Register Custom Block Categories
+
+**File:** `app/setup.php` (add to existing file)
+
+```php
+/**
+ * Register custom block categories for Thyra theme
+ */
+add_filter('block_categories_all', function ($categories) {
+    return array_merge($categories, [
+        [
+            'slug'  => 'thyra-expertise',
+            'title' => 'Thyra Expertise Blocks',
+            'icon'  => 'star-filled',
+        ],
+        [
+            'slug'  => 'thyra-general',
+            'title' => 'Thyra General Blocks',
+            'icon'  => 'admin-customizer',
+        ],
+        [
+            'slug'  => 'thyra-home',
+            'title' => 'Thyra Home Blocks',
+            'icon'  => 'admin-home',
+        ],
+    ]);
+});
+```
+
+## Phase 2: Convert T3CH Variables to Tailwind
+
+### 2.1 Color Mapping: SCSS to Tailwind
+
+From the T3CH `_variables.scss`, we'll map colors to Tailwind's existing palette:
+
+**T3CH Colors → Tailwind Equivalents:**
+
+```scss
+// T3CH → Tailwind CSS equivalent
+$brand-blue-50: #f0f8ff;     → bg-blue-50
+$brand-blue-600: #0295DA;    → bg-blue-500 (custom)
+$brand-darkblue-950: #00283C; → bg-slate-900 (custom)
+$brand-orange-600: #d97d00;  → bg-orange-500 (custom)
+$basic-light-50: #fff;       → bg-white
+$basic-gray-300: #d1d1d1;    → bg-gray-300
+$basic-gray-600: #333;       → bg-gray-700
+```
+
+### 2.2 Add Custom Colors to Tailwind Theme
+
+**File:** `resources/css/app.css`
+
+Add these custom colors to your existing `@theme` block:
+
+```css
+@theme {
+  /* Existing Thyra colors... */
+
+  /* T3CH Brand Colors */
+  --color-t3ch-blue: #0295DA;        /* Primary brand blue */
+  --color-t3ch-darkblue: #00283C;    /* Dark background blue */
+  --color-t3ch-orange: #d97d00;      /* CTA orange */
+  --color-t3ch-lightblue: #f0f8ff;   /* Light blue backgrounds */
+}
+```
+
+### 2.3 Spacing Mapping: SCSS to Tailwind
+
+```scss
+// T3CH → Tailwind equivalent
+$spacing-xs: 8px;      → space-2 (8px)
+$spacing-sm: 16px;     → space-4 (16px)
+$spacing-md: 24px;     → space-6 (24px)
+$spacing-lg: 32px;     → space-8 (32px)
+$spacing-xl: 48px;     → space-12 (48px)
+$spacing-xxl: 64px;    → space-16 (64px)
+$spacing-xxxl: 80px;   → space-20 (80px)
+```
+
+### 2.4 Typography Mapping
+
+```scss
+// T3CH → Tailwind equivalent
+$font-size-md: 15px;   → text-base (16px) or text-sm (14px)
+$font-size-lg: 16px;   → text-base (16px)
+$font-size-xl: 18px;   → text-lg (18px)
+$font-size-2xl: 19px;  → text-xl (20px)
+$font-size-5xl: 24px;  → text-2xl (24px)
+$font-size-12xl: 48px; → text-5xl (48px)
+```
+
+## Phase 3: Block Migration Process
+
+### 3.1 Example: Expertise Detail Advantages Block
+
+**Step 1: Generate ACF Composer Block**
+
+```bash
+wp acorn make:block ExpertiseDetailAdvantages
+wp acorn make:field ExpertiseDetailAdvantages
+```
+
+**Step 2: Block Registration**
+
+**File:** `app/Blocks/ExpertiseDetailAdvantages.php`
+
+```php
+<?php
+
+namespace App\Blocks;
+
+use Log1x\AcfComposer\Block;
+
+class ExpertiseDetailAdvantages extends Block
+{
+    public $name = 'Expertise Detail Advantages';
+    public $description = 'Content section highlighting key benefits/advantages of a service with checkmark-style list items.';
+    public $category = 'thyra-expertise';
+    public $icon = 'yes-alt';
+    public $keywords = ['expertise', 'advantages', 'benefits', 'checkmark'];
+    public $supports = [
+        'align' => false,
+        'mode' => false,
+        'jsx' => true,
+        'anchor' => true,
+    ];
+
+    public function fields()
+    {
+        return $this->get('ExpertiseDetailAdvantages');
+    }
+}
+```
+
+**Step 3: ACF Fields Definition**
+
+**File:** `app/Fields/ExpertiseDetailAdvantages.php`
+
+```php
+<?php
+
+namespace App\Fields;
+
+use Log1x\AcfComposer\Builder;
+use Log1x\AcfComposer\Field;
+
+class ExpertiseDetailAdvantages extends Field
+{
+    public function fields()
+    {
+        $advantages = Builder::make('expertise_detail_advantages');
+
+        $advantages
+            ->addText('advantages_pill_text', [
+                'label' => 'Pill Text',
+                'default_value' => 'Voordelen',
+                'instructions' => 'Text for the blue pill tag (e.g., "Voordelen")'
+            ])
+            ->addText('advantages_main_title', [
+                'label' => 'Main Title',
+                'default_value' => 'Wat levert Scan to BIM voor je op',
+                'instructions' => 'Main section heading'
+            ])
+            ->addTextarea('advantages_description', [
+                'label' => 'Description',
+                'default_value' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+                'instructions' => 'Description text below the main title'
+            ])
+            ->addRepeater('advantages_list', [
+                'label' => 'Advantages List',
+                'min' => 1,
+                'max' => 6,
+                'layout' => 'block',
+                'button_label' => 'Add Advantage'
+            ])
+                ->addText('title', [
+                    'label' => 'Advantage Title',
+                    'required' => 1
+                ])
+                ->addTextarea('description', [
+                    'label' => 'Advantage Description',
+                    'required' => 1
+                ])
+                ->addSelect('icon_type', [
+                    'label' => 'Icon Type',
+                    'choices' => [
+                        'checkmark' => 'Checkmark',
+                        'star' => 'Star',
+                        'arrow' => 'Arrow'
+                    ],
+                    'default_value' => 'checkmark'
+                ])
+            ->endRepeater();
+
+        return $advantages->build();
+    }
+}
+```
+
+**Step 4: Blade Template with Tailwind CSS**
+
+**File:** `resources/views/blocks/expertise-detail-advantages.blade.php`
+
+```php
+{{-- Expertise Detail Advantages Block --}}
+@php
+  $pill_text = get_field('advantages_pill_text') ?: 'Voordelen';
+  $main_title = get_field('advantages_main_title') ?: 'Wat levert Scan to BIM voor je op';
+  $description = get_field('advantages_description') ?: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...';
+  $advantages = get_field('advantages_list') ?: [];
+
+  // Default advantages if none are set
+  if (empty($advantages)) {
+      $advantages = [
+          [
+              'title' => 'Actueel en compleet inzicht',
+              'description' => 'Je krijgt een nauwkeurig digitaal 3D-model van de bestaande situatie — ideaal voor planning, beheer en onderhoud.',
+              'icon_type' => 'checkmark'
+          ],
+          [
+              'title' => 'Minder fouten en faalkosten',
+              'description' => 'Door afwijkingen vroegtidig te detecteren, voorkom je verrassingen tijdens uitvoering en bespaar je op correcties achteraf.',
+              'icon_type' => 'checkmark'
+          ],
+          [
+              'title' => 'Snellere en slimmere besluitvorming',
+              'description' => 'Door afwijkingen vroegtidig te detecteren, voorkom je verrassingen tijdens uitvoering en bespaar je op correcties achteraf.',
+              'icon_type' => 'checkmark'
+          ]
+      ];
+  }
+@endphp
+
+<section id="voordelen" class="bg-allinq-darkblue text-white py-20 {{ $block['className'] ?? '' }}">
+    @if (is_admin())
+        <div class="bg-gray-100 p-4 mb-5 border-l-4 border-blue-600">
+            <strong>Expertise Detail Advantages Block</strong>
+        </div>
+    @endif
+
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {{-- Header Section: Two-Column Layout --}}
+        <div class="flex flex-col lg:flex-row gap-12 lg:gap-12 mb-16">
+            {{-- Left Column: CTA Pill Tag --}}
+            <div class="lg:w-60 flex-shrink-0">
+                <div class="bg-allinq-blue text-white px-6 py-3 rounded-full text-sm font-medium inline-block">
+                    {{ $pill_text }}
+                </div>
+            </div>
+
+            {{-- Right Column: Title and Description --}}
+            <div class="flex-1">
+                <h2 class="text-2xl lg:text-3xl font-semibold mb-6 leading-tight">
+                    {{ $main_title }}
+                </h2>
+                <p class="text-base lg:text-lg leading-relaxed opacity-90">
+                    {{ $description }}
+                </p>
+            </div>
+        </div>
+
+        {{-- Advantages List Section --}}
+        <div class="space-y-8">
+            @if (!empty($advantages))
+                @foreach ($advantages as $index => $advantage)
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        {{-- Title Row: Checkbox + Title --}}
+                        <div class="flex items-center gap-4 sm:gap-6">
+                            <div class="flex-shrink-0 w-6 h-6 bg-white bg-opacity-10 rounded flex items-center justify-center"
+                                 aria-label="Checkmark" role="img">
+                                <svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M5.7 13.0125L0 7.31255L1.425 5.88755L5.7 10.1625L14.875 0.987549L16.3 2.41255L5.7 13.0125Z" fill="#009F13"/>
+                                </svg>
+                            </div>
+                            <h3 class="text-lg lg:text-xl font-semibold leading-snug">
+                                {{ $advantage['title'] }}
+                            </h3>
+                        </div>
+
+                        {{-- Advantage Description --}}
+                        <div class="sm:ml-10">
+                            <p class="text-base leading-relaxed opacity-80">
+                                {{ $advantage['description'] }}
+                            </p>
+                        </div>
+                    </div>
+                @endforeach
+            @endif
+        </div>
+    </div>
+</section>
+```
+
+## Phase 4: Migration Workflow
+
+### 4.1 Block-by-Block Migration Process
+
+For each block from T3CH:
+
+1. **Extract Block Data Structure**
+   - Copy ACF field structure from existing block
+   - Note any custom PHP logic or data processing
+
+2. **Analyze SCSS Styling**
+   - Identify colors, spacing, typography used
+   - Map to equivalent Tailwind classes
+   - Note any custom styles that need CSS
+
+3. **Generate ACF Composer Block**
+   ```bash
+   wp acorn make:block [BlockName]
+   wp acorn make:field [BlockName]
+   ```
+
+4. **Convert Template**
+   - Replace PHP template with Blade template
+   - Convert SCSS classes to Tailwind utilities
+   - Maintain responsive behavior with Tailwind breakpoints
+
+5. **Add Custom CSS (if needed)**
+   - For complex animations or styles not covered by Tailwind
+   - Add to `resources/css/app.css` under block-specific comments
+
+### 4.2 Priority Block List
+
+Based on the AllinQ Digital theme analysis, migrate in this order:
+
+**Phase 1 - Core Expertise Blocks:**
+1. ✅ `expertise-detail-advantages-block` (example above)
+2. `expertise-detail-sticky-menu-block`
+3. `expertise-detail-experience-block`
+4. `expertise-detail-application-block`
+5. `expertise-detail-faq-block`
+
+**Phase 2 - Inner Page Blocks:**
+1. `inner-page-banner`
+2. `inner-page-text`
+3. `inner-page-image`
+4. `inner-page-video`
+5. `inner-page-accordian`
+
+**Phase 3 - Home Page Blocks:**
+1. `home-page-banner`
+2. `home-services-block`
+3. `home-expertise-block`
+4. `home-cta-banner-block`
+
+### 4.3 Common Tailwind Conversions
+
+**Container Patterns:**
+```scss
+// T3CH SCSS:
+.container {
+    max-width: 1232px;
+    margin: 0 auto;
+    padding: 0;
+}
+
+// Tailwind equivalent:
+class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+```
+
+**Button Patterns:**
+```scss
+// T3CH SCSS:
+.cta-button-blue-pill {
+    background: $brand-blue-600;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+// Tailwind equivalent:
+class="bg-t3ch-blue text-white px-6 py-3 rounded-full text-sm font-medium"
+```
+
+**Responsive Grid Patterns:**
+```scss
+// T3CH SCSS:
+.advantages-header {
+    display: flex;
+    gap: 48px;
+    align-items: flex-start;
+
+    @media (max-width: 991px) {
+        flex-direction: column;
+        gap: 32px;
+    }
+}
+
+// Tailwind equivalent:
+class="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start"
+```
+
+## Phase 5: Custom CSS Integration
+
+### 5.1 Block-Specific CSS
+
+For styles that can't be achieved with Tailwind utilities, add to `resources/css/app.css`:
+
+```css
+/* =============================================================================
+   T3CH MIGRATED BLOCKS - CUSTOM STYLES
+   ============================================================================= */
+
+/* Expertise Detail Advantages Block - Custom animations */
+.expertise-detail-advantages-block .advantage-item {
+  transition: all 0.3s ease;
+}
+
+.expertise-detail-advantages-block .advantage-item:hover {
+  transform: translateY(-2px);
+}
+
+/* Sticky Menu Block - Fixed positioning */
+.expertise-detail-sticky-menu-block.is-sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+```
+
+### 5.2 JavaScript Integration
+
+For blocks with interactive functionality:
+
+**File:** `resources/js/app.js`
+
+```javascript
+// T3CH Block JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+    // Sticky Menu Block
+    const stickyMenu = document.querySelector('.expertise-detail-sticky-menu-block');
+    if (stickyMenu) {
+        window.addEventListener('scroll', function() {
+            if (window.scrollY > 100) {
+                stickyMenu.classList.add('is-sticky');
+            } else {
+                stickyMenu.classList.remove('is-sticky');
+            }
+        });
+    }
+
+    // FAQ Accordion functionality
+    const faqItems = document.querySelectorAll('.faq-item');
+    faqItems.forEach(item => {
+        const question = item.querySelector('.faq-question');
+        const answer = item.querySelector('.faq-answer');
+
+        question.addEventListener('click', () => {
+            item.classList.toggle('is-open');
+        });
+    });
+});
+```
+
+## Phase 6: Testing & Validation
+
+### 6.1 Block Testing Checklist
+
+For each migrated block:
+
+- [ ] **Visual Comparison**: Block matches T3CH design
+- [ ] **Responsive Behavior**: Works on mobile, tablet, desktop
+- [ ] **ACF Fields**: All fields save and load correctly
+- [ ] **Block Editor**: Block renders correctly in WordPress editor
+- [ ] **Content Migration**: Existing content displays properly
+- [ ] **Performance**: No significant load time increase
+
+### 6.2 Development Workflow
+
+```bash
+# 1. Generate new block
+wp acorn make:block ExampleBlock
+wp acorn make:field ExampleBlock
+
+# 2. Develop block template
+# Edit: app/Blocks/ExampleBlock.php
+# Edit: app/Fields/ExampleBlock.php
+# Edit: resources/views/blocks/example-block.blade.php
+
+# 3. Build assets
+npm run build
+
+# 4. Test in WordPress admin
+# Navigate to: /wp-admin/post-new.php?post_type=page
+# Add block and test functionality
+
+# 5. Clear caches if needed
+wp acorn optimize:clear
+```
+
+### 6.3 Performance Optimization
+
+- **Tailwind Purging**: Ensure unused CSS is removed in production
+- **Image Optimization**: Optimize any block images/assets
+- **Lazy Loading**: Implement for blocks with images/videos
+- **Critical CSS**: Include block styles in critical CSS path
+
+## Phase 7: Content Migration Strategy
+
+### 7.1 Automated Content Migration
+
+For large amounts of existing content using T3CH blocks:
+
+1. **Export existing block data** from T3CH site
+2. **Map field names** between old and new ACF structures
+3. **Run migration script** to convert block data
+4. **Validate migrated content** manually
+
+### 7.2 Migration Script Template
+
+```php
+// wp-cli migration script template
+<?php
+class T3chBlockMigration {
+    public function migrate_advantages_blocks() {
+        $pages = get_posts([
+            'post_type' => 'page',
+            'numberposts' => -1,
+            'meta_query' => [
+                [
+                    'key' => '_t3ch_advantages_data',
+                    'compare' => 'EXISTS'
+                ]
+            ]
+        ]);
+
+        foreach ($pages as $page) {
+            $old_data = get_field('_t3ch_advantages_data', $page->ID);
+
+            // Convert to new ACF Composer structure
+            $new_data = [
+                'advantages_pill_text' => $old_data['pill_text'],
+                'advantages_main_title' => $old_data['title'],
+                'advantages_description' => $old_data['description'],
+                'advantages_list' => $old_data['items']
+            ];
+
+            update_field('expertise_detail_advantages', $new_data, $page->ID);
+        }
+    }
+}
+```
+
+## Success Criteria
+
+### Migration Complete When:
+
+- [ ] All T3CH blocks converted to ACF Composer blocks
+- [ ] Visual parity maintained with original designs
+- [ ] All blocks work in WordPress block editor
+- [ ] Responsive design preserved across devices
+- [ ] No performance degradation
+- [ ] Content successfully migrated
+- [ ] Documentation updated for new blocks
+
+### Benefits Achieved:
+
+- ✅ **Simplified Codebase**: No SCSS compilation or variable management
+- ✅ **Improved Performance**: Tailwind's purging removes unused CSS
+- ✅ **Better Maintainability**: Standardized utility classes
+- ✅ **Design Consistency**: Unified design system with Tailwind
+- ✅ **Modern Development**: Blade templates with ACF Composer
+- ✅ **Future-Proof**: Easy to extend and modify
+
+## Timeline Estimate
+
+- **Phase 1 (Setup)**: 1 day
+- **Phase 2 (Color/Spacing Mapping)**: 1 day
+- **Phase 3 (Block Migration - 20 blocks)**: 10-15 days
+- **Phase 4 (Testing & Validation)**: 3-5 days
+- **Phase 5 (Content Migration)**: 2-3 days
+
+**Total Estimated Time**: 17-25 days
+
+This approach maintains the visual design and functionality of T3CH blocks while modernizing the codebase with Tailwind CSS and ACF Composer patterns.
\ No newline at end of file
diff --git a/resources/css/app.css b/resources/css/app.css
index 211337c..3d9ae64 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -24,6 +24,12 @@
   --color-gray-700: #374151;
   --color-gray-800: #1f2937;
   --color-gray-900: #111827;
+
+  /* T3CH Theme Brand Colors */
+  --color-t3ch-blue: #0295DA;        /* Primary brand blue */
+  --color-t3ch-darkblue: #00283C;    /* Dark background blue */
+  --color-t3ch-orange: #d97d00;      /* CTA orange */
+  --color-t3ch-lightblue: #f0f8ff;   /* Light blue backgrounds */
   
   /* Tailwind font family mappings */
   /* --font-sans: "Lato", system-ui, sans-serif;
diff --git a/resources/css/editor.css b/resources/css/editor.css
index d76c1fa..db2a918 100644
--- a/resources/css/editor.css
+++ b/resources/css/editor.css
@@ -7,8 +7,44 @@
   --font-size-hero: 55px;        /* Hero post titles (desktop) - between text-5xl (48px) and text-6xl (60px) */
   --font-size-hero-mobile: 28px; /* Hero post titles (mobile) - between text-xl (20px) and text-2xl (24px) */
 
+  /* T3CH Theme Brand Colors - Matching app.css */
+  --color-t3ch-blue: #0295DA;        /* Primary brand blue */
+  --color-t3ch-darkblue: #00283C;    /* Dark background blue */
+  --color-t3ch-orange: #d97d00;      /* CTA orange */
+  --color-t3ch-lightblue: #f0f8ff;   /* Light blue backgrounds */
+
   /* Note: Consolidated font sizes to use Tailwind presets:
      - --font-size-small (14px) → use --wp--preset--font-size--sm
      - --font-size-title (30px) → use --wp--preset--font-size--3xl
      - --font-size-title-mobile (20px) → use --wp--preset--font-size--xl */
 }
+
+/* ACF Block Styles for Editor */
+.wp-block[data-type="acf/expertise-detail-advantages"] {
+  /* Better editor styling for readability */
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+
+/* Expertise Detail Advantages Block - Editor Styles */
+.wp-block[data-type="acf/expertise-detail-advantages"] #voordelen {
+  background-color: var(--color-t3ch-darkblue);
+  color: white;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Improve text readability in editor */
+.wp-block[data-type="acf/expertise-detail-advantages"] .bg-t3ch-darkblue {
+  background-color: var(--color-t3ch-darkblue);
+}
+
+.wp-block[data-type="acf/expertise-detail-advantages"] .bg-t3ch-blue {
+  background-color: var(--color-t3ch-blue);
+}
+
+/* Ensure text is readable in editor */
+.wp-block[data-type="acf/expertise-detail-advantages"] .text-white {
+  color: white !important;
+}
diff --git a/resources/images/icons/arrow-right.svg b/resources/images/icons/arrow-right.svg
new file mode 100644
index 0000000..b1e1dad
--- /dev/null
+++ b/resources/images/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.34615 3.28133L7.15385 1.23209C7 1.08828 6.78205 1.00885 6.55769 1.01677C6.33333 1.02469 6.12179 1.11923 5.97949 1.27318C5.83718 1.42713 5.77564 1.63077 5.81282 1.83077C5.85 2.03077 5.98205 2.20513 6.16923 2.31436L7.35385 3.28133H1.38462C1.01795 3.28133 0.666667 3.42564 0.406838 3.68547C0.147009 3.9453 0 4.29641 0 4.66308C0 5.02974 0.147009 5.38085 0.406838 5.64068C0.666667 5.90051 1.01795 6.04482 1.38462 6.04482H7.35385L6.16923 7.01179C5.98205 7.12103 5.85 7.29538 5.81282 7.49538C5.77564 7.69538 5.83718 7.89902 5.97949 8.05297C6.12179 8.20692 6.33333 8.30146 6.55769 8.30938C6.78205 8.3173 7 8.23787 7.15385 8.09405L11.5934 4.66308L7.15385 1.23209C7 1.08828 6.78205 1.00885 6.55769 1.01677Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/resources/images/icons/check-square.svg b/resources/images/icons/check-square.svg
new file mode 100644
index 0000000..1ea0532
--- /dev/null
+++ b/resources/images/icons/check-square.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.414" height="20.947" viewBox="0 0 22.414 20.947">
+  <g id="check-square_1_" data-name="check-square (1)" transform="translate(-2 -2)">
+    <path id="Path_199" data-name="Path 199" d="M9,11.368l3.158,3.158L22.684,4" transform="translate(0.316 0.053)" fill="none" stroke="#3d96da" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Path_200" data-name="Path 200" d="M21.947,12.474v7.368a2.105,2.105,0,0,1-2.105,2.105H5.105A2.105,2.105,0,0,1,3,19.842V5.105A2.105,2.105,0,0,1,5.105,3H16.684" fill="none" stroke="#3d96da" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/resources/images/icons/star.svg b/resources/images/icons/star.svg
new file mode 100644
index 0000000..fbf35b0
--- /dev/null
+++ b/resources/images/icons/star.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21">
+  <path d="M11 0L13.4 8.2H22L15.3 13.2L17.7 21.4L11 16.4L4.3 21.4L6.7 13.2L0 8.2H8.6L11 0Z" fill="none" stroke="#3d96da" stroke-width="2" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/resources/views/blocks/expertise-detail-advantages.blade.php b/resources/views/blocks/expertise-detail-advantages.blade.php
new file mode 100644
index 0000000..4500a56
--- /dev/null
+++ b/resources/views/blocks/expertise-detail-advantages.blade.php
@@ -0,0 +1,91 @@
+{{-- Expertise Detail Advantages Block --}}
+@php
+  $pill_text = get_field('advantages_pill_text') ?: 'Benefits';
+  $main_title = get_field('advantages_main_title') ?: 'What benefits do our services provide';
+  $description = get_field('advantages_description') ?: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...';
+  $advantages = get_field('advantages_list') ?: [];
+
+  // Default advantages if none are set
+  if (empty($advantages)) {
+      $advantages = [
+          [
+              'title' => 'Comprehensive insights',
+              'description' => 'Get accurate and up-to-date information that helps you make informed decisions.',
+              'icon_type' => 'checkmark'
+          ],
+          [
+              'title' => 'Reduce errors and costs',
+              'description' => 'Identify issues early to prevent surprises and save on corrections later.',
+              'icon_type' => 'checkmark'
+          ],
+          [
+              'title' => 'Faster decision making',
+              'description' => 'Make smarter choices with better data and streamlined processes.',
+              'icon_type' => 'checkmark'
+          ]
+      ];
+  }
+@endphp
+
+<section id="voordelen" class="bg-t3ch-darkblue text-white py-20 {{ $block->className ?? '' }}">
+    @if (is_admin())
+        <div class="bg-gray-100 p-4 mb-5 border-l-4 border-blue-600">
+            <strong>Expertise Detail Advantages Block</strong>
+        </div>
+    @endif
+
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {{-- Header Section: Two-Column Layout --}}
+        <div class="flex flex-col lg:flex-row gap-12 lg:gap-12 mb-16">
+            {{-- Left Column: CTA Pill Tag --}}
+            <div class="lg:w-60 flex-shrink-0">
+                <div class="bg-t3ch-blue text-white px-6 py-3 rounded-full text-sm font-medium inline-block">
+                    {{ $pill_text }}
+                </div>
+            </div>
+
+            {{-- Right Column: Title and Description --}}
+            <div class="flex-1">
+                <h2 class="text-2xl lg:text-3xl font-semibold mb-6 leading-tight">
+                    {{ $main_title }}
+                </h2>
+                <p class="text-base lg:text-lg leading-relaxed opacity-90">
+                    {{ $description }}
+                </p>
+            </div>
+        </div>
+
+        {{-- Advantages List Section --}}
+        <div class="space-y-8">
+            @if (!empty($advantages))
+                @foreach ($advantages as $index => $advantage)
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        {{-- Title Row: Icon + Title --}}
+                        <div class="flex items-center gap-4 sm:gap-6">
+                            <div class="flex-shrink-0 w-6 h-6 flex items-center justify-center"
+                                 aria-label="{{ ucfirst($advantage['icon_type'] ?? 'checkmark') }}" role="img">
+                                @if(($advantage['icon_type'] ?? 'checkmark') === 'arrow')
+                                    <img src="{{ Vite::asset('resources/images/icons/arrow-right.svg') }}" alt="Arrow" class="w-full h-full">
+                                @elseif(($advantage['icon_type'] ?? 'checkmark') === 'star')
+                                    <img src="{{ Vite::asset('resources/images/icons/star.svg') }}" alt="Star" class="w-full h-full">
+                                @else
+                                    <img src="{{ Vite::asset('resources/images/icons/check-square.svg') }}" alt="Checkmark" class="w-full h-full">
+                                @endif
+                            </div>
+                            <h3 class="text-lg lg:text-xl font-semibold leading-snug">
+                                {{ $advantage['title'] }}
+                            </h3>
+                        </div>
+
+                        {{-- Advantage Description --}}
+                        <div class="sm:ml-10">
+                            <p class="text-base leading-relaxed opacity-80">
+                                {{ $advantage['description'] }}
+                            </p>
+                        </div>
+                    </div>
+                @endforeach
+            @endif
+        </div>
+    </div>
+</section>