Refine economy section palette and revenue figures
This commit is contained in:
Codex
+3
-3
@@ -54,8 +54,8 @@ footer{background:radial-gradient(circle at 15% 0,rgba(112,64,232,.16),transpare
|
||||
@media(max-width:760px){.funnel-head{grid-template-columns:1fr;gap:28px;margin-bottom:45px}.funnel-head>p{font-size:16px}.funnel-track{grid-template-columns:1fr;overflow:visible}.funnel-track article{min-height:135px}.funnel-results{grid-template-columns:1fr}.funnel-results span{border-radius:16px;text-align:left}}
|
||||
|
||||
/* Homepage: AI Creator Economy declaration */
|
||||
.economy-section{position:relative;min-height:880px;display:flex;align-items:center;color:#fff;background:radial-gradient(circle at 78% 48%,rgba(118,70,232,.28),transparent 34%),radial-gradient(circle at 8% 92%,rgba(45,199,152,.12),transparent 26%),#09090b;overflow:hidden}.economy-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to right,#000,transparent 72%)}
|
||||
.economy-section{position:relative;min-height:880px;display:flex;align-items:center;color:#fff;background:radial-gradient(circle at 78% 42%,rgba(169,112,255,.34),transparent 33%),radial-gradient(circle at 6% 92%,rgba(115,63,210,.18),transparent 28%),linear-gradient(135deg,#15121c 0%,#211830 55%,#3a2461 100%);overflow:hidden}.economy-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to right,#000,transparent 72%)}
|
||||
.economy-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center;padding-top:100px;padding-bottom:100px}.economy-copy .eyebrow{color:#a978ff}.economy-copy h2{margin:0;font:800 clamp(56px,6.3vw,94px)/.94 var(--font-geist-sans),Arial,sans-serif;letter-spacing:-.065em}.economy-copy h2 span{color:#9c6bff}.economy-copy>p:not(.eyebrow){max-width:690px;margin:38px 0 0;color:#b9b5c0;font-size:18px;line-height:1.9}.economy-actions{display:flex;align-items:center;gap:30px;margin-top:38px}.economy-btn{color:#09090b;background:#fff;border-radius:999px}.economy-actions small{color:#8f8997}
|
||||
.revenue-visual{position:relative;min-height:650px;display:grid;place-items:center}.revenue-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(142,86,255,.44),rgba(91,46,180,.12) 48%,transparent 70%);filter:blur(12px)}.revenue-phone{position:relative;z-index:2;width:min(385px,78vw);min-height:650px;padding:28px 25px;color:#fff;background:linear-gradient(165deg,#17171d,#070708 65%);border:1px solid rgba(255,255,255,.22);border-radius:54px;box-shadow:0 45px 110px rgba(0,0,0,.6),inset 0 0 0 7px #020203;overflow:hidden}.revenue-phone:before{content:"";position:absolute;top:13px;left:50%;width:112px;height:27px;background:#000;border-radius:20px;transform:translateX(-50%)}.phone-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin:20px 7px 50px;color:#aaa;font-size:11px;letter-spacing:.17em}.phone-top i{width:9px;height:9px;background:#7e48ef;border-radius:50%;box-shadow:0 0 15px #8d5aff}.phone-top b{letter-spacing:2px}.phone-greeting{display:flex;flex-direction:column}.phone-greeting>span{color:#9a70f4;font-size:11px;font-weight:750;letter-spacing:.18em}.phone-greeting strong{margin-top:15px;font-size:30px;line-height:1.25}.phone-greeting small{margin-top:8px;color:#777}.revenue-chart{height:150px;margin:30px 0 22px;padding:12px 14px 0;display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid #333;background:linear-gradient(180deg,rgba(128,77,235,.08),transparent)}.revenue-chart div{flex:1;min-height:25%;background:linear-gradient(180deg,#a776ff,#6030d7);border-radius:7px 7px 0 0;box-shadow:0 0 18px rgba(128,77,235,.18)}.revenue-chart div:nth-child(2){height:38%}.revenue-chart div:nth-child(3){height:50%}.revenue-chart div:nth-child(4){height:63%}.revenue-chart div:nth-child(5){height:77%}.revenue-chart div:nth-child(6){height:96%;background:linear-gradient(180deg,#c5a7ff,#7b43ed)}.revenue-list{display:grid;gap:9px}.revenue-list>div{display:grid;grid-template-columns:35px 1fr 28px;align-items:center;padding:13px 14px;border:1px solid #24242b;border-radius:13px;background:#111116}.revenue-list i{color:#8051df;font:600 11px Georgia;font-style:normal}.revenue-list span{font-size:13px}.revenue-list b{color:#a776ff;text-align:right}.revenue-float{position:absolute;z-index:3;min-width:215px;padding:17px 19px;display:flex;flex-direction:column;gap:6px;color:#111;background:rgba(255,255,255,.94);border-radius:18px;box-shadow:0 20px 55px rgba(0,0,0,.28);backdrop-filter:blur(10px)}.revenue-float small{color:#746f7a;font-size:11px}.revenue-float strong{font-size:14px}.revenue-float.top{right:-22px;top:125px}.revenue-float.bottom{left:-38px;bottom:105px;background:linear-gradient(135deg,#a97aff,#d2b9ff)}
|
||||
.revenue-visual{position:relative;min-height:710px;display:grid;place-items:center}.revenue-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(142,86,255,.44),rgba(91,46,180,.12) 48%,transparent 70%);filter:blur(12px)}.revenue-phone{position:relative;z-index:2;width:min(385px,78vw);min-height:700px;padding:28px 25px;color:#fff;background:linear-gradient(165deg,#17171d,#070708 65%);border:1px solid rgba(255,255,255,.22);border-radius:54px;box-shadow:0 45px 110px rgba(0,0,0,.6),inset 0 0 0 7px #020203;overflow:hidden}.revenue-phone:before{content:"";position:absolute;top:13px;left:50%;width:112px;height:27px;background:#000;border-radius:20px;transform:translateX(-50%)}.phone-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin:20px 7px 42px;color:#aaa;font-size:11px;letter-spacing:.17em}.phone-top i{width:9px;height:9px;background:#7e48ef;border-radius:50%;box-shadow:0 0 15px #8d5aff}.phone-top b{letter-spacing:2px}.phone-greeting{display:flex;flex-direction:column}.phone-greeting>span{color:#9a70f4;font-size:11px;font-weight:750;letter-spacing:.18em}.phone-greeting strong{margin-top:15px;font-size:30px;line-height:1.25}.phone-greeting small{margin-top:8px;color:#777}.revenue-amount{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:24px}.revenue-amount strong{font:700 38px/1 Georgia,serif;letter-spacing:-.04em}.revenue-amount span{color:#76717c;font-size:10px}.revenue-chart{height:125px;margin:18px 0 20px;padding:10px 14px 0;display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid #333;background:linear-gradient(180deg,rgba(128,77,235,.08),transparent)}.revenue-chart div{flex:1;min-height:25%;background:linear-gradient(180deg,#a776ff,#6030d7);border-radius:7px 7px 0 0;box-shadow:0 0 18px rgba(128,77,235,.18)}.revenue-chart div:nth-child(2){height:38%}.revenue-chart div:nth-child(3){height:50%}.revenue-chart div:nth-child(4){height:63%}.revenue-chart div:nth-child(5){height:77%}.revenue-chart div:nth-child(6){height:96%;background:linear-gradient(180deg,#c5a7ff,#7b43ed)}.revenue-list{display:grid;gap:9px}.revenue-list>div{display:grid;grid-template-columns:35px 1fr 28px;align-items:center;padding:13px 14px;border:1px solid #24242b;border-radius:13px;background:#111116}.revenue-list i{color:#8051df;font:600 11px Georgia;font-style:normal}.revenue-list span{font-size:13px}.revenue-list b{color:#a776ff;text-align:right}.revenue-float{position:absolute;z-index:3;min-width:215px;padding:17px 19px;display:flex;flex-direction:column;gap:6px;color:#111;background:rgba(255,255,255,.94);border-radius:18px;box-shadow:0 20px 55px rgba(0,0,0,.28);backdrop-filter:blur(10px)}.revenue-float small{color:#746f7a;font-size:11px}.revenue-float strong{font-size:14px}.revenue-float strong em{margin-left:12px;color:#4b257d;font-size:11px;font-style:normal}.revenue-float.top{right:-22px;top:125px}.revenue-float.bottom{left:-38px;bottom:105px;background:linear-gradient(135deg,#a97aff,#d2b9ff)}
|
||||
@media(max-width:1040px){.economy-section{min-height:auto}.economy-grid{grid-template-columns:1fr;gap:55px}.economy-copy h2{max-width:850px}.revenue-visual{min-height:660px}.revenue-float.top{right:8%}.revenue-float.bottom{left:8%}}
|
||||
@media(max-width:760px){.economy-grid{padding-top:80px;padding-bottom:80px}.economy-copy h2{font-size:clamp(48px,15vw,68px)}.economy-copy>p:not(.eyebrow){font-size:16px}.economy-actions{align-items:flex-start;flex-direction:column;gap:18px}.revenue-visual{min-height:610px}.revenue-phone{min-height:600px;padding:25px 20px;border-radius:42px}.revenue-float{min-width:170px;padding:13px}.revenue-float.top{right:-5px;top:100px}.revenue-float.bottom{left:-5px;bottom:90px}.phone-greeting strong{font-size:25px}.revenue-chart{height:125px}.revenue-list>div{padding:11px 12px}}
|
||||
@media(max-width:760px){.economy-grid{padding-top:80px;padding-bottom:80px}.economy-copy h2{font-size:clamp(48px,15vw,68px)}.economy-copy>p:not(.eyebrow){font-size:16px}.economy-actions{align-items:flex-start;flex-direction:column;gap:18px}.revenue-visual{min-height:660px}.revenue-phone{min-height:650px;padding:25px 20px;border-radius:42px}.revenue-float{min-width:170px;padding:13px}.revenue-float.top{right:-5px;top:100px}.revenue-float.bottom{left:-5px;bottom:90px}.phone-greeting strong{font-size:25px}.revenue-amount strong{font-size:31px}.revenue-chart{height:110px}.revenue-list>div{padding:11px 12px}}
|
||||
|
||||
+2
-1
@@ -41,6 +41,7 @@ export default function Home() {
|
||||
<div className="revenue-phone">
|
||||
<div className="phone-top"><i/><span>COZSWEET</span><b>•••</b></div>
|
||||
<div className="phone-greeting"><span>CREATOR REVENUE</span><strong>多元收入持续增长</strong><small>内容价值正在被转化</small></div>
|
||||
<div className="revenue-amount"><strong>$12,680</strong><span>本月收入 · 示意数据</span></div>
|
||||
<div className="revenue-chart"><div/><div/><div/><div/><div/><div/></div>
|
||||
<div className="revenue-list">
|
||||
<div><i>01</i><span>订阅收入</span><b>↗</b></div>
|
||||
@@ -50,7 +51,7 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="revenue-float top"><small>关系运营</small><strong>评论 → 私信 → 私域</strong></div>
|
||||
<div className="revenue-float bottom"><small>增长目标</small><strong>账号收入 ↑</strong></div>
|
||||
<div className="revenue-float bottom"><small>本月收入增长 · 示意数据</small><strong>+$3,280 <em>↑ 35%</em></strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user