<!--
@type: Demo Video
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-600: #2563eb;
--color-black: #000000;
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--transition-transform: transform 0.2s;
}
/* Reset */
* {
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";
}
/* Component Styles */
.demo-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 1rem;
}
.header {
max-width: 48rem; /* max-w-3xl */
margin: 0 auto;
text-align: center;
margin-bottom: 2rem;
}
.header h2 {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.header p {
margin-top: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--color-gray-600);
}
.video-container {
position: relative;
margin: 0 auto;
max-width: 64rem; /* max-w-5xl */
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.video-wrapper {
position: relative;
aspect-ratio: 16 / 9;
background-color: var(--color-gray-900);
}
.thumbnail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
inset: 0;
background-color: rgba(17, 24, 39, 0.4); /* bg-gray-900/40 */
}
.play-button {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
cursor: pointer;
}
.play-button-inner {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
border-radius: 9999px;
padding: 1rem;
transition: var(--transition-transform);
}
.play-button-inner:hover {
transform: scale(1.1);
}
.play-icon {
width: 3rem;
height: 3rem;
color: var(--color-blue-600);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.video-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--color-black);
display: none;
}
.video-player.active {
display: block;
}
.video-player iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.demo-section {
padding: 6rem 1.5rem;
}
.container {
padding: 0 1.5rem;
}
.header h2 {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
</style>
<section class="demo-section">
<div class="container">
<!-- Section Header -->
<div class="header">
<h2>See how it works in action</h2>
<p>Watch our 2-minute demo to see how our platform streamlines your workflow and boosts productivity.</p>
</div>
<!-- Video Container -->
<div class="video-container">
<!-- Video Thumbnail Container -->
<div class="video-wrapper">
<!-- SaaS hero image by Figcomponents (CC BY 4.0) -->
<img
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp"
alt="SaaS platform interface preview"
class="thumbnail"
/>
<!-- Dark overlay -->
<div class="overlay"></div>
<!-- Play Button -->
<button
type="button"
class="play-button"
aria-label="Play demo video"
onclick="toggleVideo()"
>
<span class="sr-only">Play video</span>
<div class="play-button-inner">
<svg class="play-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
</svg>
</div>
</button>
<!-- Video Element (Hidden by default) -->
<div id="videoPlayer" class="video-player">
<iframe
src="about:blank"
title="Product demo video"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</section>
<script>
function toggleVideo() {
const videoPlayer = document.getElementById('videoPlayer');
const iframe = videoPlayer.querySelector('iframe');
if (!videoPlayer.classList.contains('active')) {
// Show video player and set video URL
videoPlayer.classList.add('active');
// Replace with your actual video URL
iframe.src = 'https://www.youtube-nocookie.com/embed/your-video-id?autoplay=1';
} else {
// Hide video player and reset URL
videoPlayer.classList.remove('active');
iframe.src = 'about:blank';
}
}
</script>
<!--
@type: Demo Video
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="max-w-3xl mx-auto text-center mb-8">
<h2 class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
See how it works in action
</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">
Watch our 2-minute demo to see how our platform streamlines your workflow and boosts productivity.
</p>
</div>
<!-- Video Container -->
<div class="relative mx-auto max-w-5xl rounded-2xl overflow-hidden shadow-xl">
<!-- Video Thumbnail Container -->
<div class="aspect-video bg-gray-900 relative">
<!-- SaaS hero image by Figcomponents (CC BY 4.0) -->
<img
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp"
alt="SaaS platform interface preview"
class="absolute inset-0 w-full h-full object-cover"
/>
<!-- Dark overlay -->
<div class="absolute inset-0 bg-gray-900/40"></div>
<!-- Play Button -->
<button
type="button"
class="absolute inset-0 w-full h-full flex items-center justify-center"
aria-label="Play demo video"
onclick="toggleVideo()"
>
<span class="sr-only">Play video</span>
<div class="bg-white/90 backdrop-blur-sm rounded-full p-4 cursor-pointer transform transition-transform duration-200 hover:scale-110">
<svg class="w-12 h-12 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
</svg>
</div>
</button>
<!-- Video Element (Hidden by default) -->
<div id="videoPlayer" class="hidden absolute inset-0 w-full h-full bg-black">
<iframe
class="w-full h-full"
src="about:blank"
title="Product demo video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</section>
<script>
function toggleVideo() {
const videoPlayer = document.getElementById('videoPlayer');
const iframe = videoPlayer.querySelector('iframe');
if (videoPlayer.classList.contains('hidden')) {
// Show video player and set video URL
videoPlayer.classList.remove('hidden');
// Replace with your actual video URL
iframe.src = 'https://www.youtube-nocookie.com/embed/your-video-id?autoplay=1';
} else {
// Hide video player and reset URL
videoPlayer.classList.add('hidden');
iframe.src = 'about:blank';
}
}
</script>
