LaunchEx 关于

--

**用于重现关于部分的提示词：**

> 使用 React、Tailwind CSS 和 lucide-react 图标构建一个占满视口的“关于创始人”部分。这是一个单独的 `<section>`，具体规格如下：
>
> **Section 容器：**
> - `id="about"`
> - 背景颜色：`#F0F5F7`
> - `min-height: 100vh`
> - Position relative
> - Padding：`py-20 sm:py-28 px-6 sm:px-10`
> - 使用 `flex flex-col justify-center` 垂直居中内容
>
> **内部容器：**
> - `max-w-7xl mx-auto`
>
> **顶部行——标题 + 描述（桌面端并排）：**
> - 一个 flex 容器：`flex flex-col lg:flex-row items-start justify-between gap-10 lg:gap-20`
> - 所有文本颜色：`#154359`
>
> **左侧——Section 标题：**
> - `<h2>` 的第 1 行文本为 `关于`，第 2 行文本为 `创始人`（用 `<br />` 分隔）
> - 使用自定义字体类 `.font-firs`（font-family: `'TT Firs Neue', 'Inter', system-ui, sans-serif`）
> - 字号：`text-[36px] sm:text-[48px] lg:text-[54px]`
> - `font-semibold uppercase tracking-tight leading-[0.95]`
>
> **右侧——描述区块：**
> - `flex flex-col max-w-xl`
> - 文本容器：`text-[17px] sm:text-[18px] leading-[1.5]`，颜色 `#154359`
> - 第 1 段：`"Launchex.Hub 是 Launchex 公司组合旗下的平台，用于发掘和展示突破性创新。"`
> - 第 2 段：`"Launchex.Hub 的使命是让每一位使用本地语言的创新者都有机会用其开创性创造重塑我们的世界。"`——使用 `mt-4` 间距
> - 段落下方放置一个外部链接：
>   - `<a>` 标签指向 `https://base.launchex.vc/`，在新标签页中打开（`target="_blank" rel="noreferrer"`）
>   - `group inline-flex items-center gap-4 mt-6 text-[14px] font-medium`，颜色 `#154359`
>   - 文本：`"Launchex.Hub 网站"`
>   - 旁边放置一个图标按钮：`flex items-center justify-center w-8 h-8 border`，边框颜色 `#154359`，使用 `transition-transform group-hover:-translate-y-0.5`
>   - 图标按钮使用削角 clip-path：`polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)`
>   - 按钮内部：来自 lucide-react 的 `<ArrowUpRight>`，`w-3.5 h-3.5`，`strokeWidth={2}`
>
> **统计卡片网格（位于标题行下方）：**
> - `mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5`
> - 包含 3 张统计卡片，使用以下精确数据：
>   1. value：`"7+ 年"`，text：`"Launchex 已服务市场，引导创业项目及其发展历程"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154203_6c6f94dc-a07e-4ba5-8688-106f01ccd2c8.png&w=1280&q=85`，offset：false
>   2. value：`"15000+"`，text：`"个创新项目进入 Launchex 项目管线"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154151_45c62c60-3bcc-4f21-8f9d-03722ebb5df8.png&w=1280&q=85`，offset：true
>   3. value：`"120+"`，text：`"场由 Launchex 在东欧举办的加速器活动"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_152238_24ec8db4-d728-4739-bb30-e985533e9637.png&w=1280&q=85`，offset：false
>
> **每张统计卡片：**
> - 外层容器：`relative w-full h-[280px] sm:h-[340px]`
> - 第 2 张卡片（索引 1，offset: true）添加 `lg:mt-24`，以形成错落效果
> - 外层容器使用 `backgroundColor: 'rgba(255, 255, 255, 0.8)'` 和 `padding: '1.5px'`（充当纤细的白色边框）
> - 每张卡片使用独特的 polygon clip-path 来形成削角／棱角分明的边角：
>   - 卡片 1：`polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px)`——左上角采用大削角
>   - 卡片 2：`polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px))`——右上角和左下角采用大削角
>   - 卡片 3：`polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px))`——右上角和右下角采用大削角
> - 将相同的 clip-path 同时应用于外层 div 和内部图像 div（形成内嵌边框效果）
> - 内部 div：`relative w-full h-full overflow-hidden bg-cover bg-center`，使用卡片的 image 作为 `backgroundImage`，并设置 `mixBlendMode: 'Normal'`
>
> **每张卡片内部的文本叠加层：**
> - 使用绝对定位，每张卡片的位置不同：
>   - 卡片 1：`left-6 right-6 bottom-6`
>   - 卡片 2：`left-6 bottom-20`
>   - 卡片 3：`left-6 right-28 bottom-6`
> - 全部使用 `max-w-[66%]`
> - 统计数值使用 `.font-firs font-semibold uppercase leading-none text-[36px] sm:text-[52px]`
> - 数值文本采用渐变填充：通过 `background`、`WebkitBackgroundClip: 'text'`、`backgroundClip: 'text'`、`color: 'transparent'` 应用 `linear-gradient(294deg, #185B7B 20%, #4BBDF0)`
> - 描述文本：`mt-3 text-[14px] leading-[1.4]`，颜色 `#154359`
>
> **底部渐隐叠加层：**
> - `pointer-events-none absolute inset-x-0 bottom-0 h-40 sm:h-56 z-10`
> - 背景：`linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)`——渐隐至相同的背景颜色
>
> **CSS 中所需的字体：**
> ```css
> html, body {
>   font-family: 'Inter', system-ui, -apple-system, sans-serif;
>   -webkit-font-smoothing: antialiased;
> }
> .font-firs {
>   font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif;
> }
> ```
>
> **使用的配色：**
> - Section 背景：`#F0F5F7`
> - 所有文本：`#154359`（深青色／藏青色）
> - 卡片外层背景／边框：`rgba(255, 255, 255, 0.8)`
> - 统计数值渐变：以 294deg 从 `#185B7B` 渐变至 `#4BBDF0`
> - 链接图标边框：`#154359`
> - 底部渐变：渐隐至 `#F0F5F7`
>
> **关键设计细节：**
> - 统计卡片使用 CSS `clip-path` polygons（而非 border-radius）来形成棱角分明的削角形状——每张卡片使用不同的 polygon，营造视觉变化
> - 外层容器的 1.5px padding + 白色背景在 clip-path 内营造出纤细白色边框的观感
> - 第 2 张卡片通过 `lg:mt-24` 向下偏移，在桌面端营造错落的瀑布流观感
> - 背景图像通过内联 `backgroundImage` 样式加载，而非使用 `<img>` 标签
> - 外部链接的箭头图标位于一个使用 clip-path 的小型削角方形按钮内
> - 响应式：移动端卡片堆叠为 1 栏，在 `md:` 下为 2 栏，在 `lg:` 下为 3 栏
> - 除外部链接图标按钮的 hover 上抬效果（`group-hover:-translate-y-0.5`）外，不使用其他动画

---