update: rendered all the text in json

2025-04-28 19:12:16 +03:00 · 2025-04-28 19:12:16 +03:00 · ecca91b401
commit ecca91b401
parent 26b714ecc7
7 changed files with 135 additions and 110 deletions
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@ -1,93 +1,5 @@
-import { Building2, Fuel, User } from 'lucide-react';
-import Link from 'next/link';
+import LoginPage from "@/pages-templates/login";

-import { LoginForm } from '@/features/auth/login-form';
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/shared/shadcn-ui/card';
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@/shared/shadcn-ui/tabs';
-
-export default function LoginPage() {
-  return (
-    <div className='flex min-h-screen flex-col items-center justify-center'>
-      <main className='flex-1'>
-        <div className='container max-w-6xl py-16'>
-          <div className='mb-12 flex flex-col items-center text-center'>
-            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-              <Fuel className='h-6 w-6 text-red-600' />
-            </div>
-            <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-              Вход в личный кабинет
-            </h1>
-            <p className='max-w-2xl text-gray-600'>
-              Войдите в личный кабинет, чтобы получить доступ к информации о
-              ваших бонусах, истории операций и другим возможностям.
-            </p>
-          </div>
-
-          <div className='mx-auto max-w-md'>
-            <Tabs defaultValue='bonus' className='w-full'>
-              <TabsList className='mb-8 grid w-full grid-cols-2'>
-                <TabsTrigger value='bonus' className='text-base'>
-                  <User className='mr-2 h-4 w-4' /> Бонусный клиент
-                </TabsTrigger>
-                <TabsTrigger value='corporate' className='text-base'>
-                  <Building2 className='mr-2 h-4 w-4' /> Корпоративный клиент
-                </TabsTrigger>
-              </TabsList>
-
-              <TabsContent value='bonus'>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Вход для бонусных клиентов</CardTitle>
-                    <CardDescription>
-                      Введите номер телефона и номер бонусной карты для входа в
-                      личный кабинет.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className='space-y-4'>
-                    <LoginForm />
-                  </CardContent>
-                </Card>
-              </TabsContent>
-
-              <TabsContent value='corporate'>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Вход для корпоративных клиентов</CardTitle>
-                    <CardDescription>
-                      Введите номер телефона и номер корпоративной карты для
-                      входа в личный кабинет.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className='space-y-4'>
-                    <LoginForm />
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
-
-            <div className='mt-8 text-center text-sm text-gray-500'>
-              <p>
-                Возникли проблемы со входом?{' '}
-                <Link href='/contact' className='text-red-600 hover:underline'>
-                  Свяжитесь с нами
-                </Link>
-              </p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
+export default function Login() {
+  return <LoginPage/>
 }
--- a/src/features/auth/login-form/ui/login-form.tsx
+++ b/src/features/auth/login-form/ui/login-form.tsx
@ -17,12 +17,15 @@ import {
 import { Input } from '@/shared/shadcn-ui/input';

 import { LoginFormData, loginFormSchema } from '../model/login-form.schema';
+import { useLanguage } from '@/shared/language';

 interface LoginFormProps {
  //   onSubmit: (data: any) => Promise<void>;
 }

 export const LoginForm = ({}: LoginFormProps) => {
+  const {t} = useLanguage()
+
  const router = useRouter();
  // const [login, results] = useLoginMutation();

@ -62,7 +65,7 @@ export const LoginForm = ({}: LoginFormProps) => {
          name='phoneNumber'
          render={({ field }) => (
            <FormItem>
-              <FormLabel>Номер телефона</FormLabel>
+              <FormLabel>{t("auth.phoneNumber")}</FormLabel>
              <FormControl>
                <Input
                  type='tel'
@ -80,7 +83,7 @@ export const LoginForm = ({}: LoginFormProps) => {
          name='cardNumber'
          render={({ field }) => (
            <FormItem>
-              <FormLabel>Номер карты</FormLabel>
+              <FormLabel>{t("auth.cardNumber")}</FormLabel>
              <FormControl>
                <Input
                  type='text'
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@ -0,0 +1,95 @@
+"use client"
+
+import { Building2, Fuel, User } from 'lucide-react';
+import Link from 'next/link';
+
+import { LoginForm } from '@/features/auth/login-form';
+import { useLanguage } from '@/shared/language';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/shared/shadcn-ui/card';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/shared/shadcn-ui/tabs';
+
+export default function LoginPage() {
+  const { t } = useLanguage();
+
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center'>
+      <main className='flex-1'>
+        <div className='container max-w-6xl py-16'>
+          <div className='mb-12 flex flex-col items-center text-center'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <Fuel className='h-6 w-6 text-red-600' />
+            </div>
+            <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('auth.title')}
+            </h1>
+            <p className='max-w-2xl text-gray-600'>
+              {t('auth.description')}
+            </p>
+          </div>
+
+          <div className='mx-auto max-w-md'>
+            <Tabs defaultValue='bonus' className='w-full'>
+              <TabsList className='mb-8 grid w-full grid-cols-2'>
+                <TabsTrigger value='bonus' className='text-base'>
+                  <User className='mr-2 h-4 w-4' /> {t('auth.bonusClient')}
+                </TabsTrigger>
+                <TabsTrigger value='corporate' className='text-base'>
+                  <Building2 className='mr-2 h-4 w-4' /> {t('auth.corporateClient')}
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value='bonus'>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('auth.bonusLogin.title')}</CardTitle>
+                    <CardDescription>
+                      {t('auth.bonusLogin.description')}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className='space-y-4'>
+                    <LoginForm />
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              <TabsContent value='corporate'>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('auth.corporateLogin.title')}</CardTitle>
+                    <CardDescription>
+                      {t('auth.corporateLogin.description')}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className='space-y-4'>
+                    <LoginForm/>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+            </Tabs>
+
+            <div className='mt-8 text-center text-sm text-gray-500'>
+              <p>
+                {t('auth.loginIssues')}{' '}
+                <Link href='/contact' className='text-red-600 hover:underline'>
+                  {t('auth.contactLink')}
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/shared/components/about-counter.tsx
+++ b/src/shared/components/about-counter.tsx
@ -4,11 +4,14 @@ import { Users } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';

 import AnimatedCounter from './animated-counter';
+import { useLanguage } from '../language';

 export default function AboutCounter() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

+  const {t} = useLanguage()
+
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
@ -41,7 +44,7 @@ export default function AboutCounter() {
        <h3 className='text-2xl font-bold text-gray-900'>
          {isVisible ? <AnimatedCounter end={150} suffix='+' /> : '0+'}
        </h3>
-        <p className='text-gray-600'>Сотрудников</p>
+        <p className='text-gray-600'>{t("about.stats.items.2.label")}</p>
      </div>
      <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
        <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -50,7 +53,7 @@ export default function AboutCounter() {
        <h3 className='text-2xl font-bold text-gray-900'>
          {isVisible ? <AnimatedCounter end={5} suffix='M+' /> : '0M+'}
        </h3>
-        <p className='text-gray-600'>Литров топлива в месяц</p>
+        <p className='text-gray-600'>{t("about.stats.items.4.label")}</p>
      </div>
      <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
        <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -63,7 +66,7 @@ export default function AboutCounter() {
            '0%'
          )}
        </h3>
-        <p className='text-gray-600'>Довольных клиентов</p>
+        <p className='text-gray-600'>{t("about.stats.items.5.label")}</p>
      </div>
    </div>
  );
--- a/src/shared/language/locales/ru.json
+++ b/src/shared/language/locales/ru.json
@ -87,6 +87,8 @@
  "about.stats.items.3.value": "1000000",
  "about.stats.items.3.suffix": "+",
  "about.stats.items.3.label": "Клиентов в год",
+  "about.stats.items.4.label": "Литров топлива в месяц",
+  "about.stats.items.5.label": "Довольных клиентов",

  "about.history.title": "Наша история",
  "about.history.subtitle": "История развития нашей компании от небольшой сети до лидера рынка",
@ -162,11 +164,11 @@
  "home.cta.description": "Станьте частью нашей сети. Получайте специальные предложения, бонусы и скидки.",

  "clients.title": "Для наших клиентов",
-  "clients.description": "Специальные предложения, программы лояльности и удобные способы оплаты для наших клиентов",
-  "clients.services": "Наши услуги для клиентов",
-  "clients.services.description": "Мы стремимся сделать обслуживание на наших заправках максимально удобным и выгодным для вас",
-  "clients.loyalty.title": "Программа лояльности",
-  "clients.loyalty.description": "Накапливайте баллы и получайте скидки на топливо и услуги нашей сети",
+  "clients.description": "Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.",
+  "clients.services.title": "Наши услуги для клиентов",
+  "clients.services.subtitle": "Мы стремимся сделать обслуживание на наших заправках максимально удобным и выгодным для вас",
+  "clients.benefits.title": "Преимущества для клиентов",
+  "clients.benefits.subtitle": "Став клиентом GasNetwork, вы получаете множество преимуществ, которые делают заправку вашего автомобиля более выгодной и удобной.",
  
  "clients.loyalty.programm.about": "О программе лояльности",
  "clients.loyalty.programm.about-description": "Программа лояльности GasNetwork — это возможность получать баллы за каждую покупку топлива и услуг на наших заправочных станциях. Накопленные баллы можно обменять на скидки, подарки или дополнительные услуги.",
@ -232,6 +234,7 @@
  "auth.phoneNumber": "Номер телефона",
  "auth.cardNumber": "Номер карты",
  "auth.loginIssues": "Возникли проблемы со входом?",
+  "auth.contactLink": "Свяжитесь с нами",

  "map.filters": "Фильтры",
  "map.stationsList": "Список заправок",
--- a/src/widgets/clients/ui/benefits-section.tsx
+++ b/src/widgets/clients/ui/benefits-section.tsx
@ -1,3 +1,6 @@
+"use client"
+
+import { useLanguage } from '@/shared/language';
 import { Percent } from 'lucide-react';
 import Image from 'next/image';

@ -26,6 +29,9 @@ const benefits: Array<Benefit> = [
 ];

 export const BenefitsSection = () => {
+
+  const {t} = useLanguage()
+
  return (
    <section className='bg-gray-50 py-16'>
      <div className='container mx-auto'>
@ -35,12 +41,10 @@ export const BenefitsSection = () => {
              <Percent className='h-6 w-6 text-red-600' />
            </div>
            <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-              Преимущества для клиентов
+              {t('clients.benefits.title')}
            </h2>
            <p className='mb-6 text-gray-600'>
-              Став клиентом GasNetwork, вы получаете множество преимуществ,
-              которые делают заправку вашего автомобиля более выгодной и
-              удобной.
+              {t('clients.benefits.subtitle')}
            </p>

            <div className='space-y-4'>
--- a/src/widgets/clients/ui/services-overview-section.tsx
+++ b/src/widgets/clients/ui/services-overview-section.tsx
@ -1,3 +1,5 @@
+"use client"
+
 import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';

@ -8,6 +10,7 @@ import {
  CardHeader,
  CardTitle,
 } from '@/shared/shadcn-ui/card';
+import { useLanguage } from '@/shared/language';

 interface ServiceOverview {
  title: string;
@ -43,16 +46,18 @@ const servicesOverview: Array<ServiceOverview> = [
 ];

 export const ServicesOverviewSection = () => {
+
+  const {t} = useLanguage()
+
  return (
    <section className='py-16'>
      <div className='container mx-auto'>
        <div className='mb-12 text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-            Наши услуги для клиентов
+            {t('clients.services.title')}
          </h2>
          <p className='mx-auto max-w-2xl text-gray-600'>
-            Мы стремимся сделать обслуживание на наших заправках максимально
-            удобным и выгодным для вас
+            {t('clients.services.subtitle')}
          </p>
        </div>