Design for AILinha de loja de apps
Linha de loja de apps: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Focus TimerProductivity · 4.8 ★ (2.1k)
Get
CSS
.card-097 {
display: flex;
align-items: center;
gap: 14px;
width: 340px;
padding: 12px 14px;
background: #fff;
border-radius: 16px;
font-family: system-ui,sans-serif;
color: #1c1c1e;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
transition: box-shadow .2s
}
.card-097:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.12)
}
.card-097__icon {
flex: none;
width: 60px;
height: 60px;
border-radius: 14px;
background: linear-gradient(135deg,#ff9f0a,#ff375f);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06)
}
.card-097__text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px
}
.card-097 b {
font-size: 15px
}
.card-097__text span {
font-size: 12px;
color: #8e8e93
}
.card-097 a {
padding: 6px 18px;
border-radius: 999px;
background: #f2f2f7;
color: #007aff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
transition: background .15s,color .15s
}
.card-097 a:hover {
background: #007aff;
color: #fff
}
.card-097 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-097">
<span class="card-097__icon"></span>
<div class="card-097__text"><b>Focus Timer</b><span>Productivity · 4.8 ★ (2.1k)</span></div>
<a href="#">Get</a>
</article>Prompt
Construa um card em linha estilo loja de apps de 340px: branco, raio de 16px, padding 12px 14px, sombra tênue que se aprofunda no hover. À esquerda um ícone de app de 60px com raio de 14px e gradiente de 135deg #ff9f0a para #ff375f com uma borda inset finíssima. No meio: nome do app 15px bold sobre uma linha 12px #8e8e93 "Productivity · 4.8 ★ (2.1k)". À direita um botão pílula "GET" em texto azul #007aff sobre #f2f2f7 que preenche azul com texto branco no hover.