first commit
This commit is contained in:
220
src/App.tsx
Normal file
220
src/App.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
{/* Hero 区 */}
|
||||
<section className="hero">
|
||||
<div className="container">
|
||||
<h1 className="hero-title">duooomi · 你的电子吧唧情绪宇宙</h1>
|
||||
<p className="hero-subtitle">
|
||||
用数字吧唧记录每一次心动、每一段关系，把情绪变成可以收藏、分享和互动的「小宇宙」。
|
||||
</p>
|
||||
<p className="hero-desc">
|
||||
不再只是聊天记录，而是可以捏、可以赚、可以展示的电子吧唧，专属于你和他/她。
|
||||
</p>
|
||||
<div className="hero-features">
|
||||
<span className="feature-tag">情绪上链：用电子吧唧记录每个瞬间</span>
|
||||
<span className="feature-tag">关系养成：和 Ta 一起解锁专属徽章与记忆</span>
|
||||
<span className="feature-tag">轻量社交：用吧唧表达自己，不必解释太多</span>
|
||||
</div>
|
||||
<div className="hero-cta">
|
||||
<button className="btn-primary">立即下载 duooomi</button>
|
||||
<button className="btn-secondary">看看 duooomi 怎么玩</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 区块一：我们在解决什么问题？ */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h2 className="section-title">聊天记录翻不到的瞬间，duooomi 都帮你留住</h2>
|
||||
<p className="section-subtitle">
|
||||
情绪来得快、消失也快；关系再亲密，很多小心意都会被时间冲淡。duooomi 想做的，是帮你把这些"转瞬即逝"，变成可以被看见、被收藏的「电子吧唧」。
|
||||
</p>
|
||||
<div className="pain-points">
|
||||
<div className="pain-point">
|
||||
<h3>记不住</h3>
|
||||
<p>重要的日子、表情包、截图，全都散落在聊天记录和相册里。</p>
|
||||
</div>
|
||||
<div className="pain-point">
|
||||
<h3>说不清</h3>
|
||||
<p>想表达在意、想感谢、想道歉，却总觉得话说得太重或太轻。</p>
|
||||
</div>
|
||||
<div className="pain-point">
|
||||
<h3>没仪式感</h3>
|
||||
<p>感情再好，也常常只有一句"收到"，缺少一点属于你们的小仪式。</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="section-summary">
|
||||
所以，我们发明了"电子吧唧"——一种更轻、更可爱、更有仪式感的表达方式。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 区块二：什么是「电子吧唧」？ */}
|
||||
<section className="section section-alt">
|
||||
<div className="container">
|
||||
<h2 className="section-title">电子吧唧，就是可以点亮、收集、互动的情绪徽章</h2>
|
||||
<p className="section-desc">
|
||||
在 duooomi 里，每一个电子吧唧都是一段情绪的缩影：可能是一句口头禅、一个只有你们懂的梗、一次难忘的约会、甚至是一句没说出口的「谢谢」或「对不起」。
|
||||
<br />
|
||||
你可以把它送给自己，也可以送给在意的人，让"感觉"变成一个可以看见、可以点亮的小物件。
|
||||
</p>
|
||||
<div className="features-grid">
|
||||
<div className="feature-card">
|
||||
<h3>自定义吧唧</h3>
|
||||
<p>名字、图标、颜色、含义，都由你来设定。</p>
|
||||
</div>
|
||||
<div className="feature-card">
|
||||
<h3>一键送出</h3>
|
||||
<p>选中好友或对象，附上一句小话，就能送出一个专属电子吧唧。</p>
|
||||
</div>
|
||||
<div className="feature-card">
|
||||
<h3>互动点亮</h3>
|
||||
<p>对方可以收下、点亮、回复，形成一条完整的情绪互动链路。</p>
|
||||
</div>
|
||||
<div className="feature-card">
|
||||
<h3>情绪档案</h3>
|
||||
<p>所有送出/收到的吧唧，都会沉淀为「情绪档案」，成为你的小小人生博物馆。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 区块三：核心场景示例 */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h2 className="section-title">他们在用 duooomi 记录生活的细小闪光</h2>
|
||||
<div className="scenarios">
|
||||
<div className="scenario-card">
|
||||
<h3>从"早安晚安"，到有故事的电子吧唧</h3>
|
||||
<p className="scenario-label">情侣 / 暧昧关系</p>
|
||||
<p className="scenario-desc">
|
||||
用 duooomi 为 TA 做一整套「恋爱吧唧」：第一次见面、第一次牵手、第一次吵架和好……每一个节点都对应一枚电子吧唧。
|
||||
<br />
|
||||
比起"今天开心""今天不开心"，你们会多了一整面只属于两个人的「情绪墙」。
|
||||
</p>
|
||||
</div>
|
||||
<div className="scenario-card">
|
||||
<h3>你们的梗，值得一个专属吧唧</h3>
|
||||
<p className="scenario-label">好朋友 / 室友 / 搭子</p>
|
||||
<p className="scenario-desc">
|
||||
为"图书馆自习搭子""打游戏队友""健身监督官"做一套搭子吧唧。每次见面、互相打卡、互相调侃，都能用吧唧记录下来。
|
||||
<br />
|
||||
哪天翻开来看，你会发现，你的人生是由一串串小吧唧串成的。
|
||||
</p>
|
||||
</div>
|
||||
<div className="scenario-card">
|
||||
<h3>就算只给自己，也很值得</h3>
|
||||
<p className="scenario-label">一个人的情绪角落</p>
|
||||
<p className="scenario-desc">
|
||||
一次鼓起勇气的演讲、一场失眠的夜晚、一次不被理解的崩溃……也可以是一个电子吧唧。
|
||||
<br />
|
||||
duooomi 不只是用来送人，也是你和自己好好相处的一种方式。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 区块四：核心功能一览 */}
|
||||
<section className="section section-alt">
|
||||
<div className="container">
|
||||
<h2 className="section-title">不只是可爱，还很好用</h2>
|
||||
<div className="functions-list">
|
||||
<div className="function-item">
|
||||
<h3>电子吧唧编辑器</h3>
|
||||
<p>自定义名称、图案、颜色、情绪标签，一分钟做出专属吧唧。</p>
|
||||
</div>
|
||||
<div className="function-item">
|
||||
<h3>关系维度管理</h3>
|
||||
<p>按对象、关系、时间线自动聚合你的吧唧互动历史。</p>
|
||||
</div>
|
||||
<div className="function-item">
|
||||
<h3>情绪统计与回顾</h3>
|
||||
<p>以日/周/月为单位，看看你最近都在为什么事情「吧唧」，重新认识自己的情绪习惯。</p>
|
||||
</div>
|
||||
<div className="function-item">
|
||||
<h3>隐私与边界设置</h3>
|
||||
<p>你可以定义：哪些吧唧只给自己看，哪些可以分享，哪些只对特定的人亮起。</p>
|
||||
</div>
|
||||
<div className="function-item">
|
||||
<h3>多端同步</h3>
|
||||
<p>手机多设备同步，换机不丢记忆。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 区块五：为什么是现在？ */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h2 className="section-title">在信息爆炸的时代，真正稀缺的是「被看见的情绪」</h2>
|
||||
<p className="section-desc">
|
||||
聊天软件、短视频、社交网络，让我们说了很多话，却不一定真正表达了自己。
|
||||
<br />
|
||||
duooomi 想做的，是一个更慢一点、更真诚一点的空间，用电子吧唧帮你看见：
|
||||
</p>
|
||||
<ul className="vision-list">
|
||||
<li>自己正在经历什么</li>
|
||||
<li>谁在认真回应你</li>
|
||||
<li>哪些瞬间，值得被重复回味</li>
|
||||
</ul>
|
||||
<p className="vision-motto">
|
||||
duooomi 相信，每一次情绪，都值得一个小小的纪念。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 区块六：常见问题 */}
|
||||
<section className="section section-alt">
|
||||
<div className="container">
|
||||
<h2 className="section-title">常见问题</h2>
|
||||
<div className="faq-list">
|
||||
<div className="faq-item">
|
||||
<h3>电子吧唧是虚拟货币吗？</h3>
|
||||
<p>不是。电子吧唧是一种情绪/关系的数字徽章，用于表达、记录和互动，而不是金融产品或代币。</p>
|
||||
</div>
|
||||
<div className="faq-item">
|
||||
<h3>我的数据会安全吗？</h3>
|
||||
<p>你在 duooomi 的情绪记录和关系数据，会严格加密存储。你可以为敏感吧唧设置仅自己可见，任何第三方（包括我们）都无法查看你的私密内容。</p>
|
||||
</div>
|
||||
<div className="faq-item">
|
||||
<h3>一个人也可以用 duooomi 吗？</h3>
|
||||
<p>当然可以。你可以给自己送吧唧，把它当成一个"情绪日记本"，记录成长和心境变化。</p>
|
||||
</div>
|
||||
<div className="faq-item">
|
||||
<h3>未来会有更多玩法吗？</h3>
|
||||
<p>我们会逐步增加更多互动玩法，比如吧唧主题活动、关系等级、特殊时期限定吧唧等，让你的情绪宇宙持续长出新星球。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 底部 CTA 区 */}
|
||||
<section className="section cta-section">
|
||||
<div className="container">
|
||||
<h2 className="section-title">开始收集你的第一枚电子吧唧</h2>
|
||||
<p className="section-subtitle">
|
||||
也许是一句「谢谢」、一句「辛苦了」，或者一句从没说出口的「我在乎你」。
|
||||
</p>
|
||||
<div className="hero-cta">
|
||||
<button className="btn-primary">立即下载 duooomi</button>
|
||||
<button className="btn-secondary">加入内测社区</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<p className="footer-brand">duooomi · 电子吧唧情绪宇宙</p>
|
||||
<p className="footer-tagline">AI never sleep，情绪永远被看见</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Reference in New Issue
Block a user