<!--
@type: Demo Video
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-800: #1e293b;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-white: #ffffff;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Font Sizes */
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* Border Radius */
--radius-lg: 0.5rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
/* Max Widths */
--max-w-3xl: 48rem;
--max-w-4xl: 56rem;
--max-w-7xl: 80rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.demo-video-section {
background-color: var(--color-slate-50);
padding: var(--spacing-16) var(--spacing-4);
}
.section-header {
text-align: center;
max-width: var(--max-w-3xl);
margin: 0 auto var(--spacing-12);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: var(--text-lg);
color: var(--color-slate-600);
}
.video-container {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
background-color: var(--color-white);
border: 1px solid var(--color-slate-200);
max-width: var(--max-w-4xl);
margin: 0 auto;
}
.video-wrapper {
position: relative;
aspect-ratio: 16 / 9;
background-color: var(--color-slate-800);
}
.video-thumbnail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-indigo-600);
color: var(--color-white);
border-radius: var(--radius-full);
padding: var(--spacing-4);
border: none;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
line-height: 1;
}
.play-button:hover {
background-color: var(--color-indigo-700);
transform: translate(-50%, -50%) scale(1.1);
}
.play-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-600);
}
.play-button svg {
width: 3rem;
height: 3rem;
}
.video-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-info {
padding: var(--spacing-6);
}
.video-title {
font-size: var(--text-xl);
font-weight: 600;
color: var(--color-slate-900);
margin-bottom: var(--spacing-1);
}
.video-meta {
color: var(--color-slate-600);
}
.action-buttons {
display: flex;
gap: var(--spacing-4);
margin-top: var(--spacing-4);
}
.action-button {
display: inline-flex;
align-items: center;
color: var(--color-indigo-600);
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
background: transparent;
border: none;
cursor: pointer;
font-size: var(--text-lg);
font-weight: 500;
}
.action-button:hover {
color: var(--color-indigo-700);
}
.action-button svg {
width: 1.25rem;
height: 1.25rem;
margin-right: var(--spacing-2);
}
.video-description {
border-top: 1px solid var(--color-slate-200);
padding: var(--spacing-6);
}
.description-title {
font-weight: 500;
color: var(--color-slate-900);
margin-bottom: var(--spacing-2);
}
.features-list {
list-style: none;
display: grid;
gap: var(--spacing-2) var(--spacing-8);
}
.feature-item {
display: flex;
align-items: flex-start;
color: var(--color-slate-600);
}
.feature-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-indigo-600);
margin-right: var(--spacing-2);
margin-top: 0.125rem;
flex-shrink: 0;
}
.cta-container {
margin-top: var(--spacing-8);
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.primary-button {
display: inline-block;
background-color: var(--color-indigo-600);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: 500;
text-align: center;
transition: background-color 0.2s;
width: 100%;
}
.primary-button:hover {
background-color: var(--color-indigo-700);
}
.secondary-button {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-slate-700);
font-weight: 500;
text-decoration: none;
width: 100%;
border: none;
cursor: pointer;
font-weight: 500;
text-align: center;
transition: background-color 0.2s;
}
.secondary-button:hover {
color: var(--color-slate-900);
}
.secondary-button svg {
width: 1.25rem;
height: 1.25rem;
margin-right: var(--spacing-2);
}
.hidden {
display: none;
}
/* Responsive Styles */
@media (min-width: 640px) {
.demo-video-section {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
.section-title {
font-size: var(--text-4xl);
}
.video-info {
padding: var(--spacing-8);
}
.video-info-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.cta-container {
flex-direction: row;
align-items: center;
}
.primary-button,
.secondary-button {
width: auto;
}
}
@media (min-width: 768px) {
.features-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.demo-video-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
}
</style>
<section class="demo-video-section">
<div>
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">See Our Platform in Action</h2>
<p class="section-description">Discover how our business management solution streamlines operations and boosts productivity with this comprehensive product demonstration.</p>
</div>
<!-- Video Container -->
<div class="video-container">
<!-- Video Thumbnail -->
<div class="video-wrapper">
<div class="video-content">
<!-- Video Thumbnail Image -->
<img id="videoThumbnail" src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" alt="Business software demonstration" class="video-thumbnail" />
<!-- Play Button -->
<button id="playButton" class="play-button" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
<!-- Actual Video (Hidden Initially) -->
<div id="videoContainer" class="hidden">
<iframe id="videoPlayer" class="video-iframe" src="" title="Product demonstration video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- Video Info -->
<div class="video-info">
<div class="video-info-wrapper">
<div>
<h3 class="video-title">Complete Platform Walkthrough</h3>
<p class="video-meta">5:24 min • Updated June 2023</p>
</div>
<div class="action-buttons">
<button class="action-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
Share
</button>
<a href="#" class="action-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download
</a>
</div>
</div>
</div>
<!-- Video Description -->
<div class="video-description">
<h4 class="description-title">What You'll Learn:</h4>
<ul class="features-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Dashboard navigation and customization
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Client management workflow
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Financial reporting tools
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Team collaboration features
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated workflow setup
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Integration with third-party tools
</li>
</ul>
<!-- CTA -->
<div class="cta-container">
<a href="#" class="primary-button">
Schedule a Live Demo
</a>
<a href="#" class="secondary-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
View Documentation
</a>
</div>
</div>
</div>
</div>
</section>
<script>
// Simple video player functionality
document.addEventListener('DOMContentLoaded', function() {
const playButton = document.getElementById('playButton');
const videoThumbnail = document.getElementById('videoThumbnail');
const videoContainer = document.getElementById('videoContainer');
const videoPlayer = document.getElementById('videoPlayer');
// YouTube video embed URL - replace with your actual video URL
const videoUrl = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1";
playButton.addEventListener('click', function() {
// Set the video source
videoPlayer.src = videoUrl;
// Hide thumbnail and play button, show video
videoThumbnail.classList.add('hidden');
playButton.classList.add('hidden');
videoContainer.classList.remove('hidden');
});
});
</script>
<!--
@type: Demo Video
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl mb-4">See Our Platform in Action</h2>
<p class="text-lg text-slate-600">Discover how our business management solution streamlines operations and boosts productivity with this comprehensive product demonstration.</p>
</div>
<!-- Video Container -->
<div class="relative rounded-2xl overflow-hidden shadow-xl bg-white border border-slate-200 max-w-4xl mx-auto">
<!-- Video Thumbnail -->
<div class="aspect-video bg-slate-800 relative">
<!-- Video Placeholder - Replace with actual video embed -->
<div class="absolute inset-0 flex items-center justify-center">
<!-- Video Thumbnail Image -->
<img id="videoThumbnail" src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" alt="Business software demonstration" class="absolute inset-0 w-full h-full object-cover" />
<!-- Play Button -->
<button id="playButton" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-4 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
<!-- Actual Video (Hidden Initially) -->
<div id="videoContainer" class="hidden absolute inset-0">
<iframe id="videoPlayer" class="w-full h-full" src="" title="Product demonstration video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- Video Info -->
<div class="p-6 sm:p-8">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h3 class="text-xl font-semibold text-slate-900">Complete Platform Walkthrough</h3>
<p class="text-slate-600 mt-1">5:24 min • Updated June 2023</p>
</div>
<div class="flex items-center gap-4">
<button class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
Share
</button>
<a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download
</a>
</div>
</div>
</div>
<!-- Video Description -->
<div class="px-6 pb-6 sm:px-8 sm:pb-8 border-t border-slate-200 pt-6">
<h4 class="font-medium text-slate-900 mb-2">What You'll Learn:</h4>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2 text-slate-600">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Dashboard navigation and customization
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Client management workflow
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Financial reporting tools
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Team collaboration features
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated workflow setup
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Integration with third-party tools
</li>
</ul>
<!-- CTA -->
<div class="mt-8 flex flex-col sm:flex-row gap-4 items-center">
<a href="#" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium text-center w-full sm:w-auto">
Schedule a Live Demo
</a>
<a href="#" class="text-slate-700 hover:text-slate-900 font-medium flex items-center justify-center w-full sm:w-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
View Documentation
</a>
</div>
</div>
</div>
</div>
</section>
<script>
// Simple video player functionality
document.addEventListener('DOMContentLoaded', function() {
const playButton = document.getElementById('playButton');
const videoThumbnail = document.getElementById('videoThumbnail');
const videoContainer = document.getElementById('videoContainer');
const videoPlayer = document.getElementById('videoPlayer');
// YouTube video embed URL - replace with your actual video URL
const videoUrl = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1";
playButton.addEventListener('click', function() {
// Set the video source
videoPlayer.src = videoUrl;
// Hide thumbnail and play button, show video
videoThumbnail.classList.add('hidden');
playButton.classList.add('hidden');
videoContainer.classList.remove('hidden');
});
});
</script>
