<!--
@type: Demo Video
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section
class="relative py-20 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden"
>
<div class="relative z-10 container mx-auto px-4">
<div class="text-center mb-20 space-y-8">
<div class="inline-block">
<span
class="px-6 py-3 rounded-full text-sm font-medium bg-white/10 backdrop-blur-md border border-white/20 text-white"
>🎥 Product Demos</span
>
</div>
<h2 class="text-5xl md:text-7xl font-bold leading-tight">
<span
class="bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent"
>See It in</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Action</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Watch our comprehensive demo videos to see how our platform can
transform your financial operations. From basic setup to advanced
features, we'll guide you through everything.
</p>
</div>
<div class="mb-20">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-6"
>
<div class="space-y-6">
<div
class="relative aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900"
>
<img
alt="Demo Video"
class="w-full h-full object-cover"
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"
></div>
<div class="absolute inset-0 flex items-center justify-center">
<button
class="w-20 h-20 bg-white/20 backdrop-blur-md border border-white/30 rounded-full flex items-center justify-center hover:bg-white/30 hover:scale-110 transition-all duration-300"
>
<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"
class="lucide lucide-play w-8 h-8 text-white ml-1"
>
<polygon points="6 3 20 12 6 21 6 3"></polygon>
</svg>
</button>
</div>
<div class="absolute top-4 left-4 right-4">
<div class="flex items-start justify-between">
<div
class="bg-black/60 backdrop-blur-sm rounded-lg p-3 max-w-md"
>
<h3 class="text-white font-semibold mb-1">
Platform Overview
</h3>
<p class="text-gray-300 text-sm">
Get a comprehensive tour of our fintech platform and see how
it can transform your business.
</p>
</div>
<div class="flex items-center space-x-2">
<button
class="p-2 bg-black/60 backdrop-blur-sm rounded-lg text-white hover:bg-black/80 transition-colors duration-300"
>
<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"
class="lucide lucide-maximize w-4 h-4"
>
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<div class="space-y-2">
<div
class="flex items-center justify-between text-sm text-gray-400"
>
<span>0:00</span><span>3:00</span>
</div>
<div
class="relative h-2 bg-white/20 rounded-full overflow-hidden"
>
<div
class="absolute left-0 top-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-300"
style="width: 0%"
></div>
<div
class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg transition-all duration-300"
style="left: calc(0% - 8px)"
></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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"
class="lucide lucide-skip-back w-5 h-5 text-white"
>
<polygon points="19 20 9 12 19 4 19 20"></polygon>
<line x1="5" x2="5" y1="19" y2="5"></line>
</svg></button
><button
class="p-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-xl transition-all duration-300 hover:scale-105"
>
<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"
class="lucide lucide-play w-6 h-6 text-white ml-1"
>
<polygon points="6 3 20 12 6 21 6 3"></polygon>
</svg></button
><button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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"
class="lucide lucide-skip-forward w-5 h-5 text-white"
>
<polygon points="5 4 15 12 5 20 5 4"></polygon>
<line x1="19" x2="19" y1="5" y2="19"></line>
</svg>
</button>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2">
<button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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"
class="lucide lucide-volume2 w-5 h-5 text-white"
>
<polygon
points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"
></polygon>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
</svg>
</button>
<div
class="w-20 h-1 bg-white/20 rounded-full overflow-hidden"
>
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"
style="width: 80%"
></div>
</div>
</div>
<button
class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors duration-300"
>
<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"
class="lucide lucide-settings w-5 h-5 text-white"
>
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
