Skip to content

Z
zhiyinweilai
Commit 106bac5c authored by xuchentao's avatar xuchentao
Browse files
Options

feat: optimize homepage layout

parent b030eef7
Show whitespace changes
Inline Side-by-side
Showing with 27 additions and 22 deletions
src/components/Footer.astro
View file @ 106bac5c
......@@ -7,7 +7,7 @@ import { site } from "../data/site";
<div class="container footer-grid">
<div class="footer-brand">
<a href="/" class="footer-logo" aria-label="智引未来首页"><img src={logo.src} width="775" height="199" loading="lazy" alt="智引未来" /></a>
<p>科技蓝为品牌基底，增长绿为业务引擎。让企业在AI与社媒搜索中持续被看见、被理解、被推荐。</p>
<p>让企业在AI与社媒搜索中持续被看见、被理解、被推荐。</p>
<div class="footer-tags"><span>GEO</span><span>SMO</span><span>AI全域优化</span></div>
</div>
<div><h2>探索智引</h2><a href="/about/">关于我们</a><a href="/methodology/">服务方法</a><a href="/articles/">洞察中心</a><a href="/faq/">常见问题</a></div>
......
src/pages/index.astro
View file @ 106bac5c
......@@ -32,6 +32,7 @@ const jsonLd = {
<Header />
<main id="main-content">
<section class="hero">
<div class="hero__grid-lines" aria-hidden="true"></div>
<div class="container hero__grid">
<div class="hero__content" data-reveal>
<h1>智引未来，让品牌<br /><em>被每一个搜索看见</em></h1>
......@@ -66,7 +67,6 @@ const jsonLd = {
</section>
<section id="technology" class="section-pad tech-section">
<div class="tech-grid-lines"></div>
<div class="container tech-layout">
<div><SectionHeading eyebrow="TECHNOLOGY FOUNDATION" title="数据不是装饰，而是每次判断的起点" description="从跨平台采集、语义溯源到时序分析，五项自研能力支撑GEO与SMO的监测、诊断和复盘。" light /><a class="text-link text-link--light" href="/about/#technology">查看自研技术 <span>↗</span></a></div>
<div class="tech-stack">{site.about.technologies.map((item, index) => <div data-reveal><span>0{index + 1}</span><strong>{item}</strong><i></i></div>)}</div>
......
src/styles/global.css
View file @ 106bac5c
......@@ -99,8 +99,9 @@ h1, h2, h3, strong { line-height: 1.25; }
.header-cta { margin-left: 18px; }
.mobile-nav { display: none; margin-left: auto; }
.hero { position: relative; overflow: hidden; padding: 86px 0 0; background: #fff; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(430px,.94fr); align-items: center; gap: 0; min-height: 590px; }
.hero { position: relative; overflow: hidden; padding: 72px 0 0; background: #fff; }
.hero__grid-lines { position: absolute; z-index: 1; inset: 0; opacity: .58; pointer-events: none; background-image: linear-gradient(rgba(20,115,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(20,115,230,.07) 1px,transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg,#000 0,#000 45%,transparent 62%); }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(430px,.94fr); align-items: center; gap: 0; min-height: 590px; }
.hero__content { position: relative; z-index: 3; padding: 0 34px 60px 0; }
.hero h1 { margin-bottom: 28px; color: var(--text-primary); font-size: clamp(48px, 5.3vw, 76px); font-weight: 760; letter-spacing: -.055em; line-height: 1.12; }
.hero h1 em { color: transparent; background: var(--gradient-brand); background-clip: text; -webkit-background-clip: text; font-style: normal; }
......@@ -161,15 +162,14 @@ h1, h2, h3, strong { line-height: 1.25; }
.support-service-grid p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.support-service-grid i { color: var(--brand-blue); font-style: normal; font-size: 20px; }
.tech-section { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(20,115,230,.3), transparent 35%), var(--dark-bg); }
.tech-grid-lines { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(67,212,232,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(67,212,232,.6) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent, #000 40%, #000); }
.tech-section { position: relative; overflow: hidden; color: #fff; background: var(--dark-bg); }
.tech-layout { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.tech-layout .text-link { margin-top: 30px; }
.tech-stack { border-top: 1px solid rgba(255,255,255,.16); }
.tech-stack > div { display: grid; grid-template-columns: 42px 1fr 60px; align-items: center; min-height: 76px; border-bottom: 1px solid rgba(255,255,255,.14); }
.tech-stack span { color: var(--brand-cyan); font-size: 11px; }
.tech-stack strong { color: rgba(255,255,255,.9); font-size: 15px; }
.tech-stack i { height: 3px; background: linear-gradient(90deg,var(--brand-blue),var(--brand-teal)); transform-origin: left; transition: transform .3s; }
.tech-stack i { height: 3px; background: var(--brand-teal); transform-origin: left; transition: transform .3s; }
.tech-stack > div:hover i { transform: scaleX(1.35); }
.tech-data-row { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 76px; border: 1px solid rgba(255,255,255,.12); }
.tech-data-row > div { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-right: 1px solid rgba(255,255,255,.12); }
......@@ -177,14 +177,20 @@ h1, h2, h3, strong { line-height: 1.25; }
.tech-data-row strong { color: var(--brand-cyan); font-size: 14px; letter-spacing: .08em; }
.tech-data-row span { color: rgba(255,255,255,.58); font-size: 12px; }
.workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.workflow-grid article { padding: 32px 28px; border-right: 1px solid var(--border-default); }
.workflow-grid article:last-child { border-right: 0; }
.workflow-grid article > div { display: flex; justify-content: space-between; margin-bottom: 40px; }
.workflow-grid article span { color: var(--brand-blue); font-size: 12px; font-weight: 700; }
.workflow-grid article i { color: var(--brand-teal); font-style: normal; }
.workflow-grid h3 { margin-bottom: 12px; font-size: 24px; }
.workflow-grid p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--border-default); background: #edf4fc; }
.workflow-grid article { position: relative; min-height: 280px; padding: 30px 42px 30px 30px; overflow: hidden; }
.workflow-grid article::before { position: absolute; z-index: 0; inset: 0 5px 0 0; content: ""; background: #fff; clip-path: polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%); transition: background .25s; }
.workflow-grid article:nth-child(2)::before { background: #f7fbff; }
.workflow-grid article:nth-child(3)::before { background: #f4fbf8; }
.workflow-grid article:last-child::before { right: 0; clip-path: none; }
.workflow-grid article:hover::before { background: #f5f9fe; }
.workflow-grid article:nth-child(3):hover::before { background: #eef9f4; }
.workflow-grid article > * { position: relative; z-index: 1; }
.workflow-grid article > div { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 42px; }
.workflow-grid article span { color: var(--brand-blue); font-size: 38px; font-weight: 720; letter-spacing: -.06em; line-height: 1; }
.workflow-grid article i { margin-top: 7px; color: var(--brand-teal); font-size: 17px; font-style: normal; line-height: 1; }
.workflow-grid h3 { margin-bottom: 13px; font-size: 23px; letter-spacing: -.02em; }
.workflow-grid p { max-width: 235px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.85; }
.scenario-section { background: linear-gradient(90deg,#f8fbff 0,#f8fbff 45%,#f1fbf8 100%); }
.scenario-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
......@@ -527,16 +533,15 @@ h1, h2, h3, strong { line-height: 1.25; }
.section-pad { padding: 82px 0; }
.hero { padding-top: 60px; }
.hero__grid,.service-hero__inner,.contact-hero__grid { grid-template-columns: 1fr; }
.hero__content { padding-bottom: 0; }
.hero__content { padding-right: 0; padding-bottom: 0; }
.hero-platform-flow { width: min(100%,620px); margin: 0 auto 55px; }
.stat-grid { grid-template-columns: repeat(2,1fr); }
.stat-grid > div:nth-child(2) { border-right: 0; }
.engine-grid { grid-template-columns: 1fr; }
.tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { grid-template-columns: 1fr; }
.tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: repeat(2,1fr); }
.tech-data-row > div:nth-child(2),.workflow-grid article:nth-child(2),.process-grid article:nth-child(2) { border-right: 0; }
.tech-data-row > div:nth-child(-n+2),.workflow-grid article:nth-child(-n+2),.process-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
.workflow-grid article:nth-child(-n+2) { border-bottom-color: var(--border-default); }
.tech-data-row > div:nth-child(2),.process-grid article:nth-child(2) { border-right: 0; }
.tech-data-row > div:nth-child(-n+2),.process-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
.service-detail { grid-template-columns: 1fr; }
.service-detail--reverse .service-detail__visual { order: 0; }
.connection-map { grid-template-columns: repeat(2,1fr); gap: 14px; }
......@@ -565,6 +570,7 @@ h1, h2, h3, strong { line-height: 1.25; }
.mobile-nav nav { top: 68px; max-height: calc(100vh - 68px); }
.section-pad { padding: 66px 0; }
.section-heading h2 { font-size: 34px; }
#workflow .section-heading h2 { font-size: 32px; letter-spacing: -.045em; }
.section-heading p { font-size: 15px; }
.section-intro-row { align-items: flex-start; flex-direction: column; margin-bottom: 38px; }
.hero { padding-top: 42px; }
......@@ -582,9 +588,8 @@ h1, h2, h3, strong { line-height: 1.25; }
.support-service-grid,.scenario-grid,.service-cap-grid,.delivery-grid,.principle-grid,.contact-grid,.article-grid,.advantage-grid { grid-template-columns: 1fr; }
.tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { gap: 46px; }
.tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: 1fr; }
.tech-data-row > div,.workflow-grid article,.process-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.workflow-grid article { border-bottom-color: var(--border-default); }
.tech-data-row > div:last-child,.workflow-grid article:last-child,.process-grid article:last-child { border-bottom: 0; }
.tech-data-row > div,.process-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.tech-data-row > div:last-child,.process-grid article:last-child { border-bottom: 0; }
.service-detail { padding: 16px; border-radius: 14px; }
.service-detail__visual { min-height: 370px; }
.service-detail__content { padding: 14px 10px 22px; }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment