mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-06 20:41:14 +08:00
1f3277a9e0
- Update AboutSection, FeaturesSection, HowItWorksSection to use language prop pattern - Replace useLanguage hook with language prop interface for consistency - Add comprehensive internationalization support for landing page content - Update HeroSection and LandingPage to support language prop flow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com>
80 lines
3.6 KiB
TypeScript
80 lines
3.6 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
import AnimatedSection from './AnimatedSection'
|
|
import { t, Language } from '../../i18n/translations'
|
|
|
|
function StepCard({ number, title, description, delay }: any) {
|
|
return (
|
|
<motion.div className='flex gap-6 items-start' initial={{ opacity: 0, x: -50 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay }} whileHover={{ x: 10 }}>
|
|
<motion.div
|
|
className='flex-shrink-0 w-14 h-14 rounded-full flex items-center justify-center font-bold text-2xl'
|
|
style={{ background: 'var(--binance-yellow)', color: 'var(--brand-black)' }}
|
|
whileHover={{ scale: 1.2, rotate: 360 }}
|
|
transition={{ type: 'spring', stiffness: 260, damping: 20 }}
|
|
>
|
|
{number}
|
|
</motion.div>
|
|
<div>
|
|
<h3 className='text-2xl font-semibold mb-2' style={{ color: 'var(--brand-light-gray)' }}>
|
|
{title}
|
|
</h3>
|
|
<p className='text-lg leading-relaxed' style={{ color: 'var(--text-secondary)' }}>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
interface HowItWorksSectionProps {
|
|
language: Language
|
|
}
|
|
|
|
export default function HowItWorksSection({ language }: HowItWorksSectionProps) {
|
|
return (
|
|
<AnimatedSection id='how-it-works' backgroundColor='var(--brand-dark-gray)'>
|
|
<div className='max-w-7xl mx-auto'>
|
|
<motion.div className='text-center mb-16' initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
|
|
<h2 className='text-4xl font-bold mb-4' style={{ color: 'var(--brand-light-gray)' }}>
|
|
{t('howToStart', language)}
|
|
</h2>
|
|
<p className='text-lg' style={{ color: 'var(--text-secondary)' }}>
|
|
{t('fourSimpleSteps', language)}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className='space-y-8'>
|
|
{[
|
|
{ number: 1, title: t('step1Title', language), description: t('step1Desc', language) },
|
|
{ number: 2, title: t('step2Title', language), description: t('step2Desc', language) },
|
|
{ number: 3, title: t('step3Title', language), description: t('step3Desc', language) },
|
|
{ number: 4, title: t('step4Title', language), description: t('step4Desc', language) },
|
|
].map((step, index) => (
|
|
<StepCard key={step.number} {...step} delay={index * 0.1} />
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
className='mt-12 p-6 rounded-xl flex items-start gap-4'
|
|
style={{ background: 'rgba(246, 70, 93, 0.1)', border: '1px solid rgba(246, 70, 93, 0.3)' }}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
<div className='w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0' style={{ background: 'rgba(246, 70, 93, 0.2)', color: '#F6465D' }}>
|
|
<svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>
|
|
</div>
|
|
<div>
|
|
<div className='font-semibold mb-2' style={{ color: '#F6465D' }}>
|
|
{t('importantRiskWarning', language)}
|
|
</div>
|
|
<p className='text-sm' style={{ color: 'var(--text-secondary)' }}>
|
|
{t('riskWarningText', language)}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</AnimatedSection>
|
|
)
|
|
}
|