diff --git a/src/components/Footer.js b/src/components/Footer.js index 0e9894d..e7a6806 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -3,57 +3,138 @@ import insta from '../images/socials/insta.svg' import twitter from '../images/socials/twitter.svg' import tiktok from '../images/socials/tiktok.svg' import email from '../images/socials/email.svg' +import footerbox from '../images/socials/footerbox.svg' +import footergoldplate from '../images/socials/footergoldplate.svg' +import footerflagbg from '../images/socials/footerflagbg.svg' import styled from 'styled-components' import { mediaQueries } from '../shared/config'; - const Container = styled.div` - background-color: black; - height: auto; - color: white; - padding: 60px 0 10px 0; - text-align: center; - h1 { - margin: 0; - font-family: 'Times New Roman', Times, serif; - font-size: 30px; - } - /* margin-bottom: 20px; */ -` + background-color: #94CCEF; + background-image: url(${footerflagbg}); + background-size: 100% auto; + background-position: center bottom; + background-repeat: no-repeat; + display: flex; + justify-content: center; + padding: 0; + height: 400px; /* Set fixed height to control footer size */ + margin: 0; + + @media (max-width: 768px) { + background-size: 150% auto; + height: 175px; /* Adjusted for smaller screens */ + } +`; + +const FooterBox = styled.div` + background-image: url(${footerbox}); + background-size: contain; + background-position: center bottom; + background-repeat: no-repeat; + width: 100%; + max-width: 1200px; + height: 100%; /* Make it fill the Container’s height */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + position: relative; + overflow: hidden; /* Ensure nothing spills out if heights are limited */ +`; + +const GoldPlate = styled.div` + background-image: url(${footergoldplate}); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + width: 55%; + height: 120px; + position: absolute; + top: 50%; /* Position within reduced height */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: translateY(-5%); /* Ensure it remains vertically centered */ + + @media (max-width: 768px) { + width: 65%; + height: 70px; + h1 { + font-size: 1.2rem; + } + } + @media (max-width: 480px) { + width: 75%; + height: 60px; + + } +`; const Socials = styled.div` - position: relative; - margin-top: 20px; - - img { - - position: relative; - margin: 0 20px; - } - p { - position: relative; - margin: 80px 20px; - ${mediaQueries.mobile} { - margin: 50px 20px; - } - } -` + display: flex; + justify-content: center; + gap: 10px; + margin-top: 30px; + + img { + width: 24px; + height: 24px; + } + + @media (max-width: 768px) { + img { + width: 15px; + height: 15px; + } + } + @media (max-width: 480px) { + img { + width: 10px; + height: 10px; + } + } +`; + +const SuzyText = styled.p` + position: absolute; + bottom: 30px; + font-size: 14px; + color: white; + text-align: center; + width: 100%; + + ${mediaQueries.mobile} { + font-size: 8px; + bottom: 3px; + } +`; const Footer = () => { - return ( - -

DAILY BRUIN

- - - - - - -

Built with Suzy’s ♥ in Kerckhoff 118 by [developers]. Designed by [designers].

- + return ( + + + + + Instagram + Facebook + Twitter + TikTok + Email + + + Built with Suzy’s ♥ in Kerckhoff 118 by [developers]. Designed by [designers]. + - ) - } - -export default Footer; \ No newline at end of file + ); +}; + +export default Footer; + + + + + + diff --git a/src/images/socials/email.svg b/src/images/socials/email.svg index 942095b..f12b135 100644 --- a/src/images/socials/email.svg +++ b/src/images/socials/email.svg @@ -1,3 +1,3 @@ - + diff --git a/src/images/socials/fb.svg b/src/images/socials/fb.svg index 67d00d9..a47a322 100644 --- a/src/images/socials/fb.svg +++ b/src/images/socials/fb.svg @@ -1,3 +1,4 @@ - + + diff --git a/src/images/socials/footerbox.svg b/src/images/socials/footerbox.svg new file mode 100644 index 0000000..1796f7f --- /dev/null +++ b/src/images/socials/footerbox.svg @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/socials/footerflagbg.svg b/src/images/socials/footerflagbg.svg new file mode 100644 index 0000000..5233352 --- /dev/null +++ b/src/images/socials/footerflagbg.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/socials/footergoldplate.svg b/src/images/socials/footergoldplate.svg new file mode 100644 index 0000000..f7f0ba6 --- /dev/null +++ b/src/images/socials/footergoldplate.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/images/socials/insta.svg b/src/images/socials/insta.svg index ed92484..16d41a2 100644 --- a/src/images/socials/insta.svg +++ b/src/images/socials/insta.svg @@ -1,3 +1,3 @@ - - \ No newline at end of file + + diff --git a/src/images/socials/tiktok.svg b/src/images/socials/tiktok.svg index defbb0e..7d6f66e 100644 --- a/src/images/socials/tiktok.svg +++ b/src/images/socials/tiktok.svg @@ -1,3 +1,3 @@ - + diff --git a/src/images/socials/twitter.svg b/src/images/socials/twitter.svg index 0a5accc..28f873c 100644 --- a/src/images/socials/twitter.svg +++ b/src/images/socials/twitter.svg @@ -1,3 +1,3 @@ - +