chore: updated about styles

src/sections/AboutSection.tsx

@@ -6,7 +6,7 @@ import { SiNestjs } from 'react-icons/si';
 
 import { useGSAP } from '@gsap/react';
 import { gsap } from 'gsap';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 function AboutSection() {
   const { t } = useTranslation();
@@ -51,44 +51,52 @@ function AboutSection() {
           <h2>{t('about.subtitle')}</h2>
 
           <p>
-            {t('about.content')}
-            {/* <a href="https://td2.info.pl/" target="_blank">
-              Train Driver 2
-            </a> */}
+            <Trans i18nKey="about.content">
+              <a href="https://web.td2.info.pl/pl" target="_blank"></a>
+              <a href="https://web.td2.info.pl/en" target="_blank"></a>
+            </Trans>
           </p>
         </div>
       </div>
 
       <div className="about-stats">
         <div className="stat-item">
+          <FaStar className="stat-item-icon" size={50} />
+
           <h1>
-            <FaStar />
             <div>{t('about.brief-1-title')}</div>
           </h1>
+
           <p>{t('about.brief-1-content')}</p>
         </div>
 
         <div className="stat-item">
+          <FaUserGraduate className="stat-item-icon" size={50} />
+
           <h1>
-            <FaUserGraduate />
             <div>{t('about.brief-2-title')}</div>
           </h1>
+
           <p>{t('about.brief-2-content')}</p>
         </div>
 
         <div className="stat-item">
+          <FaBriefcase className="stat-item-icon" size={50} />
+
           <h1>
-            <FaBriefcase />
             <div>{t('about.brief-3-title')}</div>
           </h1>
+
           <p>{t('about.brief-3-content')}</p>
         </div>
 
         <div className="stat-item">
+          <FaHeart className="stat-item-icon" size={50} />
+
           <h1>
-            <FaHeart />
             <div>{t('about.brief-4-title')}</div>
           </h1>
+
           <p>
             <FaVuejs /> Vue
             <br />