<!--
@type: Demo Video
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-green-500: #22c55e;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.demo-video-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.demo-video-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.section-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 3rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
line-height: 1.2;
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.video-container {
max-width: 56rem;
margin: 0 auto 4rem;
}
.video-wrapper {
position: relative;
border-radius: 0.75rem;
overflow: hidden;
background-color: var(--color-gray-900);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.video-aspect-ratio {
position: relative;
aspect-ratio: 16 / 9;
}
.video-thumbnail {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 0.75rem;
}
.play-button-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.play-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 5rem;
width: 5rem;
border-radius: 9999px;
background-color: var(--color-indigo-500);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
backdrop-filter: blur(4px);
transition: background-color 0.3s;
border: none;
cursor: pointer;
}
.play-button:hover {
background-color: var(--color-indigo-600);
}
.play-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.play-icon {
height: 3rem;
width: 3rem;
color: var(--color-white);
}
.video-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: none;
}
.video-caption {
background-color: var(--color-white);
padding: 1rem;
}
@media (min-width: 640px) {
.video-caption {
padding: 1.5rem;
}
}
.caption-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.caption-description {
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
.cta-section {
margin-top: 4rem;
text-align: center;
}
.status-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: var(--color-gray-600);
margin-bottom: 1.5rem;
}
.status-dot {
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background-color: var(--color-green-500);
margin-right: 0.5rem;
}
.cta-buttons {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
}
}
.primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: 1px solid transparent;
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-indigo-600);
transition: background-color 0.2s;
text-decoration: none;
}
.primary-button:hover {
background-color: var(--color-indigo-700);
}
.primary-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
background-color: var(--color-white);
transition: background-color 0.2s;
text-decoration: none;
}
.secondary-button:hover {
background-color: var(--color-gray-200);
}
.secondary-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.cta-note {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
</style>
<section class="demo-video-section" aria-labelledby="demo-video-heading">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<span class="header-badge">See it in action</span>
<h2 id="demo-video-heading" class="header-title">
Watch how our software simplifies your business operations
</h2>
<p class="header-description">
Take a quick tour of our platform's key features and see how easy it is to streamline your workflow
</p>
</div>
<!-- Main Video Section -->
<div class="video-container">
<div class="video-wrapper">
<!-- Video Thumbnail with Play Button -->
<div class="video-aspect-ratio">
<!-- Video thumbnail image -->
<img
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
alt="Software platform demo video thumbnail"
class="video-thumbnail"
width="1920"
height="1080"
loading="lazy"
/>
<!-- Play button overlay -->
<div class="play-button-overlay">
<button
type="button"
class="play-button"
aria-label="Play demo video"
onclick="document.getElementById('demoVideo').style.display='block'; this.style.display='none'; document.getElementById('demoVideo').play();"
>
<svg class="play-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 5v14l11-7z" />
</svg>
</button>
</div>
<!-- Actual video (hidden initially) -->
<video
id="demoVideo"
class="video-player"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video Caption -->
<div class="video-caption">
<h3 class="caption-title">Complete Platform Overview (3:45)</h3>
<p class="caption-description">See how our software helps small businesses automate tasks, manage customers, and grow revenue.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<div class="status-badge">
<span class="status-dot"></span>
<span>No credit card required</span>
</div>
<div class="cta-buttons">
<a href="#trial" class="primary-button" role="button" aria-label="Start your free trial">
Start your free trial
</a>
<a href="#demo" class="secondary-button" role="button" aria-label="Watch full demo">
Watch full demo
</a>
</div>
<p class="cta-note">Join 3,000+ small businesses already using our platform</p>
</div>
</div>
</section>
<!--
@type: Demo Video
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="demo-video-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-12">
<span class="text-lg font-semibold text-indigo-600">See it in action</span>
<h2 id="demo-video-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Watch how our software simplifies your business operations
</h2>
<p class="mt-4 text-lg text-gray-600">
Take a quick tour of our platform's key features and see how easy it is to streamline your workflow
</p>
</div>
<!-- Main Video Section -->
<div class="mx-auto max-w-4xl mb-16">
<div class="relative rounded-xl overflow-hidden bg-gray-900 shadow-xl">
<!-- Video Thumbnail with Play Button -->
<div class="aspect-w-16 aspect-h-9 relative">
<!-- Video thumbnail image -->
<img
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
alt="Software platform demo video thumbnail"
class="w-full h-full object-cover rounded-xl"
width="1920"
height="1080"
loading="lazy"
/>
<!-- Play button overlay -->
<div class="absolute inset-0 flex items-center justify-center">
<button
type="button"
class="inline-flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 shadow-xl backdrop-blur-sm hover:bg-indigo-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
aria-label="Play demo video"
onclick="document.getElementById('demoVideo').style.display='block'; this.style.display='none'; document.getElementById('demoVideo').play();"
>
<svg class="h-12 w-12 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 5v14l11-7z" />
</svg>
</button>
</div>
<!-- Actual video (hidden initially) -->
<video
id="demoVideo"
class="absolute inset-0 w-full h-full hidden"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video Caption -->
<div class="bg-white p-4 sm:p-6">
<h3 class="text-lg font-medium text-gray-900">Complete Platform Overview (3:45)</h3>
<p class="mt-1 text-sm text-gray-500">See how our software helps small businesses automate tasks, manage customers, and grow revenue.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<div class="inline-flex items-center rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-600 mb-6">
<span class="flex h-2 w-2 rounded-full bg-green-500"></span>
<span class="ml-2">No credit card required</span>
</div>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#trial" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Start your free trial">
Start your free trial
</a>
<a href="#demo" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Watch full demo">
Watch full demo
</a>
</div>
<p class="mt-4 text-sm text-gray-500">Join 3,000+ small businesses already using our platform</p>
</div>
</div>
</section>
