c7f241b30a
Translate all hardcoded English strings to use i18n translation keys: Components: - TransactionDetailModal: payment details, refunds, technical info - ConnectOnboarding/ConnectOnboardingEmbed: Stripe Connect setup - StripeApiKeysForm: API key management - DomainPurchase: domain registration flow - Sidebar: navigation labels - Schedule/Sidebar, PendingSidebar: scheduler UI - MasqueradeBanner: masquerade status - Dashboard widgets: metrics, capacity, customers, tickets - Marketing: PricingTable, PluginShowcase, BenefitsSection - ConfirmationModal, ServiceList: common UI Pages: - Staff: invitation flow, role management - Customers: form placeholders - Payments: transactions, payouts, billing - BookingSettings: URL and redirect configuration - TrialExpired: upgrade prompts and features - PlatformSettings, PlatformBusinesses: admin UI - HelpApiDocs: API documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Rocket, Shield, Zap, Headphones } from 'lucide-react';
|
|
|
|
const BenefitsSection: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const benefits = [
|
|
{
|
|
icon: Rocket,
|
|
title: t('marketing.benefits.rapidDeployment.title'),
|
|
description: t('marketing.benefits.rapidDeployment.description'),
|
|
color: 'text-blue-600 dark:text-blue-400',
|
|
bgColor: 'bg-blue-100 dark:bg-blue-900/30',
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: t('marketing.benefits.enterpriseSecurity.title'),
|
|
description: t('marketing.benefits.enterpriseSecurity.description'),
|
|
color: 'text-green-600 dark:text-green-400',
|
|
bgColor: 'bg-green-100 dark:bg-green-900/30',
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: t('marketing.benefits.highPerformance.title'),
|
|
description: t('marketing.benefits.highPerformance.description'),
|
|
color: 'text-purple-600 dark:text-purple-400',
|
|
bgColor: 'bg-purple-100 dark:bg-purple-900/30',
|
|
},
|
|
{
|
|
icon: Headphones,
|
|
title: t('marketing.benefits.expertSupport.title'),
|
|
description: t('marketing.benefits.expertSupport.description'),
|
|
color: 'text-orange-600 dark:text-orange-400',
|
|
bgColor: 'bg-orange-100 dark:bg-orange-900/30',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{benefits.map((benefit, index) => (
|
|
<div key={index} className="text-center group hover:-translate-y-1 transition-transform duration-300">
|
|
<div className={`inline-flex p-4 rounded-2xl ${benefit.bgColor} mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
|
<benefit.icon className={`w-8 h-8 ${benefit.color}`} />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BenefitsSection;
|