Skip to content

Commit 464f7fc

Browse files
arthur810629arthur810629
authored
Merge pull request #963 from Kudrikudrii/commercial-projects-issue-#867
Frontend: Создание компонента "Коммерческие проекты #867
2 parents 57d3626 + 9b01636 commit 464f7fc

File tree

6 files changed

+162
-40
lines changed

6 files changed

+162
-40
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,24 @@ export default {
3535
getExperience: 'Get commercial experience',
3636
},
3737
},
38+
commercialProjects: {
39+
badge: 'Commercial Projects',
40+
title: 'Commercial Projects You Will Participate In',
41+
description: 'Practice in real Hexlet products, commits to GitHub, team development experience and portfolio results',
42+
benefits: {
43+
title: 'What It Gives You',
44+
description: 'Project roles, code review, tasks from real backlog, releases - everything like in a real company'
45+
},
46+
projectsList: {
47+
title: 'Projects List',
48+
items: [
49+
'Hexlet SICP - course progress tracker',
50+
'Hexlet Correction - service for marking errors and typos',
51+
'Run IT - environment for running and checking code',
52+
'Hexlet Comparator - comparison of programming online schools'
53+
]
54+
},
55+
},
3856
},
3957
},
4058
};

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,24 @@ export default {
3535
getExperience: 'Получать коммерческий опыт',
3636
},
3737
},
38+
commercialProjects: {
39+
badge: 'Коммерческие проекты',
40+
title: 'Коммерческие проекты, в которых вы примете участие',
41+
description: 'Практика в реальных продуктах Хекслета коммит в GitHub, опыт командной разработки и результаты в портфолио',
42+
benefits: {
43+
title: 'Что это дает',
44+
description: 'Проектные роли, code review, задачи из реального бэклога, релизы - все как в компании'
45+
},
46+
projectsList: {
47+
title: 'Список проектов',
48+
items: [
49+
'Hexlet SICP - трекер прохождения курса',
50+
'Hexlet Correction - сервис для отметок ошибок и опечаток',
51+
'Run IT - среда для запуска и проверки кода',
52+
'Hexlet Comparator - сравнение онлайн-школ программирования'
53+
]
54+
},
55+
},
3856
},
3957
},
4058
};

‎frontend/src/pages/Home.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ import { Footer } from '@widgets/Footer'
1515
import { Header } from '@widgets/Header'
1616
import { AboutUs } from '@widgets/about-us'
1717
import { WhoWeAre } from '@widgets/who-we-are'
18+
import { CommercialProjects } from '@widgets/commercial-projects'
1819
import { Communities } from '@widgets/communities'
1920

