component.html

---
layout: home
title: Component Details
description: "View version history for a VFX Reference Platform component across all years"
---

<!-- Hero Section -->
<section class="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
  <div class="container mx-auto px-4 max-w-6xl">
    <div class="py-12 md:py-16">
      <div class="max-w-3xl mx-auto text-center">
        <a href="{{ '/compare.html' | relative_url }}" class="inline-flex items-center text-sm text-blue-600 dark:text-blue-400 hover:underline mb-4">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
          Back to Compare
        </a>
        <h1 id="component-title" class="text-4xl md:text-5xl font-bold tracking-tight mb-4">
          Component Details
        </h1>
        <p id="component-subtitle" class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed"></p>
      </div>
    </div>
  </div>
</section>

<!-- Component Content -->
<section class="container mx-auto px-4 max-w-6xl py-12">
  <div id="component-content">
    <!-- Populated by JavaScript -->
    <noscript>
      <div class="info-box">
        <p class="text-sm text-gray-700 dark:text-gray-200">JavaScript is required to view component details. Please enable JavaScript in your browser settings.</p>
      </div>
    </noscript>
  </div>
</section>

<script src="{{ '/assets/js/platform-data.js' | relative_url }}"></script>
<script src="{{ '/assets/js/component-detail.js' | relative_url }}"></script>