Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 5-icon value prop strip between hero and features

Browse Source
This commit is contained in:
Oliver
2026-06-11 08:32:10 -03:00
parent e5ddcc699c
commit af95dc37fd
1 changed files with 110 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+110
View File
@@ -1881,6 +1881,60 @@
}
/* ══════════════════════════════════════════════════════════
STRIP 5 ICONS
══════════════════════════════════════════════════════════ */
.strip-icons {
padding: 40px 0 20px;
}
.icons-row {
display: flex;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
}
.icon-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 100px;
}
.icon-block-svg {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--accent-dim);
border: 1px solid rgba(0, 245, 255, 0.25);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.icon-block:hover .icon-block-svg {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 0 20px rgba(0, 245, 255, 0.15);
}
.icon-block-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-align: center;
letter-spacing: 0.02em;
transition: color 0.2s;
}
.icon-block:hover .icon-block-label {
color: var(--text);
}
@media (max-width: 600px) {
.icons-row { gap: 24px; }
.icon-block { min-width: 80px; }
.icon-block-svg { width: 46px; height: 46px; }
.icon-block-label { font-size: 11px; }
}
/* ══════════════════════════════════════════════════════════
FOUNDER STORY
══════════════════════════════════════════════════════════ */
.story-card {
@@ -2408,6 +2462,62 @@
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
STRIP 5 ICONS
═══════════════════════════════════════════════════════════════ -->
<section class="strip-icons">
<div class="container">
<div class="icons-row">
<div class="icon-block">
<div class="icon-block-svg">
<svg width="22" height="22" 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>
<span class="icon-block-label">5-min Setup</span>
</div>
<div class="icon-block">
<div class="icon-block-svg">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
</div>
<span class="icon-block-label">Root Access</span>
</div>
<div class="icon-block">
<div class="icon-block-svg">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
</div>
<span class="icon-block-label">One-Click Backups</span>
</div>
<div class="icon-block">
<div class="icon-block-svg">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</div>
<span class="icon-block-label">Prompt Builder</span>
</div>
<div class="icon-block">
<div class="icon-block-svg">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
</svg>
</div>
<span class="icon-block-label">Skill Integrations</span>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
FEATURES
═══════════════════════════════════════════════════════════════ -->