init

src/pages/HomePage/HomePage.jsx

@@ -0,0 +1,17 @@
+
+import { CommunityBlock } from './components/CommunityBlock/CommunityBlock';
+import { FooterBlock } from './components/FooterBlock/FooterBlock';
+import { MainBlock } from './components/MainBlock/MainBlock';
+import { StepsBlock } from './components/StepsBlock/StepsBlock';
+import styles from './HomePage.module.css';
+
+export const HomePage = () => {
+    return (
+        <div className={styles.root}>
+            <MainBlock/>
+            <StepsBlock/>
+            <CommunityBlock/>
+            <FooterBlock/>
+        </div>
+    )
+}

src/pages/HomePage/components/CommunityBlock/CommunityBlock.jsx

@@ -0,0 +1,25 @@
+
+import styles from './CommunityBlock.module.css';
+import { Button } from './components/Button/Button';
+import { CardList } from './components/CardList/CardList';
+import { Header } from './components/Header/Header';
+import { MobileIcon } from './components/MobileIcon/MobileIcon';
+
+export const CommunityBlock = () => {
+    return (
+        <div className={styles.column}>
+            <Header/>
+
+            <div className={styles.list}>
+                <CardList/>
+            </div>
+
+            <MobileIcon/>
+            
+            <div className={styles.button}>
+                <Button/>
+            </div>
+            
+        </div>
+    )
+}

src/pages/HomePage/components/CommunityBlock/CommunityBlock.module.css

