Landing page styling + Disabled liquid gauge wave rise

frontend/src/components/LiquidProgressChart/LiquidProgressChart.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense } from 'react';
 import { useSelector } from 'react-redux';
 import { Tooltip as ReactTooltip } from 'react-tooltip'; // TODO: investigate using antd tooltip?
 import type { LiquidConfig } from '@ant-design/plots';
@@ -16,16 +16,16 @@ const Liquid = React.lazy(() =>
 );
 
 const LiquidProgressChart = ({ completedUOC, totalUOC }: Props) => {
-  const [percent, setPercent] = useState(0);
-  const fillValue = Math.min(completedUOC / totalUOC, 1);
+  // const [percent, setPercent] = useState(0);
+  const fillValue = parseFloat(Math.min(completedUOC / totalUOC, 1).toFixed(2));
 
   // light mode text color varies
   let textColor = '';
-  if (percent < 0.31) {
+  if (fillValue < 0.31) {
     textColor = lightYellow;
-  } else if (percent < 0.45) {
+  } else if (fillValue < 0.45) {
     textColor = lightGrey;
-  } else if (percent < 0.56) {
+  } else if (fillValue < 0.56) {
     textColor = darkGrey;
   } else {
     textColor = 'white';
@@ -45,7 +45,7 @@ const LiquidProgressChart = ({ completedUOC, totalUOC }: Props) => {
   // title works, cant figure out how to change text size, (look mayb more textContent)
   // also the filling up is too laggy now
   const config: LiquidConfig = {
-    percent,
+    percent: fillValue,
     width: 320,
     height: 320,
     autoFit: false,
@@ -55,24 +55,26 @@ const LiquidProgressChart = ({ completedUOC, totalUOC }: Props) => {
     label: false,
     style: {
       textFill: textColor,
-      fill: percent > 0.45 ? purple : yellow,
-      stroke: percent > 0.45 ? purple : yellow
+      fill: fillValue > 0.45 ? purple : yellow,
+      stroke: fillValue > 0.45 ? purple : yellow
     }
   };
+  // config fields
 
   // increment percentage from 0 to fillValue
-  useEffect(() => {
-    let data = 0.0;
-    const time = 30;
-    const interval = setInterval(() => {
-      data += 0.01;
-      if (fillValue && data <= fillValue + 0.01) {
-        setPercent(data);
-      } else {
-        clearInterval(interval);
-      }
-    }, time);
-  }, [fillValue]);
+  // useEffect(() => {
+  //   let data = 0.0;
+  //   const time = 10;
+  //   const interval = setInterval(() => {
+  //     data += 0.001;
+  //     if (fillValue && data <= fillValue + 0.01) {
+  //       setPercent(data);
+  //     } else {
+  //       clearInterval(interval);
+  //     }
+  //   }, time);
+  //   return () => clearInterval(interval);
+  // }, [fillValue]);
 
   return (
     <>

frontend/src/pages/LandingPage/FooterSection/Footer.tsx

@@ -7,9 +7,9 @@ import S from './styles';
 
 const Footer = () => {
   return (
-    <>
+    <div>
       <S.FooterBlob src={footerBlobSrc} />
-      <S.FooterWrapper>
+      <S.FooterContentBody>
         <PageContainer>
           <S.FooterContentContainer>
             <S.FooterLogoWrapper>
@@ -38,8 +38,8 @@ const Footer = () => {
             </S.FooterDisclaimer>
           </S.FooterContentContainer>
         </PageContainer>
-      </S.FooterWrapper>
-    </>
+      </S.FooterContentBody>
+    </div>
   );
 };
 

frontend/src/pages/LandingPage/FooterSection/styles.ts

@@ -4,10 +4,8 @@ const FooterBlob = styled.img`
   width: 100%;
 `;
 
-const FooterWrapper = styled.div`
+const FooterContentBody = styled.div`
   background-color: #9154de;
-  /* TODO: Hack coz of pixel diff between blob and footer content */
-  margin-top: -1px;
 `;
 
 const FooterContentContainer = styled.div`
@@ -44,6 +42,6 @@ export default {
   FooterContentContainer,
   FooterLogoWrapper,
   FooterDisclaimer,
-  FooterWrapper,
+  FooterContentBody,
   DevSocLogo
 };

frontend/src/pages/LandingPage/GetInvolved/styles.ts

@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Title = styled.h1`
   font-size: 50px;
-  margin-bottom: 3rem;
+  margin-bottom: 2.5rem;
+  margin-top: 2rem;
   background: -webkit-linear-gradient(30deg, #9f62de, #b77eff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -13,15 +14,14 @@ const Title = styled.h1`
 
 const ContentWrapper = styled.div`
   text-align: center;
-  font-size: 1rem;
+  font-size: 1.2rem;
 `;
 
 const LinksWrapper = styled.div`
   display: flex;
   justify-content: center;
   gap: 100px;
   margin-top: 40px;
-  margin-bottom: 100px;
 `;
 
 export default {

frontend/src/pages/LandingPage/HowToUse/styles.ts

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  margin-bottom: 80px;
+  margin-bottom: 0px;
 `;
 
 const Title = styled.h1`

frontend/src/pages/LandingPage/LandingPage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { inDev } from 'config/constants';
 import Footer from './FooterSection/Footer';
 import GetInvolved from './GetInvolved';
@@ -8,16 +9,22 @@ import InteractiveViewSection from './InteractiveViewSection';
 import KeyFeaturesSection from './KeyFeaturesSection';
 import SponsorSection from './SponsorSection';
 
+const LandingPageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 100px;
+`;
+
 const LandingPage = () => (
-  <>
+  <LandingPageWrapper>
     <Hero />
     <SponsorSection />
     <KeyFeaturesSection />
     {inDev && <InteractiveViewSection />}
     <HowToUse />
     <GetInvolved />
     <Footer />
-  </>
+  </LandingPageWrapper>
 );
 
 export default LandingPage;