Template Gallery with Animated Thumbnails

<div class="max-w-7xl md:px-6 mr-auto ml-auto pr-4 pl-4">
            <div class="text-center mb-16">
                <p class="mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-300 font-geist">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette" class="lucide lucide-palette h-4 w-4 text-blue-400"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
                    Pre-built animation templates
                </p>
                <h2 class="text-3xl sm:text-4xl lg:text-5xl text-white mb-4 font-geist font-light tracking-tighter" style="">
                    Start with stunning templates
                </h2>
                <p class="text-lg text-slate-300 max-w-2xl mx-auto font-geist">
                    Choose from our library of professionally designed animation templates and customize them to match your vision.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Template 1 -->
                <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
                    <div class="aspect-video p-6 bg-neutral-900/50">
                        <div class="w-full h-full rounded-lg border border-white/10 bg-black/20 flex items-center justify-center">
                            <div class="text-center space-y-2">
                                <div class="w-12 h-12 mx-auto bg-blue-500 rounded-lg opacity-80"></div>
                                <div class="w-24 h-2 bg-white/30 rounded mx-auto"></div>
                                <div class="w-16 h-2 bg-white/20 rounded mx-auto"></div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-white mb-1 font-geist">Hero Entrance</h3>
                        <p class="text-sm text-slate-400 mb-3 font-geist">Dynamic hero section animations with staggered reveals</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-500 font-geist">12 animations</span>
                            <button class="text-xs text-blue-400 hover:text-blue-300 font-geist">Use Template</button>
                        </div>
                    </div>
                </div>

                <!-- Template 2 -->
                <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
                    <div class="aspect-video p-6 bg-neutral-900/50">
                        <div class="w-full h-full rounded-lg border border-white/10 bg-black/20 flex items-center justify-center">
                            <div class="grid grid-cols-3 gap-2">
                                <div class="w-6 h-6 bg-cyan-500 rounded opacity-80"></div>
                                <div class="w-6 h-6 bg-blue-500 rounded opacity-60"></div>
                                <div class="w-6 h-6 bg-indigo-500 rounded opacity-40"></div>
                                <div class="w-6 h-6 bg-purple-500 rounded opacity-60"></div>
                                <div class="w-6 h-6 bg-pink-500 rounded opacity-80"></div>
                                <div class="w-6 h-6 bg-rose-500 rounded opacity-40"></div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-white mb-1 font-geist">Grid Reveal</h3>
                        <p class="text-sm text-slate-400 mb-3 font-geist">Animated grid layouts with cascading item reveals</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-500 font-geist">8 animations</span>
                            <button class="text-xs text-blue-400 hover:text-blue-300 font-geist">Use Template</button>
                        </div>
                    </div>
                </div>

                <!-- Template 3 -->
                <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
                    <div class="aspect-video p-6 bg-neutral-900/50">
                        <div class="w-full h-full rounded-lg border border-white/10 bg-black/20 flex items-center justify-center">
                            <div class="space-y-3">
                                <div class="flex items-center gap-2">
                                    <div class="w-3 h-3 bg-emerald-500 rounded-full"></div>
                                    <div class="w-20 h-1 bg-white/30 rounded"></div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                    <div class="w-16 h-1 bg-white/30 rounded"></div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <div class="w-3 h-3 bg-teal-500 rounded-full"></div>
                                    <div class="w-24 h-1 bg-white/30 rounded"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-white mb-1 font-geist">List Animation</h3>
                        <p class="text-sm text-slate-400 mb-3 font-geist">Smooth list item animations with timing controls</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-500 font-geist">6 animations</span>
                            <button class="text-xs text-blue-400 hover:text-blue-300 font-geist">Use Template</button>
                        </div>
                    </div>
                </div>

                <!-- Template 4 -->
                <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
                    <div class="aspect-video p-6 bg-neutral-900/50">
                        <div class="w-full h-full rounded-lg border border-white/10 bg-black/20 flex items-center justify-center">
                            <div class="relative">
                                <div class="w-16 h-16 border-4 border-orange-500/40 rounded-full"></div>
                                <div class="absolute inset-2 w-12 h-12 bg-orange-500 rounded-full opacity-60"></div>
                                <div class="absolute inset-4 w-8 h-8 bg-red-500 rounded-full opacity-80"></div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-white mb-1 font-geist">Loading States</h3>
                        <p class="text-sm text-slate-400 mb-3 font-geist">Engaging loading animations and progress indicators</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-500 font-geist">10 animations</span>
                            <button class="text-xs text-blue-400 hover:text-blue-300 font-geist">Use Template</button>
                        </div>
                    </div>
                </div>

                <!-- Template 5 -->
                <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
                    <div class="aspect-video p-6 bg-neutral-900/50">
                        <div class="w-full h-full rounded-lg border border-white/10 bg-black/20 flex items-center justify-center">
                            <div class="space-y-2">
                                <div class="w-20 h-3 bg-purple-500 rounded opacity-80"></div>
                                <div class="w-16 h-2 bg-white/30 rounded"></div>
                                <div class="flex gap-2 mt-3">
                                    <div class="w-6 h-6 bg-indigo-500 rounded opacity-60"></div>
                                    <div class="w-6 h-6 bg-blue-500 rounded opacity-40"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-white mb-1 font-geist">Card Interactions</h3>
                        <p class="text-sm text-slate-400 mb-3 font-geist">Hover and click animations for card components</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-500 font-geist">15 animations</span>
                            <button class="text-xs text-blue-400 hover:text-blue-300 font-geist">Use Template</button>
                        </div>
                    </div>
                </div>

                <!-- Template 6 -->
                <div class="group relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
                    <div class="aspect-video p-6 bg-neutral-900/50">
                        <div class="w-full h-full rounded-lg border border-white/10 bg-black/20 flex items-center justify-center">
                            <div class="flex items-center gap-1">
                                <div class="w-2 h-8 bg-pink-500 rounded opacity-80"></div>
                                <div class="w-2 h-12 bg-rose-500 rounded opacity-60"></div>
                                <div class="w-2 h-6 bg-red-500 rounded opacity-80"></div>
                                <div class="w-2 h-10 bg-orange-500 rounded opacity-40"></div>
                                <div class="w-2 h-14 bg-yellow-500 rounded opacity-60"></div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-white mb-1 font-geist">Data Visualization</h3>
                        <p class="text-sm text-slate-400 mb-3 font-geist">Animated charts and data presentation effects</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-500 font-geist">9 animations</span>
                            <button class="text-xs text-blue-400 hover:text-blue-300 font-geist">Use Template</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-12">
                <button class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-500 transition-colors font-geist">
                    Browse All Templates
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2 h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </button>
            </div>
        </div>