init
This commit is contained in:
Egor Matveev
17
src/pages/HomePage/HomePage.jsx
Normal file
17
src/pages/HomePage/HomePage.jsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
0
src/pages/HomePage/HomePage.module.css
Normal file
0
src/pages/HomePage/HomePage.module.css
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
BIN
src/pages/HomePage/components/CommunityBlock/background.png
Normal file
BIN
src/pages/HomePage/components/CommunityBlock/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
BIN
src/pages/HomePage/components/CommunityBlock/background_blur.png
Normal file
BIN
src/pages/HomePage/components/CommunityBlock/background_blur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 513 KiB |
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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}>
|
||||
попади в закрытое комьюнити для сёрфинга по локациям
|
||||
</h1>
|
||||
<p className={styles.text}>
|
||||
Смотри по хештегу, кто уже сёрфит в удобной для тебя локации.
|
||||
<br />
|
||||
<br />А также публикуй{" "}
|
||||
<a href='https://set.ki/chan_inv/CrvvTgv' target='_blank'>
|
||||
в закрытом сообществе
|
||||
</a>{" "}
|
||||
Сетка х Surf Coffee® в Сетке свои посты с фото
|
||||
и хештегами локаций, чтобы тебя заметили нужные люди. Каждую неделю
|
||||
мы выбираем 3 поста, авторы которых получают набор классного мерча
|
||||
Сетки и коробку дрип-пакетов от Surf Coffee®.
|
||||
<br />
|
||||
<br />
|
||||
Конкурс действует до его отмены.
|
||||
</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>
|
||||
);
|
||||
};
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
40
src/pages/HomePage/components/FooterBlock/FooterBlock.jsx
Normal file
40
src/pages/HomePage/components/FooterBlock/FooterBlock.jsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
247
src/pages/HomePage/components/FooterBlock/FooterBlock.module.css
Normal file
247
src/pages/HomePage/components/FooterBlock/FooterBlock.module.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
BIN
src/pages/HomePage/components/FooterBlock/image_mobile_group.png
Normal file
BIN
src/pages/HomePage/components/FooterBlock/image_mobile_group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
src/pages/HomePage/components/FooterBlock/sc_setka-1.png
Normal file
BIN
src/pages/HomePage/components/FooterBlock/sc_setka-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
src/pages/HomePage/components/FooterBlock/sc_setka-2.png
Normal file
BIN
src/pages/HomePage/components/FooterBlock/sc_setka-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
src/pages/HomePage/components/FooterBlock/sc_setka-3.png
Normal file
BIN
src/pages/HomePage/components/FooterBlock/sc_setka-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
115
src/pages/HomePage/components/FooterBlock/waves.svg
Normal file
115
src/pages/HomePage/components/FooterBlock/waves.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 185 KiB |
29
src/pages/HomePage/components/MainBlock/MainBlock.jsx
Normal file
29
src/pages/HomePage/components/MainBlock/MainBlock.jsx
Normal file
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
100
src/pages/HomePage/components/MainBlock/MainBlock.module.css
Normal file
100
src/pages/HomePage/components/MainBlock/MainBlock.module.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 445 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
70
src/pages/HomePage/components/StepsBlock/StepsBlock.jsx
Normal file
70
src/pages/HomePage/components/StepsBlock/StepsBlock.jsx
Normal file
@@ -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®.
|
||||
Расскажи, чем горишь, где работаешь и какой у тебя любимый спот Surf\u00A0Coffee® в Москве.`)}
|
||||
</p>
|
||||
</Step>
|
||||
|
||||
<Step number={2} head='Шаг<br/>второй'>
|
||||
<p>
|
||||
{typo(`Поставь в посте хештег спота, чтобы тебя смогли
|
||||
найти другие сёрферы. Выбери его из списка ниже.`)}
|
||||
</p>
|
||||
</Step>
|
||||
|
||||
<Step number={3} head='Шаг<br/>третий'>
|
||||
<p>
|
||||
{typo(`Переходи по хештегу,
|
||||
ищи посты других сёрферов и договаривайся понетворкать в Surf\u00A0Coffee®.`)}
|
||||
</p>
|
||||
</Step>
|
||||
</div>
|
||||
<div className={styles.button}>
|
||||
<Button text='cпоты Surf Coffee®' onClick={handleLocationPopupOpen} />
|
||||
</div>
|
||||
<Popup isOpen={popupIsOpen} setIsOpen={setPopupIsOpen} />
|
||||
<ImageLine />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
120
src/pages/HomePage/components/StepsBlock/StepsBlock.module.css
Normal file
120
src/pages/HomePage/components/StepsBlock/StepsBlock.module.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
import styles from './Button.module.css';
|
||||
|
||||
export const Button = ({text, onClick}) => {
|
||||
return (
|
||||
<div className={styles.button} onClick={onClick}>
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
|
||||
import styles from './ImageLine.module.css';
|
||||
|
||||
export const ImageLine = () => {
|
||||
return (
|
||||
<div className={styles.image_group} />
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 582 KiB |
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
BIN
src/pages/HomePage/components/StepsBlock/image_mobile.png
Normal file
BIN
src/pages/HomePage/components/StepsBlock/image_mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
28
src/pages/RulesPage/RulesPage.jsx
Normal file
28
src/pages/RulesPage/RulesPage.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import styles from './RulesPage.module.css';
|
||||
import { Logo } from '../../components/Logo/Logo';
|
||||
import { Rules } from './components/RulesLayout/Rules';
|
||||
|
||||
export const RulesPage = () => {
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className={styles.logo}>
|
||||
<Logo />
|
||||
</div>
|
||||
<h1 className={styles.title}>Акция «Где волны становятся связями»</h1>
|
||||
<div className={styles.rules}>
|
||||
<Rules/>
|
||||
</div>
|
||||
|
||||
<a href='https://hh.ru/article/personal_data' target='_blank' className={styles.button}>
|
||||
политика персональных данных
|
||||
</a>
|
||||
|
||||
<p className={styles.copyright}>
|
||||
(c) HeadHunter {new Date().getFullYear()}. Информация на данном сайте
|
||||
<br />
|
||||
не является публичной офертой.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
107
src/pages/RulesPage/RulesPage.module.css
Normal file
107
src/pages/RulesPage/RulesPage.module.css
Normal file
@@ -0,0 +1,107 @@
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
background-color: black;
|
||||
min-height: 100vh;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding-top: 40px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 60px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.rules {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:660px) {
|
||||
.title {
|
||||
font-size: 16px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.logo {
|
||||
padding-top: 28px;
|
||||
max-width: 45vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 370px) {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.copyright {
|
||||
font-family: Inter;
|
||||
font-size: 11px;
|
||||
line-height: 130%;
|
||||
text-align: center;
|
||||
margin: 28px auto 40px;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.copyright {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 8px;
|
||||
line-height: 130%;
|
||||
|
||||
padding: 0 var(--padding-mobile-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 340px) {
|
||||
.copyright {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
padding: 12px 45px;
|
||||
|
||||
font-family: 'TT Travels Next';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
line-height: 120%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 0.5px solid #FFFFFF;
|
||||
border-radius: 4px;
|
||||
|
||||
transition: var(--transition);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.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: 10px;
|
||||
line-height: 120%;
|
||||
}
|
||||
}
|
||||
191
src/pages/RulesPage/components/RulesLayout/Rules.jsx
Normal file
191
src/pages/RulesPage/components/RulesLayout/Rules.jsx
Normal file
@@ -0,0 +1,191 @@
|
||||
|
||||
import styles from './Rules.module.css';
|
||||
|
||||
export const Rules = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<ol>
|
||||
<li className={styles.header}><h2>1. Общие положения</h2></li>
|
||||
<ol>
|
||||
<li>
|
||||
Акция «Где волны становятся связями» (далее по тексту — «Акция») проводится на территории Российской Федерации. Организатором Акции на
|
||||
территории Российской Федерации является Общество с ограниченной ответственностью «Хэдхантер» (ООО «Хэдхантер») — (юридический адрес:
|
||||
129085, город Москва, ул. Годовикова, д.9 стр.10, ИНН 7718620740) (далее — «Организатор»).
|
||||
Партнером Акции является – ООО «СТРАТФОРД ГЛОБАЛ», ИНН 4025437488, юр.адрес: 125080, г. Москва, вн.тер.г. муниципальный округ Сокол, ш
|
||||
Волоколамское, д. 1, к. А, помещ. 1/1А (Surf Coffee).
|
||||
</li>
|
||||
<li>
|
||||
Период проведения Акции: с 17 сентября 2025 г. по 17 октября 2025 г. включительно. Акция проводится в 4 этапа, продолжительностью один неделю
|
||||
каждый.
|
||||
</li>
|
||||
<li>
|
||||
В Акции вправе принять участие физические лица (далее – «Участник»/«Участники»): совершеннолетние, являющиеся гражданами Российской
|
||||
Федерации, обладающие полной дееспособностью, имеющие учетную запись на платформе <a target='_blank' href='https://setka.ru/'>https://setka.ru/</a>, выполнившие условия участия в Акции.
|
||||
</li>
|
||||
<li>
|
||||
<span>Каждый Победитель Акции получает один призовой набор (далее – «Приз»), в который входит по одной единице каждого из наименований:</span>
|
||||
<table className={styles.table}>
|
||||
<thead><th>Наименование приза</th><th>Количество, шт.</th><th>Стоимость за 1 шт., руб, включая НДС (при наличии)</th></thead>
|
||||
<tbody>
|
||||
<tr><td>Шнурок для телефона</td><td>12</td><td>750,00</td></tr>
|
||||
<tr><td>Бутылка</td><td>12</td><td>1 766,90</td></tr>
|
||||
<tr><td>Стикеры</td><td>12</td><td>75,00</td></tr>
|
||||
<tr><td>Коробка дрип-пакетов от Surf Coffee</td><td>12</td><td>600,00</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Общее количество Победителей Акции – 12 человек. По итогам каждой недели определяется 3 победителя. Каждый Победитель получает один Приз.
|
||||
</li>
|
||||
</ol>
|
||||
<li className={styles.header}><h2>2. Правила проведения и участия</h2></li>
|
||||
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
Для участия в Акции Участнику в период проведения Акции необходимо:
|
||||
<ol>
|
||||
<li>
|
||||
Вступить в закрытое Сообщество «Сетка x Surf Coffee» по ссылке: <a href="https://set.ki/chan_inv/CrvvTgv" target='_blank'>https://set.ki/chan_inv/CrvvTgv</a> (далее Сообщество).
|
||||
</li>
|
||||
<li>
|
||||
Опубликовать в данном Сообществе пост.
|
||||
</li>
|
||||
<li>
|
||||
Текст поста должен содержать рассказ о себе: как зовут, где работает и чем занимается, в каких локациях Surf Coffee в Москве бывает чаще всего
|
||||
</li>
|
||||
<li>
|
||||
К посту необходимо прикрепить свою фотографию <a href="https://setka.ru/surfing" target='_blank'>https://setka.ru/surfing</a>.
|
||||
</li>
|
||||
<li>
|
||||
Обязательным условием является использование в посте одного уникального хештега формата #SC_НазваниеЛокации (например, #SC_Belka).
|
||||
Список всех возможных локаций и соответствующих хештегов опубликован на странице Акции: <a href="https://setka.ru/surfing" target='_blank'>https://setka.ru/surfing</a>.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<li>
|
||||
Пост должен быть оригинальным, созданным лично Участником, соответствовать нормам русского языка и не нарушать авторские права третьих
|
||||
лиц, законодательство РФ и общепринятые нормы морали.
|
||||
</li>
|
||||
<li>
|
||||
Публикация поста должна быть размещена в период проведения Акции по московскому времени. Посты, опубликованные до или после указанного
|
||||
срока, к участию в Акции не допускаются.
|
||||
</li>
|
||||
<li>
|
||||
Один Участник может опубликовать неограниченное количество постов, но для участия в Акции каждый пост должен соответствовать п. 2.1.
|
||||
настоящих Правил. Участник может стать победителем только один раз за всю Акцию.
|
||||
</li>
|
||||
<li>
|
||||
Определение Победителей осуществляется на основании суммы всех реакций и комментариев, полученных постом участника на момент окончания
|
||||
соответствующей Недели. Авторы трех постов, набравших наибольшее количество реакций и комментариев, признаются победителями.
|
||||
</li>
|
||||
<li>
|
||||
Итоги каждого еженедельного этапа подводятся в следующие сроки:
|
||||
|
||||
<p>
|
||||
• За Неделю 1 (17.09.2025 – 23.09.2025): не позднее 24 сентября 2025 г.
|
||||
<br />
|
||||
• За Неделю 2 (24.09.2025 – 30.09.2025): не позднее 01 октября 2025 г.
|
||||
<br />
|
||||
• За Неделю 3 (01.10.2025 – 07.10.2025): не позднее 08 октября 2025 г.
|
||||
<br />
|
||||
• За Неделю 4 (08.10.2025 – 15.10.2025):не позднее 15 октября 2025 г.
|
||||
</p>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
Результаты Акции публикуются в закрытом Сообществе «Сетка x Surf Coffee» по ссылке: <a target='_blank' href='https://set.ki/chan_inv/CrvvTgv'>https://set.ki/chan_inv/CrvvTgv</a>.
|
||||
</li>
|
||||
<li>
|
||||
Оповещение Победителей осуществляется Организатором путем направления личного сообщения на платформе <a href='https://setka.ru/' target='_blank'>https://setka.ru/</a> в течение 3 рабочих
|
||||
дней с даты подведения итогов соответствующей недели.
|
||||
</li>
|
||||
<li>
|
||||
Победитель обязан предоставить ответ и все необходимые данные для получения Приза в течение 7 календарных дней с момента получения
|
||||
сообщения. В случае если в указанный срок контакт с Победителем установить не удалось или Победитель отказался от Приза, такой Победитель
|
||||
лишается права на его получение.
|
||||
</li>
|
||||
<li>
|
||||
Организатор оставляет за собой право отказать в участии лицу, нарушившему правила Акции, а также аннулировать участие при выявлении
|
||||
недостоверной информации, несоответствия поста условиям Акции, накрутки активности или действующему законодательству.
|
||||
</li>
|
||||
</ol>
|
||||
<li className={styles.header}><h2>3. Налогообложение и предоставление документов</h2></li>
|
||||
<ol>
|
||||
<li>
|
||||
В Акции участвуют Призы стоимостью, не превышающей 4 000 (Четыре тысячи) рублей
|
||||
</li>
|
||||
<li>
|
||||
В соответствии с п. 28 ст. 217 НК РФ стоимость призов, полученных налогоплательщиками от организаций или индивидуальных предпринимателей, не
|
||||
превышающая 4000 (Четыре тысячи) рублей за налоговый период, не подлежит обложению НДФЛ.
|
||||
</li>
|
||||
<li>
|
||||
В случае, если по каким-то причинам, Организатором в Акции будет изменен Приз или изменится стоимость Приза и превысит стоимость 4 000
|
||||
(Четыре тысячи) рублей, Победители обязаны предоставить Организатору следующие документы для удержания НДФЛ со стоимости приза или
|
||||
предоставления в ФНС РФ сведений о невозможности удержания НДФЛ:
|
||||
<p>
|
||||
- скан паспорта;
|
||||
<br />
|
||||
- скан СНИЛС;
|
||||
<br />
|
||||
- скан ИНН (если есть).
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Организатор не выдаст Победителю приз стоимостью более 4 000 (Четыре тысяч) рублей, если последний не предоставил документы Организатору
|
||||
по перечню из пункта выше.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Победитель обязан связаться с Организатором и предоставить необходимые данные для получения Приза в течение 7 календарных дней с момента
|
||||
объявления результатов. В случае если в указанный срок контакт с Победителем установить не удалось (Победитель не отвечает, отказался предоставить
|
||||
данные), такой Победитель лишается права на получение Приза. Организатор вправе выбрать нового Победителя из списка Участников или
|
||||
распорядиться Призом иным образом по своему усмотрению.
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
<li className={styles.header}><h2>4. Персональные данные</h2></li>
|
||||
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
Участие в Акции является акцептом Участника настоящих Условий и основанием для обработки его персональных данных Организатором в целях
|
||||
проведения Акции, включая определение участников, выполнивших все условия акции и вручения им Призов.
|
||||
</li>
|
||||
<li>
|
||||
Перечень персональных данных, которые предоставляются Участником и обрабатываются Организатором: ФИО, адрес электронной почты.
|
||||
</li>
|
||||
<li>
|
||||
Перечень действий с предоставляемыми Участниками персональными данными: сбор, запись, систематизация, накопление, хранение, уточнение
|
||||
(обновление, изменение), извлечение, использование, передача (предоставление, доступ), блокирование, удаление, уничтожение персональных данных.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Организатор осуществляют обработку персональных данных Участников в течение срока проведения Акции.
|
||||
</li>
|
||||
<li>
|
||||
Участник Акции вправе в любое время отозвать свое согласие на обработку персональных данных путем направления заявления в адрес
|
||||
Организатора. При получении такого отзыва согласия в период проведения Акции, участие в Акции прекращается.
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
<li className={styles.header}><h2>5. Заключительные положения</h2></li>
|
||||
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
Организатор оставляет за собой право досрочно прекратить условия Акции, изменять условия Акции в одностороннем порядке, в связи с чем
|
||||
Участник Акции обязуется регулярно отслеживать изменения в Условиях Акции, размещенных на Сайте Организатора. В случае внесения изменений
|
||||
в Условия Акции, такие изменения вступают в силу с момента опубликования новой редакции Условиях Акции на Сайте Организатора.
|
||||
</li>
|
||||
<li>
|
||||
Выполняя условия Акции, изложенные в настоящем Положении, Участник Акции безусловно соглашается на все условия Акции.
|
||||
</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
97
src/pages/RulesPage/components/RulesLayout/Rules.module.css
Normal file
97
src/pages/RulesPage/components/RulesLayout/Rules.module.css
Normal file
@@ -0,0 +1,97 @@
|
||||
.container {
|
||||
line-height: normal;
|
||||
max-width: 1150px;
|
||||
}
|
||||
.container h2 {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.container > ol > li {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.container > ol > li > ol {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 660px) {
|
||||
.container > ol > li {
|
||||
font-size: 14px;
|
||||
}
|
||||
.container > ol > li > ol {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 370px) {
|
||||
.container > ol > li {
|
||||
font-size: 13px;
|
||||
}
|
||||
.container > ol > li > ol {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.container a {
|
||||
color: inherit;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.container ol {
|
||||
counter-reset: item;
|
||||
margin: 0 0 0 1.2em;
|
||||
}
|
||||
.container li {
|
||||
display: block;
|
||||
}
|
||||
.container li:before {
|
||||
counter-increment: item;
|
||||
content: counters(item, ".") ". ";
|
||||
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.container p {
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
.container ol ol {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin: 15px 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1180px) {
|
||||
.table {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
.container ol {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.table th,
|
||||
.table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* .table tr:hover {
|
||||
background: #080808;
|
||||
} */
|
||||
|
||||
.table th {
|
||||
background: #131313;
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user