<!--
@type: Demo Video
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-400: #60a5fa;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-black: #000000;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* 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-gray-900);
padding: var(--spacing-24) var(--spacing-4);
}
.section-header {
text-align: center;
max-width: 48rem;
margin: 0 auto var(--spacing-16) auto;
}
.section-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: var(--spacing-4);
}
.section-description {
color: var(--color-gray-300);
font-size: 1.125rem;
}
.video-container {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
}
.video-thumbnail {
position: relative;
cursor: pointer;
aspect-ratio: 16/9;
}
.video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(17, 24, 39, 0.4);
transition: background-color 0.2s;
}
.video-thumbnail:hover .play-overlay {
background-color: rgba(17, 24, 39, 0.3);
}
.play-button {
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: var(--color-blue-600);
border: none;
cursor: pointer;
transition: all 0.2s;
}
.play-button:hover {
background-color: var(--color-blue-700);
transform: scale(1.1);
}
.play-button svg {
width: 2.5rem;
height: 2.5rem;
color: var(--color-white);
}
.video-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--color-black);
display: none;
}
.video-player.active {
display: block;
}
.video-player video {
width: 100%;
height: 100%;
}
.close-button {
position: absolute;
top: var(--spacing-4);
right: var(--spacing-4);
padding: var(--spacing-2);
border-radius: 9999px;
background-color: var(--color-gray-800);
border: none;
cursor: pointer;
color: var(--color-white);
transition: background-color 0.2s;
}
.close-button:hover {
background-color: var(--color-gray-700);
}
.close-button svg {
width: 1.5rem;
height: 1.5rem;
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
margin-top: var(--spacing-12);
}
.feature-card {
padding: var(--spacing-6);
border-radius: 0.75rem;
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
}
.feature-icon {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background-color: rgba(37, 99, 235, 0.1);
color: var(--color-blue-400);
margin-bottom: var(--spacing-4);
}
.feature-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: var(--spacing-2);
}
.feature-description {
color: var(--color-gray-300);
}
.cta-section {
margin-top: var(--spacing-12);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-8);
border-radius: 0.5rem;
background-color: var(--color-blue-600);
color: var(--color-white);
text-decoration: none;
font-weight: 500;
transition: background-color 0.2s;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button svg {
width: 1.25rem;
height: 1.25rem;
margin-left: var(--spacing-2);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.demo-section {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
.section-title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.demo-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
}
</style>
<section class="demo-section">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">
See Our Platform in Action
</h2>
<p class="section-description">
Watch how our marketing automation platform helps businesses scale their growth and achieve remarkable results.
</p>
</div>
<!-- Video Player Container -->
<div class="video-container">
<!-- Video Thumbnail Container -->
<div class="video-thumbnail">
<!-- Marketing image by Pexels (Free) -->
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
alt="Marketing platform demo preview"
/>
<!-- Play Button Overlay -->
<div class="play-overlay">
<button
class="play-button"
aria-label="Play demo video"
onclick="toggleVideo()"
>
<svg fill="currentColor" viewBox="0 0 20 20">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
</svg>
</button>
</div>
</div>
<!-- Video Element -->
<div id="videoPlayer" class="video-player">
<video
id="demoVideo"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Close Button -->
<button
class="close-button"
onclick="toggleVideo()"
aria-label="Close video player"
>
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- Video Features Grid -->
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="feature-title">Lightning Fast</h3>
<p class="feature-description">Experience our platform's incredible speed and performance in real-time scenarios.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="feature-title">Enterprise Security</h3>
<p class="feature-description">Built with top-tier security measures to protect your valuable marketing data.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
</svg>
</div>
<h3 class="feature-title">24/7 Support</h3>
<p class="feature-description">Get expert assistance whenever you need it with our round-the-clock support team.</p>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#schedule-demo" class="cta-button">
Schedule a Live Demo
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
</div>
</section>
<script>
function toggleVideo() {
const thumbnail = document.querySelector('.video-thumbnail');
const videoPlayer = document.getElementById('videoPlayer');
const video = document.getElementById('demoVideo');
if (!videoPlayer.classList.contains('active')) {
videoPlayer.classList.add('active');
thumbnail.style.display = 'none';
// Replace with actual video source when available
video.src = 'https://example.com/demo-video.mp4';
video.play();
} else {
videoPlayer.classList.remove('active');
thumbnail.style.display = 'block';
video.pause();
video.src = '';
}
}
</script>
<!--
@type: Demo Video
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-24 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-16">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
See Our Platform in Action
</h2>
<p class="text-gray-300 text-lg">
Watch how our marketing automation platform helps businesses scale their growth and achieve remarkable results.
</p>
</div>
<!-- Video Player Container -->
<div class="relative rounded-2xl overflow-hidden shadow-2xl bg-gray-800 border border-gray-700">
<!-- Video Thumbnail Container -->
<div class="aspect-video relative group cursor-pointer" onclick="toggleVideo()">
<!-- Marketing image by Pexels (Free) -->
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
alt="Marketing platform demo preview"
class="w-full h-full object-cover"
/>
<!-- Play Button Overlay -->
<div class="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-40 group-hover:bg-opacity-30 transition-all">
<button
class="w-20 h-20 flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 transition-colors group-hover:scale-110 transform duration-200 cursor-pointer"
aria-label="Play demo video"
>
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
</svg>
</button>
</div>
</div>
<!-- Video Element (Initially Hidden) -->
<div id="videoPlayer" class="hidden absolute inset-0 w-full h-full bg-black">
<video
id="demoVideo"
class="w-full h-full"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Close Button -->
<button
onclick="toggleVideo()"
class="absolute top-4 right-4 p-2 rounded-full bg-gray-800 hover:bg-gray-700 text-white transition-colors"
aria-label="Close video player"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- Video Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-gray-800 border border-gray-700">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
<p class="text-gray-300">Experience our platform's incredible speed and performance in real-time scenarios.</p>
</div>
<div class="p-6 rounded-xl bg-gray-800 border border-gray-700">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Enterprise Security</h3>
<p class="text-gray-300">Built with top-tier security measures to protect your valuable marketing data.</p>
</div>
<div class="p-6 rounded-xl bg-gray-800 border border-gray-700">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-400 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-2">24/7 Support</h3>
<p class="text-gray-300">Get expert assistance whenever you need it with our round-the-clock support team.</p>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 text-center">
<a
href="#schedule-demo"
class="inline-flex items-center px-8 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors"
>
Schedule a Live Demo
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
</section>
<script>
function toggleVideo() {
const thumbnail = document.querySelector('.aspect-video');
const videoPlayer = document.getElementById('videoPlayer');
const video = document.getElementById('demoVideo');
if (videoPlayer.classList.contains('hidden')) {
videoPlayer.classList.remove('hidden');
thumbnail.classList.add('hidden');
// Replace with actual video source when available
video.src = 'https://example.com/demo-video.mp4';
video.play();
} else {
videoPlayer.classList.add('hidden');
thumbnail.classList.remove('hidden');
video.pause();
video.src = '';
}
}
</script>
