desafio 10 - finaliza footer da página

desafio_10/src/App.jsx

@@ -8,6 +8,7 @@ import Header from "./components/Header";
 import HomeSection from "./components/HomeSection";
 import AboutSection from "./components/AboutSection";
 import GallerySection from "./components/GallerySection";
+import Footer from "./components/Footer";
 
 
 const App = () => {
@@ -20,6 +21,7 @@ const App = () => {
                 <AboutSection />
                 <GallerySection />
             </main>
+            <Footer />
         </>
     );
 };

desafio_10/src/components/Footer/index.jsx

@@ -0,0 +1,46 @@
+// Images
+
+import instagramIcon from '../../assets/images/instagram.svg';
+import facebookIcon from '../../assets/images/facebook.svg';
+import youtubeIcon from '../../assets/images/youtube.svg';
+import twitterIcon from '../../assets/images/twitter.svg';
+
+// Styled Component
+
+import {
+    FooterContainer, Label, Icon,
+    SocialMediaList, CopyHomeYou, SocialMediaContainer
+} from "./styles";
+
+
+const Footer = () => {
+
+    const iconsSocialMedia = [
+        { icon: instagramIcon, id: 1 },
+        { icon: facebookIcon, id: 2 },
+        { icon: youtubeIcon, id: 3 },
+        { icon: twitterIcon, id: 4 },
+    ];
+
+    return (
+        <FooterContainer className="container">
+            <div>
+                <CopyHomeYou>&copy; 2024 <span>Homeyou</span></CopyHomeYou>
+            </div>
+            <SocialMediaContainer>
+                <Label>Conectar</Label>
+                <SocialMediaList>
+                    {
+                        iconsSocialMedia.map(item => (
+                            <li key={item.id}>
+                                <Icon src={item.icon} alt={`icon ${item.id}`} />
+                            </li>
+                        ))
+                    }
+                </SocialMediaList>
+            </SocialMediaContainer>
+        </FooterContainer>
+    )
+}
+
+export default Footer;

desafio_10/src/components/Footer/styles.jsx

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+
+export const FooterContainer = styled.footer`
+    margin: 15rem 3rem 0 !important;
+    padding: 8rem 3rem;
+    border-top: 2px solid #D9D9D6;
+
+    @media (width >= 768px) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    @media (width >= 1216px) {
+        margin: 15rem auto 0 !important;
+    }
+
+    @media (width >= 1150px) {
+        margin-top: 20rem !important;
+    }
+`;
+
+export const CopyHomeYou = styled.span`
+    font-size: 1.8rem;
+
+    span {
+        color: var(--brand-color);
+    }
+`;
+
+export const Label = styled.span`
+    font-size: 1.5rem;
+    color: #2C2C2C;
+    text-transform: uppercase;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+
+    &::after {
+        content: '';
+        display: block;
+        width: 6.5rem;
+        height: .1rem;
+        background-color: #2C2C2C;
+    }
+`;
+
+export const SocialMediaContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 5rem;
+
+    @media (width >= 768px) {
+        margin-top: 0;
+        flex-direction: row;
+        gap: 4rem;
+    }
+`;
+
+export const Icon = styled.img`
+    width: 3rem;
+    height: 3rem;
+
+    @media (width >= 768px) {
+        width: 4rem;
+        height: 4rem;
+    }
+`;
+
+export const SocialMediaList = styled.ul`
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+`;

desafio_10/src/components/GallerySection/styles.jsx

@@ -3,7 +3,6 @@ import styled from "styled-components";
 export const GalleryContainer = styled.section`
     margin-top: 15rem;
     padding: 0 3rem;
-    margin-bottom: 100rem;
 
     @media (width >= 1150px) {
         margin-top: 20rem;