design fixes

compolabs · Jul 8, 2024 · 1de1ac8 · 1de1ac8
1 parent 58ae87b
commit 1de1ac8
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 57 deletions.
diff --git a/public/images/main-screen.png b/public/images/main-screen.png
diff --git a/public/images/shadow.png b/public/images/shadow.png
diff --git a/src/core/components/LandingPage/GateSection.tsx b/src/core/components/LandingPage/GateSection.tsx
@@ -143,14 +143,16 @@ const cssStyles = {
     width: 100%;
     gap: 24px;
     flex-direction: column;
+    margin: 0 0 ${convertPxToRem(50)} 0;
 
     ${theme.media.tabletLandscape} {
       flex-direction: row;
       width: ${convertPxToRem(641)};
+      margin: unset;
     }
   `,
   mobileBtn: css`
-   pointer-events: none;
+    pointer-events: none;
     gap: 20px;
   `,
   mobileBtn_icons: css`

diff --git a/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx b/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx
@@ -6,10 +6,9 @@ import theme from "@/core/styles/theme";
 import Image from "next/image";
 import { convertPxToRem } from "@/core/utils/convertPxToRem";
 
-import {items, text } from './constants'
- 
+import { items, text } from "./constants";
+
 const PartnersSection = () => {
-
   return (
     <SectionWrapper styles={cssStyles.container}>
       <div css={cssStyles.titleWrapper}>
@@ -27,7 +26,7 @@ const PartnersSection = () => {
           </div>
         ))}
         {text.map((item) => (
-          <div css={cssStyles.partners}>{item.title}</div>
+          <div css={[cssStyles.partners, cssStyles.text]}>{item.title}</div>
         ))}
       </div>
     </SectionWrapper>
@@ -39,6 +38,7 @@ const cssStyles = {
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: ${convertPxToRem(15)} 0 ${convertPxToRem(70)} 0
   `,
   titleWrapper: css`
     margin: 0 auto ${theme.spacing.small};
@@ -52,12 +52,18 @@ const cssStyles = {
   title: css`
     margin-bottom: ${theme.spacing.normal};
     font-size: ${theme.text.size.small};
+    font-weight: ${theme.text.weight.bold};
     color: ${theme.colors.white.default};
 
     ${theme.media.tablet} {
       margin-bottom: ${theme.spacing.medium};
     }
   }`,
+  text: css`
+    font-weight: ${theme.text.weight.extraBold};
+    font-size: ${theme.text.size.body};
+    text-align: center;
+  `,
   items: css`
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -66,6 +72,7 @@ const cssStyles = {
     ${theme.media.tablet} {
       grid-template-columns: repeat(5, 1fr);
       grid-template-rows: repeat(2, 1fr);
+      width: 100%;
     }
   `,
   partners: css`
@@ -84,39 +91,43 @@ const cssStyles = {
 
     &:not(:nth-last-of-type(-n + 2))::before {
       bottom: ${convertPxToRem(-10)};
-      left: 0;
       width: 155px;
       height: 1px;
       transform: translateY(-50%);
     }
 
     &:nth-of-type(2n)::after {
       top: 0;
-      left: ${convertPxToRem(-17)};
+      left: ${convertPxToRem(-10)};
       width: 1px;
       height: 80px;
       transform: translateX(-50%);
     }
 
     ${theme.media.tablet} {
-      &:nth-last-child(-n + 5)::before {
-        bottom: ${convertPxToRem(-10)};
-        left: 0;
-        width: 155px;
+      &:not(:nth-last-of-type(-n + 2))::before {
+        left: unset;
+        width: 224px;
         height: 1px;
-        transform: translateY(-50%);
       }
 
       :nth-last-child(-n + 5)::before {
         content: none;
       }
-      
+
       ::after {
         top: 0;
-        left: ${convertPxToRem(-17)};
+        left: unset;
+        right: 103%;
         width: 1px;
         height: 80px;
         transform: translateX(-50%);
+        margin: auto;
+      }
+
+      &:nth-of-type(2n)::after {
+        left: unset;
+        right: 103%;
       }
 
       &:first-child::after,

diff --git a/src/core/components/LandingPage/TradingPlatformSection/TradingPlatformSection.tsx b/src/core/components/LandingPage/TradingPlatformSection/TradingPlatformSection.tsx
@@ -32,7 +32,7 @@ const TradingPlatformSection = () => {
           isGradient
         />
         {!isMobile && (
-          <RegularTradeButton label="Trade now" styles={cssStyles.tryBtn} />
+          <RegularTradeButton label="Trade now" styles={cssStyles.tryBtn(isMobile)} />
         )}
       </div>
 
@@ -45,7 +45,7 @@ const TradingPlatformSection = () => {
         />
       </div>
       {isMobile && (
-        <RegularTradeButton label="Try it!" styles={cssStyles.tryBtn} />
+        <RegularTradeButton label="Try it!" styles={cssStyles.tryBtn(isMobile)} />
       )}
     </SectionWrapper>
   );
@@ -69,10 +69,6 @@ const cssStyles = {
     gap: 24px;
     display: flex;
     flex-direction: column;
-
-    ${theme.media.tablet} {
-      max-width: 43rem;
-    }
   `,
   title: css`
     margin-bottom: ${theme.spacing.normal};
@@ -102,8 +98,8 @@ const cssStyles = {
       height: 21.5rem;
     }
   `,
-  tryBtn: css`
-    margin: 0 auto;
+  tryBtn: (isMobile: boolean) => css`
+      margin: 50px auto;
 
     ${theme.media.tabletBreakPoint} {
       max-width: 14.5rem;

diff --git a/src/core/components/LandingPage/WhySparkSection/WhySparkSection.tsx b/src/core/components/LandingPage/WhySparkSection/WhySparkSection.tsx
@@ -32,6 +32,12 @@ const WhySparkSection = () => {
             alt="product"
             fill
           />
+
+          {!isMobile && (
+            <div css={cssStyle.shadow}>
+              <Image src="./images/shadow.png" alt="shadow" fill />
+            </div>
+          )}
         </div>
       </div>
     </SectionWrapper>
@@ -82,7 +88,7 @@ const cssStyle = {
     ${theme.media.tabletBreakPoint} {
       width: 100%;
       height: 50vw;
-    }
+      position: relative;
 
     ${theme.media.tabletLandscape} {
       width: 100%;
@@ -101,6 +107,14 @@ const cssStyle = {
       height: 51rem;
     }
   `,
+  shadow: css`
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        bottom: -12%;
+        left: 4%;
+        z-index: -1;
+  `
 };
 
 export default WhySparkSection;
diff --git a/src/core/components/LandingPage/components/OptimizedMobileButton.tsx b/src/core/components/LandingPage/components/OptimizedMobileButton.tsx
@@ -22,9 +22,11 @@ const OptimizedMobileButton = ({
       data={{
         label,
       }}
-      styles={[cssStyles.mobileBtn, styles]}
+      styles={styles}
     >
-      {label ?? <button css={[cssStyles.mobileBtn, styles]}> {children}</button>}
+      {label ?? (
+        <button css={[cssStyles.mobileBtn, styles]}> {children}</button>
+      )}
     </LinkButton>
   );
 };
@@ -38,10 +40,11 @@ const cssStyles = {
     font-size: ${theme.text.size.body};
     border-radius: ${theme.borderRadius.default};
     border: 2px dashed ${theme.colors.grey.lightDark};
-    width: 100%;
-    height: ${convertPxToRem(56)};
     color: white;
     cursor: pointer;
+    width: 100%;
+    height: ${convertPxToRem(56)};
+    padding: ${convertPxToRem(16)} ${convertPxToRem(20)};
   `,
 };
 

diff --git a/src/core/components/common/Footer/Footer.tsx b/src/core/components/common/Footer/Footer.tsx
@@ -1,21 +1,26 @@
 import { css } from "@emotion/react";
+import Image from "next/image";
 
 import SectionWrapper from "@/core/components/common/SectionWrapper";
 import theme from "@/core/styles/theme";
 import { LinksList } from "@/core/components/common/Footer/LinksList";
 import { externalLinks } from "@/core/constants/externalLinks";
+import { useMobileWindowWidth } from "@/core/hooks/useMobileWindowWidth";
 import SVGIcon from "@/core/components/common/SVGIcon";
 import ExternalLinkButton from "@/core/components/common/ExternalLinkWrapper";
 import useMainFont from "@/core/hooks/useMainFont";
 
+
 import {
   developersLinks,
   socialMediaLinks,
   technologyLinks,
+  workWithUsLinks,
 } from "./constants";
 
 const Footer = () => {
   const syne = useMainFont();
+  const isMobile = useMobileWindowWidth();
 
   return (
     <SectionWrapper disableMaxWidth styles={cssStyles.footerContainer}>
@@ -24,49 +29,53 @@ const Footer = () => {
           <div css={cssStyles.svg}>
             <SVGIcon size={[82, 25]} iconName="LogoMini" />
           </div>
-          <LinksList
-            listHeader="Technology"
-            links={technologyLinks}
-            listStyles={cssStyles.listTech}
-          />
-          <LinksList
-            listHeader="Developers"
-            links={developersLinks}
-            listStyles={cssStyles.listDevs}
-          />
-          <LinksList
-            listHeader="Socials"
-            listStyles={cssStyles.listDevs}
-            links={socialMediaLinks}
-          />
-          <LinksList
-            listHeader="Work with us 🤟"
-            listStyles={cssStyles.listDevs}
-            links={developersLinks}
-          />
+          <LinksList listHeader="Technology" links={technologyLinks} />
+          <LinksList listHeader="Developers" links={developersLinks} />
+          <LinksList listHeader="Socials" links={socialMediaLinks} />
+          <LinksList listHeader="Work with us 🤟" links={workWithUsLinks} />
         </main>
         <div css={cssStyles.description}>
-          <span>Built by Composability Labs</span>
+          <span css={cssStyles.descriptionText}>Built by Composability Labs</span>
           <div css={cssStyles.rights}>
             <ExternalLinkButton
               label="Terms of use"
               href={externalLinks.termsOfUse}
-              styles={cssStyles.termsOfUse}
+              styles={cssStyles.descriptionText}
             />
-            <span>All rights reserved  © 2023-2024</span>
+            <span css={cssStyles.descriptionText}>All rights reserved  © 2023-2024</span>
           </div>
         </div>
       </footer>
+      {isMobile && (
+        <div css={cssStyles.bg}>
+          <Image src="./images/footer.png" alt="bg" fill />
+        </div>
+      )}
     </SectionWrapper>
   );
 };
 
 const cssStyles = {
-  footerContainer: css`
-    background-image: url("./images/footer.png");
-    background-size: cover;
-    background-position: center;
+  bg: css`
+    z-index: -1;
+    min-height: 215px;
+    object-fit: contain;
+    position: absolute;
+    left: -100%;
+    bottom: 0%;
+    overflow:hidden;
+    min-width: 1280px;
     min-height: 382px;
+  }
+  `,
+  footerContainer: css`
+    position: relative;
+    ${theme.media.tabletBreakPoint} {
+      background-image: url("./images/footer.png");
+      background-size: cover;
+      background-position: center;
+      min-height: 382px;
+    }
   `,
   footer: css`
     margin: ${theme.spacing.huge} 0;
@@ -75,10 +84,10 @@ const cssStyles = {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    gap: 48px;
     ${theme.media.tablet} {
       margin: ${theme.spacing.custom[40]} 0;
     }
-    gap: 48px
   `,
   footerContent: css`
     display: flex;
@@ -99,6 +108,9 @@ const cssStyles = {
       flex-direction: row;
     }
   `,
+  descriptionText: css`
+    font-size: ${theme.text.size.extraTiny}  
+  `,
   rights: css`
     display: flex;
     flex-direction: column;
@@ -114,7 +126,7 @@ const cssStyles = {
     ${theme.media.tablet} {
       position: unset;
     }
-  `
+  `,
 };
 
 export default Footer;
diff --git a/src/core/components/common/Footer/LinksList.tsx b/src/core/components/common/Footer/LinksList.tsx
@@ -73,7 +73,7 @@ const cssStyles = {
     margin-bottom: ${theme.spacing.large};
   `,
   listItem: ({ marginBottom = "0", marginRight = "0" }) => css`
-    color: ${theme.colors.white[100]};
+    color: ${theme.colors.white.default};
     margin-bottom: ${marginBottom};
     margin-right: ${marginRight};
     max-height: 2rem;

diff --git a/src/core/components/common/Footer/constants.tsx b/src/core/components/common/Footer/constants.tsx
@@ -15,6 +15,10 @@ export const developersLinks = [
   { label: "Faucet", href: externalLinks.faucetDevelopers },
 ];
 
+export const workWithUsLinks = [
+  { label: "Careers", href: externalLinks.careers}
+]
+
 export const socialMediaLinks = [
   {
     icon: <SVGIcon iconName="Twitter" />,

diff --git a/src/core/constants/externalLinks.ts b/src/core/constants/externalLinks.ts
@@ -15,4 +15,5 @@ export const externalLinks = {
     "https://medium.com/@compolabs/predicates-on-fuelvm-enabling-a-new-dex-paradigm-fa013baed9f7",
   defi: "https://medium.com/@compolabs/defi-in-2024-no-free-lunch-e86d335cae01",
   modular: "https://medium.com/@compolabs/introduction-a91ce34d269e",
+  careers: "https://compo-labs.notion.site/93d1f8917cb64f88a222fe24e0df8a9e?v=503fafab97464f049e79bc66ca09afa9&pvs=4"
 };