update: use language-hook for home page

src/shared/language/context/language-provider.tsx

@@ -37,7 +37,6 @@ export const LanguageContext = createContext<LanguageContextType | undefined>(
 export function LanguageProvider({ children }: { children: ReactNode }) {
   // Default to Russian, but check localStorage on client
   const [language, setLanguageState] = useState<Language>('ru');
-  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     // Check if we're in the browser
@@ -46,7 +45,6 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
       if (savedLanguage && languages[savedLanguage]) {
         setLanguageState(savedLanguage);
       }
-      setIsLoaded(true);
     }
   }, []);
 

src/widgets/about-section.tsx

@@ -1,30 +1,27 @@
+'use client';
+
 import { Users } from 'lucide-react';
 import Image from 'next/image';
 
 import AboutCounter from '@/shared/components/about-counter';
+import { useLanguage } from '@/shared/language';
 
 export const AboutSection = () => {
+  const { t } = useLanguage();
+
   return (
     <section id='about' className='py-16'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='grid items-center gap-12 md:grid-cols-2'>
-          <div data-aos='fade-right'>
+          <div>
             <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
               <Users className='h-6 w-6 text-red-600' />
             </div>
             <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-              О нашей компании
+              {t('home.about.title')}
             </h2>
-            <p className='mb-6 text-gray-600'>
-              Наша сеть заправок является одной из ведущих в Таджикистане. Мы
-              предоставляем качественное топливо и высокий уровень обслуживания
-              для наших клиентов уже более 15 лет.
-            </p>
-            <p className='mb-6 text-gray-600'>
-              Мы постоянно развиваемся, открывая новые станции и улучшая сервис
-              на существующих. Наша цель - сделать заправку автомобиля
-              максимально удобной и быстрой для каждого клиента.
-            </p>
+            <p className='mb-6 text-gray-600'>{t('home.about.description1')}</p>
+            <p className='mb-6 text-gray-600'>{t('home.about.description2')}</p>
 
             <AboutCounter />
             <div className='space-y-4'>
@@ -33,9 +30,11 @@ export const AboutSection = () => {
                   <span className='text-xs text-white'>✓</span>
                 </div>
                 <div className='ml-3'>
-                  <h3 className='text-lg font-medium'>Качественное топливо</h3>
+                  <h3 className='text-lg font-medium'>
+                    {t('home.about.features.quality.title')}
+                  </h3>
                   <p className='text-gray-600'>
-                    Мы гарантируем высокое качество нашего топлива
+                    {t('home.about.features.quality.description')}
                   </p>
                 </div>
               </div>
@@ -45,10 +44,10 @@ export const AboutSection = () => {
                 </div>
                 <div className='ml-3'>
                   <h3 className='text-lg font-medium'>
-                    Современное оборудование
+                    {t('home.about.features.equipment.title')}
                   </h3>
                   <p className='text-gray-600'>
-                    Все наши станции оснащены современным оборудованием
+                    {t('home.about.features.equipment.description')}
                   </p>
                 </div>
               </div>
@@ -58,19 +57,16 @@ export const AboutSection = () => {
                 </div>
                 <div className='ml-3'>
                   <h3 className='text-lg font-medium'>
-                    Профессиональный персонал
+                    {t('home.about.features.staff.title')}
                   </h3>
                   <p className='text-gray-600'>
-                    Наши сотрудники - профессионалы своего дела
+                    {t('home.about.features.staff.description')}
                   </p>
                 </div>
               </div>
             </div>
           </div>
-          <div
-            data-aos='fade-up'
-            className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
-          >
+          <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
             <Image
               src='/placeholder.svg?height=400&width=600'
               alt='About our company'

src/widgets/charity-section.tsx

@@ -1,17 +1,19 @@
+'use client';
+
 import { ChevronRight, Heart } from 'lucide-react';
 import Image from 'next/image';
 
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const CharitySection = () => {
+  const { t } = useLanguage();
+
   return (
     <section id='charity' className='py-16'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='grid items-center gap-12 md:grid-cols-2'>
-          <div
-            data-aos='zoom-in'
-            className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'
-          >
+          <div className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'>
             <Image
               src='/placeholder.svg?height=400&width=600'
               alt='Charity Foundation'
@@ -24,36 +26,32 @@ export const CharitySection = () => {
               <Heart className='h-6 w-6 text-red-600' />
             </div>
             <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-              Благотворительный фонд
+              {t('home.charity.title')}
             </h2>
             <p className='mb-6 text-gray-600'>
-              Наш благотворительный фонд был создан для поддержки социально
-              значимых проектов в Таджикистане. Мы стремимся внести свой вклад в
-              развитие общества и помочь тем, кто в этом нуждается.
-            </p>
-            <p className='mb-6 text-gray-600'>
-              Основные направления деятельности нашего фонда:
+              {t('home.charity.description')}
             </p>
+            <p className='mb-6 text-gray-600'>{t('home.charity.directions')}</p>
             <ul className='mb-6 space-y-2'>
               <li className='flex items-center'>
                 <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
-                <span>Поддержка образовательных программ</span>
+                <span>{t('home.charity.education')}</span>
               </li>
               <li className='flex items-center'>
                 <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
-                <span>Помощь детям из малообеспеченных семей</span>
+                <span>{t('home.charity.children')}</span>
               </li>
               <li className='flex items-center'>
                 <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
-                <span>Экологические инициативы</span>
+                <span>{t('home.charity.ecology')}</span>
               </li>
               <li className='flex items-center'>
                 <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
-                <span>Поддержка спортивных мероприятий</span>
+                <span>{t('home.charity.sports')}</span>
               </li>
             </ul>
             <Button className='bg-red-600 hover:bg-red-700'>
-              Подробнее о фонде
+              {t('home.charity.learnMore')}
             </Button>
           </div>
         </div>

src/widgets/cta-section.tsx

@@ -1,21 +1,28 @@
+'use client';
+
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const CtaSection = () => {
+  const { t } = useLanguage();
+
   return (
     <section className='bg-red-600 py-16 text-white'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='flex flex-col items-center text-center'>
           <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-            Присоединяйтесь к нам
+            {t('home.cta.title')}
           </h2>
-          <p className='mb-8 max-w-2xl'>
-            Станьте частью нашей сети. Получайте специальные предложения, бонусы
-            и скидки.
-          </p>
+          <p className='mb-8 max-w-2xl'>{t('home.cta.description')}</p>
           <div className='flex flex-col gap-4 sm:flex-row'>
-            <Button variant='outline'>Скачать приложение</Button>
-            <Button variant='secondary'>
-              Получить карту лояльности
+            <Button
+              variant='outline'
+              className='border-white text-white hover:bg-white/10'
+            >
+              {t('common.buttons.downloadApp')}
+            </Button>
+            <Button className='bg-white text-red-600 hover:bg-gray-100'>
+              {t('common.buttons.getLoyaltyCard')}
             </Button>
           </div>
         </div>

src/widgets/footer.tsx

@@ -1,22 +1,24 @@
+'use client';
+
 import { Fuel, Mail, MapPin, Phone } from 'lucide-react';
 import Link from 'next/link';
 
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const Footer = () => {
+  const { t } = useLanguage();
+
   return (
     <footer className='bg-gray-900 py-12 text-white'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='grid grid-cols-1 gap-8 md:grid-cols-4'>
           <div>
             <div className='mb-4 flex items-center gap-2'>
               <Fuel className='h-6 w-6 text-red-500' />
               <span className='text-xl font-bold'>GasNetwork</span>
             </div>
-            <p className='mb-4 text-gray-400'>
-              Сеть современных заправок в Таджикистане. Качественное топливо и
-              отличный сервис.
-            </p>
+            <p className='mb-4 text-gray-400'>{t('home.hero.description')}</p>
             <div className='flex space-x-4'>
               <a href='#' className='text-gray-400 hover:text-white'>
                 <svg
@@ -59,7 +61,9 @@ export const Footer = () => {
             </div>
           </div>
           <div>
-            <h3 className='mb-4 text-lg font-semibold'>Контакты</h3>
+            <h3 className='mb-4 text-lg font-semibold'>
+              {t('common.footer.contacts')}
+            </h3>
             <div className='space-y-3'>
               <div className='flex items-start'>
                 <MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
@@ -76,76 +80,69 @@ export const Footer = () => {
             </div>
           </div>
           <div>
-            <h3 className='mb-4 text-lg font-semibold'>Навигация</h3>
+            <h3 className='mb-4 text-lg font-semibold'>
+              {t('common.footer.navigation')}
+            </h3>
             <ul className='space-y-2'>
               <li>
-                <Link
-                  href='#stations'
-                  className='text-gray-400 hover:text-white'
-                >
-                  Наши заправки
+                <Link href='/' className='text-gray-400 hover:text-white'>
+                  {t('common.navigation.home')}
                 </Link>
               </li>
               <li>
-                <Link href='#about' className='text-gray-400 hover:text-white'>
-                  О нас
+                <Link href='/about' className='text-gray-400 hover:text-white'>
+                  {t('common.navigation.about')}
                 </Link>
               </li>
               <li>
                 <Link
-                  href='#vacancies'
+                  href='/clients/loyalty'
                   className='text-gray-400 hover:text-white'
                 >
-                  Вакансии
+                  {t('common.navigation.clients')}
                 </Link>
               </li>
               <li>
                 <Link
-                  href='#promotions'
+                  href='/#stations'
                   className='text-gray-400 hover:text-white'
                 >
-                  Акции
+                  {t('common.navigation.stations')}
                 </Link>
               </li>
               <li>
                 <Link
-                  href='#partners'
+                  href='/#vacancies'
                   className='text-gray-400 hover:text-white'
                 >
-                  Партнеры
-                </Link>
-              </li>
-              <li>
-                <Link
-                  href='#charity'
-                  className='text-gray-400 hover:text-white'
-                >
-                  Благотворительность
+                  {t('common.navigation.vacancies')}
                 </Link>
               </li>
             </ul>
           </div>
           <div>
-            <h3 className='mb-4 text-lg font-semibold'>Подписка</h3>
+            <h3 className='mb-4 text-lg font-semibold'>
+              {t('common.footer.subscribe')}
+            </h3>
             <p className='mb-4 text-gray-400'>
-              Подпишитесь на нашу рассылку, чтобы получать новости и специальные
-              предложения.
+              {t('common.footer.subscribeText')}
             </p>
             <form className='space-y-2'>
               <input
                 type='email'
-                placeholder='Ваш email'
+                placeholder={t('common.footer.yourEmail')}
                 className='w-full rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-white'
               />
               <Button className='w-full bg-red-600 hover:bg-red-700'>
-                Подписаться
+                {t('common.footer.subscribe')}
               </Button>
             </form>
           </div>
         </div>
         <div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
           <p>
-            &copy; {new Date().getFullYear()} GasNetwork. Все права защищены.
+            &copy; {new Date().getFullYear()} GasNetwork.{' '}
+            {t('common.footer.rights')}
           </p>
         </div>
       </div>

src/widgets/header/ui/index.tsx

@@ -1,6 +1,10 @@
+'use client';
+
+import { UserCircle } from 'lucide-react';
 import Link from 'next/link';
 
 import { Logo } from '@/shared/assets/logo';
+import { useLanguage } from '@/shared/language';
 import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
 import { Button } from '@/shared/shadcn-ui/button';
 
@@ -8,6 +12,8 @@ import { DesktopNav } from './desktop-nav';
 import { MobileNav } from './mobile-nav';
 
 export function Header() {
+  const { t } = useLanguage();
+
   return (
     <header className='sticky top-0 z-40 w-full border-b bg-white'>
       <div className='container mx-auto flex h-16 items-center justify-between p-4'>
@@ -18,7 +24,10 @@ export function Header() {
           <div className='flex items-center gap-6'>
             <LanguageSwitcher />
             <Link href={'/login'}>
-              <Button>Вход</Button>
+              <Button className='flex items-center gap-2'>
+                <UserCircle className='size-4' />
+                {t('common.buttons.login')}
+              </Button>
             </Link>
           </div>
         </div>

src/widgets/hero-section.tsx

@@ -1,9 +1,14 @@
+'use client';
+
 import { MapPin } from 'lucide-react';
 import Image from 'next/image';
 
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const HeroSection = () => {
+  const { t } = useLanguage();
+
   return (
     <section className='relative'>
       <div className='relative h-[500px] w-full overflow-hidden'>
@@ -16,22 +21,24 @@ export const HeroSection = () => {
           priority
         />
         <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-          <div className='container mx-auto'>
+          <div className='container'>
             <div className='max-w-lg space-y-4 text-white'>
               <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                Сеть современных заправок в Таджикистане
+                {t('home.hero.title')}
               </h1>
               <p className='text-lg text-gray-200'>
-                Качественное топливо, удобное расположение и отличный сервис для
-                наших клиентов
+                {t('home.hero.description')}
               </p>
               <div className='flex gap-4'>
                 <Button className='bg-red-600 hover:bg-red-700'>
-                  Найти заправку <MapPin className='ml-2 h-4 w-4' />
+                  {t('common.buttons.findStation')}{' '}
+                  <MapPin className='ml-2 h-4 w-4' />
                 </Button>
-                <Button variant='outline'
+                <Button
+                  variant='outline'
+                  className='border-white text-white hover:bg-white/10'
                 >
-                  Узнать больше
+                  {t('common.buttons.learnMore')}
                 </Button>
               </div>
             </div>

src/widgets/map-section.tsx

@@ -1,34 +1,36 @@
+'use client';
+
 import { ChevronRight, MapPin } from 'lucide-react';
 
 import { GasStationMap } from '@/features/map';
 
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const MapSection = () => {
+  const { t } = useLanguage();
+
   return (
     <section id='stations' className='bg-gray-50 py-16'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <MapPin className='h-6 w-6 text-red-600' />
           </div>
           <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-            Наши заправки
+            {t('home.stations.title')}
           </h2>
           <p className='max-w-2xl text-gray-600'>
-            Найдите ближайшую к вам заправку нашей сети. Мы расположены в
-            удобных местах по всему Таджикистану.
+            {t('home.stations.description')}
           </p>
         </div>
-        <div
-          data-aos='fade-up'
-          className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
-        >
+        <div className='h-[500px] overflow-hidden rounded-xl border shadow-lg'>
           <GasStationMap />
         </div>
         <div className='mt-8 flex justify-center'>
           <Button className='bg-red-600 hover:bg-red-700'>
-            Показать все заправки <ChevronRight className='ml-2 h-4 w-4' />
+            {t('home.stations.showAll')}{' '}
+            <ChevronRight className='ml-2 h-4 w-4' />
           </Button>
         </div>
       </div>

src/widgets/partners-section.tsx

@@ -1,22 +1,26 @@
+'use client';
+
 import { Handshake } from 'lucide-react';
 import Image from 'next/image';
 
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const PartnersSection = () => {
+  const { t } = useLanguage();
+
   return (
     <section id='partners' className='bg-gray-50 py-16'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <Handshake className='h-6 w-6 text-red-600' />
           </div>
           <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-            Наши партнеры
+            {t('home.partners.title')}
           </h2>
           <p className='max-w-2xl text-gray-600'>
-            Мы сотрудничаем с ведущими компаниями для предоставления лучших
-            услуг нашим клиентам.
+            {t('home.partners.description')}
           </p>
         </div>
 
@@ -25,7 +29,6 @@ export const PartnersSection = () => {
             <div
               key={partner}
               className='flex h-32 items-center justify-center rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
-              data-aos='flip-up'
             >
               <Image
                 src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}
@@ -39,13 +42,14 @@ export const PartnersSection = () => {
         </div>
 
         <div className='mt-12 text-center'>
-          <h3 className='mb-4 text-xl font-bold'>Станьте нашим партнером</h3>
+          <h3 className='mb-4 text-xl font-bold'>
+            {t('home.partners.becomePartner')}
+          </h3>
           <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
-            Мы открыты для сотрудничества и новых партнерских отношений.
-            Свяжитесь с нами для обсуждения возможностей.
+            {t('home.partners.becomePartnerText')}
           </p>
           <Button className='bg-red-600 hover:bg-red-700'>
-            Связаться с нами
+            {t('common.buttons.contactUs')}
           </Button>
         </div>
       </div>

src/widgets/promotions-section.tsx

@@ -1,28 +1,33 @@
+'use client';
+
 import { ArrowRight, Gift } from 'lucide-react';
 
 import PromotionSlider from '@/shared/components/promotion-slider';
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const PromotionsSection = () => {
+  const { t } = useLanguage();
+
   return (
     <section id='promotions' className='bg-gray-50 py-16'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <Gift className='h-6 w-6 text-red-600' />
           </div>
           <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-            Актуальные акции
+            {t('home.promotions.title')}
           </h2>
           <p className='max-w-2xl text-gray-600'>
-            Специальные предложения и акции для наших клиентов. Заправляйтесь
-            выгодно!
+            {t('home.promotions.description')}
           </p>
         </div>
         <PromotionSlider />
         <div className='mt-8 flex justify-center'>
           <Button className='bg-red-600 hover:bg-red-700'>
-            Все акции <ArrowRight className='ml-2 h-4 w-4' />
+            {t('home.promotions.viewAll')}{' '}
+            <ArrowRight className='ml-2 h-4 w-4' />
           </Button>
         </div>
       </div>

src/widgets/vacancies-section.tsx

@@ -1,5 +1,8 @@
+'use client';
+
 import { ArrowRight, Briefcase } from 'lucide-react';
 
+import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
 import {
@@ -10,19 +13,20 @@ import {
 } from '@/shared/shadcn-ui/tabs';
 
 export const VacanciesSection = () => {
+  const { t } = useLanguage();
+
   return (
     <section id='vacancies' className='py-16'>
-      <div className='container mx-auto'>
+      <div className='container'>
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <Briefcase className='h-6 w-6 text-red-600' />
           </div>
           <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-            Вакансии
+            {t('home.vacancies.title')}
           </h2>
           <p className='max-w-2xl text-gray-600'>
-            Присоединяйтесь к нашей команде профессионалов. Мы предлагаем
-            стабильную работу и возможности для роста.
+            {t('home.vacancies.description')}
           </p>
         </div>
 
@@ -42,7 +46,6 @@ export const VacanciesSection = () => {
               <Card
                 key={index}
                 className='overflow-hidden transition-all hover:shadow-md'
-                data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
               >
                 <CardContent className='p-0'>
                   <div className='p-6'>
@@ -62,7 +65,7 @@ export const VacanciesSection = () => {
                         </div>
                       </div>
                       <Button variant='outline' size='sm'>
-                        Подробнее
+                        {t('common.buttons.readMore')}
                       </Button>
                     </div>
                   </div>
@@ -98,7 +101,7 @@ export const VacanciesSection = () => {
                         </div>
                       </div>
                       <Button variant='outline' size='sm'>
-                        Подробнее
+                        {t('common.buttons.readMore')}
                       </Button>
                     </div>
                   </div>
@@ -131,7 +134,7 @@ export const VacanciesSection = () => {
                           </div>
                         </div>
                         <Button variant='outline' size='sm'>
-                          Подробнее
+                          {t('common.buttons.readMore')}
                         </Button>
                       </div>
                     </div>
@@ -144,7 +147,8 @@ export const VacanciesSection = () => {
 
         <div className='mt-8 flex justify-center'>
           <Button className='bg-red-600 hover:bg-red-700'>
-            Отправить резюме <ArrowRight className='ml-2 h-4 w-4' />
+            {t('home.vacancies.sendResume')}{' '}
+            <ArrowRight className='ml-2 h-4 w-4' />
           </Button>
         </div>
       </div>