diff --git a/src/components/ContactsSection/ContactsSection-styled.jsx b/src/components/ContactsSection/ContactsSection-styled.jsx
index 39eb8ea..ff577a9 100644
--- a/src/components/ContactsSection/ContactsSection-styled.jsx
+++ b/src/components/ContactsSection/ContactsSection-styled.jsx
@@ -38,11 +38,28 @@ export const BlockWrap = styled.div`
margin-bottom: 50px;
`;
+export const InfoWrap = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+`;
+
+export const SocialWrap = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+`;
+
export const Address = styled.address`
display: flex;
flex-direction: column;
justify-content: center;
- align-items: left;
+ align-items: center;
+ gap: 5px;
font-style: inherit;
`;
@@ -50,7 +67,6 @@ export const Address = styled.address`
export const Text = styled.p`
font-size: 17px;
font-weight: 200;
- line-height: 28px;
`;
export const Link = styled.a`
@@ -60,7 +76,7 @@ export const Link = styled.a`
border: none;
display: flex;
- justify-content: left;
+ justify-content: center;
align-items: center;
gap: 10px;
@@ -84,10 +100,16 @@ export const CourtIconSvg = styled.svg`
height: 80px;
`;
+export const SocialIconSvg = styled.svg`
+ fill: currentColor;
+ width: 50px;
+ height: 50px;
+`;
+
export const IconSvg = styled.svg`
fill: currentColor;
- width: 20px;
- height: 20px;
+ width: 25px;
+ height: 25px;
`;
export const PhotoWrap = styled.div`
diff --git a/src/components/ContactsSection/ContactsSection.jsx b/src/components/ContactsSection/ContactsSection.jsx
index 107e231..957d763 100644
--- a/src/components/ContactsSection/ContactsSection.jsx
+++ b/src/components/ContactsSection/ContactsSection.jsx
@@ -3,11 +3,14 @@ import {
BlockWrap,
CourtIconSvg,
IconSvg,
+ InfoWrap,
Link,
PhotoImg,
PhotoWrap,
Section,
SectionWrap,
+ SocialIconSvg,
+ SocialWrap,
Text,
TitleH2,
} from "./ContactsSection-styled";
@@ -43,38 +46,97 @@ export const ContactsSection = () => {
м. Львів, вул. Сяйво, 18
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Директор клубу:
+
+
+ Директор клубу:
-
-
-
-
- Марина Семенівна
-
-
+
+
+
+
+ Марина Семенівна
+
+
+
+
+
+
+
+
+
+
-
- Головний тренер клубу:
-
-
-
-
- Ігор Осипович
-
-
+
+
+ Головний тренер клубу:
+
+
+
+
+
+ Ігор Осипович
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/HeroSection/HeroSection-styled.jsx b/src/components/HeroSection/HeroSection-styled.jsx
index 0abf16e..9c7ddca 100644
--- a/src/components/HeroSection/HeroSection-styled.jsx
+++ b/src/components/HeroSection/HeroSection-styled.jsx
@@ -83,6 +83,8 @@ export const ButtonLink = styled(Link)`
height: 50px;
padding: 12px;
+ border-radius: 50px;
+
background-color: var(--primary-black-color);
color: var(--primary-white-color);
box-shadow: var(--box-shadow);
@@ -108,7 +110,10 @@ export const Button = styled.a`
height: 50px;
padding: 12px;
- background-color: #005730;
+ border: 2px solid var(--primary-white-color);
+ border-radius: 50px;
+
+ /* background-color: var(--primary-black-color); */
color: var(--primary-white-color);
box-shadow: var(--box-shadow);
@@ -118,6 +123,7 @@ export const Button = styled.a`
transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
+ border: 2px solid var(--accent-hover-color);
background-color: var(--accent-hover-color);
}
`;
diff --git a/src/components/HeroSection/HeroSection.jsx b/src/components/HeroSection/HeroSection.jsx
index 0c054ad..8517e02 100644
--- a/src/components/HeroSection/HeroSection.jsx
+++ b/src/components/HeroSection/HeroSection.jsx
@@ -28,7 +28,7 @@ export const HeroSection = () => {
Клуб 100!
- Вітаємо на сторінці "Клубу-100" любительського тенісу у Львові.
+ Вітаємо на сторінці "Клубу-100" любительського тенісу у Львові.
У нас займаються тенісом гравці будь-якого віку та рівня навичок, а
diff --git a/src/sprite.svg b/src/sprite.svg
index 6e22d63..9894cb4 100644
--- a/src/sprite.svg
+++ b/src/sprite.svg
@@ -585,11 +585,23 @@
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+