diff --git a/src/assets/svgs/facebookicon.svg b/src/assets/svgs/facebookicon.svg new file mode 100644 index 0000000..373bdf1 --- /dev/null +++ b/src/assets/svgs/facebookicon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/instagramicon.svg b/src/assets/svgs/instagramicon.svg new file mode 100644 index 0000000..51d42c5 --- /dev/null +++ b/src/assets/svgs/instagramicon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/linkedinicon.svg b/src/assets/svgs/linkedinicon.svg new file mode 100644 index 0000000..cf5794d --- /dev/null +++ b/src/assets/svgs/linkedinicon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/twittericon.svg b/src/assets/svgs/twittericon.svg new file mode 100644 index 0000000..f29cc44 --- /dev/null +++ b/src/assets/svgs/twittericon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/svgs/youtubeicon.svg b/src/assets/svgs/youtubeicon.svg new file mode 100644 index 0000000..d80cdc2 --- /dev/null +++ b/src/assets/svgs/youtubeicon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/atomo/SocialMediaItem.tsx b/src/atomo/SocialMediaItem.tsx new file mode 100644 index 0000000..3781b69 --- /dev/null +++ b/src/atomo/SocialMediaItem.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +interface Media { + href: string; + src: string; + alt: string; +} + +function SocialMediaItem(props: Media) { + return ( +
  • + + {props.alt} + +
    • + ); +} + +export { SocialMediaItem }; diff --git a/src/components/FooterTop.tsx b/src/components/FooterTop.tsx new file mode 100644 index 0000000..a90db36 --- /dev/null +++ b/src/components/FooterTop.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { DropDownItem } from "../atomo/DropDownItem"; +import { SocialMediaItem } from "../atomo/SocialMediaItem"; +import style from "../components/footer-top.module.scss"; + +import facebook from "../assets/svgs/facebookicon.svg"; +import instagram from "../assets/svgs/instagramicon.svg"; +import twitter from "../assets/svgs/twittericon.svg"; +import youtube from "../assets/svgs/youtubeicon.svg"; +import linkedin from "../assets/svgs/linkedinicon.svg"; + +const FooterTop = () => { + return ( + + ); +}; + +export { FooterTop }; diff --git a/src/components/footer-top.module.scss b/src/components/footer-top.module.scss new file mode 100644 index 0000000..1589bb4 --- /dev/null +++ b/src/components/footer-top.module.scss @@ -0,0 +1,73 @@ +@use "../variables.module.scss"; + +.footer-container { + width: 100%; + height: 239px; + background: variables.$color-white; + border-top: 1px solid variables.$color-black; + + display: flex; + + .footer-wrapper { + display: flex; + justify-content: space-between; + padding: 50px 0; + margin: 0 auto; + width: 80.46875%; + + .footer-list-wrapper { + display: flex; + gap: 121px; + + .footer-list { + display: flex; + flex-direction: column; + gap: 12px; + + h3 { + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: variables.$color-black3; + } + + h4 { + font-weight: 500; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: variables.$color-black3; + } + + a { + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + text-decoration: none; + color: variables.$color-black3; + } + } + } + } + + .footer-social-media-container { + display: flex; + flex-direction: column; + gap: 12px; + + .footer-social-media-wrapper { + display: flex; + gap: 10px; + } + + a { + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-decoration: none; + color: variables.$color-black3; + } + } +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index dd74cde..d66d726 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -3,12 +3,14 @@ import React from "react"; import { HeaderTop } from "../components/HeaderTop"; import { HeaderBottom } from "../components/HeaderBottom"; import { FooterBottom } from "../components/FooterBottom"; +import { FooterTop } from "../components/FooterTop"; function Home() { return (
    +
    );