Skip to content

About page v3: content refresh and new responsive styles #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thedavidweng merged 1 commit into from
Mar 12, 2026
Merged

About page v3: content refresh and new responsive styles #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 44 additions & 34 deletions src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,58 +9,68 @@ const locale = 'en';
title="FinDIT | About Us"
description="FinDIT is building the local-first retrieval layer for real video production workflows."
>
<section class="full-bleed about-hero reveal">
<div class="content-limit about-hero-inner">
<section class="full-bleed about-hero about-hero-v3 reveal">
<div class="content-limit about-hero-v3-inner">
<p class="section-kicker">About FinDIT</p>
<h1>Built for the retrieval bottleneck in real editing work.</h1>
<h1>About Us</h1>
<p>
Every production team can edit. Fewer teams can reliably find the right clip fast under deadline pressure.
FinDIT exists to solve that gap.
Built for builders, powered by retrieval. This is the story behind the platform helping teams move from raw
footage to ready-to-edit moments.
</p>
</div>
<div class="about-hero-v3-orb" aria-hidden="true"></div>
</section>

<section class="section-block reveal">
<article class="surface-muted about-shell">
<div class="about-grid">
<p class="about-label">What we are building</p>
<div class="about-copy">
<article class="surface-muted about-shell-v3">
<section class="about-section-grid">
<p class="about-label">What is FinDIT?</p>
<div class="about-copy about-copy-wide">
<p>
FinDIT is a local-first video retrieval product for creators, assistant editors, and post teams working on
real media libraries.
FinDIT is a local-first video retrieval platform that helps creators, assistant editors, and post teams
turn large media libraries into searchable production assets in minutes.
</p>
</div>
</section>

<hr class="about-divider" />

<section class="about-section-grid">
<p class="about-label">Our mission</p>
<div class="about-copy about-copy-wide">
<p>
We treat retrieval as infrastructure: searchable clips, predictable indexing, and editor-ready handoff,
without forcing teams into upload-first workflows.
Our mission is to make video retrieval dependable under real production pressure: no upload-first lock-in,
no workflow resets, and no wasted time hunting for clips when deadlines are tight.
</p>
</div>
</div>
</section>

<div class="about-grid">
<p class="about-label">Product principles</p>
<ul class="about-points">
<li>Core usefulness must stay available locally.</li>
<li>Cloud enhancement should improve hard queries, not gate baseline value.</li>
<li>The product should fit existing editing pipelines, not replace creative tools.</li>
<li>Speed, clarity, and operational reliability matter more than feature theater.</li>
</ul>
</div>
<hr class="about-divider" />

<div class="about-grid">
<p class="about-label">Long-term direction</p>
<section class="about-section-grid">
<p class="about-label">Team (expandable)</p>
<div class="about-copy">
<p>
Our goal is to make indexed footage accessible to both humans and future assistant workflows through a
structured retrieval layer.
</p>
<p>
FinDIT is not an AI video generation toy. It is an execution layer for teams working with real footage,
real deadlines, and real delivery constraints.
</p>
<p>
Contact us at <a href="mailto:support@findit.studio">support@findit.studio</a>.
This block is intentionally designed for future member introductions. You can add profiles, roles,
experience summaries, and links without changing the page structure.
</p>
<p>Contact: <a href="mailto:support@findit.studio">support@findit.studio</a>.</p>
</div>
</section>

