From acc8723de6b7fd6abf3dcfa1f035b3452d8de265 Mon Sep 17 00:00:00 2001 From: Oliver Date: Sat, 6 Jun 2026 17:55:20 -0300 Subject: [PATCH] Replace step cards with video slider in Speed Run section --- index.html | 321 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 290 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 6b4103b..b948356 100644 --- a/index.html +++ b/index.html @@ -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.

-
-
-
01
-
- - - - - +
+ +
+
+ +
+
+ +
+
+
+

Speed Run Example 1

+
Watch how fast you can go from zero to a working agent.
+
+
-

1. Sign Up & Choose

-

Enter your email, pick your agent (Hermes or OpenClaw), and choose your region. Complete the Stripe payment — takes under 2 minutes.

-
-
-
02
-
- - - +
+ +
+
+ +
+
+
+

Speed Run Example 2

+
Another demo of the Derez.ai speed-run workflow.
+
+
-

2. Configure Your Prompt

-

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.

-
-
-
03
-
- - - - +
+ +
+
+ +
+
+
+

Speed Run Example 3

+
See the full pipeline from signup to deployment.
+
+ +
+ +
+ +
+
+ +
+
+
+

Speed Run Example 4

+
Agent configuration and deployment in minutes.
+
+ +
+ +
+ +
+
+ +
+
+
+

Speed Run Example 5

+
Another real-time speed run on Derez.ai.
+
+
-

3. Deploy & Use

-

Your agent is provisioned on a dedicated Linux instance in seconds. SSH in, open the dashboard, or talk to it directly. Speed-run complete.

+ +
+ +