|
|
|
@@ -29,33 +29,24 @@ const ToolCard = ({ icon, brand, brandColor, title, description, link, glowClass |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className="group cursor-pointer"> |
|
|
|
<div className="group cursor-pointer h-full"> |
|
|
|
<div |
|
|
|
className={`rounded-2xl sm:rounded-[2rem] border bg-white border-black/5 p-8 sm:p-10 lg:p-12 shadow-sm transition-all duration-500 hover:shadow-2xl ${brandColorClasses[glowClass]}`} |
|
|
|
className={`h-full rounded-2xl sm:rounded-[2rem] border bg-white border-black/5 p-8 sm:p-10 lg:p-12 shadow-sm transition-all duration-500 hover:shadow-2xl ${brandColorClasses[glowClass]}`} |
|
|
|
> |
|
|
|
{/* Logo */} |
|
|
|
<div className="mb-6 sm:mb-8"> |
|
|
|
{/* Logo + Title */} |
|
|
|
<div className="mb-3 sm:mb-4 flex items-center gap-3 sm:gap-4"> |
|
|
|
<img |
|
|
|
src={icon} |
|
|
|
alt={title} |
|
|
|
className="h-10 w-10 sm:h-12 sm:w-12 object-contain" |
|
|
|
className="h-8 w-8 object-contain" |
|
|
|
/> |
|
|
|
<h3 className="text-xl sm:text-2xl font-bold tracking-tight line-clamp-1"> |
|
|
|
{title} |
|
|
|
</h3> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Brand Tag */} |
|
|
|
<span |
|
|
|
className={`mb-4 sm:mb-6 block text-[10px] sm:text-xs font-black uppercase tracking-[0.15em] ${brandColorClasses[brandColor].split(' ')[0]}`} |
|
|
|
> |
|
|
|
{brand} |
|
|
|
</span> |
|
|
|
|
|
|
|
{/* Title */} |
|
|
|
<h3 className="mb-3 sm:mb-4 text-xl sm:text-2xl font-bold tracking-tight"> |
|
|
|
{title} |
|
|
|
</h3> |
|
|
|
|
|
|
|
{/* Description */} |
|
|
|
<p className="mb-6 sm:mb-8 text-sm sm:text-base font-light leading-relaxed opacity-40"> |
|
|
|
<p className="mb-6 sm:mb-8 text-sm sm:text-base font-light leading-relaxed opacity-40 line-clamp-3"> |
|
|
|
{description} |
|
|
|
</p> |
|
|
|
|
|
|
|
@@ -81,26 +72,26 @@ const ToolsSection = () => { |
|
|
|
icon: '/images/Anthropic.png', |
|
|
|
brand: 'Anthropic', |
|
|
|
brandColor: 'amber', |
|
|
|
title: 'Claude Code', |
|
|
|
description: '代码执行能力强劲,高效理解需求,快速生成精准代码。', |
|
|
|
title: 'AI编程', |
|
|
|
description: '无缝支持AI编程工具,涵盖顶级模型。', |
|
|
|
link: '/pricing', |
|
|
|
glowClass: 'amber', |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: '/images/openai.png', |
|
|
|
brand: 'OpenAI', |
|
|
|
icon: '/images/create.png', |
|
|
|
brand: ' ', |
|
|
|
brandColor: 'blue', |
|
|
|
title: 'CodeX', |
|
|
|
description: '深度思考模式,慢工出细活,复杂逻辑处理更严谨。', |
|
|
|
title: '创作', |
|
|
|
description: '顶级多模态模型,统一API使用。', |
|
|
|
link: '/pricing', |
|
|
|
glowClass: 'blue', |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: '/images/gemini-ai.png', |
|
|
|
brand: 'Google AI', |
|
|
|
icon: '/images/openclaw-3.jpg', |
|
|
|
brand: 'OpenClaw', |
|
|
|
brandColor: 'purple', |
|
|
|
title: 'Gemini CLI', |
|
|
|
description: '前端能力顶尖,UI/UX 设计与实现一步到位,视觉效果出众。', |
|
|
|
title: '龙虾', |
|
|
|
description: '无缝接入龙虾,顶级模型构建聪明大脑。', |
|
|
|
link: '/pricing', |
|
|
|
glowClass: 'purple', |
|
|
|
}, |
|
|
|
@@ -108,7 +99,7 @@ const ToolsSection = () => { |
|
|
|
|
|
|
|
return ( |
|
|
|
<section className="home-snap-section bg-[var(--semi-color-bg-0)]"> |
|
|
|
<div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8"> |
|
|
|
<div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8"> |
|
|
|
{/* Header */} |
|
|
|
<div className="mb-16 flex flex-col items-start justify-between gap-4 sm:mb-20 sm:flex-row sm:items-end sm:gap-6 lg:mb-24"> |
|
|
|
<h2 className="whitespace-pre-line text-[clamp(1.75rem,5vw,3.5rem)] font-black tracking-[-0.03em]"> |
|
|
|
@@ -120,7 +111,7 @@ const ToolsSection = () => { |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Cards Grid */} |
|
|
|
<div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3"> |
|
|
|
<div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3 items-stretch"> |
|
|
|
{tools.map((tool, index) => ( |
|
|
|
<ToolCard key={index} {...tool} /> |
|
|
|
))} |
|
|
|
|