diff --git a/src/components/AboutSection/AboutSection-styled.jsx b/src/components/AboutSection/AboutSection-styled.jsx
new file mode 100644
index 0000000..699eb8f
--- /dev/null
+++ b/src/components/AboutSection/AboutSection-styled.jsx
@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+export const Section = styled.section`
+ background-color: var(--primary-white-color);
+ padding-top: 60px;
+ padding-bottom: 100px;
+`;
+
+export const SectionWrap = styled.div`
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 24px;
+ padding-right: 24px;
+ max-width: 1200px;
+`;
+
+export const List = styled.ul`
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+ gap: 30px;
+`;
+
+export const Item = styled.li`
+max-width: 500px;
+text-align: center;
+`;
+
+
+export const TitleH2 = styled.h2`
+text-align: center;
+ margin-bottom: 35px;
+ font-family: "Manrope";
+ font-size: 35px;
+ font-style: normal;
+ font-weight: 700;
+ color: var(--primary-black-color);
+`;
+
+export const TitleH3 = styled.h3`
+ margin-bottom: 20px;
+ font-family: "Manrope";
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 500;
+ color: var(--primary-black-color);
+`;
+
+export const SubTitle = styled.p`
+ font-family: "Manrope";
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ color: var(--primary-black-color);
+ line-height: 28px;
+`;
+
+export const AboutIconSvg = styled.svg`
+ width: 80px;
+ height: 80px;
+ margin-bottom: 20px;
+`;
diff --git a/src/components/AboutSection/AboutSection.jsx b/src/components/AboutSection/AboutSection.jsx
new file mode 100644
index 0000000..af27d4e
--- /dev/null
+++ b/src/components/AboutSection/AboutSection.jsx
@@ -0,0 +1,74 @@
+import React from "react";
+import sprite from "../../sprite.svg";
+import {
+ AboutIconSvg,
+ Item,
+ List,
+ Section,
+ SectionWrap,
+ SubTitle,
+ TitleH2,
+ TitleH3,
+} from "./AboutSection-styled";
+
+export const AboutSection = () => {
+ return (
+ <>
+
+
+ Наш клуб пропонує:
+
+ -
+
+
+
+ Персональні та групові тренування
+
+ Персональні тренування для будь-якого рівня навичкок з
+ досвідченим тренером або групові тренування в залежності від
+ вашого рівня
+
+
+
+ -
+
+
+
+ Найкраще обладнання
+
+ Наш клуб завжди дбає про якість м'ячів якими ми граємо,
+ періодично оновлюємо корт та сітки, а також маємо послугу
+ перетяжки струн досвідченими майстрами
+
+
+
+ -
+
+
+
+ Турніри та нагороди
+
+ Піднімай свій рівень гри на різноманітних любительських та
+ професійних турнірах. Отримуй кубки та медалі а також рейтинг
+ щоб піднятись на вершину слави клубу 100.
+
+
+
+ -
+
+
+
+ Широка спільнота
+
+ Наш клуб приймає як початківців так і професіоналів будь-якого
+ віку. Тут ти зможеш найти суперників, домовлятись про
+ персональні та групові спаринги та просто провести час весело та
+ з користю.
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/HeroSection/HeroSection-styled.jsx b/src/components/HeroSection/HeroSection-styled.jsx
new file mode 100644
index 0000000..42816c1
--- /dev/null
+++ b/src/components/HeroSection/HeroSection-styled.jsx
@@ -0,0 +1,78 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+export const Video = styled.video`
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ opacity: 0.5;
+`;
+
+export const Section = styled.section`
+ min-height: 100vh;
+ padding-top: 150px;
+ padding-bottom: 30px;
+`;
+
+export const SectionWrap = styled.div`
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 24px;
+ padding-right: 24px;
+ max-width: 1200px;
+`;
+
+export const TitleH1 = styled.h1`
+ max-width: 400px;
+ margin-bottom: 30px;
+ font-family: "Manrope";
+ font-size: 50px;
+ font-style: normal;
+ font-weight: 900;
+ color: var(--primary-white-color);
+
+ & span {
+ color: var(--accent-hover-color);
+ font-weight: 900;
+ }
+`;
+
+export const SubTitle = styled.p`
+ max-width: 400px;
+ margin-bottom: 30px;
+ font-family: "Manrope";
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ color: var(--primary-white-color);
+ line-height: 28px;
+`;
+
+export const ButtonLink = styled(Link)`
+ height: 50px;
+ border-radius: 12px;
+ padding: 12px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+
+ background-color: var(--accent-color);
+ color: var(--primary-white-color);
+
+ font-size: 16px;
+ font-family: "Manrope";
+ font-weight: 600;
+
+ transition: var(--main-transition);
+
+ &:hover {
+ background-color: var(--accent-hover-color);
+ }
+`;
diff --git a/src/components/HeroSection/HeroSection.jsx b/src/components/HeroSection/HeroSection.jsx
new file mode 100644
index 0000000..25cf8e9
--- /dev/null
+++ b/src/components/HeroSection/HeroSection.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import {
+ ButtonLink,
+ Section,
+ SectionWrap,
+ SubTitle,
+ TitleH1,
+ Video,
+} from "./HeroSection-styled";
+
+import BackgroundWebm from "./tennis.webm";
+import BackgroundMp4 from "./tennis.mp4";
+
+export const HeroSection = () => {
+ return (
+ <>
+
+
+
+
+
+ Клуб 100!
+
+
+ Ласкаво просимо на офійний сайт клубу любительського тенісу у
+ Львові.
+
+
+ У нас грають теніс для будь-яких вікових категорій та рівня навичок
+ а також для дітей. Можна прийняти участь у турнірах: одиночні,
+ парні, сімейні, підняти свій рівень гри на тренуваннях з
+ досвідченими тренерами, або просто весело провести час в колі
+ друзів.
+
+
+ Перейти до галереї
+ Переглянути учасників
+
+
+
+ );
+};
diff --git a/src/pages/HomePage/tennis.mp4 b/src/components/HeroSection/tennis.mp4
similarity index 100%
rename from src/pages/HomePage/tennis.mp4
rename to src/components/HeroSection/tennis.mp4
diff --git a/src/pages/HomePage/tennis.webm b/src/components/HeroSection/tennis.webm
similarity index 100%
rename from src/pages/HomePage/tennis.webm
rename to src/components/HeroSection/tennis.webm
diff --git a/src/index.css b/src/index.css
index c97737e..534aff6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,7 +16,7 @@ body {
}
html {
- min-width: 300px;
+ min-width: 330px;
}
* {
@@ -56,8 +56,8 @@ input {
}
::-webkit-scrollbar {
- width: 8px;
- height: 8px;
+ width: 12px;
+ height: 12px;
}
::-webkit-scrollbar-track {
diff --git a/src/pages/HomePage/HomePage-styled.jsx b/src/pages/HomePage/HomePage-styled.jsx
index 04ca3d9..139597f 100644
--- a/src/pages/HomePage/HomePage-styled.jsx
+++ b/src/pages/HomePage/HomePage-styled.jsx
@@ -1,79 +1,2 @@
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-export const Video = styled.video`
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: fixed;
- top: 0;
- left: 0;
- z-index: -1;
- opacity: 0.5;
-`;
-export const HeroSection = styled.section`
- min-height: 100vh;
-`;
-
-export const NextSection = styled.section`
- background-color: var(--primary-black-color);
-`;
-
-export const Section = styled.div`
- margin-left: auto;
- margin-right: auto;
- padding: 130px 24px;
- max-width: 1200px;
-`;
-
-export const Title = styled.h1`
- max-width: 400px;
- margin-bottom: 30px;
- font-family: "Manrope";
- font-size: 44px;
- font-style: normal;
- font-weight: 500;
- color: var(--primary-white-color);
-
- & span {
- color: var(--accent-color);
- font-weight: 900;
- }
-`;
-
-export const SubTitle = styled.p`
- max-width: 400px;
- margin-bottom: 30px;
- font-family: "Manrope";
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- color: var(--primary-white-color);
- line-height: 28px;
-`;
-
-export const ButtonLink = styled(Link)`
- height: 50px;
- border-radius: 12px;
- padding: 12px;
- margin-right: 10px;
- margin-bottom: 10px;
-
- display: inline-flex;
- justify-content: center;
- align-items: center;
-
- background-color: var(--accent-color);
- color: var(--primary-white-color);
-
- font-size: 16px;
- font-family: "Manrope";
- font-weight: 600;
-
- transition: var(--main-transition);
-
- &:hover {
- background-color: var(--accent-hover-color);
- }
-`;
diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx
index b4a1972..d100bf4 100644
--- a/src/pages/HomePage/HomePage.jsx
+++ b/src/pages/HomePage/HomePage.jsx
@@ -1,56 +1,11 @@
-import React from "react";
-import {
- ButtonLink,
- HeroSection,
- NextSection,
- Section,
- SubTitle,
- Title,
- Video,
-} from "./HomePage-styled";
-
-import BackgroundWebm from "./tennis.webm";
-import BackgroundMp4 from "./tennis.mp4";
+import { AboutSection } from "../../components/AboutSection/AboutSection";
+import { HeroSection } from "../../components/HeroSection/HeroSection";
export const HomePage = () => {
return (
<>
-
-
-
-
-
- Клуб <span>100!</span>
-
-
- Ласкаво просимо на офійний сайт клубу любительського тенісу у
- Львові.
-
-
- У нас грають теніс для будь-яких вікових категорій та рівня навичок
- а також для дітей. Можна прийняти участь у турнірах: одиночні,
- парні, сімейні, підняти свій рівень гри на тренуваннях з
- досвідченими тренерами, або просто весело провести час в колі
- друзів.
-
-
- Перейти до галереї
- Переглянути учасників
-
-
-
-
-
-
-
- Тут буде наступна секція!!!
-
-
-
-
+
+
);
};
diff --git a/src/sprite.svg b/src/sprite.svg
index d12b176..76e7b7f 100644
--- a/src/sprite.svg
+++ b/src/sprite.svg
@@ -47,5 +47,411 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+