<div class="about-team-grid" aria-label="Team members placeholder">
<article class="about-team-card">
<h3>Member name</h3>
<p>Role · Focus area · Short bio</p>
</article>
<article class="about-team-card">
<h3>Member name</h3>
<p>Role · Focus area · Short bio</p>
</article>
<article class="about-team-card">
<h3>Member name</h3>
<p>Role · Focus area · Short bio</p>
</article>
</div>
</article>
</section>
Expand Down
70 changes: 40 additions & 30 deletions src/pages/zh/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,54 +9,64 @@ const locale = 'zh';
title="FinDIT | 关于我们"
description="FinDIT 正在构建面向真实视频制作流程的本地优先检索基础层。"
>
<section class="full-bleed about-hero reveal">
<div class="content-limit about-hero-inner">
<section class="full-bleed about-hero about-hero-v3 reveal">
<div class="content-limit about-hero-v3-inner">
<p class="section-kicker">关于 FinDIT</p>
<h1>为真实剪辑流程里的“找素材瓶颈”而建。</h1>
<h1>关于我们</h1>
<p>
大多数团队都会剪辑，但并不是每个团队都能在高压交付窗口里快速、稳定地找到正确片段。FinDIT
就是为这个缺口而生。
为创作者而生，以检索能力驱动。这里介绍我们如何帮助团队把海量素材转化为可快速定位、可直接进入剪辑流程的关键片段。
</p>
</div>
<div class="about-hero-v3-orb" aria-hidden="true"></div>
</section>

<section class="section-block reveal">
<article class="surface-muted about-shell">
<div class="about-grid">
<p class="about-label">我们在构建什么</p>
<div class="about-copy">
<article class="surface-muted about-shell-v3">
<section class="about-section-grid">
<p class="about-label">什么是 FinDIT？</p>
<div class="about-copy about-copy-wide">
<p>
FinDIT 是一款面向创作者、助理剪辑师和后期团队的本地优先视频检索产品，服务真实素材库。
FinDIT 是一套本地优先的视频检索平台，帮助创作者、助理剪辑师和后期团队把庞大的素材库快速转化为可搜索、可交付的生产资产。
</p>
</div>
</section>

<hr class="about-divider" />

<section class="about-section-grid">
<p class="about-label">我们的使命</p>
<div class="about-copy about-copy-wide">
<p>
我们把检索当作基础设施来做：可搜索片段、可预测索引、可交付到剪辑软件，而不是把“先上传全部素材”当成前置条件。
我们希望在真实制作压力下让检索变得稳定可靠：不强制上传优先、不打断现有流程、不让团队把时间浪费在反复找素材上。
</p>
</div>
</div>
</section>

<div class="about-grid">
<p class="about-label">产品原则</p>
<ul class="about-points">
<li>核心可用性必须在本地可得。</li>
<li>云端增强用于提升高难查询，不用于锁住基础价值。</li>
<li>产品要嵌入现有制作管线，而不是替代创作工具。</li>
<li>速度、清晰度和运行稳定性优先于“功能表演”。</li>
</ul>
</div>
<hr class="about-divider" />

<div class="about-grid">
<p class="about-label">长期方向</p>
<section class="about-section-grid">
<p class="about-label">团队介绍（可扩展）</p>
<div class="about-copy">
<p>
我们的目标是通过结构化检索层，让被索引素材既能被人高效调用，也能在未来被助手型工作流可靠调用。
</p>
<p>
FinDIT 不是 AI 视频生成玩具，而是一层服务真实素材、真实期限和真实交付约束的执行基础层。
</p>
<p>
联系我们：<a href="mailto:support@findit.studio">support@findit.studio</a>。
该区块已为未来成员介绍预留，可直接扩展姓名、角色、经验背景与相关链接，而无需改动页面结构。
</p>
<p>联系邮箱：<a href="mailto:support@findit.studio">support@findit.studio</a>。</p>
</div>
</section>

<div class="about-team-grid" aria-label="团队成员占位">
<article class="about-team-card">
<h3>成员姓名</h3>
<p>角色 · 专长方向 · 简介</p>
</article>
<article class="about-team-card">
<h3>成员姓名</h3>
<p>角色 · 专长方向 · 简介</p>
</article>
<article class="about-team-card">
<h3>成员姓名</h3>
<p>角色 · 专长方向 · 简介</p>
</article>
</div>
</article>
</section>
Expand Down
137 changes: 107 additions & 30 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1902,51 +1902,68 @@ dd {
line-height: 1.75;
}