21+
2022
type PageSection = {
2123
id: number
2224
pageKey: string
@@ -116,6 +118,7 @@ const Index: React.FC<IndexProps> = ({ pageSections }) => {
116118
<Container size="xl">
117119
<AboutUs />
118120
<WhoWeAre />
121+
<CommercialProjects/>
119122
{repeatedSamples}
120123
<Communities />
121124
</Container>

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

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,47 @@ import { Container, Text, Card, Grid, Button } from '@mantine/core';
22
import { useTranslation } from 'react-i18next';
33

44
export const AboutUs = () => {
5-
const { t } = useTranslation();
6-
7-
return (
8-
<Container size="lg" my="lg" py="xs">
9-
<Grid>
10-
<Grid.Col span={{
11-
base: 12,
12-
md: 7
13-
}}>
14-
<Container mr="lg" pl={0}>
15-
<Text fz="3.2rem" c="white" fw={700} lh={1}>
16-
{t('homePage.aboutUs.title')}
17-
</Text>
18-
<Text c="white" size="lg" my="md">
19-
{t('homePage.aboutUs.description')}
20-
</Text>
21-
<Button radius="md" w="fit-content">
22-
<Text c="white" size="md">
23-
{t('homePage.aboutUs.buttons.tryFree')}
24-
</Text>
25-
</Button>
26-
<Button radius="md" color="none" w="fit-content">
27-
<Text c="white" size="md">
28-
{t('homePage.aboutUs.buttons.startWithProjects')}
29-
</Text>
30-
</Button>
31-
</Container>
32-
</Grid.Col>
33-
<Grid.Col span={{
34-
base: 12,
35-
md: 5
36-
}}>
37-
<Card radius="lg" bg='dark.4' h={300}>
38-
{/* https://mantine.dev/dates/calendar/ ??? */}
39-
</Card>
40-
</Grid.Col>
41-
</Grid>
42-
</Container>
43-
);
44-
};
5+
const { t } = useTranslation();
6+
7+
return (
8+
<Container size="lg" my="lg" py="xs">
9+
<Grid>
10+
<Grid.Col
11+
span={{
12+
base: 12,
13+
md: 7,
14+
}}
15+
>
16+
<Container mr="lg" pl={0}>
17+
<Text fz="3.2rem" c="white" fw={700} lh={1}>
18+
{t('homePage.aboutUs.title')}
19+
</Text>
20+
<Text c="white" size="lg" my="md">
21+
{t('homePage.aboutUs.description')}
22+
</Text>
23+
<Button radius="md" w="fit-content">
24+
<Text c="white" size="md">
25+
{t('homePage.aboutUs.buttons.tryFree')}
26+
</Text>
27+
</Button>
28+
<Button radius="md" color="none" w="fit-content">
29+
<Text c="white" size="md">
30+
{t('homePage.aboutUs.buttons.startWithProjects')}
31+
</Text>
32+
</Button>
33+
</Container>
34+
</Grid.Col>
35+
<Grid.Col
36+
span={{
37+
base: 12,
38+
md: 5,
39+
}}
40+
>
41+
<Card radius="lg" bg="dark.4" h={300}>
42+
{/* https://mantine.dev/dates/calendar/ ??? */}
43+
</Card>
44+
</Grid.Col>
45+
</Grid>
46+
</Container>
47+
);
48+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { CommercialProjects } from './ui/CommercialProjects';

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Container, Card, Badge, Text, Group, Title, Grid, List, ThemeIcon } from '@mantine/core';
2+
import { useTranslation } from 'react-i18next';
3+
4+
export const CommercialProjects: React.FC = () => {
5+
const { t } = useTranslation();
6+
7+
return (
8+
<Container size="lg" py="xs">
9+
<Card radius="lg" p="xl" bg="dark.6">
10+
<Group justify="center" mb="xl">
11+
<Badge color="gray.7" size="lg" tt="none">
12+
<Text size="xs" c="white">
13+
{t('homePage.commercialProjects.badge')}
14+
</Text>
15+
</Badge>
16+
<Title fz={32} c="white" fw="bold" ta="center">
17+
{t('homePage.commercialProjects.title')}
18+
</Title>
19+
<Text size="md" c="white" maw={600} ta="center">
20+
{t('homePage.commercialProjects.description')}
21+
</Text>
22+
</Group>
23+
<Grid>
24+
<Grid.Col
25+
span={{
26+
base: 12,
27+
md: 6,
28+
}}
29+
>
30+
<Card radius="lg" bg="dark.5" h="100%">
31+
<Group gap="sm">
32+
<ThemeIcon variant="transparent" color="blue.6">
33+
<svg
34+
xmlns="http://www.w3.org/2000/svg"
35+
viewBox="0 0 22 22"
36+
strokeWidth={2}
37+
stroke="currentColor"
38+
fill="none"
39+
>
40+
<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" />
41+
</svg>
42+
</ThemeIcon>
43+
<Text fz="h3" c="white">
44+
{t('homePage.commercialProjects.benefits.title')}
45+
</Text>
46+
</Group>
47+
<Text size="sm" c="white" ml={40} mt="xs">
48+
{t('homePage.commercialProjects.benefits.description')}
49+
</Text>
50+
</Card>
51+
</Grid.Col>
52+
<Grid.Col
53+
span={{
54+
base: 12,
55+
md: 6,
56+
}}
57+
>
58+
<Card radius="lg" bg="dark.5" h="100%">
59+
<Text fz="h3" c="white" mb="sm">
60+
{t('homePage.commercialProjects.projectsList.title')}
61+
</Text>
62+
63+
<List size="sm" c="white" mr="sm">
64+
{(
65+
t('homePage.commercialProjects.projectsList.items', {
66+
returnObjects: true,
67+
}) as string[]
68+
).map((item: string, index: number) => (
69+
<List.Item key={index}>{item}</List.Item>
70+
))}
71+
</List>
72+
</Card>
73+
</Grid.Col>
74+
</Grid>
75+
</Card>
76+
</Container>
77+
);
78+
};

0 commit comments

Comments
 (0)