feat(components): ActionButton stopAlert + typography type fixes
This commit is contained in:
fightrate-bot committed
1 parent
2c51fd2623
commit
bbe2919c2c
89 files changed
+75993
-9961
No files matched your search
@@ -0,0 +1,513 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>FightRate — React Native Redesign Directions</title>
|
||||
<style>
|
||||
:root {
|
||||
--ink: #11110f;
|
||||
--paper: #f5f1e8;
|
||||
--muted: #706c63;
|
||||
--line: #d9d0bf;
|
||||
--red: #d9352a;
|
||||
--amber: #f0a01f;
|
||||
--blue: #1d5cff;
|
||||
--green: #15a06e;
|
||||
--black: #050505;
|
||||
--radius-xl: 32px;
|
||||
--radius-lg: 22px;
|
||||
--radius-md: 14px;
|
||||
--shadow: 0 24px 80px rgba(17, 17, 15, 0.12);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
Segoe UI,
|
||||
sans-serif;
|
||||
line-height: 1.45;
|
||||
}
|
||||
body:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 10% 0%,
|
||||
rgba(217, 53, 42, 0.12),
|
||||
transparent 34%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 90% 20%,
|
||||
rgba(29, 92, 255, 0.1),
|
||||
transparent 36%
|
||||
),
|
||||
linear-gradient(rgba(17, 17, 15, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(17, 17, 15, 0.035) 1px, transparent 1px);
|
||||
background-size:
|
||||
auto,
|
||||
auto,
|
||||
42px 42px,
|
||||
42px 42px;
|
||||
}
|
||||
.wrap {
|
||||
width: min(1180px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 48px 0 80px;
|
||||
position: relative;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
color: var(--red);
|
||||
}
|
||||
h1 {
|
||||
font-family: Georgia, serif;
|
||||
font-size: clamp(46px, 9vw, 104px);
|
||||
line-height: 0.88;
|
||||
letter-spacing: -0.07em;
|
||||
margin: 18px 0 18px;
|
||||
max-width: 980px;
|
||||
}
|
||||
h2 {
|
||||
font-size: clamp(28px, 5vw, 56px);
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.95;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
p {
|
||||
color: var(--muted);
|
||||
font-size: 17px;
|
||||
max-width: 760px;
|
||||
}
|
||||
.hero {
|
||||
padding: 34px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(255, 255, 255, 0.46);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 999px;
|
||||
padding: 13px 18px;
|
||||
text-decoration: none;
|
||||
font-weight: 900;
|
||||
border: 1px solid var(--ink);
|
||||
color: var(--ink);
|
||||
background: #fff;
|
||||
}
|
||||
.btn.dark {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 14px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
min-height: 420px;
|
||||
border-radius: 28px;
|
||||
border: 1px solid var(--line);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 45px rgba(17, 17, 15, 0.08);
|
||||
}
|
||||
.card .top {
|
||||
padding: 18px;
|
||||
}
|
||||
.card h3 {
|
||||
font-size: 25px;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.tag {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
color: var(--muted);
|
||||
}
|
||||
.phone {
|
||||
margin: 10px auto 0;
|
||||
width: 150px;
|
||||
height: 282px;
|
||||
border-radius: 30px;
|
||||
background: #0d0d0d;
|
||||
padding: 8px;
|
||||
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
.screen {
|
||||
height: 100%;
|
||||
border-radius: 24px;
|
||||
padding: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.metric {
|
||||
font-size: 44px;
|
||||
font-weight: 950;
|
||||
letter-spacing: -0.08em;
|
||||
}
|
||||
.small {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-weight: 900;
|
||||
}
|
||||
.line {
|
||||
height: 56px;
|
||||
border-bottom: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
transform: skewX(-12deg);
|
||||
opacity: 0.65;
|
||||
}
|
||||
.rail {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.pill {
|
||||
border-radius: 999px;
|
||||
padding: 7px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
.corner .screen {
|
||||
background: #0c0b09;
|
||||
color: #f5ead8;
|
||||
}
|
||||
.corner .pill {
|
||||
background: #211e17;
|
||||
color: #ffbd37;
|
||||
}
|
||||
.corner .line {
|
||||
color: #e23b2e;
|
||||
}
|
||||
.lab .screen {
|
||||
background: #f7fbf8;
|
||||
color: #12231d;
|
||||
}
|
||||
.lab .pill {
|
||||
background: #e7f4ed;
|
||||
color: #08724c;
|
||||
}
|
||||
.lab .line {
|
||||
color: #16a06b;
|
||||
}
|
||||
.night .screen {
|
||||
background: #140409;
|
||||
color: #fff2f2;
|
||||
}
|
||||
.night .pill {
|
||||
background: #35111a;
|
||||
color: #ff596c;
|
||||
}
|
||||
.night .line {
|
||||
color: #ff2e48;
|
||||
}
|
||||
.sensor .screen {
|
||||
background: #03070a;
|
||||
color: #d6f7ff;
|
||||
}
|
||||
.sensor .pill {
|
||||
background: #06222c;
|
||||
color: #5be6ff;
|
||||
}
|
||||
.sensor .line {
|
||||
color: #5be6ff;
|
||||
}
|
||||
.minimal .screen {
|
||||
background: #f7f3eb;
|
||||
color: #15130f;
|
||||
}
|
||||
.minimal .pill {
|
||||
background: #eee4d3;
|
||||
color: #15130f;
|
||||
}
|
||||
.minimal .line {
|
||||
color: #15130f;
|
||||
}
|
||||
.matrix {
|
||||
margin-top: 42px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr repeat(5, 1fr);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.matrix div {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-right: 1px solid var(--line);
|
||||
font-size: 13px;
|
||||
}
|
||||
.matrix div:nth-child(6n) {
|
||||
border-right: 0;
|
||||
}
|
||||
.matrix .head {
|
||||
font-weight: 950;
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
}
|
||||
.score {
|
||||
font-weight: 950;
|
||||
}
|
||||
.notes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.note {
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
padding: 18px;
|
||||
}
|
||||
.note b {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@media (max-width: 1050px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.matrix {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.matrix div {
|
||||
border-right: 0;
|
||||
}
|
||||
.notes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.hero {
|
||||
padding: 22px;
|
||||
}
|
||||
.phone {
|
||||
width: 170px;
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrap">
|
||||
<section class="hero">
|
||||
<div class="eyebrow">FightRate / React Native Redesign</div>
|
||||
<h1>Antes de reconstruir, escolher a linguagem visual certa.</h1>
|
||||
<p>
|
||||
Este pacote propõe cinco direções de design system para um app de
|
||||
captura contínua de treino, histórico denso, sensor BLE e insights
|
||||
úteis. Nenhuma direção usa o design antigo como base.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<a class="btn dark" href="01-corner-command.html"
|
||||
>01 Corner Command</a
|
||||
>
|
||||
<a class="btn" href="02-athlete-lab.html">02 Athlete Lab</a>
|
||||
<a class="btn" href="03-fight-night.html">03 Fight Night</a>
|
||||
<a class="btn" href="04-sensor-instrument.html"
|
||||
>04 Sensor Instrument</a
|
||||
>
|
||||
<a class="btn" href="05-minimal-performance.html"
|
||||
>05 Minimal Performance</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid" aria-label="direções visuais">
|
||||
<article class="card corner">
|
||||
<div class="top">
|
||||
<span class="tag">tático premium</span>
|
||||
<h3>Corner Command</h3>
|
||||
<p>Treino real, córner, intensidade, preto/couro/vermelho.</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="small">captura ativa</div>
|
||||
<div class="metric">148</div>
|
||||
<div>bpm médio</div>
|
||||
<div class="line"></div>
|
||||
<div class="rail">
|
||||
<span class="pill">Z4 38%</span
|
||||
><span class="pill">Pico 181</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card lab">
|
||||
<div class="top">
|
||||
<span class="tag">ciência esportiva</span>
|
||||
<h3>Athlete Lab</h3>
|
||||
<p>Limpo, confiável, claro, excelente para dados e relatórios.</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="small">sessão</div>
|
||||
<div class="metric">72%</div>
|
||||
<div>tempo em carga</div>
|
||||
<div class="line"></div>
|
||||
<div class="rail">
|
||||
<span class="pill">TRIMP 96</span
|
||||
><span class="pill">Rec 18h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card night">
|
||||
<div class="top">
|
||||
<span class="tag">marca esportiva</span>
|
||||
<h3>Fight Night</h3>
|
||||
<p>Editorial, energia de evento, bom para virar marca pública.</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="small">rounds auto</div>
|
||||
<div class="metric">6×3</div>
|
||||
<div>alta intensidade</div>
|
||||
<div class="line"></div>
|
||||
<div class="rail">
|
||||
<span class="pill">Explosão</span
|
||||
><span class="pill">Ritmo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card sensor">
|
||||
<div class="top">
|
||||
<span class="tag">instrumentação</span>
|
||||
<h3>Sensor Instrument</h3>
|
||||
<p>BLE, telemetria, logs e confiança técnica máxima.</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="small">h003 conectado</div>
|
||||
<div class="metric">-61</div>
|
||||
<div>RSSI estável</div>
|
||||
<div class="line"></div>
|
||||
<div class="rail">
|
||||
<span class="pill">180D</span><span class="pill">2A37</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card minimal">
|
||||
<div class="top">
|
||||
<span class="tag">premium minimal</span>
|
||||
<h3>Minimal Performance</h3>
|
||||
<p>Menos interface, mais leitura. Elegante e rápido.</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="small">hoje</div>
|
||||
<div class="metric">41m</div>
|
||||
<div>capturados</div>
|
||||
<div class="line"></div>
|
||||
<div class="rail">
|
||||
<span class="pill">Média 142</span
|
||||
><span class="pill">Z5 08%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="matrix">
|
||||
<div class="head">Critério</div>
|
||||
<div class="head">Corner</div>
|
||||
<div class="head">Lab</div>
|
||||
<div class="head">Night</div>
|
||||
<div class="head">Sensor</div>
|
||||
<div class="head">Minimal</div>
|
||||
<div>Confiança para atleta</div>
|
||||
<div class="score">9</div>
|
||||
<div class="score">9</div>
|
||||
<div class="score">8</div>
|
||||
<div class="score">8</div>
|
||||
<div class="score">9</div>
|
||||
<div>Potencial de marca</div>
|
||||
<div class="score">8</div>
|
||||
<div class="score">7</div>
|
||||
<div class="score">10</div>
|
||||
<div class="score">7</div>
|
||||
<div class="score">8</div>
|
||||
<div>Clareza de dados</div>
|
||||
<div class="score">8</div>
|
||||
<div class="score">10</div>
|
||||
<div class="score">7</div>
|
||||
<div class="score">9</div>
|
||||
<div class="score">9</div>
|
||||
<div>Energia visual</div>
|
||||
<div class="score">9</div>
|
||||
<div class="score">6</div>
|
||||
<div class="score">10</div>
|
||||
<div class="score">7</div>
|
||||
<div class="score">5</div>
|
||||
<div>Viabilidade React Native</div>
|
||||
<div class="score">9</div>
|
||||
<div class="score">10</div>
|
||||
<div class="score">8</div>
|
||||
<div class="score">9</div>
|
||||
<div class="score">10</div>
|
||||
</section>
|
||||
|
||||
<section class="notes">
|
||||
<div class="note">
|
||||
<b>Recomendação forte</b
|
||||
><span
|
||||
>Escolher entre Corner Command e Athlete Lab. Corner vende melhor a
|
||||
ideia de combate; Athlete Lab resolve melhor histórico, relatórios e
|
||||
confiança.</span
|
||||
>
|
||||
</div>
|
||||
<div class="note">
|
||||
<b>Possível híbrido</b
|
||||
><span
|
||||
>Base Athlete Lab com modo treino Corner Command. Assim o app fica
|
||||
sério no relatório e intenso na captura.</span
|
||||
>
|
||||
</div>
|
||||
<div class="note">
|
||||
<b>Próximo passo</b
|
||||
><span
|
||||
>Escolher 1 direção ou 2 para fundir. Depois criar DESIGN.md final +
|
||||
tokens React Native + protótipo Expo.</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user