Frontend: Создание компонента "Коммерческие проекты #867

frontend/src/app/providers/i18n/locales/en.ts

@@ -35,6 +35,24 @@ export default {
           getExperience: 'Get commercial experience',
         },
       },
+      commercialProjects: {
+        badge: 'Commercial Projects',
+        title: 'Commercial Projects You Will Participate In',
+        description: 'Practice in real Hexlet products, commits to GitHub, team development experience and portfolio results',
+        benefits: {
+          title: 'What It Gives You',
+          description: 'Project roles, code review, tasks from real backlog, releases - everything like in a real company'
+        },
+        projectsList: {
+          title: 'Projects List',
+          items: [
+            'Hexlet SICP - course progress tracker',
+            'Hexlet Correction - service for marking errors and typos',
+            'Run IT - environment for running and checking code',
+            'Hexlet Comparator - comparison of programming online schools'
+          ]
+        },
+      },
     },
   },
 };

frontend/src/app/providers/i18n/locales/ru.ts

@@ -35,6 +35,24 @@ export default {
           getExperience: 'Получать коммерческий опыт',
         },
       },
+      commercialProjects: {
+        badge: 'Коммерческие проекты',
+        title: 'Коммерческие проекты, в которых вы примете участие',
+        description: 'Практика в реальных продуктах Хекслета коммит в GitHub, опыт командной разработки и результаты в портфолио',
+        benefits: {
+          title: 'Что это дает',
+          description: 'Проектные роли, code review, задачи из реального бэклога, релизы - все как в компании'
+        },
+        projectsList: {
+          title: 'Список проектов',
+          items: [
+            'Hexlet SICP - трекер прохождения курса',
+            'Hexlet Correction - сервис для отметок ошибок и опечаток',
+            'Run IT - среда для запуска и проверки кода',
+            'Hexlet Comparator - сравнение онлайн-школ программирования'
+          ]
+        },
+      },
     },
   },
 };

frontend/src/pages/Home.tsx

@@ -15,8 +15,10 @@ import { Footer } from '@widgets/Footer'
 import { Header } from '@widgets/Header'
 import { AboutUs } from '@widgets/about-us'
 import { WhoWeAre } from '@widgets/who-we-are'
+import { CommercialProjects } from '@widgets/commercial-projects'
 import { Communities } from '@widgets/communities'
 
+
 type PageSection = {
   id: number
   pageKey: string
@@ -116,6 +118,7 @@ const Index: React.FC<IndexProps> = ({ pageSections }) => {
       <Container size="xl">
         <AboutUs />
         <WhoWeAre />
+        <CommercialProjects/>
         {repeatedSamples}
         <Communities />
       </Container>

frontend/src/widgets/about-us/ui/AboutUs.tsx

@@ -2,43 +2,47 @@ import { Container, Text, Card, Grid, Button } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 
 export const AboutUs = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Container size="lg" my="lg" py="xs">
-      <Grid>
-        <Grid.Col span={{
-          base: 12,
-          md: 7
-        }}>
-          <Container mr="lg" pl={0}>
-            <Text fz="3.2rem" c="white" fw={700} lh={1}>
-              {t('homePage.aboutUs.title')}
-            </Text>
-            <Text c="white" size="lg" my="md">
-              {t('homePage.aboutUs.description')}
-            </Text>
-            <Button radius="md" w="fit-content">
-              <Text c="white" size="md">
-                {t('homePage.aboutUs.buttons.tryFree')}
-              </Text>
-            </Button>
-            <Button radius="md" color="none" w="fit-content">
-              <Text c="white" size="md">
-                {t('homePage.aboutUs.buttons.startWithProjects')}
-              </Text>
-            </Button>
-          </Container>
-        </Grid.Col>
-        <Grid.Col span={{
-          base: 12,
-          md: 5
-        }}>
-          <Card radius="lg" bg='dark.4' h={300}>
-            {/* https://mantine.dev/dates/calendar/  ??? */}
-          </Card>
-        </Grid.Col>
-      </Grid>
-    </Container>
-  );
-};
+    const { t } = useTranslation();
+
+    return (
+        <Container size="lg" my="lg" py="xs">
+            <Grid>
+                <Grid.Col
+                    span={{
+                        base: 12,
+                        md: 7,
+                    }}
+                >
+                    <Container mr="lg" pl={0}>
+                        <Text fz="3.2rem" c="white" fw={700} lh={1}>
+                            {t('homePage.aboutUs.title')}
+                        </Text>
+                        <Text c="white" size="lg" my="md">
+                            {t('homePage.aboutUs.description')}
+                        </Text>
+                        <Button radius="md" w="fit-content">
+                            <Text c="white" size="md">
+                                {t('homePage.aboutUs.buttons.tryFree')}
+                            </Text>
+                        </Button>
+                        <Button radius="md" color="none" w="fit-content">
+                            <Text c="white" size="md">
+                                {t('homePage.aboutUs.buttons.startWithProjects')}
+                            </Text>
+                        </Button>
+                    </Container>
+                </Grid.Col>
+                <Grid.Col
+                    span={{
+                        base: 12,
+                        md: 5,
+                    }}
+                >
+                    <Card radius="lg" bg="dark.4" h={300}>
+                        {/* https://mantine.dev/dates/calendar/  ??? */}
+                    </Card>
+                </Grid.Col>
+            </Grid>
+        </Container>
+    );
+};

