Skip to content

Commit

Permalink
added social media + changed button style
Browse files Browse the repository at this point in the history
  • Loading branch information
@M-Farmaha
M-Farmaha committed Jan 30, 2024
1 parent 8ebb10b commit 240d319
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 27 deletions.
32 changes: 27 additions & 5 deletions src/components/ContactsSection/ContactsSection-styled.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,35 @@ 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;
`;

export const Text = styled.p`
font-size: 17px;
font-weight: 200;
line-height: 28px;
`;

export const Link = styled.a`
Expand All @@ -60,7 +76,7 @@ export const Link = styled.a`
border: none;
display: flex;
justify-content: left;
justify-content: center;
align-items: center;
gap: 10px;
Expand All @@ -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`
Expand Down
98 changes: 80 additions & 18 deletions src/components/ContactsSection/ContactsSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import {
BlockWrap,
CourtIconSvg,
IconSvg,
InfoWrap,
Link,
PhotoImg,
PhotoWrap,
Section,
SectionWrap,
SocialIconSvg,
SocialWrap,
Text,
TitleH2,
} from "./ContactsSection-styled";
Expand Down Expand Up @@ -43,38 +46,97 @@ export const ContactsSection = () => {
м. Львів, вул. Сяйво, 18
</Link>
</Address>

<SocialWrap>
<Link
href="https://www.facebook.com/club100tennisLviv"
rel="noopener noreferrer"
aria-label="facebook"
>
<SocialIconSvg>
<use href={sprite + "#icon-facebook"}></use>
</SocialIconSvg>
</Link>

<Link
href="https://www.instagram.com/tennislvivclub100/"
rel="noopener noreferrer"
aria-label="instagram"
>
<SocialIconSvg>
<use href={sprite + "#icon-instagram"}></use>
</SocialIconSvg>
</Link>

<Link
href="https://www.youtube.com/@atl-amateurtennislviv7215"
rel="noopener noreferrer"
aria-label="youtube"
>
<SocialIconSvg>
<use href={sprite + "#icon-youtube"}></use>
</SocialIconSvg>
</Link>
</SocialWrap>
</BlockWrap>

<BlockWrap>
<PhotoWrap>
<PhotoImg src={BossImg} alt="Марина Семенівна" />
</PhotoWrap>
<Address>
<Text>Директор клубу:</Text>
<InfoWrap>
<Address>
<Text>Директор клубу:</Text>

<Link href="tel:+380975057249" aria-label="Подзвонити">
<IconSvg>
<use href={sprite + "#icon-phone"}></use>
</IconSvg>
Марина Семенівна
</Link>
</Address>
<Link href="tel:+380975057249" aria-label="Подзвонити">
<IconSvg>
<use href={sprite + "#icon-phone"}></use>
</IconSvg>
Марина Семенівна
</Link>
</Address>
<SocialWrap>
<Link
href="https://www.facebook.com/profile.php?id=100066487460791"
rel="noopener noreferrer"
aria-label="facebook"
>
<SocialIconSvg>
<use href={sprite + "#icon-facebook"}></use>
</SocialIconSvg>
</Link>
</SocialWrap>
</InfoWrap>
</BlockWrap>

<BlockWrap style={{ flexDirection: "row-reverse" }}>
<PhotoWrap>
<PhotoImg src={TrainerImg} alt="Марина Семенівна" />
</PhotoWrap>
<Address>
<Text>Головний тренер клубу:</Text>

<Link href="tel:+380960116128" aria-label="Подзвонити">
<IconSvg>
<use href={sprite + "#icon-phone"}></use>
</IconSvg>
Ігор Осипович
</Link>
</Address>
<InfoWrap>
<Address>
<Text>Головний тренер клубу:</Text>

<Link href="tel:+380960116128" aria-label="Подзвонити">
<IconSvg>
<use href={sprite + "#icon-phone"}></use>
</IconSvg>
Ігор Осипович
</Link>
</Address>
<SocialWrap>
<Link
href="https://www.facebook.com/profile.php?id=100008346792063"
rel="noopener noreferrer"
aria-label="facebook"
>
<SocialIconSvg>
<use href={sprite + "#icon-facebook"}></use>
</SocialIconSvg>
</Link>
</SocialWrap>
</InfoWrap>
</BlockWrap>
</SectionWrap>
</Section>
Expand Down
8 changes: 7 additions & 1 deletion src/components/HeroSection/HeroSection-styled.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
}
`;
Expand Down
2 changes: 1 addition & 1 deletion src/components/HeroSection/HeroSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const HeroSection = () => {
Клуб <span>100!</span>
</TitleH1>
<SubTitle>
Вітаємо на сторінці "Клубу-100" любительського тенісу у Львові.
Вітаємо на сторінці "Клубу-100" любительського тенісу у Львові.
</SubTitle>
<SubTitle>
У нас займаються тенісом гравці будь-якого віку та рівня навичок, а
Expand Down
16 changes: 14 additions & 2 deletions src/sprite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 240d319

Please sign in to comment.