136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { User, Heart, Target, Coffee } from 'lucide-react';
|
|
import { useLanguage } from '../contexts/LanguageContext';
|
|
|
|
const About = () => {
|
|
const { t } = useLanguage();
|
|
|
|
const stats = [
|
|
{ icon: <User size={24} />, value: t('about.stats.year'), label: t('about.stats.yearLabel') },
|
|
{ icon: <Heart size={24} />, value: t('about.stats.passion'), label: t('about.stats.passionLabel') },
|
|
{ icon: <Target size={24} />, value: t('about.stats.goals'), label: t('about.stats.goalsLabel') },
|
|
{ icon: <Coffee size={24} />, value: t('about.stats.fuel'), label: t('about.stats.fuelLabel') }
|
|
];
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
delayChildren: 0.3
|
|
}
|
|
}
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 50 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6,
|
|
ease: [0.25, 0.1, 0.25, 1] as const
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section id="about" className="about">
|
|
<div className="container">
|
|
<motion.div
|
|
key="about-header"
|
|
className="section-header"
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<h2 className="section-title">{t('about.title')}</h2>
|
|
<p className="section-subtitle">
|
|
{t('about.subtitle')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="about-content">
|
|
<motion.div
|
|
key="about-text"
|
|
className="about-text"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
>
|
|
<motion.div className="about-card" variants={itemVariants}>
|
|
<h3>{t('about.journey.title')}</h3>
|
|
<p>
|
|
{t('about.journey.content')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div className="about-card" variants={itemVariants}>
|
|
<h3>{t('about.passion.title')}</h3>
|
|
<p>
|
|
{t('about.passion.content')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div className="about-card" variants={itemVariants}>
|
|
<h3>{t('about.goals.title')}</h3>
|
|
<p>
|
|
{t('about.goals.content')}
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
key="about-stats"
|
|
className="about-stats"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
>
|
|
{stats.map((stat, index) => (
|
|
<motion.div
|
|
key={`stat-${index}`}
|
|
className="stat-card"
|
|
variants={itemVariants}
|
|
whileHover={{
|
|
scale: 1.05,
|
|
y: -5,
|
|
transition: { duration: 0.3 }
|
|
}}
|
|
>
|
|
<div className="stat-icon">
|
|
{stat.icon}
|
|
</div>
|
|
<div className="stat-value">{stat.value}</div>
|
|
<div className="stat-label">{stat.label}</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
key="about-highlight"
|
|
className="about-highlight"
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<div className="highlight-content">
|
|
<h3>{t('about.quote.title')}</h3>
|
|
<p>
|
|
"{t('about.quote.content')}"
|
|
</p>
|
|
<cite>- {t('about.quote.author')}</cite>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default About; |