|
- /*
- Copyright (C) 2025 QuantumNous
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-
- For commercial licensing, please contact support@quantumnous.com
- */
-
- import React from 'react';
- import { useTranslation } from 'react-i18next';
- import { IconChevronRight } from '@douyinfe/semi-icons';
-
- const ToolCard = ({ icon, brand, brandColor, title, description, link, glowClass }) => {
- const brandColorClasses = {
- amber: 'text-amber-400 hover-glow-amber',
- blue: 'text-blue-400 hover-glow-blue',
- purple: 'text-purple-400 hover-glow-purple',
- };
-
- return (
- <div className="group cursor-pointer">
- <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]}`}
- >
- {/* Logo */}
- <div className="mb-6 sm:mb-8">
- <img
- src={icon}
- alt={title}
- className="h-10 w-10 sm:h-12 sm:w-12 object-contain"
- />
- </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">
- {description}
- </p>
-
- {/* Link */}
- <a
- href={link}
- target="_top"
- className="flex items-center gap-2 text-[10px] font-bold opacity-0 transition-opacity group-hover:opacity-100"
- >
- LEARN CONFIG
- <IconChevronRight size={14} />
- </a>
- </div>
- </div>
- );
- };
-
- const ToolsSection = () => {
- const { t } = useTranslation();
-
- const tools = [
- {
- icon: '/images/Anthropic.png',
- brand: 'Anthropic',
- brandColor: 'amber',
- title: 'Claude Code',
- description: '代码执行能力强劲,高效理解需求,快速生成精准代码。',
- link: '/pricing',
- glowClass: 'amber',
- },
- {
- icon: '/images/openai.png',
- brand: 'OpenAI',
- brandColor: 'blue',
- title: 'CodeX',
- description: '深度思考模式,慢工出细活,复杂逻辑处理更严谨。',
- link: '/pricing',
- glowClass: 'blue',
- },
- {
- icon: '/images/gemini-ai.png',
- brand: 'Google AI',
- brandColor: 'purple',
- title: 'Gemini CLI',
- description: '前端能力顶尖,UI/UX 设计与实现一步到位,视觉效果出众。',
- link: '/pricing',
- glowClass: 'purple',
- },
- ];
-
- 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">
- {/* 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]">
- {t('原生支持\n极致工具链')}
- </h2>
- <p className="max-w-xs text-xs font-light opacity-40 sm:text-sm">
- {t('深度优化 API 路由,确保在 CLI 环境下依然拥有流畅的流式交互体验。')}
- </p>
- </div>
-
- {/* Cards Grid */}
- <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3">
- {tools.map((tool, index) => (
- <ToolCard key={index} {...tool} />
- ))}
- </div>
- </div>
- </section>
- );
- };
-
- export default ToolsSection;
|