提示词
--
**用于重现关于部分的提示词：**
> 使用 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`）外，不使用其他动画
---原文提示词（English）
--
**Prompt to recreate the About section:**
> Build a full-viewport "About the Founders" section using React with Tailwind CSS and lucide-react for icons. This is a single `<section>` with the following exact specifications:
>
> **Section container:**
> - `id="about"`
> - Background color: `#F0F5F7`
> - `min-height: 100vh`
> - Position relative
> - Padding: `py-20 sm:py-28 px-6 sm:px-10`
> - Uses `flex flex-col justify-center` to vertically center content
>
> **Inner wrapper:**
> - `max-w-7xl mx-auto`
>
> **Top row -- heading + description (side by side on desktop):**
> - A flex container: `flex flex-col lg:flex-row items-start justify-between gap-10 lg:gap-20`
> - All text color: `#154359`
>
> **Left side -- Section heading:**
> - `<h2>` with text `About` on line 1, `the founders` on line 2 (separated by `<br />`)
> - Uses custom font class `.font-firs` (font-family: `'TT Firs Neue', 'Inter', system-ui, sans-serif`)
> - Font sizes: `text-[36px] sm:text-[48px] lg:text-[54px]`
> - `font-semibold uppercase tracking-tight leading-[0.95]`
>
> **Right side -- Description block:**
> - `flex flex-col max-w-xl`
> - Text container: `text-[17px] sm:text-[18px] leading-[1.5]`, color `#154359`
> - Paragraph 1: `"Launchex.Hub is a platform that is part of a portfolio of companies Launchex, for sourcing and showcasing groundbreaking innovations."`
> - Paragraph 2: `"Launchex.Hub's mission is to offer every local-language innovator the chance to reshape our world with their pioneering creation."` -- with `mt-4` spacing
> - Below paragraphs, an external link:
> - `<a>` tag pointing to `https://base.launchex.vc/`, opens in new tab (`target="_blank" rel="noreferrer"`)
> - `group inline-flex items-center gap-4 mt-6 text-[14px] font-medium`, color `#154359`
> - Text: `"Launchex.Hub website"`
> - Next to it, an icon button: `flex items-center justify-center w-8 h-8 border`, border color `#154359`, with `transition-transform group-hover:-translate-y-0.5`
> - The icon button uses a chamfered clip-path: `polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)`
> - Inside the button: `<ArrowUpRight>` from lucide-react, `w-3.5 h-3.5`, `strokeWidth={2}`
>
> **Stats cards grid (below the heading row):**
> - `mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5`
> - Contains 3 stat cards with this exact data:
> 1. value: `"7+ years"`, text: `"Launchex has served the market, guiding ventures and their journeys"`, 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: `"innovation ventures moved through the Launchex pipeline"`, 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: `"accelerator sessions delivered by Launchex across Eastern Europe"`, 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
>
> **Each stat card:**
> - Outer wrapper: `relative w-full h-[280px] sm:h-[340px]`
> - The 2nd card (index 1, offset: true) gets `lg:mt-24` to create a staggered effect
> - Outer wrapper has `backgroundColor: 'rgba(255, 255, 255, 0.8)'` and `padding: '1.5px'` (acts as a thin white border)
> - Each card uses a unique polygon clip-path for chamfered/angular corners:
> - Card 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)` -- large chamfer on top-left
> - Card 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))` -- large chamfer on top-right and bottom-left
> - Card 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))` -- large chamfer on top-right, bottom-right
> - The same clip-path is applied to both the outer div and the inner image div (creating an inset border effect)
> - Inner div: `relative w-full h-full overflow-hidden bg-cover bg-center`, with the card's image as `backgroundImage`, `mixBlendMode: 'Normal'`
>
> **Text overlay inside each card:**
> - Positioned absolutely with different placements per card:
> - Card 1: `left-6 right-6 bottom-6`
> - Card 2: `left-6 bottom-20`
> - Card 3: `left-6 right-28 bottom-6`
> - All have `max-w-[66%]`
> - The stat value uses `.font-firs font-semibold uppercase leading-none text-[36px] sm:text-[52px]`
> - Value text has a gradient fill: `linear-gradient(294deg, #185B7B 20%, #4BBDF0)` applied via `background`, `WebkitBackgroundClip: 'text'`, `backgroundClip: 'text'`, `color: 'transparent'`
> - Description text: `mt-3 text-[14px] leading-[1.4]`, color `#154359`
>
> **Bottom fade overlay:**
> - `pointer-events-none absolute inset-x-0 bottom-0 h-40 sm:h-56 z-10`
> - Background: `linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)` -- fades to the same background color
>
> **Fonts required in 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;
> }
> ```
>
> **Color palette used:**
> - Section background: `#F0F5F7`
> - All text: `#154359` (dark teal/navy)
> - Card outer background/border: `rgba(255, 255, 255, 0.8)`
> - Stat value gradient: `#185B7B` to `#4BBDF0` at 294deg
> - Link icon border: `#154359`
> - Bottom gradient: fades to `#F0F5F7`
>
> **Key design details:**
> - The stat cards use CSS `clip-path` polygons (not border-radius) for angular/chamfered corner shapes -- each card has a different polygon creating visual variety
> - The 1.5px padding on the outer wrapper + white background creates the appearance of a thin white border inside the clip-path
> - The 2nd card is offset downward by `lg:mt-24` to create a staggered/masonry feel on desktop
> - Background images are loaded via inline `backgroundImage` style, not `<img>` tags
> - The external link arrow icon sits inside a small chamfered square button using clip-path
> - Responsive: cards stack 1-column on mobile, 2-column on `md:`, 3-column on `lg:`
> - No animations beyond the hover lift on the external link icon button (`group-hover:-translate-y-0.5`)
---
