Skip to content

Commit 8b2dbae

Browse files
thepixelabsthepixelabs
committed
fix(landing): redesign screenshot section with hero layout and frosted glass labels
1 parent d3692c2 commit 8b2dbae

File tree

1 file changed

+204
-106
lines changed

1 file changed

+204
-106
lines changed

‎landing.html‎

Lines changed: 204 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1428,137 +1428,223 @@
14281428
/* ================================================================
14291429
SCREENSHOTS
14301430
================================================================ */
1431+
1432+
/*
1433+
* Layout: hero card full-width on top, three smaller cards below.
1434+
* Labels: frosted-glass overlay at the bottom of each image —
1435+
* one line by default, second line revealed on hover.
1436+
*/
1437+
14311438
.screenshots-grid {
14321439
display: grid;
1433-
grid-template-columns: repeat(2, 1fr);
1434-
gap: 20px;
1440+
grid-template-columns: repeat(3, 1fr);
1441+
grid-template-rows: auto auto;
1442+
gap: 14px;
1443+
}
1444+
1445+
/* Hero card spans all three columns */
1446+
.screenshot-card--hero {
1447+
grid-column: 1 / -1;
14351448
}
14361449

1450+
/* ---- Base card ---- */
14371451
.screenshot-card {
14381452
border-radius: var(--radius);
14391453
border: 1px solid var(--glass-border);
14401454
overflow: hidden;
1441-
background: var(--glass-bg);
1455+
background: var(--bg-surface);
14421456
box-shadow: var(--card-shadow);
1443-
transition: border-color 200ms, transform 250ms var(--ease-spring), box-shadow 250ms;
1457+
transition:
1458+
border-color 220ms ease,
1459+
transform 300ms var(--ease-spring),
1460+
box-shadow 300ms ease;
14441461
position: relative;
1462+
cursor: pointer;
1463+
}
1464+
1465+
/* Gradient border glow — layered behind the card */
1466+
.screenshot-card::after {
1467+
content: '';
1468+
position: absolute;
1469+
inset: -1px;
1470+
border-radius: calc(var(--radius) + 1px);
1471+
background: linear-gradient(
1472+
135deg,
1473+
rgba(99, 102, 241, 0.55) 0%,
1474+
rgba(15, 250, 122, 0.25) 100%
1475+
);
1476+
opacity: 0;
1477+
transition: opacity 320ms ease;
1478+
pointer-events: none;
1479+
z-index: -1;
14451480
}
14461481

14471482
.screenshot-card:hover {
1448-
border-color: rgba(99, 102, 241, 0.28);
1449-
transform: translateY(-3px);
1483+
border-color: rgba(99, 102, 241, 0.32);
1484+
transform: translateY(-4px);
14501485
box-shadow: var(--card-shadow-hover);
14511486
}
14521487

1453-
.screenshot-placeholder {
1454-
aspect-ratio: 16/10;
1455-
background:
1456-
linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, transparent 70%),
1457-
var(--bg-surface);
1458-
display: flex;
1459-
align-items: center;
1460-
justify-content: center;
1461-
font-family: var(--font-mono);
1462-
font-size: 0.8rem;
1463-
color: var(--text-dim);
1488+
.screenshot-card:hover::after,
1489+
.screenshot-card:focus-visible::after {
1490+
opacity: 1;
14641491
}
14651492