.about-hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-hero::before {
content: '';
position: absolute;
inset: -120px -90px auto;
height: 360px;
background:
radial-gradient(560px 220px at 22% 20%, rgba(231, 24, 60, 0.25), transparent 62%),
radial-gradient(640px 240px at 84% 8%, rgba(110, 147, 219, 0.2), transparent 64%);
pointer-events: none;
.about-hero-v3 {
background: linear-gradient(170deg, #efcdb9 0%, #d7bfd8 52%, #c8c4eb 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.about-hero-inner {
.about-hero-v3-inner {
position: relative;
z-index: 2;
display: grid;
gap: 14px;
padding: clamp(42px, 8vw, 110px) 0 clamp(36px, 6vw, 84px);
padding: clamp(48px, 8vw, 112px) 0 clamp(210px, 34vw, 310px);
}

.about-hero-inner h1 {
max-width: 17ch;
font-size: clamp(2.2rem, 6.4vw, 5.2rem);
line-height: 0.98;
.about-hero-v3-inner .section-kicker,
.about-hero-v3-inner h1,
.about-hero-v3-inner p {
color: #11131a;
}

.about-hero-v3-inner h1 {
max-width: 9ch;
font-size: clamp(2.6rem, 8.4vw, 6rem);
line-height: 0.94;
letter-spacing: -0.03em;
}

.about-hero-inner p:last-child {
max-width: 68ch;
.about-hero-v3-inner p:last-child {
max-width: 30ch;
font-size: clamp(1.05rem, 2.2vw, 1.6rem);
line-height: 1.45;
}

.about-shell {
.about-hero-v3-orb {
position: absolute;
left: 50%;
bottom: -46%;
transform: translateX(-50%);
width: min(86vw, 880px);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(circle at 50% 36%, rgba(219, 239, 180, 0.95), rgba(192, 209, 239, 0.72) 62%, rgba(178, 165, 242, 0) 78%);
filter: blur(14px);
pointer-events: none;
}

.about-shell-v3 {
display: grid;
gap: 26px;
padding: clamp(22px, 4vw, 34px);
gap: clamp(26px, 3.2vw, 36px);
padding: clamp(24px, 4vw, 42px);
}

.about-grid {
.about-section-grid {
display: grid;
gap: 18px;
gap: 14px;
grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
align-items: start;
}

.about-label {
Expand All @@ -1961,18 +1978,51 @@ dd {
.about-copy {
display: grid;
gap: 12px;
max-width: 66ch;
}

.about-points {
.about-copy-wide {
max-width: 56ch;
}

.about-copy p {
margin: 0;
padding-left: 20px;
font-size: clamp(1.1rem, 2.2vw, 1.95rem);
line-height: 1.5;
letter-spacing: -0.01em;
}

.about-divider {
margin: 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-team-grid {
display: grid;
gap: 10px;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-points li {
color: var(--text-1);
line-height: 1.72;
.about-team-card {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.02);
padding: 16px;
display: grid;
gap: 8px;
}

.about-team-card h3 {
margin: 0;
font-size: 1rem;
}

.about-team-card p {
margin: 0;
font-size: 0.92rem;
line-height: 1.55;
color: var(--text-2);
}

@media (max-width: 900px) {
Expand Down Expand Up @@ -2079,11 +2129,20 @@ dd {
grid-template-columns: 1fr;
}

.about-grid {
.about-section-grid {
grid-template-columns: 1fr;
gap: 10px;
}

.about-copy,
.about-copy-wide {
max-width: none;
}

.about-team-grid {
grid-template-columns: 1fr;
}

.waitlist-form {
grid-template-columns: 1fr;
}
Expand Down Expand Up @@ -2120,6 +2179,24 @@ dd {
padding: 86px 0 62px;
}

.about-hero-v3-inner {
padding: 36px 0 170px;
}

.about-hero-v3-inner h1 {
font-size: clamp(2.1rem, 14vw, 3.8rem);
}

.about-hero-v3-inner p:last-child {
max-width: 100%;
font-size: 1.05rem;
}

.about-hero-v3-orb {
width: 125vw;
bottom: -58%;
}

.hero-display {
font-size: clamp(2.2rem, 13vw, 4rem);
line-height: 0.95;
Expand Down
Loading