ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-01-30 06:12:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add video demo section to marketing page

Browse Source 
- Introduced a new video demo section to showcase features with an embedded video player.
- Styled the video container for responsive design and improved aesthetics.
- Added media queries for better display on smaller screens.
This commit is contained in:
Cody Seibert
2025-12-12 22:51:39 -05:00
parent b3a4fd2be1
commit c991d5f2f7
1 changed files with 53 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/marketing/public/index.html
View File

@@ -357,6 +357,50 @@
.download-subtitle a:hover {
text-decoration: underline;
}
/* Video Demo Section */
.video-demo {
margin-top: 3rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
}
.video-container {
position: relative;
margin-left: -2rem;
margin-right: -2rem;
width: calc(100% + 4rem);
padding-bottom: 66.67%; /* Taller aspect ratio to show more height */
background: rgba(30, 41, 59, 0.5);
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 768px) {
.video-demo {
margin-top: 2rem;
padding: 0 1rem;
}
.video-container {
margin-left: -1rem;
margin-right: -1rem;
width: calc(100% + 2rem);
}
}
</style>
</head>
<body>
@@ -382,6 +426,15 @@
<a href="https://github.com/AutoMaker-Org/automaker#getting-started" class="btn btn-secondary" target="_blank">Get Started</a>
</div>
<div class="video-demo">
<div class="video-container">
<video controls autoplay muted loop playsinline>
<source src="https://releases.automaker.app/demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="download-section" id="downloadSection" style="display: none;">
<p class="download-label">Download for your platform:</p>
<div class="download-buttons">