20:I[308070,["/_next/static/immutable/chunks/1yw-f7i4zk7eo.js","/_next/static/immutable/chunks/3utrwpsx-evbf.js","/_next/static/immutable/chunks/0w954aec0x70b.js","/_next/static/immutable/chunks/2q2-50wucosqf.js","/_next/static/immutable/chunks/0-dp_75f00lnc.js","/_next/static/immutable/chunks/3_q-pxr2xd-bn.js","/_next/static/immutable/chunks/3tzc7qb-60-jf.js","/_next/static/immutable/chunks/2_-m61qht55m4.js","/_next/static/immutable/chunks/1-rzlxu1tecrf.js","/_next/static/immutable/chunks/3iust3ay2agrn.js"],"ModalEntrar"] 21:T737,

22:Tf01,.ceu { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 20% 0%, #2a1a5e66, transparent 55%), radial-gradient(ellipse at 90% 100%, #0b3a6b66, transparent 55%), #04050d; } .ceu::before, .ceu::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 70px 90px, #cfd8ff, transparent), radial-gradient(1.5px 1.5px at 130px 20px, #fff, transparent), radial-gradient(1px 1px at 160px 140px, #ffd9f2, transparent), radial-gradient(2px 2px at 100px 170px, #fff, transparent); background-size: 190px 190px; animation: pisca 4s ease-in-out infinite; } .ceu::after { background-size: 130px 130px; background-position: 40px 60px; opacity: .6; animation-delay: -2s; animation-duration: 6s; } @keyframes pisca { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .ceu::before, .ceu::after { animation: none; } } .caixa { position: relative; box-sizing: border-box; width: 440px; padding: 40px 44px; font: 14px/1.4 system-ui, sans-serif; color: #e8ebff; text-align: center; } .caixa * { box-sizing: border-box; } .planeta { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #6d5cff, #2ec5ff); box-shadow: 0 0 40px #6d5cff88; } h2 { margin: 16px 0 4px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; } .sub { margin: 0 0 22px; color: #8d93b8; } .campo { display: block; margin-bottom: 12px; text-align: left; } .campo span { display: block; margin-bottom: 6px; font-size: 12px; color: #a3a9cc; } .campo input { width: 100%; padding: 12px 14px; border: 1px solid #ffffff22; border-radius: 12px; background: #ffffff0d; color: #fff; font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; } .campo input::placeholder { color: #666c92; } .campo input:focus { border-color: #7b6dff; box-shadow: 0 0 0 4px #7b6dff33; } .linha { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 18px; font-size: 13px; } .linha a, .rodape a { color: #9fb2ff; text-decoration: none; } .linha a:hover, .rodape a:hover { text-decoration: underline; } .lembrar { display: flex; align-items: center; gap: 8px; color: #b4b9d9; cursor: pointer; } .lembrar input { position: absolute; opacity: 0; } .lembrar i { width: 18px; height: 18px; border: 1.5px solid #ffffff44; border-radius: 6px; display: grid; place-items: center; transition: .2s; } .lembrar input:checked + i { background: #6d5cff; border-color: #6d5cff; } .lembrar input:checked + i::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .lembrar input:focus-visible + i { box-shadow: 0 0 0 3px #7b6dff66; } .ir { width: 100%; padding: 13px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #6d5cff, #2ec5ff); color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 30px -8px #6d5cffaa; transition: transform .2s, filter .2s; } .ir:hover { transform: translateY(-1px); filter: brightness(1.1); } .ou { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: #6f7599; font-size: 12px; } .ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: #ffffff1a; } .redes { display: flex; justify-content: center; gap: 12px; } .redes button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: transform .2s, background .2s; } .redes button:hover { transform: translateY(-2px); } .redes button { border: 1px solid #ffffff22; background: #ffffff0d; color: #dfe3ff; } .redes button:hover { background: #ffffff1c; } .rodape { margin: 20px 0 0; color: #8d93b8; }23:T8da,.ceu { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #24164f 0%, #7a2a78 40%, #d94f6b 78%, #ff9a5c 100%); } .sol { position: absolute; left: 50%; bottom: -260px; width: 440px; height: 440px; margin-left: -220px; border-radius: 50%; background: radial-gradient(circle, #fff3b0 0%, #ffb35c 40%, #ff7a5900 68%); animation: respira 6s ease-in-out infinite alternate; } @keyframes respira { to { transform: scale(1.08); opacity: .85; } } @media (prefers-reduced-motion: reduce) { .sol { animation: none; } } .tela { position: relative; box-sizing: border-box; width: 640px; padding: 56px 40px 44px; text-align: center; font: 14px/1.5 system-ui, sans-serif; color: #fff; } .tela * { box-sizing: border-box; } h2 { margin: 0 0 24px; font: 600 34px/1.1 ui-serif, Georgia, serif; letter-spacing: -.01em; text-shadow: 0 2px 24px #5b1a4d88; } .caixa { padding: 14px 14px 12px; border: 1px solid #ffffff55; border-radius: 22px; background: #2a0f3a66; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: left; box-shadow: 0 20px 40px -20px #4b123d88; transition: .25s; } .caixa:focus-within { background: #ffffff40; box-shadow: 0 0 0 4px #ffffff33, 0 20px 40px -20px #4b123d88; } textarea { display: block; width: 100%; padding: 6px 8px; border: 0; resize: none; background: none; color: #fff; font: 16px/1.5 system-ui, sans-serif; outline: none; } textarea::placeholder { color: #ffffffcc; } .base { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .modelo { padding: 6px 12px; border-radius: 999px; background: #0000002e; font-size: 13px; font-weight: 500; } .enviar { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: #8a2f7a; cursor: pointer; transition: transform .2s; } .enviar:hover { transform: scale(1.08); } .sugestoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } .sugestoes button { padding: 8px 14px; border: 1px solid #ffffff55; border-radius: 999px; background: #3a0f3a55; color: #fff; font: 500 13px system-ui, sans-serif; cursor: pointer; transition: .2s; } .sugestoes button:hover { background: #fff; color: #8a2f7a; transform: translateY(-2px); }24:T5ad,.aur { position: absolute; inset: 0; overflow: hidden; background: #060912; } .aur i { position: absolute; width: 70%; height: 70%; border-radius: 50%; filter: blur(46px); opacity: .75; will-change: transform; } .a1 { left: -10%; top: -20%; background: radial-gradient(circle at 40% 40%, #22d3a6, transparent 68%); animation: va 14s ease-in-out infinite alternate; } .a2 { right: -15%; top: 5%; background: radial-gradient(circle at 50% 50%, #6d5dfc, transparent 68%); animation: vb 17s ease-in-out infinite alternate; } .a3 { left: 20%; bottom: -35%; background: radial-gradient(circle at 50% 50%, #ff5fa2, transparent 66%); animation: vc 19s ease-in-out infinite alternate; } @keyframes va { to { transform: translate(40%, 30%) scale(1.25) rotate(40deg); } } @keyframes vb { to { transform: translate(-45%, 25%) scale(.8) rotate(-30deg); } } @keyframes vc { to { transform: translate(35%, -30%) scale(1.3); } } .tit { position: relative; z-index: 1; width: 520px; text-align: center; color: #fff; font-family: system-ui, sans-serif; } .tit small { display: inline-block; padding: 5px 14px; border: 1px solid #ffffff40; border-radius: 99px; background: #ffffff14; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .tit h2 { margin: 18px 0 0; font-size: 46px; line-height: 1.08; letter-spacing: -.03em; text-shadow: 0 2px 30px #0008; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }25:T52a,.pilha { box-sizing: border-box; display: flex; flex-direction: column-reverse; width: 380px; padding: 24px 16px 16px; font: 14px/1.35 system-ui, sans-serif; } .pilha:hover .t { margin-bottom: 10px; } .t { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e0e3ec; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -12px #1b244d44; transition: margin .3s, transform .3s, opacity .3s; color: #1c2033; } .t b { display: block; font-weight: 650; } .t span { color: #6b7088; font-size: 13px; } .t1 { position: relative; z-index: 3; animation: entra .6s cubic-bezier(.2,.9,.3,1.2) both; } .t2 { position: relative; z-index: 2; margin-bottom: -56px; transform: scale(.95); } .t3 { position: relative; z-index: 1; margin-bottom: -56px; transform: scale(.9); } .pilha:hover .t2, .pilha:hover .t3 { margin-bottom: 10px; transform: none; } .ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font: 700 15px system-ui, sans-serif; font-style: normal; } .verde { background: #dff7ea; color: #14884f; } .ambar { background: #fff0cf; color: #a76b00; } .azul { background: #e0e9ff; color: #2d55d6; } @keyframes entra { from { transform: translateY(16px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .t1 { animation: none; } }26:T65f,.h { width: 960px; padding: 22px 40px 56px; border-radius: 28px; background: #0d0c0a; color: #f5efe4; font-family: system-ui, sans-serif; text-align: center; } .h nav { display: flex; align-items: center; justify-content: space-between; } .h nav b { font-size: 20px; letter-spacing: -.02em; } .pill { display: flex; gap: 6px; padding: 5px; border: 1px solid #ffffff1f; border-radius: 99px; background: #ffffff0a; } .pill a { padding: 8px 18px; border-radius: 99px; font-size: 14px; color: #cfc8ba; } .pill a:first-child { background: #ffffff18; color: #fff; } .sm { padding: 9px 18px; border-radius: 99px; background: #f5efe4; color: #0d0c0a; font-size: 14px; font-weight: 600; } .h h1 { margin: 56px 0 0; font-size: 150px; line-height: .88; font-weight: 900; letter-spacing: -.055em; color: transparent; background: radial-gradient(circle closest-side, #fff7d6 0%, #ffc15a 35%, #ff7a2f 62%, transparent 100%) no-repeat, #2b2823; background-size: 480px 480px, 100% 100%; background-position: -20% 50%, 0 0; -webkit-background-clip: text; background-clip: text; animation: farol 7s ease-in-out infinite alternate; } @keyframes farol { to { background-position: 120% 50%, 0 0; } } .h p { width: 520px; margin: 34px auto 0; color: #a8a08f; font-size: 19px; line-height: 1.5; } .bt { display: flex; justify-content: center; gap: 12px; margin-top: 30px; } .bt a { padding: 14px 26px; border-radius: 99px; font-size: 15px; font-weight: 600; } .p { background: #ffc15a; color: #1a1205; } .s { border: 1px solid #ffffff30; color: #f5efe4; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }27:T666,.c { position: relative; width: 940px; height: 380px; overflow: hidden; display: grid; place-items: center; border-radius: 32px; background: linear-gradient(120deg, #ff4f9a 0%, #8b4dff 55%, #3a7bff 100%); color: #fff; font-family: system-ui, sans-serif; text-align: center; } .f { position: absolute; display: block; animation: flutua 7s ease-in-out infinite alternate; } .f1 { left: 60px; top: 50px; width: 90px; height: 90px; border-radius: 50%; background: #ffffff2e; } .f2 { right: 80px; top: 40px; width: 110px; height: 110px; border-radius: 28px; background: #ffffff22; transform: rotate(20deg); animation-delay: -2s; --r: 20deg; } .f3 { left: 120px; bottom: 40px; width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 70px solid #ffffff2a; animation-delay: -4s; } .f4 { right: 140px; bottom: 36px; width: 70px; height: 70px; border-radius: 50%; border: 12px solid #ffffff33; animation-delay: -5s; } @keyframes flutua { to { translate: 0 -26px; rotate: 25deg; } } .mi { position: relative; width: 760px; } .mi h2 { margin: 0; font-size: 52px; line-height: 1.05; letter-spacing: -.04em; text-shadow: 0 4px 30px #3b0a6a66; } .mi p { margin: 16px 0 0; font-size: 19px; color: #ffffffe0; } .bt { display: flex; justify-content: center; gap: 12px; margin-top: 28px; } .bt a { padding: 15px 28px; border-radius: 99px; font-size: 16px; font-weight: 700; } .p { background: #fff; color: #5a2bd0; box-shadow: 0 12px 24px -10px #2a0a6a99; } .s { box-shadow: inset 0 0 0 2px #ffffffaa; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }28:T7c3,.chat { box-sizing: border-box; width: 520px; padding: 24px; border: 1px solid #23252d; border-radius: 22px; background: #14161b; font: 14px/1.5 system-ui, sans-serif; color: #e6e7ee; } .eu { margin-left: auto; width: fit-content; max-width: 80%; padding: 11px 16px; border-radius: 18px 18px 4px 18px; background: #2a2d3a; } .ia { display: flex; gap: 12px; margin-top: 20px; } .avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #7b8bff, #c46bff); color: #fff; } .corpo { flex: 1; } .pensa { display: flex; align-items: baseline; gap: 10px; margin: 5px 0 14px; font-weight: 600; } .brilho { background: linear-gradient(100deg, #8a8ea3 30%, #fff 50%, #8a8ea3 70%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilha 2s linear infinite; } @keyframes brilha { to { background-position: -150% 0; } } .pensa em { font: 12px ui-monospace, monospace; color: #666a7a; } .passos { margin: 0; padding: 0 0 0 4px; list-style: none; border-left: 1px solid #272a33; } .passos li { display: flex; align-items: center; gap: 10px; margin-left: -9px; padding: 6px 0; color: #6c7083; } .passos i { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #3a3e4b; background: #14161b; } .passos .ok { color: #b9bccb; } .passos .ok i { border-color: #5ad19a; background: #5ad19a; position: relative; } .passos .ok i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 3px; height: 7px; border: solid #0e0f13; border-width: 0 2px 2px 0; transform: rotate(45deg); } .passos .agora { color: #fff; } .passos .agora i { border-color: #8fa0ff #8fa0ff #8fa0ff00; animation: gira .9s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .brilho, .passos .agora i { animation: none; } .brilho { color: #cfd2e0; background: none; -webkit-text-fill-color: #cfd2e0; } }29:T627,.cena { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #1a0f2b, #0a0710 70%); } .halo { position: absolute; width: min(360px, 100cqmin); height: min(360px, 100cqmin); border-radius: 50%; background: radial-gradient(circle, #ff4fa355, transparent 65%); animation: pulso 5s ease-in-out infinite; } .anel { position: absolute; width: min(300px, 92cqmin); height: min(300px, 92cqmin); border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: conic-gradient(from 0deg, #ff4fa3, #ffb347, #7c5cff, #2ee6d6, #ff4fa3); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); animation: gira 9s linear infinite, forma 6s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px #ff4fa3aa); } .anel.dois { width: min(250px, 76cqmin); height: min(250px, 76cqmin); animation-duration: 13s, 7s; animation-direction: reverse, alternate; opacity: .6; } @keyframes gira { to { transform: rotate(360deg); } } @keyframes forma { to { border-radius: 55% 45% 44% 56% / 44% 56% 46% 54%; scale: 1.08; } } @keyframes pulso { 50% { transform: scale(1.3); opacity: .55; } } .tit { position: relative; z-index: 1; width: 520px; text-align: center; color: #fff; font-family: system-ui, sans-serif; } .tit h2 { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -.03em; } .tit p { margin: 12px 0 0; color: #cbbfe0; font-size: 17px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }2a:T793,

2b:Td06,.aurora { position: absolute; inset: 0; overflow: hidden; background: #070b17; } .aurora i { position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(70px); opacity: .85; animation: flui 14s ease-in-out infinite alternate; } .a1 { background: #16e0a8; left: -60px; top: -80px; } .a2 { background: #6a5cff; right: -80px; top: 80px; animation-delay: -5s; } .a3 { background: #ff4fa3; left: 80px; bottom: -140px; width: 300px; height: 300px; animation-delay: -9s; opacity: .6; } @keyframes flui { to { transform: translate(60px, 40px) scale(1.15); } } @media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } } .vidro { position: relative; box-sizing: border-box; width: 420px; margin: 40px; padding: 36px 34px 30px; border-radius: 26px; background: linear-gradient(145deg, #ffffff2e, #ffffff0f); border: 1px solid #ffffff3d; backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 30px 60px -20px #0008, inset 0 1px 0 #ffffff55; font: 14px/1.4 system-ui, sans-serif; color: #fff; } .vidro * { box-sizing: border-box; } h2 { margin: 0 0 4px; font-size: 28px; font-weight: 650; letter-spacing: -.02em; } .sub { margin: 0 0 22px; color: #ffffffb3; } .campo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0 14px; border: 1px solid #ffffff33; border-radius: 14px; background: #0000002e; color: #ffffffb3; transition: .2s; } .campo:focus-within { border-color: #fff; background: #00000044; box-shadow: 0 0 0 4px #ffffff22; } .campo input { flex: 1; min-width: 0; padding: 14px 0; border: 0; background: none; color: #fff; font: inherit; outline: none; } .campo input::placeholder { color: #ffffff88; } .linha { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 18px; font-size: 13px; } .linha a, .rodape a { color: #fff; font-weight: 600; text-decoration: none; } .linha a:hover, .rodape a:hover { text-decoration: underline; } .lembrar { display: flex; align-items: center; gap: 8px; color: #ffffffcc; cursor: pointer; } .lembrar input { position: absolute; opacity: 0; } .lembrar i { width: 18px; height: 18px; border: 1.5px solid #ffffff77; border-radius: 6px; display: grid; place-items: center; transition: .2s; } .lembrar input:checked + i { background: #fff; } .lembrar input:checked + i::after { content: ""; width: 4px; height: 8px; border: solid #0b1a2e; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); } .lembrar input:focus-visible + i { box-shadow: 0 0 0 3px #ffffff77; } .ir { width: 100%; margin-bottom: 20px; padding: 14px; border: 0; border-radius: 14px; background: #fff; color: #0b1a2e; font: 650 15px system-ui, sans-serif; cursor: pointer; transition: transform .2s, box-shadow .2s; } .ir:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -10px #fff8; } .redes { display: flex; justify-content: center; gap: 12px; } .redes button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: transform .2s, background .2s; } .redes button:hover { transform: translateY(-2px); } .redes button { border: 1px solid #ffffff44; background: #ffffff1f; color: #fff; } .redes button:hover { background: #ffffff38; } .rodape { margin: 20px 0 0; text-align: center; color: #ffffffb3; }14:["$","$18",null,{"children":["$","$L20",null,{"vitrine":{"itens":[{"slug":"login-estrelas","nome":"Login céu estrelado","autor":"ravox","html":"$21","css":"$22","fundo":"#04050d","tecnologia":"css","escala":1},{"slug":"chat-prompt-por-do-sol","nome":"Prompt sobre pôr do sol","autor":"ravox","html":"

O que vamos criar hoje?

\n \n

\n Lume 4 · Rápido\n \n

\n \n \n \n \n

","css":"$23","fundo":"#2a1030","tecnologia":"css","escala":1},{"slug":"fundo-aurora","nome":"Aurora viva","autor":"ravox","html":"

Novo

Seu produto merece uma entrada que brilha

","css":"$24","fundo":"#060912","tecnologia":"css","escala":1},{"slug":"botao-borda-girando","nome":"Borda girando","autor":"ravox","html":"","css":".btn {\n position: relative;\n overflow: hidden;\n padding: 2px;\n border: 0;\n border-radius: 14px;\n background: #22222a;\n cursor: pointer;\n}\n.btn::before {\n content: \"\";\n position: absolute;\n inset: -80%;\n background: conic-gradient(from 0deg, transparent 0 60%, #8b7bff, #22e6ff, #c6f24e, transparent 90%);\n animation: gira 3s linear infinite;\n}\n.btn span {\n position: relative;\n display: block;\n padding: 13px 30px;\n border-radius: 12px;\n background: #101016;\n color: #fff;\n font: 600 15px/1 system-ui, sans-serif;\n}\n@keyframes gira { to { transform: rotate(1turn); } }","fundo":"#0b0b10","tecnologia":"css","escala":1},{"slug":"aviso-pilha","nome":"Notificações empilhadas","autor":"ravox","html":"

Backup agendadoHoje às 23h

Espaço quase cheioVocê usou 92% do plano

✓

Pagamento aprovadoFatura de outubro quitada

","css":"$25","fundo":"#eef0f5","tecnologia":"css","escala":1},{"slug":"hero-luz-gigante","nome":"Hero tipografia e luz","autor":"ravox","html":"

\n \n

DEIXE A
LUZ ENTRAR

Identidade visual e sites para marcas que querem ser vistas de longe.

Ver projetos Falar com a gente

","css":"$26","fundo":"#0d0c0a","tecnologia":"css","escala":1},{"slug":"toggle-dia-noite","nome":"Dia e noite","autor":"ravox","html":"","css":".tg input { display: none; }\n.trilho {\n position: relative;\n display: block;\n width: 76px;\n height: 38px;\n border-radius: 999px;\n background: linear-gradient(#7cc7ff, #bfe4ff);\n cursor: pointer;\n transition: background .5s;\n box-shadow: inset 0 2px 6px #0003;\n}\n.astro {\n position: absolute;\n top: 4px;\n left: 4px;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: #ffd23f;\n box-shadow: 0 0 12px #ffd23f;\n transition: transform .5s cubic-bezier(.5,1.6,.4,1), background .5s, box-shadow .5s;\n}\ninput:checked + .trilho { background: linear-gradient(#141a33, #2b3566); }\ninput:checked + .trilho .astro {\n transform: translateX(38px);\n background: #e8e8f0;\n box-shadow: inset -7px -3px 0 #b9bccb, 0 0 10px #fff5;\n}","fundo":"#e8edf5","tecnologia":"css","escala":1},{"slug":"cta-formas-flutuantes","nome":"Chamada com formas flutuando","autor":"ravox","html":"

\n \n

Pronto para tirar
a ideia do papel?

Crie seu primeiro projeto em menos de cinco minutos.

Começar de graça Falar com vendas

","css":"$27","fundo":"#14091f","tecnologia":"css","escala":1},{"slug":"chat-pensando","nome":"IA pensando com brilho","autor":"ravox","html":"

Monte um plano de estudos de 4 semanas para aprender SQL.

Pensando…6 s

Entendendo o nível e o objetivo
Dividindo o conteúdo por semana
Escolhendo exercícios práticos
Revisando a ordem dos temas

","css":"$28","fundo":"#0e0f13","tecnologia":"css","escala":1},{"slug":"card-perfil","nome":"Cartão de perfil","autor":"ravox","html":"

Ana Lima

Designer de produto

","css":".card {\n width: 220px;\n overflow: hidden;\n border-radius: 20px;\n background: #fff;\n text-align: center;\n font-family: system-ui, sans-serif;\n box-shadow: 0 20px 40px -24px #1b2a4a66;\n transition: transform .3s;\n}\n.card:hover { transform: translateY(-4px); }\n.capa { height: 70px; background: linear-gradient(120deg, #6d4aff, #22e6ff); }\n.avatar {\n display: grid;\n place-items: center;\n width: 64px;\n height: 64px;\n margin: -32px auto 0;\n border: 4px solid #fff;\n border-radius: 50%;\n background: #ffd23f;\n font-weight: 700;\n}\n.card h3 { margin: 10px 0 2px; font-size: 17px; }\n.card p { margin: 0; color: #7a7a86; font-size: 13px; }\n.card button { margin: 14px 0 18px; padding: 8px 22px; border: 0; border-radius: 999px; background: #111; color: #fff; font-weight: 600; cursor: pointer; }","fundo":"#eef0f5","tecnologia":"css","escala":1},{"slug":"fundo-anel-pulso","nome":"Anel que pulsa","autor":"ravox","html":"

Sinta o ritmo
do seu negócio

Métricas vivas, sem ruído.

","css":"$29","fundo":"#0a0710","tecnologia":"css","escala":1},{"slug":"login-vidro-aurora","nome":"Login vidro sobre aurora","autor":"ravox","html":"$2a","css":"$2b","fundo":"#070b17","tecnologia":"css","escala":1}],"total":441}}]}]

Bem-vindo a bordo

Olá de novo

O que vamos criar hoje?

Seu produto merece uma entrada que brilha

DEIXE A
LUZ ENTRAR

Pronto para tirar
a ideia do papel?

Ana Lima

Sinta o ritmo
do seu negócio

Bem-vindo a bordo

Olá de novo

O que vamos criar hoje?

Seu produto merece uma entrada que brilha

DEIXE ALUZ ENTRAR

Pronto para tirara ideia do papel?

Ana Lima

Sinta o ritmodo seu negócio

DEIXE A
LUZ ENTRAR

Pronto para tirar
a ideia do papel?

Sinta o ritmo
do seu negócio