Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 

134 строки
4.3 KiB

  1. /*
  2. Copyright (C) 2025 QuantumNous
  3. This program is free software: you can redistribute it and/or modify
  4. it under the terms of the GNU Affero General Public License as
  5. published by the Free Software Foundation, either version 3 of the
  6. License, or (at your option) any later version.
  7. This program is distributed in the hope that it will be useful,
  8. but WITHOUT ANY WARRANTY; without even the implied warranty of
  9. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  10. GNU Affero General Public License for more details.
  11. You should have received a copy of the GNU Affero General Public License
  12. along with this program. If not, see <https://www.gnu.org/licenses/>.
  13. For commercial licensing, please contact support@quantumnous.com
  14. */
  15. import React from 'react';
  16. import { useTranslation } from 'react-i18next';
  17. import { IconChevronRight } from '@douyinfe/semi-icons';
  18. const ToolCard = ({ icon, brand, brandColor, title, description, link, glowClass }) => {
  19. const brandColorClasses = {
  20. amber: 'text-amber-400 hover-glow-amber',
  21. blue: 'text-blue-400 hover-glow-blue',
  22. purple: 'text-purple-400 hover-glow-purple',
  23. };
  24. return (
  25. <div className="group cursor-pointer">
  26. <div
  27. 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]}`}
  28. >
  29. {/* Logo */}
  30. <div className="mb-6 sm:mb-8">
  31. <img
  32. src={icon}
  33. alt={title}
  34. className="h-10 w-10 sm:h-12 sm:w-12 object-contain"
  35. />
  36. </div>
  37. {/* Brand Tag */}
  38. <span
  39. className={`mb-4 sm:mb-6 block text-[10px] sm:text-xs font-black uppercase tracking-[0.15em] ${brandColorClasses[brandColor].split(' ')[0]}`}
  40. >
  41. {brand}
  42. </span>
  43. {/* Title */}
  44. <h3 className="mb-3 sm:mb-4 text-xl sm:text-2xl font-bold tracking-tight">
  45. {title}
  46. </h3>
  47. {/* Description */}
  48. <p className="mb-6 sm:mb-8 text-sm sm:text-base font-light leading-relaxed opacity-40">
  49. {description}
  50. </p>
  51. {/* Link */}
  52. <a
  53. href={link}
  54. target="_top"
  55. className="flex items-center gap-2 text-[10px] font-bold opacity-0 transition-opacity group-hover:opacity-100"
  56. >
  57. LEARN CONFIG
  58. <IconChevronRight size={14} />
  59. </a>
  60. </div>
  61. </div>
  62. );
  63. };
  64. const ToolsSection = () => {
  65. const { t } = useTranslation();
  66. const tools = [
  67. {
  68. icon: '/images/Anthropic.png',
  69. brand: 'Anthropic',
  70. brandColor: 'amber',
  71. title: 'Claude Code',
  72. description: '代码执行能力强劲,高效理解需求,快速生成精准代码。',
  73. link: '/pricing',
  74. glowClass: 'amber',
  75. },
  76. {
  77. icon: '/images/openai.png',
  78. brand: 'OpenAI',
  79. brandColor: 'blue',
  80. title: 'CodeX',
  81. description: '深度思考模式,慢工出细活,复杂逻辑处理更严谨。',
  82. link: '/pricing',
  83. glowClass: 'blue',
  84. },
  85. {
  86. icon: '/images/gemini-ai.png',
  87. brand: 'Google AI',
  88. brandColor: 'purple',
  89. title: 'Gemini CLI',
  90. description: '前端能力顶尖,UI/UX 设计与实现一步到位,视觉效果出众。',
  91. link: '/pricing',
  92. glowClass: 'purple',
  93. },
  94. ];
  95. return (
  96. <section className="home-snap-section bg-[var(--semi-color-bg-0)]">
  97. <div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
  98. {/* Header */}
  99. <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">
  100. <h2 className="whitespace-pre-line text-[clamp(1.75rem,5vw,3.5rem)] font-black tracking-[-0.03em]">
  101. {t('原生支持\n极致工具链')}
  102. </h2>
  103. <p className="max-w-xs text-xs font-light opacity-40 sm:text-sm">
  104. {t('深度优化 API 路由,确保在 CLI 环境下依然拥有流畅的流式交互体验。')}
  105. </p>
  106. </div>
  107. {/* Cards Grid */}
  108. <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3">
  109. {tools.map((tool, index) => (
  110. <ToolCard key={index} {...tool} />
  111. ))}
  112. </div>
  113. </div>
  114. </section>
  115. );
  116. };
  117. export default ToolsSection;