514 lines
14 KiB
HTML
514 lines
14 KiB
HTML
<!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>
|