Comparisons

Author: simonhamp

resources/views/components/comparison/bar-chart.blade.php

@@ -0,0 +1,65 @@
+@props([
+    'items' => [],
+    'label' => '',
+    'unit' => '',
+])
+
+<div
+    x-data="{
+        animated: false,
+        items: @js($items),
+    }"
+    x-init="
+        () => {
+            motion.inView($el, () => {
+                if (!animated) {
+                    animated = true
+                    const bars = $el.querySelectorAll('[data-bar]')
+                    const values = $el.querySelectorAll('[data-value]')
+
+                    motion.animate(
+                        Array.from(bars),
+                        { scaleX: [0, 1] },
+                        { duration: 1, ease: motion.backOut, delay: motion.stagger(0.15) }
+                    )
+
+                    motion.animate(
+                        Array.from(values),
+                        { opacity: [0, 1] },
+                        { duration: 0.5, delay: motion.stagger(0.15, { start: 0.5 }) }
+                    )
+                }
+            })
+        }
+    "
+    class="w-full"
+>
+    @if ($label)
+        <div class="mb-4 text-sm font-medium text-gray-500 dark:text-gray-400">
+            {{ $label }}
+        </div>
+    @endif
+
+    <div class="space-y-4">
+        @foreach ($items as $item)
+            <div class="flex items-center gap-4">
+                <div class="w-32 shrink-0 text-sm font-medium {{ $item['highlight'] ?? false ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-700 dark:text-gray-300' }}">
+                    {{ $item['name'] }}
+                </div>
+                <div class="relative h-8 flex-1 overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800">
+                    <div
+                        data-bar
+                        class="absolute inset-y-0 left-0 origin-left rounded-lg {{ $item['highlight'] ?? false ? 'bg-gradient-to-r from-emerald-500 to-emerald-400' : 'bg-gradient-to-r from-gray-400 to-gray-300 dark:from-gray-600 dark:to-gray-500' }}"
+                        style="width: {{ $item['percentage'] }}%;"
+                    ></div>
+                    <div
+                        data-value
+                        class="absolute inset-y-0 right-3 flex items-center text-sm font-semibold opacity-0 {{ $item['highlight'] ?? false ? 'text-emerald-700 dark:text-emerald-300' : 'text-gray-600 dark:text-gray-400' }}"
+                    >
+                        {{ $item['value'] }}{{ $unit }}
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+</div>

resources/views/components/comparison/video-placeholder.blade.php

@@ -0,0 +1,42 @@
+@props([
+    'title' => 'App Boot Demo',
+    'description' => 'Video coming soon',
+])
+
+<div
+    {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl bg-gray-100 dark:bg-mirage']) }}
+>
+    <div class="aspect-video">
+        {{-- Video slot for when videos are ready --}}
+        @if (isset($video))
+            {{ $video }}
+        @else
+            {{-- Placeholder state --}}
+            <div class="flex h-full flex-col items-center justify-center gap-4 p-8 text-center">
+                {{-- Play button icon --}}
+                <div class="grid size-16 place-items-center rounded-full bg-gray-200 text-gray-400 dark:bg-gray-800 dark:text-gray-500">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-8"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z"
+                            clip-rule="evenodd"
+                        />
+                    </svg>
+                </div>
+                <div>
+                    <div class="font-medium text-gray-700 dark:text-gray-300">
+                        {{ $title }}
+                    </div>
+                    <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                        {{ $description }}
+                    </div>
+                </div>
+            </div>
+        @endif
+    </div>
+</div>

resources/views/components/footer.blade.php

@@ -299,6 +299,22 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
                                 Pricing
                             </a>
                         </li>
+                        <li>
+                            <a
+                                href="{{ route('vs-react-native-expo') }}"
+                                class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
+                            >
+                                vs React Native
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                href="{{ route('vs-flutter') }}"
+                                class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
+                            >
+                                vs Flutter
+                            </a>
+                        </li>
                         {{--
                             <li>
                             <a