updated: The Social Media bars and Privacy + Terms section in the foo…

…ter has been swapped
Team-Inventrix · Feb 15, 2024 · 19d99ba · 19d99ba
1 parent a840245
commit 19d99ba
Showing 1 changed file with 48 additions and 49 deletions.
diff --git a/src/component/Footer.js b/src/component/Footer.js
@@ -51,7 +51,7 @@ const LogoSide = styled(Box)({
   gap: 4,
   minWidth: "100%",
   "@media (min-width:600px)": {
-    minWidth: "60%"
+    minWidth: "60%",
   },
 });
 
@@ -68,43 +68,44 @@ const FooterTitle = styled(Typography)({
   fontSize: "clamp(1rem, 2vw, 1.5rem)",
   fontWeight: "600",
   marginBottom: ".5rem",
-  color:"#2B2B60",
-})
+  color: "#2B2B60",
+});
 
 const FooterBody = styled(Typography)({
   fontSize: "clamp(.7rem, 2vw, 1rem)",
   fontWeight: "400",
   marginBottom: ".5rem",
-  color:"#2B2B60",
+  color: "#2B2B60",
   opacity: ".7",
-})
+});
 
 const FooterLink = styled(Link)({
   fontSize: "clamp(.7rem, 2vw, 1rem)",
   fontWeight: "400",
   marginBottom: ".5rem",
-  color:"#2B2B60",
+  color: "#2B2B60",
   opacity: ".8",
   cursor: "pointer",
   textDecoration: "none",
-  '&:hover': {
-    opacity: "1"
-  }
-})
+  "&:hover": {
+    opacity: "1",
+  },
+});
 
 function Copyright() {
   return (
     <Typography variant="body2" color="text.secondary" mt={1}>
       <FooterBody>
-      {"© " + new Date().getFullYear() + " EcoThaili. All Rights Reserved. Website by "}
-      <FooterLink > Team Inventrix </FooterLink>
+        {"© " +
+          new Date().getFullYear() +
+          " EcoThaili. All Rights Reserved. Website by "}
+        <FooterLink> Team Inventrix </FooterLink>
       </FooterBody>
     </Typography>
   );
 }
 
 export default function Footer() {
-
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen) => () => {
@@ -114,7 +115,7 @@ export default function Footer() {
   const scrollToSection = (sectionId) => {
     const sectionElement = document.getElementById(sectionId);
     const offset = 128;
-    if (globalThis.location.pathname === '/') {
+    if (globalThis.location.pathname === "/") {
       const targetScroll = sectionElement.offsetTop - offset;
       sectionElement.scrollIntoView({ behavior: "smooth" });
       globalThis.scrollTo({
@@ -123,7 +124,7 @@ export default function Footer() {
       });
       setOpen(false);
     } else {
-      globalThis.location.href = '/#' + sectionId;
+      globalThis.location.href = "/#" + sectionId;
     }
   };
 
@@ -135,9 +136,7 @@ export default function Footer() {
             <Box>
               <img src={Ecothaili} style={logoStyle} alt="Ecothaili" />
             </Box>
-            <FooterTitle variant="body2">
-              Newsletter
-            </FooterTitle>
+            <FooterTitle variant="body2">Newsletter</FooterTitle>
             <FooterBody>
               Subscribe to our newsletter for weekly updates and promotions.
             </FooterBody>
@@ -158,7 +157,7 @@ export default function Footer() {
               <Button
                 variant="contained"
                 color="primary"
-                sx={{ flexShrink: 0, bgcolor:"#2B2B60" }}
+                sx={{ flexShrink: 0, bgcolor: "#2B2B60" }}
               >
                 Subscribe
               </Button>
@@ -172,9 +171,7 @@ export default function Footer() {
             gap: 1,
           }}
         >
-          <FooterTitle>
-            EcoThaili
-          </FooterTitle>
+          <FooterTitle>EcoThaili</FooterTitle>
           <FooterLink onClick={() => scrollToSection("os")}>
             Our Story
           </FooterLink>
@@ -188,9 +185,7 @@ export default function Footer() {
             Our Impact
           </FooterLink>
 
-          <FooterLink onClick={() => scrollToSection("faq")}>
-            FAQs
-          </FooterLink>
+          <FooterLink onClick={() => scrollToSection("faq")}>FAQs</FooterLink>
         </Box>
         <Box
           sx={{
@@ -202,11 +197,16 @@ export default function Footer() {
           <FooterTitle variant="body2" fontWeight={600}>
             Company
           </FooterTitle>
-          <FooterLink color="text.secondary" onClick={() => scrollToSection("a")}>
+          <FooterLink
+            color="text.secondary"
+            onClick={() => scrollToSection("a")}
+          >
             About us
           </FooterLink>
           <FooterLink color="text.secondary">Careers (no page yet)</FooterLink>
-          <FooterLink color="text.secondary" href="/contact">Contact</FooterLink>
+          <FooterLink color="text.secondary" href="/contact">
+            Contact
+          </FooterLink>
         </Box>
         <Box
           sx={{
@@ -215,9 +215,7 @@ export default function Footer() {
             gap: 1,
           }}
         >
-          <FooterTitle>
-            Legal
-          </FooterTitle>
+          <FooterTitle>Legal</FooterTitle>
           <FooterLink color="text.secondary" href="/terms">
             Terms
           </FooterLink>
@@ -227,25 +225,6 @@ export default function Footer() {
         </Box>
       </UpperFooter>
       <LowerFooter>
-        <div>
-          <FooterLink color="text.secondary" href="/privacy">
-            Privacy Policy
-          </FooterLink>
-          <Typography display="inline" sx={{ mx: 0.5, opacity: 0.5 }}>
-            &nbsp;•&nbsp;
-          </Typography>
-          <FooterLink color="text.secondary" href="/terms">
-            Terms of Service
-          </FooterLink>
-        </div>
-
-        <Copyright />
-        {/* <ScrollLink to="os" smooth={true} duration={2000}>
-          <Typography variant="body2" sx={footerLinkStyle}>
-            Back to Top
-          </Typography>
-        </ScrollLink> */}
-
         <Stack
           direction="row"
           justifyContent="left"
@@ -295,6 +274,26 @@ export default function Footer() {
             <FacebookIcon />
           </IconButton>
         </Stack>
+
+        <Copyright />
+
+        <div>
+          <FooterLink color="text.secondary" href="/privacy">
+            Privacy Policy
+          </FooterLink>
+          <Typography display="inline" sx={{ mx: 0.5, opacity: 0.5 }}>
+            &nbsp;•&nbsp;
+          </Typography>
+          <FooterLink color="text.secondary" href="/terms">
+            Terms of Service
+          </FooterLink>
+        </div>
+
+        {/* <ScrollLink to="os" smooth={true} duration={2000}>
+          <Typography variant="body2" sx={footerLinkStyle}>
+            Back to Top
+          </Typography>
+        </ScrollLink> */}
       </LowerFooter>
     </StyledContainer>
   );