frontend/src/widgets/commercial-projects/index.ts

@@ -0,0 +1 @@
+export { CommercialProjects } from './ui/CommercialProjects';

frontend/src/widgets/commercial-projects/ui/CommercialProjects.tsx

@@ -0,0 +1,78 @@
+import { Container, Card, Badge, Text, Group, Title, Grid, List, ThemeIcon } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+export const CommercialProjects: React.FC = () => {
+    const { t } = useTranslation();
+
+    return (
+        <Container size="lg" py="xs">
+            <Card radius="lg" p="xl" bg="dark.6">
+                <Group justify="center" mb="xl">
+                    <Badge color="gray.7" size="lg" tt="none">
+                        <Text size="xs" c="white">
+                            {t('homePage.commercialProjects.badge')}
+                        </Text>
+                    </Badge>
+                    <Title fz={32} c="white" fw="bold" ta="center">
+                        {t('homePage.commercialProjects.title')}
+                    </Title>
+                    <Text size="md" c="white" maw={600} ta="center">
+                        {t('homePage.commercialProjects.description')}
+                    </Text>
+                </Group>
+                <Grid>
+                    <Grid.Col
+                        span={{
+                            base: 12,
+                            md: 6,
+                        }}
+                    >
+                        <Card radius="lg" bg="dark.5" h="100%">
+                            <Group gap="sm">
+                                <ThemeIcon variant="transparent" color="blue.6">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 22 22"
+                                        strokeWidth={2}
+                                        stroke="currentColor"
+                                        fill="none"
+                                    >
+                                        <path d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" />
+                                    </svg>
+                                </ThemeIcon>
+                                <Text fz="h3" c="white">
+                                    {t('homePage.commercialProjects.benefits.title')}
+                                </Text>
+                            </Group>
+                            <Text size="sm" c="white" ml={40} mt="xs">
+                                {t('homePage.commercialProjects.benefits.description')}
+                            </Text>
+                        </Card>
+                    </Grid.Col>
+                    <Grid.Col
+                        span={{
+                            base: 12,
+                            md: 6,
+                        }}
+                    >
+                        <Card radius="lg" bg="dark.5" h="100%">
+                            <Text fz="h3" c="white" mb="sm">
+                                {t('homePage.commercialProjects.projectsList.title')}
+                            </Text>
+
+                            <List size="sm" c="white" mr="sm">
+                                {(
+                                    t('homePage.commercialProjects.projectsList.items', {
+                                        returnObjects: true,
+                                    }) as string[]
+                                ).map((item: string, index: number) => (
+                                    <List.Item key={index}>{item}</List.Item>
+                                ))}
+                            </List>
+                        </Card>
+                    </Grid.Col>
+                </Grid>
+            </Card>
+        </Container>
+    );
+};