@@ -0,0 +1,89 @@
+
+.column {
+    display: flex;
+    flex-direction: column;
+    padding-top: 90px;
+    padding-bottom: 90px;
+
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+
+    background-color: black;
+    background-image: url('./background.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: top;
+
+    padding-left: var(--padding-desktop-horizontal);
+    padding-right: var(--padding-desktop-horizontal);
+
+}
+
+@media screen and (max-width: 1100px) {
+    .column {
+        padding-left: var(--padding-mobile-horizontal);
+        padding-right: var(--padding-mobile-horizontal);
+    }
+}
+
+.list {
+    padding-top: 70px;
+
+    max-width: 1440px;
+    z-index: 2;
+}
+
+.button {
+    width: 100%;
+    padding-top: 75px;
+    max-width: 384px;
+    
+    z-index: 2;
+}
+
+@media screen and (max-width: 880px) {
+    .column {
+        padding-top: 22px;
+        padding-bottom: 44px;
+    }
+    .button {
+        padding-top: 44px;
+    }
+}
+
+@media screen and (max-width: 1350px) {
+    .column {
+        background-size: 120%;
+        background-position: top left;
+    }
+}
+
+@media screen and (max-width: 1100px) {
+    .column {
+        background-image: url("./background_blur_up.png");
+        
+        background-size: 100%;
+        background-position: top;
+        background-position-y: 70px;
+        background-repeat: no-repeat;
+        position: relative;
+    }
+    .column::after {
+        position: absolute;
+        content: "";
+        background-image: url("./background_blur.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        z-index: 1;
+        bottom:0;
+        left:0;
+        width: 100%;
+        height: 100%;
+
+        pointer-events: none;
+        
+    }
+}

src/pages/HomePage/components/CommunityBlock/components/Button/Button.jsx

@@ -0,0 +1,13 @@
+import { sendGoal } from '@utils';
+import styles from './Button.module.css';
+
+export const Button = () => {
+    
+    const handleMorePosts = () => {
+        sendGoal('more_posts_clicked');
+    };
+
+    return (
+        <a href='https://setka.onelink.me/tQlI/k82d3mhf' target='_blank' className={styles.button} onClick={handleMorePosts}>больше постов — в сетке</a>
+    )
+}

src/pages/HomePage/components/CommunityBlock/components/Button/Button.module.css

@@ -0,0 +1,43 @@
+
+.button {
+    background-color: #FFFFFF;
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 48px;
+
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+    color: #000000;
+
+    flex-grow: 0;
+
+    border: 1px solid #FFFFFF;
+    transition: var(--transition);
+
+    cursor: pointer;
+}
+
+@media screen and (max-width: 680px) {
+    .button {
+        font-family: 'TT Travels Next';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 120%;
+    }
+}
+
+
+.button:hover {
+    background-color: transparent;
+    color: white;
+}

src/pages/HomePage/components/CommunityBlock/components/Card/Card.jsx

@@ -0,0 +1,42 @@
+
+import styles from './Card.module.css';
+import { Button } from './components/Button/Button';
+import { HashTag } from './components/HashTag/HashTag';
+
+import { typo } from '@utils/typo';
+
+export const Card = ({
+    fullname = "Марат Юсупов",
+    image_url = "/avatar.png",
+    about = "Продуктовый маркетолог в VK",
+    date = "09.06",
+    title = "Исследования внутри компаний",
+    text = "В маркетинге есть большая проблема, о которой мало кто говорит — экспертность специалистов",
+    tag = "SC_Sretenka",
+    cardId
+}) => {
+    return (
+        <div className={styles.card}>
+            <div className={styles.tag}>
+                <img src={`/surfing/tags/${tag.toLowerCase()}.svg`}/>
+            </div>
+            <div className={styles.head}>
+                <div 
+                    className={styles.avatar}
+                    style={{backgroundImage: `url(${image_url})`}}
+                />
+                <div className={styles.left}>
+                    <h2 className={styles.name}>{fullname}</h2>
+                    <h3 className={styles.about}>{about}</h3>
+                </div>
+            </div>
+            <h1 className={styles.h1}>{typo(title)}</h1>
+            <p className={styles.text}>
+                {typo(text)}
+            </p>
+            <div className={styles.spacer} />
+
+            <Button cardId={cardId} link="https://set.ki/chan_inv/CrvvTgv"/>
+        </div>
+    )
+}

src/pages/HomePage/components/CommunityBlock/components/Card/Card.module.css

@@ -0,0 +1,124 @@
+
+.card {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    /* max-width: 338px; */
+    
+    background: #19191A;
+    border-radius: 20px;
+
+    position: relative;
+}
+
+.tag {
+    position: absolute;
+    left: 53%;
+    top: -25px;
+    overflow: hidden;
+    width: 155px;
+    z-index: 3;
+    pointer-events: none;
+}
+
+@media screen and (max-width: 370px) {
+    .tag {
+        width: 127px;
+    }
+    .tag img {
+        width: 47vw;
+    }
+}
+
+.head {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+
+    align-items: center;
+}
+
+.avatar {
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: #343436;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    flex-shrink: 0;
+}
+
+.name {
+    /* SF Semibold */
+    font-family: 'SF Pro', "Inter";
+    font-style: normal;
+    font-weight: 590;
+    font-size: 15px;
+    line-height: 140%;
+    display: flex;
+    align-items: center;
+    letter-spacing: -0.02em;
+
+    color: #E1E3E6;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.about {
+    /* SF Regular */
+    font-family: 'SF Pro', "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 140%;
+
+    letter-spacing: -0.02em;
+
+
+    color: rgba(255, 255, 255, 0.4);
+
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.h1 {
+    /* SF Semibold */
+    font-family: 'SF Pro', "Inter";
+    font-style: normal;
+    font-weight: 590;
+    font-size: 18px;
+    line-height: 140%;
+
+    letter-spacing: -0.02em;
+
+    color: #E1E3E6;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.text {
+    /* SF Regular */
+    font-family: 'SF Pro', "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 140%;
+    letter-spacing: -0.02em;
+
+    color: #E1E3E6;
+
+
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+
+.spacer {
+    flex: 1;
+}

src/pages/HomePage/components/CommunityBlock/components/Card/components/Button/Button.jsx

@@ -0,0 +1,14 @@
+
+import { sendGoal } from '@utils';
+import styles from './Button.module.css';
+
+export const Button = ( {link = "#", cardId} ) => {
+    
+    const handleWriteInSetka = () => {
+        sendGoal('write_in_setka_clicked', { card_id: cardId });
+    };
+
+    return (
+        <a href={link} target='_blank' className={styles.button} onClick={handleWriteInSetka}>написать в сетке</a>
+    )
+}

src/pages/HomePage/components/CommunityBlock/components/Card/components/Button/Button.module.css

@@ -0,0 +1,27 @@
+
+.button {
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 100%;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: #E1E3E6;
+
+    background:
+        radial-gradient(56.91% 105.05% at 7.34% 105%, rgba(235, 0, 255, 0.8) 0%, rgba(235, 0, 255, 0) 100%),
+        linear-gradient(188.61deg, #DB00FF -6.68%, #1400FF 103.74%);
+    border-radius: 12px;
+
+    align-self: stretch;
+    flex-grow: 0;
+
+    height: 48px;
+    width: 100%;
+
+    transition: var(--transition);
+}

src/pages/HomePage/components/CommunityBlock/components/Card/components/HashTag/HashTag.jsx

@@ -0,0 +1,8 @@
+
+import styles from './HashTag.module.css';
+
+export const HashTag = ({tag = "SC_Sretenka"}) => {
+    return (
+        <div className={styles.tag}><span className={styles.text}>{tag}</span></div>
+    )
+}

src/pages/HomePage/components/CommunityBlock/components/Card/components/HashTag/HashTag.module.css

@@ -0,0 +1,34 @@
+
+.tag {
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 11px;
+    line-height: 140%;
+
+    color: #262626;
+    position: relative;
+
+    transform: rotate(5.2deg);
+}
+
+/* transform: rotate(5.2deg); */
+
+.tag::after {
+    position: absolute;
+    content: "";
+    background-image: url("/tag.svg");
+    background-repeat: no-repeat;
+    top:-16px;
+    left:-32px;
+    z-index: 3;
+    width: 150px;
+    height: 100px;
+}
+
+.text {
+    z-index: 4;
+    position: absolute;
+    left: 0;
+    top: 0;
+}

src/pages/HomePage/components/CommunityBlock/components/CardList/CardList.jsx

@@ -0,0 +1,33 @@
+
+import { Card } from '../Card/Card';
+import styles from './CardList.module.css';
+import { CARDS } from './constants';
+
+export const CardList = () => {
+
+    let cards = [];
+
+    for(let i = 0; i < 9; i += 1) {
+        cards.push( 0 );
+    }
+
+    return (
+        <div className={styles.container}>
+            {/* todo: determine cardId  */}
+            {CARDS.map((el, index) =>
+                (<Card
+                    fullname={el.fullname}
+                    image_url={el.image_url || `/surfing/users/${el.cardId}.png`}
+                    about={el.about}
+                    date={el.date}
+                    title={el.title}
+                    text={el.text}
+                    tag={el.tag}
+                    key={index}
+                    cardId={index}
+                />))
+            }
+            
+        </div>
+    )
+}

src/pages/HomePage/components/CommunityBlock/components/CardList/CardList.module.css

@@ -0,0 +1,20 @@
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    row-gap: 21px;
+    column-gap: 20px;
+    z-index: 2;
+}
+
+@media screen and (max-width: 1100px) {
+    .container {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}

src/pages/HomePage/components/CommunityBlock/components/CardList/constants.jsx

@@ -0,0 +1,112 @@
+
+export const CARDS = [
+    {
+        fullname : "Даниил Холопцев",
+        image_url : "",
+        about : "Product owner в Россельхозбанк",
+        date : "13.09",
+        title : "Вам сообщение от чайного ценителя",
+        text : 
+        "Привет! Меня зовут Даниил Холопцев, основатель сообщества Немного продакт. Приюта для продактов, ищущих полезный контент. Объединил более 30 сильных авторов в закрытом сообществе и вместе пишем контент о продукте, выступаем и тусим вместе 🫂",
+        tag: "SC_Lucky",
+        cardId: 0,
+    },
+    {
+        fullname: "Никита Крисанов",
+        image_url: "",
+        about: "Технический менеджер",
+        date: "12.09",
+        title: "Привет! Я Никита, мне 30 годиков",
+        text: 
+        "Горю идеей сделать цифровое пространство добрее и комфортнее для людей. Сейчас работаю техническим менеджером проектов в Российском обществе «Знание». Мы запускаем и развиваем сервисы для просветителей и лекторов. Один из последних кейсов — конкурс «Родная игрушка».",
+        tag: "SC_Yakimanka",
+        cardId: 1,
+    },
+    {
+        fullname: "Елена Васильева",
+        image_url: "",
+        about: "Редактор в VK",
+        date: "12.09",
+        title: "Профессионально делаю что хочу",
+        text: 
+        "Привет! Я Лена, амбассадор работы по любви. Дважды меняла профессию, чтобы заниматься тем, что драйвит.",
+        tag: "SC_NAZARE",
+        cardId: 2,
+    },
+    {
+        fullname: "Анастасия См",
+        image_url: "",
+        about: "Brand дизайнер в Сетка",
+        date: "12.09",
+        title: "Есть тут любители кофе и дизайна?)",
+        text: "Я с вами))) отвечаю за бренд дизайн Сетки (все что вы видите в онлайн и оффлайн коммуникации)",
+        tag: "SC_CAVE",
+        cardId: 3,
+    },
+    {
+        fullname: "Алексей Смагин",
+        image_url: "",
+        about: "Аналитик в Яндекс",
+        date: "12.09",
+        title: "Нахожу в данных прекрасное",
+        text:
+        "Привет, меня зовут Лёша. Я люблю творить. И исследовать мир. В своей работе я самовыражаюсь через данные: работаю с большим количеством текстов и цифр, превращая их в познавательные, развлекательные или социальные истории; делаю инфографику и спецпроекты, основанные на данных.",
+        tag: "SC_CAVE",
+        cardId: 4,
+    },
+    {
+        fullname: "Виктор Жаров",
+        image_url: "",
+        about: "Руководитель аналитики в Сетка",
+        date: "12.09",
+        title: "Привет! Я Витя и я аналитик",
+        text: "Помогаю ребятам делать аналитику Сетки лучше. Мы с командой строим дашборды, анализируем поведение пользователей, делаем А/Б тесты. Все для того, чтобы лучше понимать, зачем пользователи приходят в Сетку и как сделать ее лучше.",
+        tag: "SC_VDNX",
+        cardId: 5,
+    },
+    {
+        fullname: "Ярослав Вершинин",
+        image_url: "",
+        about: "Контент-лид",
+        date: "12.09",
+        title: "Я не люблю кофе... но обожаю различные чаи и какао 😏",
+        text: 
+        "Всем привети, я Ярослав, успел целую неделю отработать на позиции руководителя пользовательского контента в Сетке. \
+        Вместе с моей замечательно командой ищем...",
+        tag: "SC_CAVE",
+        cardId: 6,
+    },
+    {
+        fullname: "Екатерина Савоськина",
+        image_url: "",
+        about: "Бренд-менеджер",
+        date: "12.09",
+        title: "бренд-менеджер vs амбассадор",
+        text: 
+        "Всем привет! Я Катя, и я работаю в Сетке. Хотя многие мои знакомые, которые следят за моими другими соцсетями, думают, что я просто амбассадор. Но думаю, что базовая настройка профессии бренд-менеджера — выбирать и работать в продуктах, в которые искренне веришь, и быть главным фанатом.",
+        tag: "SC_Belka",
+        cardId: 7,
+    },
+    {
+        fullname: "Кирилл Бургов",
+        image_url: "",
+        about: "Marketing",
+        date: "12.09",
+        title: "Спишь?",
+        text: 
+        "Всем привет! Я Кирилл, маркетолог, который верит, что реклама – это не про «купите срочно», а про эмоции, истории и связи между людьми.",
+        tag: "SC_Yakimanka",
+        cardId: 8,
+    },
+    {
+        fullname: "Валерия Рыбакова",
+        image_url: "",
+        about: "Бренд-менеджер",
+        date: "12.09",
+        title: "Зумеры массово отменяют кофейни...",
+        text: 
+        "Если в мире и есть люди, которых не удивляют такие новостные заголовки, то это маркетологи, которые работают с молодой аудиторией, потому что изучать (и часто опровергать) подобные новости — наша работа :) Меня зовут Лера, a.k.a. зумер-патруль в команде маркетинга hh.ru . Именно наша команда делает так, чтобы молодежь точно знала, где искать ту самую работу.",
+        tag: "SC_Flacon",
+        cardId: 9,
+    },
+];

src/pages/HomePage/components/CommunityBlock/components/Header/Button/Button.jsx

@@ -0,0 +1,14 @@
+
+import { sendGoal } from '@utils';
+import styles from './Button.module.css';
+
+export const Button = ({text}) => {
+    
+    const handleContestRules = () => {
+        sendGoal('contest_rules_clicked');
+    };
+
+    return (
+        <a href='/surfing/rules' className={styles.button} onClick={handleContestRules}>{text}</a>
+    )
+}

src/pages/HomePage/components/CommunityBlock/components/Header/Button/Button.module.css

@@ -0,0 +1,36 @@
+.button {
+    width: 100%;
+    height: 58px;
+
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid #FFFFFF;
+    border-radius: 4px;
+
+    transition: var(--transition);
+    color: inherit;
+    background-color: black;
+}
+
+.button:hover {
+    background-color: white;
+    color: black;
+}
+
+@media screen and (max-width: 1100px) {
+    .button {
+        font-family: 'TT Travels Next';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 120%;
+    }
+}

src/pages/HomePage/components/CommunityBlock/components/Header/Header.jsx

@@ -0,0 +1,37 @@
+import { Button } from "./Button/Button";
+import styles from "./Header.module.css";
+
+export const Header = () => {
+	return (
+		<div className={styles.container}>
+			<h1 className={styles.h1}>
+				попади в закрытое комьюнити для сёрфинга по&nbsp;локациям
+			</h1>
+			<p className={styles.text}>
+				Смотри по хештегу, кто уже сёрфит в удобной для тебя локации.
+				<br />
+				<br />А также публикуй{" "}
+				<a href='https://set.ki/chan_inv/CrvvTgv' target='_blank'>
+					в закрытом сообществе
+				</a>{" "}
+				Сетка&nbsp;х&nbsp;Surf&nbsp;Coffee® в&nbsp;Сетке свои посты с&nbsp;фото
+				и&nbsp;хештегами локаций, чтобы тебя заметили нужные люди. Каждую неделю
+				мы&nbsp;выбираем 3 поста, авторы которых получают набор классного мерча
+				Сетки и&nbsp;коробку дрип-пакетов от Surf Coffee®.
+				<br />
+				<br />
+				Конкурс действует до&nbsp;его отмены.
+			</p>
+			<a
+				className={styles.link}
+				href='https://setka.onelink.me/tQlI/k82d3mhf'
+				target='_blank'
+			>
+				<img src='/surfing/app_logo.svg' className={styles.logo_app} />
+			</a>
+			<div className={styles.button}>
+				<Button text='условия конкурса' />
+			</div>
+		</div>
+	);
+};

src/pages/HomePage/components/CommunityBlock/components/Header/Header.module.css

@@ -0,0 +1,118 @@
+.link {
+    width: min-content;
+}
+
+.container a {
+    color: inherit;
+}
+
+.h1 {
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 55px;
+    line-height: 100%;
+
+    max-width: 671px;
+
+}
+
+.text {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 130%;
+
+    max-width: 539px;
+}
+
+.text a {
+    text-decoration-line: underline;
+}
+
+.container {
+    display: grid;
+    column-gap: 30px;
+    row-gap: 60px;
+    align-items: center;
+
+    max-width: 1440px;
+}
+
+@media screen and (max-width: 880px) {
+    .container {
+        row-gap: 20px;
+    }
+}
+
+.h1 {
+    grid-column: 1;
+    align-self: normal;
+}
+
+.text {
+    grid-column: 2;
+    align-self: normal;
+}
+
+@media screen and (max-width: 1100px) {
+    .logo_app {
+        display: none;
+    }
+    .container {
+        grid-template-columns: 1fr;
+        width: 100%;
+    }
+    .text {
+        grid-column: 1;
+        max-width: 700px;
+
+        font-size: 16px;
+        align-self: normal;
+    }
+    .h1 {
+        max-width: 80vw;
+
+        font-size: 40px;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .h1 {
+        font-family: 'TT Travels Next';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 28px;
+        line-height: 100%;
+
+        max-width: 100%;
+    }
+
+    .text {
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 130%;
+
+        max-width: 100%;
+    }
+}
+
+
+.button {
+    max-width: 309px;
+}
+
+@media screen and (max-width:680) {
+    .button {
+        max-width: 335px;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .button {
+        max-width: 100%;
+    }
+}

src/pages/HomePage/components/CommunityBlock/components/MobileIcon/MobileIcon.jsx

@@ -0,0 +1,10 @@
+
+import styles from './MobileIcon.module.css';
+
+export const MobileIcon = () => {
+    return (
+        <a href="https://setka.onelink.me/tQlI/k82d3mhf" target='_blank' className={styles.container}>
+            <img src="/surfing/app_logo.svg" className={styles.app_logo}/>
+        </a>
+    )
+}

src/pages/HomePage/components/CommunityBlock/components/MobileIcon/MobileIcon.module.css

@@ -0,0 +1,28 @@
+
+
+.container {
+    padding-top: 60px;
+    
+    width: 100%;
+    display: none;
+    justify-content: center;
+    position: relative;
+    z-index: 2;
+    max-width: min-content;
+}
+
+.app_logo {
+    width: 122px;
+}
+
+@media screen and (max-width: 1100px) {
+    .container {
+        display: flex;
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .container {
+        padding-top: 22px;
+    }
+}

src/pages/HomePage/components/FooterBlock/FooterBlock.jsx

@@ -0,0 +1,40 @@
+import styles from "./FooterBlock.module.css";
+
+import head_image from "./waves.svg";
+
+import image_1 from "./sc_setka-1.png";
+import image_2 from "./sc_setka-2.png";
+import image_3 from "./sc_setka-3.png";
+import { Logo } from "../../../../components/Logo/Logo";
+import { ButtonGroupFooter } from "../MainBlock/components/ButtonGroupFooter/ButtonGroupFooter";
+
+export const FooterBlock = () => {
+	return (
+		<div className={styles.footer}>
+			<div className={styles.row}>
+				<img src={head_image} className={styles.head_image} />
+				<div className={styles.right}>
+					<div className={styles.right_image}>
+						<img src={image_1} />
+						<img src={image_2} />
+						<img src={image_3} />
+					</div>
+					<h1 className={styles.h1}>
+						нетворкинг
+						<br />
+						от Сетки
+						<br />и Surf Coffee®
+					</h1>
+					<h2 className={styles.h2}>16 октября, следите за обновлениями</h2>
+				</div>
+			</div>
+			<Logo isDark={true} />
+			<ButtonGroupFooter />
+			<p className={styles.copyright}>
+				(c) HeadHunter {new Date().getFullYear()}. Информация на данном сайте
+				<br />
+				не является публичной офертой.
+			</p>
+		</div>
+	);
+};

src/pages/HomePage/components/FooterBlock/FooterBlock.module.css

@@ -0,0 +1,247 @@
+
+.footer {
+    background-color: white;
+    
+    color: black;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    
+    padding-top: 105px;
+
+    /* overflow: hidden; */
+}
+
+/* текст-картинка и надпись с тремя картинками */
+.row {
+    display: flex;
+    flex-direction: row;
+    gap: 81px;
+
+    align-items: center;
+    justify-content: center;
+    max-width: 1440px;
+    /* padding-left: var(--padding-mobile-horizontal); */
+    /* padding-right: var(--padding-mobile-horizontal); */
+}
+
+.h1 {
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 56px;
+    line-height: 100%;
+}
+
+.h1 {
+    padding-top: 50px;
+}
+
+.h2 {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 30px;
+    line-height: 100%;
+
+    padding-top: 19px;
+}
+
+/* Выше картинки ниже текст */
+.right {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Начало трех картинки */
+.right_image {
+    display: flex;
+    flex-direction: row;
+    gap: 38px;
+    align-items: baseline;
+}
+
+.right_image img {
+    width: 100%;
+    height: auto;
+    position: relative;
+}
+
+.right_image img:nth-child(1) {
+    top: -44px;
+}
+
+.right_image img:nth-child(3) {
+    top: 150px;
+}
+
+@media screen and (max-width: 1340px) {
+    .h1 {
+        font-size: 42px;
+        
+        padding-top: 25px;
+    }
+    .h2 {
+        font-size: 24px;
+    }
+    .h1 {
+        width: fit-content;
+    }
+    .h2 {
+        width: fit-content;
+    }
+    .right {
+        width: 39vw;
+    }
+    .right_image {
+        position: relative;
+        left: -60px;
+        scale: 0.80;
+    }
+    .row {
+        gap: 40px;
+    }
+    .head_image {
+        max-width: 40vw;
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .h1 {
+        font-family: 'TT Travels Next';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 30px;
+        line-height: 100%;
+    }
+
+    .h2 {
+        
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 130%;
+    }
+}
+
+
+/* --- Конец трех картинок */
+
+.logo {
+    padding-top: 76px;
+    padding-bottom: 90px;
+    max-width: 465px;
+    width: 100%;
+}
+
+.logo img {
+    width: 100%;
+}
+
+@media screen and (max-width:1000px) {
+    .head_image {
+        max-width: 70vw;
+        z-index: 1;
+    }
+    .right_image {
+        display: none;
+        z-index: 2;
+    }
+    .row {
+        padding-top: 100px;
+        flex-direction: column;
+        align-items: baseline;
+        position: relative;
+        gap: 120px;
+    }
+    .right {
+        width: 100%;
+    }
+    .footer {
+        padding-top: 0;
+    }
+    .logo {
+        padding-top: 58px;
+        max-width: 45vw;
+        padding-bottom: 67px;
+    }
+
+    .row::after {
+        margin-top: 20px;
+        content: "";
+        width: 100%;
+        height: 100%;
+        background-image: url("./image_mobile_group.png");
+        background-repeat: no-repeat;
+        background-size: contain;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .head_image {
+        max-width: 300px;
+    }
+    .logo {
+        padding-top: 58px;
+        max-width: 250px;
+    }
+
+    .row::after {
+        top: 30px;
+    }
+
+    .row {
+        gap: 60px;
+    }
+}
+
+@media screen and (max-width: 370px) {
+    .head_image {
+        max-width: 80vw;
+    }
+    .h1 {
+        font-size: 8vw;
+    }
+    .h2 {
+        font-size: 4vw;
+    }
+    .logo {
+        max-width: 70vw;
+    }
+}
+
+
+.copyright {
+    font-family: Inter;
+    font-size: 16px;
+    line-height: 130%;
+    text-align: center;
+    margin: 52px auto 82px;
+}
+
+@media screen and (max-width: 800px) {
+    .copyright {
+        margin: 28px auto 44px;
+
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 130%;
+
+        text-align: start;
+        padding: 0 var(--padding-mobile-horizontal);
+    }
+}
+
+@media screen and (max-width: 340px) {
+    .copyright {
+        font-size: 9px;
+    }
+}

src/pages/HomePage/components/MainBlock/MainBlock.jsx

@@ -0,0 +1,29 @@
+
+import { Logo } from '../../../../components/Logo/Logo';
+import { typo } from '@utils/typo';
+import { ButtonGroup } from './components/ButtonGroup/ButtonGroup';
+import { Header } from './components/Header/Header';
+import styles from './MainBlock.module.css';
+
+export const MainBlock = () => {
+    return (
+        <>
+            <div className={styles.block}>
+                <div className={styles.logo}>
+                    <Logo/>
+                </div>
+                <Header/>
+                <p className={styles.text}>
+                    {typo(`Мы объединили вайб кофейни Surf Coffee®
+                    с возможностями нетворкинга в соцсети от hh.ru Сетке, чтобы создать 
+                    больше крутых пересечений.`)}
+                    <br/>
+                    <br/>
+                    {typo(`Теперь можно пересечься с нужными людьми из вашей индустрии, 
+                    которые уже с вами на одной волне, ведь они тоже выбирают Surf\u00A0Coffee®.`)}
+                </p>
+                <ButtonGroup/>
+            </div>
+        </>
+    )
+}

src/pages/HomePage/components/MainBlock/MainBlock.module.css

@@ -0,0 +1,100 @@
+
+.block {
+    display: flex;
+    flex-direction: column;
+    padding-top: 60px;
+
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+    background: url('./main_block_background.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-color: black;
+    background-position: top;
+
+    padding-bottom: 77px;
+}
+
+@media screen and (max-width: 800px) {
+    .block {
+        padding-top: 35px;
+        background-size: 140%;
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .block {
+        padding-left: var(--padding-mobile-horizontal);
+        padding-right: var(--padding-mobile-horizontal);
+        padding-bottom: 28px;
+    }
+}
+
+.text {
+    max-width: 806px;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 130%;
+
+    text-align: center;
+
+    color: white;
+
+    padding-top: 40px;
+}
+
+@media screen and (max-width: 1300px) {
+    .text {
+        max-width: 700px;
+    }
+}
+
+
+@media screen and (max-width: 1000px) {
+    .text {
+        max-width: 500px;
+    }
+}
+
+@media screen and (max-width: 1250px) {
+    .text {
+        font-size: 15px;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .text {
+        padding-top: 40px;
+        font-size: 13px;
+
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 130%;
+    }
+}
+
+.logo {
+    max-width: 378px;
+    width: 100%;
+    margin-left: var(--padding-mobile-horizontal);
+    margin-right: var(--padding-mobile-horizontal);
+}
+
+@media screen and (max-width: 580px) {
+    .logo {
+        max-width: 43vw;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .text {
+        text-align: left;
+        padding-top: 28px;
+    }
+}

src/pages/HomePage/components/MainBlock/components/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,24 @@
+
+import { sendGoal } from '@utils';
+import styles from './ButtonGroup.module.css';
+
+export const ButtonGroup = () => {
+
+    const handleDownloadApp = () => {
+        sendGoal('download_app_clicked');
+    };
+
+    const handleGettingStarted = () => {
+        sendGoal('getting_started_clicked');
+    };
+
+    return (
+        <>
+            <div className={styles.row}>
+                <a href='https://setka.onelink.me/tQlI/k82d3mhf' target='_blank' className={styles.button_solid} onClick={handleDownloadApp}>скачать сетку</a>
+                <a href='#steps' className={styles.button_outline} onClick={handleGettingStarted}>с чего начать</a>
+            </div>
+        </>
+    )
+
+}

src/pages/HomePage/components/MainBlock/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,101 @@
+
+.row {
+    margin-top: 45px;
+
+    display: flex;
+    flex-direction: row;
+    gap: 80px;
+
+    font-family: "TravelsNext";
+    font-weight: 700;
+    
+    font-size: 20px;
+    line-height: 120%;
+
+    height: 48px;
+}
+
+@media screen and (max-width:1025px) {
+    .row {
+        gap: 40px;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .row {
+        margin-top: 28px;
+    }
+}
+
+.button_solid {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 380px;
+
+    color: black;
+    background: #FFFFFF;
+    border-radius: 4px;
+
+    box-shadow: 0 0 0 2px white;
+
+    transition: var(--transition);
+}
+
+.button_outline {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 380px;
+
+    color: white;
+    border-radius: 4px;
+    box-shadow: 0 0 0 2px white;
+
+    transition: var(--transition);
+}
+
+.button_outline, .button_solid {
+    
+    cursor: pointer;
+    
+    font-family: 'TT Travels Next';
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+
+}
+
+.button_solid:hover {
+    background-color: transparent;
+    color: white;
+}
+
+.button_outline:hover {
+    background-color: white;
+    color: black;
+}
+
+@media screen and (max-width:1250px) {
+    .button_outline, .button_solid {
+        width: 300px;
+        font-size: 16px;
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .row {
+        flex-direction: column;
+        gap: 15px;
+        height: 100%;
+        width: 100%;
+    }
+    .button_outline, .button_solid {
+        width: 100%;
+        height: 48px;
+    }
+}

src/pages/HomePage/components/MainBlock/components/ButtonGroupFooter/ButtonGroup.module.css

@@ -0,0 +1,108 @@
+
+.row {
+    margin-top: 102px;
+
+    display: flex;
+    flex-direction: row;
+    gap: 80px;
+
+    font-family: "TravelsNext";
+    font-weight: 700;
+    
+    font-size: 20px;
+    line-height: 120%;
+
+    height: 48px;
+}
+
+@media screen and (max-width:1025px) {
+    .row {
+        gap: 40px;
+    }
+}
+
+.button_solid {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+
+    padding: 0 50px;
+
+    color: #fff;
+    background: black;
+    white-space: nowrap;
+    border-radius: 4px;
+
+    box-shadow: 0 0 0 2px black;
+
+    transition: var(--transition);
+}
+
+.button_outline {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 380px;
+
+    color: white;
+    border-radius: 4px;
+    box-shadow: 0 0 0 2px white;
+
+    transition: var(--transition);
+}
+
+.button_outline, .button_solid {
+    
+    cursor: pointer;
+    
+    font-family: 'TT Travels Next';
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+
+}
+
+.button_solid:hover {
+    background-color: transparent;
+    color: black;
+}
+
+.button_outline:hover {
+    background-color: white;
+    color: black;
+}
+
+@media screen and (max-width:1250px) {
+    .button_outline, .button_solid {
+        font-size: 16px;
+    }
+}
+
+@media screen and (max-width:1000px) {
+    .row {
+        margin-top: 52px;
+    }
+}
+
+@media screen and (max-width: 780px) {
+    .row {
+        flex-direction: column;
+        gap: 15px;
+        height: 100%;
+        width: 100%;
+        padding: 0 var(--padding-mobile-horizontal);
+    }
+    .button_outline, .button_solid {
+        width: 100%;
+        min-height: 48px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        text-wrap-mode: wrap;
+        text-align: center;
+    }
+}

src/pages/HomePage/components/MainBlock/components/ButtonGroupFooter/ButtonGroupFooter.jsx

@@ -0,0 +1,15 @@
+import styles from './ButtonGroup.module.css';
+
+export const ButtonGroupFooter = () => {
+
+
+    return (
+        <>
+            <div className={styles.row}>
+                <a href='/surfing/rules' className={styles.button_solid}>условия конкурса</a>
+                <a href='https://hh.ru/article/personal_data' target='_blank' className={styles.button_solid}>политика обработки данных</a>
+            </div>
+        </>
+    )
+
+}

src/pages/HomePage/components/MainBlock/components/Header/Header.jsx

@@ -0,0 +1,34 @@
+import image_1 from './sc_setka-1.png'
+// swap
+import image_3 from './sc_setka-2.png'
+import image_2 from './sc_setka-3.png'
+
+import styles from './Header.module.css';
+
+export const Header = () => {
+    return(
+        <>
+            <div className={styles.header}>
+                <div className={styles.row}>
+                    <h1>где волны</h1> <img className={styles.img} src={image_1}/>
+                </div>
+                <div className={styles.row}>
+                    <img src={image_2} className={styles.img}/> <h1>становятся</h1>
+                </div>
+                <div className={styles.row}>
+                    <h1>связями</h1> <img className={styles.img} src={image_3}/>
+                </div>
+                <div className={styles.row_mobile}>
+                    <h1>где</h1> <img className={styles.setka_1} src={image_1}/>
+                </div>
+                <div className={styles.row_mobile}>
+                    <img src={image_2} className={styles.setka_2}/> <h1>волны</h1>
+                </div>
+                <div className={styles.row_mobile}><h1 className={styles.mobile}>становятся</h1></div>
+                <div className={styles.row_mobile}>
+                    <img className={styles.setka_3} src={image_3}/> <h1>связями</h1>
+                </div>
+            </div>
+        </>
+    )
+}

src/pages/HomePage/components/MainBlock/components/Header/Header.module.css

@@ -0,0 +1,169 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 10px;
+
+    max-width: 1240px;
+    padding-top: 45px;
+}
+
+@media screen and (max-width: 800px) {
+    .header {
+        padding-top: 28px;
+    }
+}
+
+.img {
+    max-height: 125px;
+    height: 100%;
+    width: 100%;
+    border-radius: 12px;
+}
+
+@media screen and (max-width: 1470px) {
+    .img {
+        max-width: 500px;
+    }
+}
+
+@media screen and (max-width: 1070px) {
+    .img {
+        max-width: 40vw;
+    }
+    .header {
+        gap: 2px;
+    }
+}
+
+.row, .row_mobile {
+    display: flex;
+    flex-direction: row;
+    gap: 13px;
+    align-items: center;
+}
+
+.row_mobile {
+    display: none;
+}
+
+.mobile {
+    display: none;
+}
+
+.header h1 {
+    font-family: "TT Travels Next";
+    font-weight: 700;
+    font-size: 105px;
+    line-height: 100%;
+
+    color: #EEEADD;
+
+    text-wrap: nowrap;
+}
+
+@media screen and (max-width: 1470px) {
+    .header h1 {
+        font-size: 85px;
+    }
+    .header img {
+        max-width: 49%;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    .header h1 {
+        font-size: 6vw;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .header h1 {
+        font-family: 'TT Travels Next';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 40px;
+        line-height: 100%;
+    }
+}
+
+@media screen and (max-width: 370px) {
+    .header h1 {
+        font-size: 6vw;
+    }
+}
+
+.setka_1, .setka_2, .setka_3 {
+    border-radius: 12px;
+}
+
+@media screen and (max-width: 1000px) {
+    .setka_1 {
+        object-fit: cover;
+        width: 470px;
+        height: 100px;
+    }
+    .setka_2 {
+        object-fit: cover;
+        height: 100px;
+    }
+    .setka_3 {
+        height: 100px;
+        width: 450px;
+        width: 300px;
+        object-fit: cover;
+    }
+    .row_mobile {
+        display: flex;
+    }
+    .header img {
+        max-width: 100%;
+    }
+    .mobile {
+        display: block;
+        margin-top: -9px;
+    }
+    .row {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 820px) {
+    .setka_1, .setka_2, .setka_3 {
+        height: 90px;
+    }
+    .setka_1 {
+        width: 440px;
+    }
+    .setka_3 {
+        width: 320px;
+    }
+}
+
+@media screen and (max-width: 580px) {
+    
+    .setka_1, .setka_2, .setka_3 {
+        height: 35px;
+        border-radius: 4px;
+    }
+    .setka_1 {
+        width: 230px;
+    }
+    .setka_2 {
+        width: 170px;
+    }
+    .setka_3 {
+        width: 117px;
+    }
+    
+    .row_mobile {
+        gap: 4px;
+    }
+}
+
+@media screen and (max-width: 410px) {
+    .setka_3 {
+        width: 100%;
+        max-width: 100%;
+    }
+}

src/pages/HomePage/components/StepsBlock/StepsBlock.jsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { Button } from "./components/Button/Button";
+import { ImageLine } from "./components/ImageLine/ImageLine";
+import { Step } from "./components/Step/Step";
+import styles from "./StepsBlock.module.css";
+import { Popup } from "../../../../components/Popup/Popup";
+import { sendGoal } from "@utils";
+
+import { typo } from "@utils/typo";
+
+export const StepsBlock = () => {
+	const [popupIsOpen, setPopupIsOpen] = useState(false);
+
+	const handleJoinCommunity = () => {
+		sendGoal("join_community_clicked");
+	};
+
+	const handleLocationPopupOpen = () => {
+		sendGoal("location_popup_opened");
+		setPopupIsOpen(true);
+	};
+
+	return (
+		<div className={styles.column} id='steps'>
+			<h1 className={styles.head}>
+				как пересечься
+				<br />с интересными людьми
+			</h1>
+			<div className={styles.mobile_image} />
+			<div className={styles.row}>
+				<Step number={1} head='Шаг<br/>первый'>
+					<p>
+						{typo(`Скачай Сетку и напиши пост о себе`)}
+						<span>
+							{" "}
+							<a
+								target='_blank'
+								href='https://set.ki/chan_inv/CrvvTgv'
+								onClick={handleJoinCommunity}
+							>
+								{typo(`в закрытом сообществе`)}
+							</a>{" "}
+						</span>
+						{typo(`Сетка\u00A0х\u00A0Surf\u00A0Coffee®. 
+                        Расскажи, чем горишь, где работаешь и какой у&nbsp;тебя любимый спот Surf\u00A0Coffee® в Москве.`)}
+					</p>
+				</Step>
+
+				<Step number={2} head='Шаг<br/>второй'>
+					<p>
+						{typo(`Поставь в посте хештег спота, чтобы тебя смогли 
+                        найти другие сёрферы. Выбери его из списка ниже.`)}
+					</p>
+				</Step>
+
+				<Step number={3} head='Шаг<br/>третий'>
+					<p>
+						{typo(`Переходи по хештегу, 
+                        ищи посты других сёрферов и&nbsp;договаривайся понетворкать в Surf\u00A0Coffee®.`)}
+					</p>
+				</Step>
+			</div>
+			<div className={styles.button}>
+				<Button text='cпоты Surf Coffee®' onClick={handleLocationPopupOpen} />
+			</div>
+			<Popup isOpen={popupIsOpen} setIsOpen={setPopupIsOpen} />
+			<ImageLine />
+		</div>
+	);
+};

src/pages/HomePage/components/StepsBlock/StepsBlock.module.css

@@ -0,0 +1,120 @@
+
+.column {
+    color: black;
+    background: white;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    
+}
+
+
+.row {
+    width: 100%;
+    max-width: 1440px;
+    padding-top: 60px;
+    
+    padding-bottom: 13px;
+
+    display: flex;
+    flex-direction: row;
+    gap: 38px;
+    justify-content: space-between;
+
+    padding-left: var(--padding-desktop-horizontal);
+    padding-right: var(--padding-desktop-horizontal);
+}
+
+
+@media screen and (max-width: 1000px) {
+    .row {
+        
+        padding-left: var(--padding-mobile-horizontal);
+        padding-right: var(--padding-mobile-horizontal);
+    }
+}
+
+@media screen and (max-width: 1100px) {
+    .row {
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 40px;
+    }
+}
+
+
+.head {
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 55px;
+    line-height: 100%;
+    padding-top: 60px;
+    max-width: 1200px;
+    text-align: center;
+}
+
+@media screen and (max-width: 1100px) {
+    .head {
+        text-align: start;
+        padding-left: var(--padding-mobile-horizontal);
+        padding-right: var(--padding-mobile-horizontal);
+    }
+}
+
+@media screen and (max-width: 1080px) {
+    .head {
+        font-size: 38px;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .head {
+        font-size: 28px;
+    }
+    .row {
+        gap: 20px;
+    }
+}
+
+.button {
+    width: 100%;
+    max-width: calc(382px + var(--padding-mobile-horizontal) * 2);
+    padding-left: var(--padding-mobile-horizontal);
+    padding-right: var(--padding-mobile-horizontal);
+}
+
+.mobile_image {
+    display: none;
+}
+
+@media screen and (max-width: 800px) {
+    .mobile_image {
+        display: block;
+        background-image: url("./image_mobile.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: top;
+        height: 15vw;
+        width: 100%;
+        margin-top: 20px;
+    }
+    .row {
+        padding-top: 25px;
+    }
+    .head {
+        padding-top: 20px;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .head {
+        padding-top: 15px;
+    }
+    .mobile_image {
+        height: 100px;
+        background-position: center;
+    }
+}

src/pages/HomePage/components/StepsBlock/components/Button/Button.jsx

@@ -0,0 +1,10 @@
+
+import styles from './Button.module.css';
+
+export const Button = ({text, onClick}) => {
+    return (
+        <div className={styles.button} onClick={onClick}>
+            {text}
+        </div>
+    )
+}

src/pages/HomePage/components/StepsBlock/components/Button/Button.module.css

@@ -0,0 +1,39 @@
+.button {
+
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    width: 100%;
+
+    background-color: black;
+    border-radius: 4px;
+
+    border: 2px solid #000;
+    transition: var(--transition);
+
+    
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: transparent;
+    color: black;
+}
+
+@media screen and (max-width: 1100px) {
+    .button {
+        font-family: 'TT Travels Next';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 120%;
+    }
+}

src/pages/HomePage/components/StepsBlock/components/ImageLine/ImageLine.jsx

@@ -0,0 +1,8 @@
+
+import styles from './ImageLine.module.css';
+
+export const ImageLine = () => {
+    return (
+        <div className={styles.image_group} />
+    )
+}

src/pages/HomePage/components/StepsBlock/components/ImageLine/ImageLine.module.css

@@ -0,0 +1,33 @@
+.image_group {
+    margin-top: 67px;
+
+    background-image: url("./image_group.png");
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 156px;
+}
+
+@media screen and (max-width: 1100px) {
+    .image_group {
+        background-image: url("./image_mobile_group.png");
+        height: 120px;
+        margin-bottom: -4px;
+        margin-top: 22px;
+    }
+}
+
+
+@media screen and (max-width: 760px) {
+    .image_group {
+        height: 100px;
+    }
+}
+
+
+@media screen and (max-width: 530px) {
+    .image_group {
+        height: 62px;
+    }
+}

src/pages/HomePage/components/StepsBlock/components/Step/Step.jsx

@@ -0,0 +1,14 @@
+
+import styles from './Step.module.css';
+
+export const Step = ( {number = 1, head = "Шаг первый", children} ) => {
+    return (
+        <div className={styles.row}>
+            <span className={styles.number}>{number}</span>
+            <div className={styles.column}>
+                <h1 className={styles.head} dangerouslySetInnerHTML={{__html: head}} />
+                {children}
+            </div>
+        </div>
+    )
+}

src/pages/HomePage/components/StepsBlock/components/Step/Step.module.css

@@ -0,0 +1,108 @@
+.row {
+    display: flex;
+    flex-direction: row;
+    gap: 33px;
+}
+
+
+.number {
+    background: transparent;
+    border: 1px solid black;
+    width: 69px;
+    height: 69px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 115%;
+    flex-shrink: 0;
+}
+
+@media screen and (max-width: 1100px) {
+    .number {
+        width: 5vw;
+        height: 5vw;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .number {
+        width: 27px;
+        height: 27px;
+
+        font-style: normal;
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 115%;
+    }
+}
+
+
+.column {
+    max-width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 33px;
+
+    padding-top: 22px;
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 130%;
+}
+
+@media screen and (max-width: 1100px) {
+    .column {
+        max-width: 400px;
+        padding-top: 0;
+        gap: 15px;
+    }
+    .row {
+        gap: 1.5vw;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .column {
+        font-size: 13px;
+    }
+    
+    .row {
+        gap: 9px;
+    }
+}
+
+.head {
+    font-family: 'TT Travels Next';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 30px;
+    line-height: 100%;
+
+    text-transform: lowercase;
+    white-space: pre-wrap;
+}
+
+@media screen and (max-width: 1100px) {
+    .head {
+        font-size: 24px;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .head {
+        font-size: 22px;
+    }
+}
+
+.row a {
+    text-decoration-line: underline;
+    color: inherit;
+}