1466-
.screenshot-card img {
1467-
width: 100%;
1468-
height: auto;
1469-
display: block;
1493+
/* Keyboard focus ring */
1494+
.screenshot-card:focus-visible {
1495+
outline: 2px solid var(--indigo);
1496+
outline-offset: 3px;
1497+
border-color: rgba(99, 102, 241, 0.32);
1498+
transform: translateY(-4px);
1499+
box-shadow: var(--card-shadow-hover);
14701500
}
14711501

1472-
.screenshot-label {
1473-
padding: 12px 16px;
1474-
font-size: 0.85rem;
1475-
color: var(--text-muted);
1476-
border-top: 1px solid var(--border);
1477-
display: flex;
1478-
align-items: center;
1479-
gap: 10px;
1502+
/* ---- Image wrapper — clips the zoom transform ---- */
1503+
.screenshot-img-wrap {
1504+
overflow: hidden;
1505+
display: block;
1506+
position: relative;
1507+
line-height: 0; /* remove phantom gap under inline image */
14801508
}
14811509

1482-
.screenshot-label-icon {
1483-
width: 28px; height: 28px;
1484-
border-radius: 7px;
1485-
background: rgba(99, 102, 241, 0.12);
1486-
border: 1px solid rgba(99, 102, 241, 0.2);
1487-
color: var(--indigo-light);
1488-
display: flex; align-items: center; justify-content: center;
1489-
flex-shrink: 0;
1490-
transition: background 200ms, border-color 200ms;
1510+
/* Hero: wider crop; secondary cards: squarer crop to keep grid tight */
1511+
.screenshot-card--hero .screenshot-img-wrap {
1512+
aspect-ratio: 16 / 7;
14911513
}
14921514

1493-
.screenshot-label-icon svg {
1494-
width: 14px; height: 14px;
1495-
stroke: currentColor; fill: none;
1496-
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
1515+
.screenshot-card--secondary .screenshot-img-wrap {
1516+
aspect-ratio: 4 / 3;
14971517
}
14981518

1499-
.screenshot-label-text strong {
1519+
.screenshot-card img {
1520+
width: 100%;
1521+
height: 100%;
1522+
object-fit: cover;
1523+
object-position: top left;
15001524
display: block;
1501-
font-weight: 600;
1502-
font-size: 0.88rem;
1503-
color: var(--text);
1504-
letter-spacing: -0.01em;
1525+
transition: transform 500ms var(--ease-out);
1526+
will-change: transform;
15051527
}
15061528

1507-
.screenshot-label-text span {
1508-
font-size: 0.78rem;
1509-
color: var(--text-dim);
1529+
.screenshot-card:hover img,
1530+
.screenshot-card:focus-visible img {
1531+
transform: scale(1.035);
15101532
}
15111533

1512-
/* Card glow on hover/focus — GPU composited, no backdrop-filter */
1513-
.screenshot-card {
1514-
cursor: pointer;
1515-
}
1516-
1517-
.screenshot-card:hover .screenshot-label-icon,
1518-
.screenshot-card:focus-within .screenshot-label-icon {
1519-
background: rgba(99, 102, 241, 0.22);
1520-
border-color: rgba(99, 102, 241, 0.4);
1534+
/* ---- Scan-line shimmer on the hero card only ---- */
1535+
.screenshot-card--hero .screenshot-img-wrap::before {
1536+
content: '';
1537+
position: absolute;
1538+
inset: 0;
1539+
background: repeating-linear-gradient(
1540+
0deg,
1541+
transparent,
1542+
transparent 3px,
1543+
rgba(0, 0, 0, 0.07) 3px,
1544+
rgba(0, 0, 0, 0.07) 4px
1545+
);
1546+
pointer-events: none;
1547+
z-index: 1;
15211548
}
15221549

1523-
/* Animated gradient border glow on hover — pointer-events safe */
1524-
.screenshot-card::after {
1550+
/* Subtle top-to-bottom vignette so the overlay reads cleanly */
1551+
.screenshot-img-wrap::after {
15251552
content: '';
15261553
position: absolute;
1527-
inset: -1px;
1528-
border-radius: calc(var(--radius) + 1px);
1529-
background: linear-gradient(135deg,
1530-
rgba(99, 102, 241, 0) 0%,
1531-
rgba(99, 102, 241, 0.4) 50%,
1532-
rgba(15, 250, 122, 0.2) 100%
1554+
inset: 0;
1555+
background: linear-gradient(
1556+
to bottom,
1557+
transparent 55%,
1558+
rgba(7, 9, 26, 0.72) 100%
15331559
);
1534-
opacity: 0;
1535-
transition: opacity 300ms ease;
15361560
pointer-events: none;
1537-
z-index: -1;
1561+
z-index: 2;
15381562
}
15391563

1540-
.screenshot-card:hover::after,
1541-
.screenshot-card:focus-visible::after {
1542-
opacity: 1;
1564+
/* ---- Frosted-glass overlay label ---- */
1565+
.screenshot-label {
1566+
position: absolute;
1567+
bottom: 0;
1568+
left: 0;
1569+
right: 0;
1570+
z-index: 3;
1571+
padding: 10px 14px 11px;
1572+
/* backdrop-filter for browsers that support it; degrades to semi-opaque bg */
1573+
background: rgba(7, 9, 26, 0.62);
1574+
backdrop-filter: blur(10px) saturate(1.4);
1575+
-webkit-backdrop-filter: blur(10px) saturate(1.4);
1576+
border-top: 1px solid rgba(255, 255, 255, 0.07);
1577+
1578+
display: flex;
1579+
flex-direction: column;
1580+
gap: 0;
1581+
overflow: hidden;
15431582
}
15441583

1545-
/* Keyboard focus ring — matches .btn :focus-visible pattern */
1546-
.screenshot-card:focus-visible {
1547-
outline: 2px solid var(--indigo);
1548-
outline-offset: 3px;
1549-
border-color: rgba(99, 102, 241, 0.28);
1550-
transform: translateY(-3px);
1551-
box-shadow: var(--card-shadow-hover);
1584+
.screenshot-label-title {
1585+
font-size: 0.8rem;
1586+
font-weight: 600;
1587+
color: rgba(255, 255, 255, 0.9);
1588+
letter-spacing: 0.01em;
1589+
white-space: nowrap;
1590+
overflow: hidden;
1591+
text-overflow: ellipsis;
1592+
line-height: 1.3;
15521593
}
15531594

1554-
/* Ensure label-icon lights up on keyboard focus too */
1555-
.screenshot-card:focus-visible .screenshot-label-icon {
1556-
background: rgba(99, 102, 241, 0.22);
1557-
border-color: rgba(99, 102, 241, 0.4);
1595+
.screenshot-label-desc {
1596+
font-size: 0.72rem;
1597+
color: var(--text-dim);
1598+
white-space: nowrap;
1599+
overflow: hidden;
1600+
text-overflow: ellipsis;
1601+
line-height: 1.3;
1602+
/* Collapsed by default — slides in on hover */
1603+
max-height: 0;
1604+
opacity: 0;
1605+
transform: translateY(4px);
1606+
transition:
1607+
max-height 260ms var(--ease-out),
1608+
opacity 220ms ease,
1609+
transform 220ms var(--ease-out);
15581610
}
15591611

1560-
@media (max-width: 640px) {
1561-
.screenshots-grid { grid-template-columns: 1fr; }
1612+
.screenshot-card:hover .screenshot-label-desc,
1613+
.screenshot-card:focus-visible .screenshot-label-desc {
1614+
max-height: 2em;
1615+
opacity: 1;
1616+
transform: translateY(0);
1617+
}
1618+
1619+
/* ---- Responsive ---- */
1620+
@media (max-width: 840px) {
1621+
.screenshots-grid {
1622+
grid-template-columns: repeat(2, 1fr);
1623+
}
1624+
/* Hero still spans both columns */
1625+
.screenshot-card--hero {
1626+
grid-column: 1 / -1;
1627+
}
1628+
/* Third secondary card: span both columns at this breakpoint */
1629+
.screenshot-card--secondary:last-child {
1630+
grid-column: 1 / -1;
1631+
}
1632+
}
1633+
1634+
@media (max-width: 560px) {
1635+
.screenshots-grid {
1636+
grid-template-columns: 1fr;
1637+
}
1638+
.screenshot-card--hero,
1639+
.screenshot-card--secondary:last-child {
1640+
grid-column: unset;
1641+
}
1642+
.screenshot-card--hero .screenshot-img-wrap {
1643+
aspect-ratio: 16 / 9;
1644+
}
1645+
.screenshot-card--secondary .screenshot-img-wrap {
1646+
aspect-ratio: 16 / 10;
1647+
}
15621648
}
15631649

15641650
/* ================================================================
@@ -3238,37 +3324,49 @@ <h2 class="section-title">See it in action.</h2>
32383324
</div>
32393325

32403326
<div class="screenshots-grid">
3241-
<div class="screenshot-card" tabindex="0" data-reveal data-reveal-delay="1">
3242-
<img src="/screenshots/screenshot-1.jpg" alt="Agent editor drawer showing security-engineer persona configuration with tools, model selection, and persona text" loading="lazy" width="1280" height="800">
3243-
<div class="screenshot-label">
3244-
<span class="screenshot-label-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><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></span>
3245-
<span class="screenshot-label-text"><strong>Agent editor</strong><span>Configure tools, model, and persona per agent</span></span>
3327+
3328+
<!-- Hero card — full row, wider crop -->
3329+
<div class="screenshot-card screenshot-card--hero" tabindex="0" data-reveal data-reveal-delay="1">
3330+
<div class="screenshot-img-wrap">
3331+
<img src="/screenshots/screenshot-2.jpg" alt="Full dashboard view with agent list on left, task board in center showing epics and phases, and activity log on right" loading="lazy" width="1280" height="800">
3332+
</div>
3333+
<div class="screenshot-label" aria-label="Task board — Real-time epic and task tracking across all agents">
3334+
<span class="screenshot-label-title">Task board</span>
3335+
<span class="screenshot-label-desc" aria-hidden="true">Real-time epic and task tracking across all agents</span>
32463336
</div>
32473337
</div>
32483338

3249-
<div class="screenshot-card" tabindex="0" data-reveal data-reveal-delay="2">
3250-
<img src="/screenshots/screenshot-2.jpg" alt="Full dashboard view with agent list on left, task board in center showing epics and phases, and activity log on right" loading="lazy" width="1280" height="800">
3251-
<div class="screenshot-label">
3252-
<span class="screenshot-label-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg></span>
3253-
<span class="screenshot-label-text"><strong>Task board</strong><span>Real-time epic and task tracking across all agents</span></span>
3339+
<!-- Secondary cards — three columns below -->
3340+
<div class="screenshot-card screenshot-card--secondary" tabindex="0" data-reveal data-reveal-delay="2">
3341+
<div class="screenshot-img-wrap">
3342+
<img src="/screenshots/screenshot-1.jpg" alt="Agent editor drawer showing security-engineer persona configuration with tools, model selection, and persona text" loading="lazy" width="1280" height="800">
3343+
</div>
3344+
<div class="screenshot-label" aria-label="Agent editor — Configure tools, model, and persona per agent">
3345+
<span class="screenshot-label-title">Agent editor</span>
3346+
<span class="screenshot-label-desc" aria-hidden="true">Configure tools, model, and persona per agent</span>
32543347
</div>
32553348
</div>
32563349

3257-
<div class="screenshot-card" tabindex="0" data-reveal data-reveal-delay="3">
3258-
<img src="/screenshots/screenshot-3.jpg" alt="New Agent creation dialog with fields for name, description, model selection, tools, and persona text" loading="lazy" width="1280" height="800">
3259-
<div class="screenshot-label">
3260-
<span class="screenshot-label-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/><line x1="12" y1="15" x2="12" y2="21"/><line x1="9" y1="18" x2="15" y2="18"/></svg></span>
3261-
<span class="screenshot-label-text"><strong>Agent creator</strong><span>Define new agents in seconds</span></span>
3350+
<div class="screenshot-card screenshot-card--secondary" tabindex="0" data-reveal data-reveal-delay="3">
3351+
<div class="screenshot-img-wrap">
3352+
<img src="/screenshots/screenshot-3.jpg" alt="New Agent creation dialog with fields for name, description, model selection, tools, and persona text" loading="lazy" width="1280" height="800">
3353+
</div>
3354+
<div class="screenshot-label" aria-label="Agent creator — Define new agents in seconds">
3355+
<span class="screenshot-label-title">Agent creator</span>
3356+
<span class="screenshot-label-desc" aria-hidden="true">Define new agents in seconds</span>
32623357
</div>
32633358
</div>
32643359

3265-
<div class="screenshot-card" tabindex="0" data-reveal data-reveal-delay="4">
3266-
<img src="/screenshots/screenshot-4.jpg" alt="Projects browser dialog showing local git repositories that can be connected to Dispatch" loading="lazy" width="1280" height="800">
3267-
<div class="screenshot-label">
3268-
<span class="screenshot-label-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>
3269-
<span class="screenshot-label-text"><strong>Project browser</strong><span>Connect any local repo with one click</span></span>
3360+
<div class="screenshot-card screenshot-card--secondary" tabindex="0" data-reveal data-reveal-delay="4">
3361+
<div class="screenshot-img-wrap">
3362+
<img src="/screenshots/screenshot-4.jpg" alt="Projects browser dialog showing local git repositories that can be connected to Dispatch" loading="lazy" width="1280" height="800">
3363+
</div>
3364+
<div class="screenshot-label" aria-label="Project browser — Connect any local repo with one click">
3365+
<span class="screenshot-label-title">Project browser</span>
3366+
<span class="screenshot-label-desc" aria-hidden="true">Connect any local repo with one click</span>
32703367
</div>
32713368
</div>
3369+
32723370
</div>
32733371
</div>
32743372
</section>

0 commit comments

Comments
 (0)