added section about

M-Farmaha · Jan 19, 2024 · 99caa21 · 99caa21
1 parent 24c1e75
commit 99caa21
Show file tree

Hide file tree

Showing 10 changed files with 674 additions and 129 deletions.
diff --git a/src/components/AboutSection/AboutSection-styled.jsx 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
@@ -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 (
+    <>
+      <Section>
+        <SectionWrap>
+          <TitleH2>Наш клуб пропонує:</TitleH2>
+          <List>
+            <Item>
+              <AboutIconSvg>
+                <use href={sprite + "#icon-serve"}></use>
+              </AboutIconSvg>
+              <TitleH3>Персональні та групові тренування</TitleH3>
+              <SubTitle style={{ color: "var(--primary-black-color)" }}>
+                Персональні тренування для будь-якого рівня навичкок з
+                досвідченим тренером або групові тренування в залежності від
+                вашого рівня
+              </SubTitle>
+            </Item>
+
+            <Item>
+              <AboutIconSvg>
+                <use href={sprite + "#icon-racket"}></use>
+              </AboutIconSvg>
+              <TitleH3>Найкраще обладнання</TitleH3>
+              <SubTitle style={{ color: "var(--primary-black-color)" }}>
+                Наш клуб завжди дбає про якість м'ячів якими ми граємо,
+                періодично оновлюємо корт та сітки, а також маємо послугу
+                перетяжки струн досвідченими майстрами
+              </SubTitle>
+            </Item>
+
+            <Item>
+              <AboutIconSvg>
+                <use href={sprite + "#icon-award"}></use>
+              </AboutIconSvg>
+              <TitleH3>Турніри та нагороди</TitleH3>
+              <SubTitle style={{ color: "var(--primary-black-color)" }}>
+                Піднімай свій рівень гри на різноманітних любительських та
+                професійних турнірах. Отримуй кубки та медалі а також рейтинг
+                щоб піднятись на вершину слави клубу 100.
+              </SubTitle>
+            </Item>
+
+            <Item>
+              <AboutIconSvg>
+                <use href={sprite + "#icon-girl"}></use>
+              </AboutIconSvg>
+              <TitleH3>Широка спільнота</TitleH3>
+              <SubTitle style={{ color: "var(--primary-black-color)" }}>
+                Наш клуб приймає як початківців так і професіоналів будь-якого
+                віку. Тут ти зможеш найти суперників, домовлятись про
+                персональні та групові спаринги та просто провести час весело та
+                з користю.
+              </SubTitle>
+            </Item>
+          </List>
+        </SectionWrap>
+      </Section>
+    </>
+  );
+};
diff --git a/src/components/HeroSection/HeroSection-styled.jsx 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
@@ -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 (
+    <>
+      <Section>
+        <SectionWrap>
+          <Video autoPlay muted loop preload="auto">
+            <source src={BackgroundWebm} type="video/webm" />
+            <source src={BackgroundMp4} type="video/mp4" />
+          </Video>
+
+          <TitleH1>
+            Клуб <span>100!</span>
+          </TitleH1>
+          <SubTitle>
+            Ласкаво просимо на офійний сайт клубу любительського тенісу у
+            Львові.
+          </SubTitle>
+          <SubTitle>
+            У нас грають теніс для будь-яких вікових категорій та рівня навичок
+            а також для дітей. Можна прийняти участь у турнірах: одиночні,
+            парні, сімейні, підняти свій рівень гри на тренуваннях з
+            досвідченими тренерами, або просто весело провести час в колі
+            друзів.
+          </SubTitle>
+
+          <ButtonLink to="/gallery">Перейти до галереї</ButtonLink>
+          <ButtonLink to="/members">Переглянути учасників</ButtonLink>
+        </SectionWrap>
+      </Section>
+    </>
+  );
+};
diff --git a/src/pages/HomePage/tennis.mp4 → src/components/HeroSection/tennis.mp4 b/src/pages/HomePage/tennis.mp4 → src/components/HeroSection/tennis.mp4
diff --git a/src/pages/HomePage/tennis.webm → src/components/HeroSection/tennis.webm b/src/pages/HomePage/tennis.webm → src/components/HeroSection/tennis.webm
diff --git 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
@@ -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);
-  }
-`;