<!--
@type: Demo Video
@industry: Product
@style: Light
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-50: #eff6ff;
--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-20: 5rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
--content-max-width: 48rem; /* max-w-3xl */
}
/* 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-section {
background-color: var(--color-gray-50);
padding: var(--spacing-20) var(--spacing-4);
}
.demo-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.section-header {
max-width: var(--content-max-width);
margin: 0 auto;
text-align: center;
margin-bottom: var(--spacing-12);
}
.section-label {
color: var(--color-blue-600);
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
margin-top: var(--spacing-2);
margin-bottom: var(--spacing-4);
}
.section-description {
color: var(--color-gray-600);
font-size: 1.125rem;
font-weight: 400;
}
.video-container {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
}
.video-thumbnail {
aspect-ratio: 16/9;
position: relative;
cursor: pointer;
}
.video-thumbnail:hover .thumbnail-overlay {
background-color: rgba(31, 41, 55, 0.2);
}
.video-thumbnail:hover .play-button {
transform: scale(1.05);
}
.thumbnail-placeholder {
background-color: var(--color-gray-200);
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-500);
position: absolute;
inset: 0;
}
.placeholder-icon {
width: 5rem;
height: 5rem;
opacity: 0.3;
}
.thumbnail-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(31, 41, 55, 0.1);
transition: background-color 0.2s ease;
}
.play-button {
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: var(--color-white);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
cursor: pointer;
border: none;
}
.play-button:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.play-icon {
width: 2.5rem;
height: 2.5rem;
color: var(--color-blue-600);
}
.video-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--color-black);
display: none;
}
.video-element {
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-white);
color: var(--color-gray-800);
transition: background-color 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.close-button:hover {
background-color: var(--color-gray-100);
}
.close-icon {
width: 1.5rem;
height: 1.5rem;
}
.features-grid {
margin-top: var(--spacing-16);
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.feature-card {
padding: var(--spacing-8);
border-radius: 1rem;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s ease;
}
.feature-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.feature-icon-wrapper {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background-color: var(--color-blue-50);
color: var(--color-blue-600);
margin-bottom: var(--spacing-6);
}
.demo-video-feature-icon {
width: 1.5rem;
height: 1.5rem;
}
.feature-title {
font-size: 1.25rem;
font-weight: 400;
color: var(--color-gray-800);
margin-bottom: var(--spacing-3);
}
.feature-description {
color: var(--color-gray-600);
font-weight: 300;
}
.demo-video-cta-section {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
justify-content: center;
margin-top: var(--spacing-12);
}
.demo-video-cta-button {
display: inline-flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.demo-video-cta-button-secondary {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
color: var(--color-gray-800);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.demo-video-cta-button-secondary:hover {
background-color: var(--color-gray-50);
}
.demo-video-cta-button-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.demo-video-cta-button-primary:hover {
background-color: var(--color-blue-700);
}
.demo-video-cta-icon {
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;
}
.demo-video-cta-section {
flex-direction: row;
}
}
@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">
<div class="demo-container">
<!-- Section Header -->
<div class="section-header">
<span class="section-label">Product Showcase</span>
<h2 class="section-title">See Our Product in Action</h2>
<p class="section-description">Watch how our intuitive interface and powerful features help you achieve more in less time.</p>
</div>
<!-- Video Player Container -->
<div class="video-container">
<!-- Video Thumbnail Container -->
<div class="video-thumbnail" onclick="toggleProductVideo()">
<!-- Product image -->
<div class="thumbnail-placeholder">
<svg xmlns="http://www.w3.org/2000/svg" class="placeholder-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
</svg>
</div>
<!-- Play Button Overlay -->
<div class="thumbnail-overlay">
<button class="play-button" aria-label="Play product demo video">
<svg class="play-icon" 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="productVideoPlayer" class="video-player">
<video
id="productDemoVideo"
class="video-element"
controls
preload="none"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Close Button -->
<button
onclick="toggleProductVideo()"
class="close-button"
aria-label="Close video player"
>
<svg class="close-icon" 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>
<!-- Features List -->
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon-wrapper">
<svg class="demo-video-feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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">Quality Assurance</h3>
<p class="feature-description">Our product undergoes rigorous testing to ensure reliability and performance in all scenarios.</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<svg class="demo-video-feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="feature-title">Intuitive Design</h3>
<p class="feature-description">Thoughtfully designed interface that makes complex tasks simple and enhances user experience.</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<svg class="demo-video-feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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">Dedicated Support</h3>
<p class="feature-description">Our customer success team is always ready to help you get the most out of our product.</p>
</div>
</div>
<!-- CTA Section -->
<div class="demo-video-cta-section">
<a href="#request-demo" class="demo-video-cta-button demo-video-cta-button-secondary">
Request a Custom Demo
<svg class="demo-video-cta-icon" 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>
<a href="#product-tour" class="demo-video-cta-button demo-video-cta-button-primary">
Take Product Tour
<svg class="demo-video-cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</a>
</div>
</div>
</section>
<script>
function toggleProductVideo() {
const videoPlayer = document.getElementById('productVideoPlayer');
const video = document.getElementById('productDemoVideo');
if (videoPlayer.style.display === 'none' || !videoPlayer.style.display) {
videoPlayer.style.display = 'block';
// Replace with actual video source when available
video.src = 'https://example.com/product-demo.mp4';
video.play();
} else {
videoPlayer.style.display = 'none';
video.pause();
video.src = '';
}
}
</script>
<!--
@type: Demo Video
@industry: Product
@style: Light
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Section Header -->
<div class="max-w-3xl mx-auto text-center mb-12">
<span class="text-blue-600 font-medium text-sm uppercase tracking-wider">Product Showcase</span>
<h2 class="text-3xl sm:text-4xl font-medium text-gray-800 mt-2 mb-4">
See Our Product in Action
</h2>
<p class="text-gray-600 text-lg font-normal">
Watch how our intuitive interface and powerful features help you achieve more in less time.
</p>
</div>
<!-- Video Player Container -->
<div class="relative rounded-2xl overflow-hidden shadow-sm bg-white border border-gray-200">
<!-- Video Thumbnail Container -->
<div class="aspect-video relative group cursor-pointer" onclick="toggleProductVideo()">
<!-- Product image -->
<div class="bg-gray-200 aspect-video flex items-center justify-center text-gray-500 absolute inset-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
</svg>
</div>
<!-- Play Button Overlay -->
<div class="absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-10 group-hover:bg-opacity-20 transition-all">
<button
class="w-20 h-20 flex items-center justify-center rounded-full bg-white shadow-lg hover:shadow-xl transition-all group-hover:scale-105 transform duration-200 cursor-pointer"
aria-label="Play product demo video"
>
<svg class="w-10 h-10 text-blue-600" 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="productVideoPlayer" class="hidden absolute inset-0 w-full h-full bg-black">
<video
id="productDemoVideo"
class="w-full h-full"
controls
preload="none"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Close Button -->
<button
onclick="toggleProductVideo()"
class="absolute top-4 right-4 p-2 rounded-full bg-white hover:bg-gray-100 text-gray-800 transition-colors shadow-sm"
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>
<!-- Features List -->
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="p-8 rounded-2xl bg-white border border-gray-200 shadow-sm transition-all hover:shadow-md">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-50 text-blue-600 mb-6">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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-normal text-gray-800 mb-3">Quality Assurance</h3>
<p class="text-gray-600 font-light">Our product undergoes rigorous testing to ensure reliability and performance in all scenarios.</p>
</div>
<div class="p-8 rounded-2xl bg-white border border-gray-200 shadow-sm transition-all hover:shadow-md">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-50 text-blue-600 mb-6">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-xl font-normal text-gray-800 mb-3">Intuitive Design</h3>
<p class="text-gray-600 font-light">Thoughtfully designed interface that makes complex tasks simple and enhances user experience.</p>
</div>
<div class="p-8 rounded-2xl bg-white border border-gray-200 shadow-sm transition-all hover:shadow-md">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-50 text-blue-600 mb-6">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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-normal text-gray-800 mb-3">Dedicated Support</h3>
<p class="text-gray-600 font-light">Our customer success team is always ready to help you get the most out of our product.</p>
</div>
</div>
<!-- CTA Section -->
<div class="flex flex-col sm:flex-row gap-4 justify-center mt-12">
<a
href="#request-demo"
class="inline-flex items-center px-6 py-3 rounded-lg bg-white border border-gray-200 text-gray-800 hover:bg-gray-50 shadow-sm font-medium transition-colors"
>
Request a Custom 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>
<a
href="#product-tour"
class="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm font-medium transition-colors"
>
Take Product Tour
<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="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</a>
</div>
</div>
</section>
<script>
function toggleProductVideo() {
const thumbnail = document.querySelector('.aspect-video');
const videoPlayer = document.getElementById('productVideoPlayer');
const video = document.getElementById('productDemoVideo');
if (videoPlayer.classList.contains('hidden')) {
videoPlayer.classList.remove('hidden');
// Replace with actual video source when available
video.src = 'https://example.com/product-demo.mp4';
video.play();
} else {
videoPlayer.classList.add('hidden');
video.pause();
video.src = '';
}
}
</script>
