Replace step cards with video slider in Speed Run section
This commit is contained in:
Oliver
+289
-30
@@ -445,7 +445,179 @@
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
SPEEDRUN (How It Works)
|
||||
VIDEO SLIDER (Speed Run)
|
||||
══════════════════════════════════════════════════════════ */
|
||||
.video-slider-wrapper {
|
||||
position: relative;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.video-slider {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.video-slider::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-slide {
|
||||
flex: 0 0 calc((100% - 40px) / 3);
|
||||
min-width: 260px;
|
||||
scroll-snap-align: start;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
}
|
||||
.video-slide:hover {
|
||||
border-color: var(--border-hi);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.video-slide a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
.video-slide a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.video-thumb {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: var(--bg-inner);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-thumb .play-btn {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.video-slide:hover .play-btn {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
.video-thumb .play-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: #fff;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 14px 16px 18px;
|
||||
}
|
||||
.video-info h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.video-info .video-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.slider-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.video-slider-wrapper:hover .slider-arrow {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.slider-arrow:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.slider-arrow-prev {
|
||||
left: -20px;
|
||||
}
|
||||
.slider-arrow-next {
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.slider-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.slider-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--border);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
padding: 0;
|
||||
}
|
||||
.slider-dot.active {
|
||||
background: var(--accent);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.slider-dot:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.video-slide {
|
||||
flex: 0 0 calc((100% - 20px) / 2);
|
||||
min-width: 0;
|
||||
}
|
||||
.slider-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.video-slide {
|
||||
flex: 0 0 85%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
SPEEDRUN (How It Works) — kept for reference
|
||||
══════════════════════════════════════════════════════════ */
|
||||
.steps {
|
||||
display: grid;
|
||||
@@ -1222,43 +1394,130 @@
|
||||
Just pick your agent, pay, and prompt.
|
||||
</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step-card">
|
||||
<div class="step-number">01</div>
|
||||
<div class="step-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="8.5" cy="7" r="4"/>
|
||||
<polyline points="17 11 19 13 23 9"/>
|
||||
</svg>
|
||||
<div class="video-slider-wrapper">
|
||||
<button class="slider-arrow slider-arrow-prev" onclick="slideSpeedrun(-1)" aria-label="Previous">‹</button>
|
||||
<div class="video-slider" id="speedrunSlider">
|
||||
<div class="video-slide">
|
||||
<a href="https://www.youtube.com/watch?v=iyxQ6Xz1Ngw" target="_blank" rel="noopener">
|
||||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/iyxQ6Xz1Ngw/hqdefault.jpg')">
|
||||
<div class="play-btn">
|
||||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||||
</div>
|
||||
<h3>1. Sign Up & Choose</h3>
|
||||
<p>Enter your email, pick your agent (Hermes or OpenClaw), and choose your region. Complete the Stripe payment — takes under 2 minutes.</p>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h4>Speed Run Example 1</h4>
|
||||
<div class="video-desc">Watch how fast you can go from zero to a working agent.</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-number">02</div>
|
||||
<div class="step-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||||
</svg>
|
||||
<div class="video-slide">
|
||||
<a href="https://www.youtube.com/watch?v=QQEgIo4Juxg" target="_blank" rel="noopener">
|
||||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/QQEgIo4Juxg/hqdefault.jpg')">
|
||||
<div class="play-btn">
|
||||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||||
</div>
|
||||
<h3>2. Configure Your Prompt</h3>
|
||||
<p>Tell your agent who it is and what it should do. Use our built-in skill library or write custom instructions. Name your agent something memorable.</p>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h4>Speed Run Example 2</h4>
|
||||
<div class="video-desc">Another demo of the Derez.ai speed-run workflow.</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-number">03</div>
|
||||
<div class="step-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
|
||||
<polyline points="2 17 12 22 22 17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>3. Deploy & Use</h3>
|
||||
<p>Your agent is provisioned on a dedicated Linux instance in seconds. SSH in, open the dashboard, or talk to it directly. Speed-run complete.</p>
|
||||
<div class="video-slide">
|
||||
<a href="https://www.youtube.com/watch?v=gb5TlGw6Uks" target="_blank" rel="noopener">
|
||||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/gb5TlGw6Uks/hqdefault.jpg')">
|
||||
<div class="play-btn">
|
||||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h4>Speed Run Example 3</h4>
|
||||
<div class="video-desc">See the full pipeline from signup to deployment.</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="video-slide">
|
||||
<a href="https://www.youtube.com/watch?v=XoitaexiCi0" target="_blank" rel="noopener">
|
||||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/XoitaexiCi0/hqdefault.jpg')">
|
||||
<div class="play-btn">
|
||||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h4>Speed Run Example 4</h4>
|
||||
<div class="video-desc">Agent configuration and deployment in minutes.</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="video-slide">
|
||||
<a href="https://www.youtube.com/watch?v=02Mw6P9ZH84" target="_blank" rel="noopener">
|
||||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/02Mw6P9ZH84/hqdefault.jpg')">
|
||||
<div class="play-btn">
|
||||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h4>Speed Run Example 5</h4>
|
||||
<div class="video-desc">Another real-time speed run on Derez.ai.</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="slider-arrow slider-arrow-next" onclick="slideSpeedrun(1)" aria-label="Next">›</button>
|
||||
<div class="slider-dots" id="speedrunDots"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const slider = document.getElementById('speedrunSlider');
|
||||
const dotsContainer = document.getElementById('speedrunDots');
|
||||
if (!slider || !dotsContainer) return;
|
||||
const slides = slider.querySelectorAll('.video-slide');
|
||||
const total = slides.length;
|
||||
if (total === 0) return;
|
||||
|
||||
for (let i = 0; i < total; i++) {
|
||||
const dot = document.createElement('button');
|
||||
dot.className = 'slider-dot' + (i === 0 ? ' active' : '');
|
||||
dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
|
||||
dot.onclick = function() {
|
||||
slides[i].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
|
||||
};
|
||||
dotsContainer.appendChild(dot);
|
||||
}
|
||||
|
||||
function updateDots() {
|
||||
const threshold = 120;
|
||||
let activeIdx = 0;
|
||||
for (let i = 0; i < total; i++) {
|
||||
const rect = slides[i].getBoundingClientRect();
|
||||
const center = rect.left + rect.width / 2;
|
||||
const sl = slider.getBoundingClientRect();
|
||||
const slCenter = sl.left + sl.width / 2;
|
||||
if (Math.abs(center - slCenter) < threshold) {
|
||||
activeIdx = i;
|
||||
}
|
||||
}
|
||||
dotsContainer.querySelectorAll('.slider-dot').forEach((d, i) => {
|
||||
d.classList.toggle('active', i === activeIdx);
|
||||
});
|
||||
}
|
||||
|
||||
slider.addEventListener('scroll', updateDots);
|
||||
updateDots();
|
||||
})();
|
||||
|
||||
function slideSpeedrun(dir) {
|
||||
const slider = document.getElementById('speedrunSlider');
|
||||
if (!slider) return;
|
||||
const slideWidth = slider.querySelector('.video-slide').offsetWidth + 20;
|
||||
slider.scrollBy({ left: slideWidth * dir, behavior: 'smooth' });
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user