提示词
使用 Tailwind CSS 构建一个用于“关于我们”版块的单个 React 组件。使用 `lucide-react` 中的 ArrowRight 图标。仅使用系统字体栈（不使用自定义字体）。精确匹配每一处细节：
---
### 外层容器
`<section>` 使用 `bg-white pt-16 sm:pt-20 lg:pt-32 pb-12 sm:pb-16 lg:pb-24 overflow-hidden`。内部容器：`max-w-[1440px] mx-auto`。
---
### 徽章行
`px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8`。
- **带数字的圆形：** `w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] sm:text-[12px] font-semibold`。显示“1”。
- **胶囊标签：** 文本为“介绍 Axion”。`text-[12px] sm:text-[13px] font-medium rounded-full px-3 sm:px-4 py-1 sm:py-1.5`。无边框、无背景。
---
### 标题
`<h2>` 使用 `px-5 sm:px-8 lg:px-12 text-[clamp(1.5rem,4vw,3.2rem)] font-medium leading-[1.12] tracking-[-0.02em] text-gray-900 mb-12 sm:mb-16 lg:mb-28`。
文本：“以策略驱动创意，在数字领域及更广阔的范围内 / 交付成果。”——`/` 表示换行，使用 `<br className="hidden sm:block" />`，并在它前面添加 `<span className="sm:hidden"> </span>` 作为备用空格（因此在移动端显示为连续的一行，在 sm+ 上则分成两行）。
---
### 内容区域 - 移动端 / 平板布局 (lg:hidden)
容器：`lg:hidden px-5 sm:px-8`。
1. **段落：** “通过研究、创意思考和迭代，我们帮助成长中的品牌充分释放其数字潜力。”——`text-[15px] sm:text-[17px] leading-[1.6] font-medium text-gray-900 mb-6`。
2. **CTA 按钮**（位于一个 `mb-8` 容器内）：橙色按钮（`bg-[#F26522] hover:bg-[#e05a1a]`），文本为“了解我们的工作室”，`text-white text-[13px] sm:text-[14px] font-medium rounded-full pl-5 sm:pl-6 pr-2 py-2 flex items-center gap-3`。包含：
- **文本滚动悬停动画：** 按钮文本位于 `overflow-hidden h-[20px]` > `flex flex-col` 容器中。文本重复两次（两个相同的 `h-[20px] flex items-center` span）。在 `group-hover` 时，flex-col 通过 `transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]` 平移至 `-translate-y-1/2`。
- **箭头圆形：** 白色圆形 `bg-white w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center`。包含来自 lucide-react 的 `ArrowRight`（size 14），`text-[#F26522]`，初始为 `-rotate-45`，在 `group-hover` 时旋转至 `rotate-0`（使用相同的 duration-500 缓动效果）。整个按钮使用 `className="group"`。
3. **图片：** `flex flex-col sm:flex-row gap-4 sm:gap-5`。
- 第一张：`sm:w-[45%]`，`<img>` 使用 `w-full aspect-[438/346] rounded-xl sm:rounded-2xl object-cover`。
- 第二张：`sm:w-[55%]`，`<img>` 使用 `w-full aspect-[900/600] rounded-xl sm:rounded-2xl object-cover`。
---
### 内容区域 - 桌面端布局 (hidden lg:grid)
容器：`hidden lg:grid grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8 px-5 sm:px-8 lg:px-12`。
- **左栏**（`self-end`）：小图，`w-full aspect-[438/346] rounded-2xl object-cover`。
- **中栏**（`self-start flex flex-col justify-end`）：
- 段落：`text-[16px] xl:text-[18px] leading-[1.65] font-medium text-gray-900 whitespace-nowrap mb-6`。文本包含显式 `<br/>` 标签：“通过研究、创意思考`<br/>`和迭代，我们帮助成长中的品牌`<br/>`充分释放其数字潜力。”
- 与移动端相同的橙色 CTA 按钮（相同的文本滚动动画）。
- **右栏**（`self-end`）：大图，`w-full aspect-[3/2] rounded-2xl object-cover`。
---
### 图片 URL
- **小图：** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85`
- **大图：** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85`
---
### 技术细节
- **框架：** React 18 + TypeScript + Tailwind CSS 3.4（默认配置，无自定义主题扩展）
- **图标：** 来自 `lucide-react` 的 `ArrowRight`
- **字体：** 系统默认字体（不加载自定义字体）
- **所有悬停动画：** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`
- **最大内容宽度：** 1440px，使用 `mx-auto` 居中
- **响应式断点：** Tailwind 默认值（sm: 640px, md: 768px, lg: 1024px, xl: 1280px）
---原文提示词（English）
Build a single React component for an "About" section using Tailwind CSS. Use `lucide-react` for the ArrowRight icon. System font stack only (no custom fonts). Match every detail exactly:
---
### Outer wrapper
`<section>` with `bg-white pt-16 sm:pt-20 lg:pt-32 pb-12 sm:pb-16 lg:pb-24 overflow-hidden`. Inner container: `max-w-[1440px] mx-auto`.
---
### Badge row
`px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8`.
- **Numbered circle:** `w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] sm:text-[12px] font-semibold`. Displays "1".
- **Pill label:** Text "Introducing Axion". `text-[12px] sm:text-[13px] font-medium rounded-full px-3 sm:px-4 py-1 sm:py-1.5`. No border, no background.
---
### Heading
`<h2>` with `px-5 sm:px-8 lg:px-12 text-[clamp(1.5rem,4vw,3.2rem)] font-medium leading-[1.12] tracking-[-0.02em] text-gray-900 mb-12 sm:mb-16 lg:mb-28`.
Text: "Strategy-led creatives, delivering / results in digital and beyond." - the `/` represents a line break that is `<br className="hidden sm:block" />` with a `<span className="sm:hidden"> </span>` fallback space before it (so on mobile it reads as one flowing line, on sm+ it breaks into two lines).
---
### Content area - MOBILE / TABLET layout (lg:hidden)
Wrapper: `lg:hidden px-5 sm:px-8`.
1. **Paragraph:** "Through research, creative thinking and iteration we help growing brands realize their digital full potential." - `text-[15px] sm:text-[17px] leading-[1.6] font-medium text-gray-900 mb-6`.
2. **CTA button** (inside a `mb-8` wrapper): Orange button (`bg-[#F26522] hover:bg-[#e05a1a]`) with text "About our studio", `text-white text-[13px] sm:text-[14px] font-medium rounded-full pl-5 sm:pl-6 pr-2 py-2 flex items-center gap-3`. Contains:
- **Text-roll hover animation:** The button text is inside `overflow-hidden h-[20px]` > `flex flex-col` container. The text is duplicated (two identical `h-[20px] flex items-center` spans). On `group-hover`, the flex-col translates `-translate-y-1/2` with `transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`.
- **Arrow circle:** White circle `bg-white w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center`. Contains `ArrowRight` from lucide-react (size 14), `text-[#F26522]`, starts at `-rotate-45`, on `group-hover` rotates to `rotate-0` (same duration-500 easing). The entire button has `className="group"`.
3. **Images:** `flex flex-col sm:flex-row gap-4 sm:gap-5`.
- First: `sm:w-[45%]`, `<img>` with `w-full aspect-[438/346] rounded-xl sm:rounded-2xl object-cover`.
- Second: `sm:w-[55%]`, `<img>` with `w-full aspect-[900/600] rounded-xl sm:rounded-2xl object-cover`.
---
### Content area - DESKTOP layout (hidden lg:grid)
Wrapper: `hidden lg:grid grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8 px-5 sm:px-8 lg:px-12`.
- **Left column** (`self-end`): Small image, `w-full aspect-[438/346] rounded-2xl object-cover`.
- **Center column** (`self-start flex flex-col justify-end`):
- Paragraph: `text-[16px] xl:text-[18px] leading-[1.65] font-medium text-gray-900 whitespace-nowrap mb-6`. Text with explicit `<br/>` tags: "Through research, creative thinking`<br/>`and iteration we help growing brands`<br/>`realize their digital full potential."
- Same orange CTA button as mobile (identical text-roll animation).
- **Right column** (`self-end`): Large image, `w-full aspect-[3/2] rounded-2xl object-cover`.
---
### Image URLs
- **Small image:** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85`
- **Large image:** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85`
---
### Technical details
- **Framework:** React 18 + TypeScript + Tailwind CSS 3.4 (default config, no custom theme extensions)
- **Icons:** `ArrowRight` from `lucide-react`
- **Font:** System default (no custom font loaded)
- **All hover animations:** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`
- **Max content width:** 1440px, centered with `mx-auto`
- **Responsive breakpoints:** Default Tailwind (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)
---
