style: better background effect in lore page and other improvements (#29

) * style: better lore cone background * style: remove opacity on arrows * fix: ball position on mobile * style: title position on landing page * fix: the navbar link doesn't get colored * fix: landings title position
defi-wonderland · Feb 28, 2023 · e537ffb · e537ffb
1 parent 733ef03
commit e537ffb
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 108 deletions.
diff --git a/src/assets/Cono_bola.png b/src/assets/Cono_bola.png
diff --git a/src/assets/cone.png b/src/assets/cone.png
diff --git a/src/assets/hoop-bottom.png b/src/assets/hoop-bottom.png
diff --git a/src/assets/hoop-top.png b/src/assets/hoop-top.png
diff --git a/src/containers/Navbar/index.tsx b/src/containers/Navbar/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
 import {
@@ -10,7 +11,6 @@ import {
 } from "./Navbar.styles";
 import wonderLogo from "/img/wonder-logo.svg";
 import menuIcon from "~/assets/menu_icon.svg";
-import { useState } from "react";
 
 interface NavLink {
   name: string;
@@ -48,13 +48,6 @@ export const Navbar = ({}: NavbarProps) => {
   const [navLink, setNavLink] = useState(navLinks);
   const { pathname } = useLocation();
 
-  const handleClick = (i: number) => {
-    setShowNavbar(!showNavbar);
-    const newNavLink = resetValues();
-    newNavLink[i].disabled = true;
-    setNavLink(newNavLink);
-  };
-
   const resetValues = () => {
     // reset values
     const newNavLink = navLink.map((link) => ({
@@ -66,6 +59,20 @@ export const Navbar = ({}: NavbarProps) => {
     return newNavLink;
   };
 
+  useEffect(() => {
+    const newNavLink = resetValues();
+    let index: number | undefined;
+
+    newNavLink.forEach((link, i) => {
+      if (link.url === pathname) {
+        index = i;
+      }
+    });
+
+    if (index !== undefined) newNavLink[index].disabled = true;
+    setNavLink(newNavLink);
+  }, [pathname]);
+
   return (
     <StyledNavbar id={showNavbar ? "show" : ""}>
       <LogoContainer>
@@ -90,9 +97,6 @@ export const Navbar = ({}: NavbarProps) => {
             key={link.name}
             disabled={link.disabled && !pathname.includes("/blog/")}
             className={link.disabled ? "gradient" : ""}
-            onClick={() => {
-              handleClick(i);
-            }}
           >
             {link.name}
           </NavLink>

diff --git a/src/pages/Landing/HeroSection/index.tsx b/src/pages/Landing/HeroSection/index.tsx
@@ -12,6 +12,8 @@ const HeroDivider = styled.img`
 `;
 
 const StyledHeroSection = styled(Section)`
+  margin-bottom: 2.8rem;
+
   & div {
     position: absolute;
     width: 100%;
@@ -20,10 +22,14 @@ const StyledHeroSection = styled(Section)`
   }
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    top: -2rem;
+    top: 0rem;
     min-height: unset;
     height: 50rem;
     background-image: url("/img/hero/hero_mobile.png");
+
+    & div {
+      top: 5rem;
+    }
   }
 `;
 

diff --git a/src/pages/Landing/TeamSection/TeamSection.styles.tsx b/src/pages/Landing/TeamSection/TeamSection.styles.tsx
@@ -121,7 +121,12 @@ export const CarouselContainer = styled(Carousel)`
     top: unset;
     bottom: -1.5rem;
     left: 9rem;
+    opacity: 1;
     background-image: url("/img/arrow_left.svg") !important;
+
+    &:hover {
+      opacity: 0.8;
+    }
   }
 
   & .control-arrow.control-next {
@@ -130,7 +135,12 @@ export const CarouselContainer = styled(Carousel)`
     top: unset;
     bottom: -1.5rem;
     right: 9rem;
+    opacity: 1;
     background-image: url("/img/arrow.svg") !important;
+
+    &:hover {
+      opacity: 0.8;
+    }
   }
 
   & .control-next::before,

diff --git a/src/pages/Lore/Lore.tsx b/src/pages/Lore/Lore.tsx
@@ -0,0 +1,118 @@
+import styled from "styled-components";
+
+import { PageContent } from "~/components/app";
+import { ApproachSection } from "./ApproachSection";
+import {
+  Ball,
+  MOBILE_MAX_WIDTH,
+  SPACING_192,
+  SPACING_512,
+  SPACING_700,
+  LiquidDistortion,
+} from "~/components/common";
+import { useWindowDimensions } from "~/hooks/windowDimensions";
+import TextSection from "./TextSection";
+import Cone from "~/assets/cone.png";
+import HoopTop from "~/assets/hoop-top.png";
+import HoopBottom from "~/assets/hoop-bottom.png";
+
+const StyledApproachSection = styled(ApproachSection)`
+  padding: "3rem 0";
+`;
+
+const HeroDivider = styled.div`
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: ${SPACING_192};
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    top: 22rem;
+  }
+`;
+
+const SBall = styled(Ball)`
+  top: 21rem;
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    top: 14rem;
+    width: 6rem;
+  }
+`;
+
+const MobileTitleContainer = styled.div`
+  transform: rotate(3deg);
+`;
+
+const BackgroundContainer = styled.div`
+  position: relative;
+  width: ${SPACING_512};
+  height: ${SPACING_700};
+  right: 12rem;
+  top: 20rem;
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    width: 25.6rem;
+    height: 35rem;
+    right: 11rem;
+    top: 12rem;
+  }
+`;
+
+const SCone = styled.img`
+  position: absolute;
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    width: 30rem;
+  }
+`;
+
+const SHoop = styled(SCone)`
+  z-index: 10;
+`;
+
+export function Lore() {
+  const { isMobile, isTablet } = useWindowDimensions();
+
+  return (
+    <PageContent>
+      <HeroDivider>
+        {!isMobile && (
+          <>
+            <LiquidDistortion
+              text="WOND3RLAND IS NOT A PLACE,"
+              fontSize={isTablet ? 90 : undefined}
+            />
+            <LiquidDistortion
+              text="IT'S A FEELING WITHIN, A PROCESS."
+              fontSize={isTablet ? 90 : undefined}
+            />
+          </>
+        )}
+
+        {isMobile && (
+          <MobileTitleContainer>
+            <LiquidDistortion text="WOND3RLAND" fontSize={65} />
+            <LiquidDistortion text="IS NOT A PLACE," fontSize={65} />
+            <LiquidDistortion text="IT'S A FEELING WITHIN," fontSize={65} />
+            <LiquidDistortion text="A PROCESS." fontSize={65} />
+          </MobileTitleContainer>
+        )}
+      </HeroDivider>
+      <BackgroundContainer>
+        <SCone src={HoopTop} alt="starts background" />
+        <SCone src={Cone} alt="starts background" />
+        <SBall />
+        <SHoop src={HoopBottom} alt="starts background" />
+      </BackgroundContainer>
+
+      <TextSection />
+
+      <StyledApproachSection />
+    </PageContent>
+  );
+}
diff --git a/src/pages/Lore/TextSection.tsx b/src/pages/Lore/TextSection.tsx
@@ -18,6 +18,7 @@ const LoreSection = styled(Section)`
   width: calc(${PAGE_MAX_WIDTH} + 13rem);
   max-width: 100%;
   grid-gap: 4.6rem;
+  margin-top: 12rem;
 
   @media screen and (max-width: 1400px) {
     flex-direction: column;

diff --git a/src/pages/Lore/index.tsx b/src/pages/Lore/index.tsx
@@ -1,96 +1 @@
-import styled from "styled-components";
-
-import { PageContent } from "~/components/app";
-import { ApproachSection } from "./ApproachSection";
-import {
-  Ball,
-  MOBILE_MAX_WIDTH,
-  SPACING_128,
-  SPACING_192,
-  SPACING_512,
-  SPACING_700,
-  LiquidDistortion,
-} from "~/components/common";
-import { useWindowDimensions } from "~/hooks/windowDimensions";
-import CONE from "~/assets/Cono_bola.png";
-import TextSection from "./TextSection";
-
-const StyledApproachSection = styled(ApproachSection)`
-  padding: "3rem 0";
-`;
-
-const SCone = styled.img`
-  width: ${SPACING_512};
-  height: ${SPACING_700};
-  margin-right: 15%;
-  margin-top: ${SPACING_128};
-
-  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    width: 25.6rem;
-    height: 35rem;
-    margin-left: -25%;
-    margin-top: 8rem;
-  }
-`;
-
-const HeroDivider = styled.div`
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  top: ${SPACING_192};
-
-  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    top: -12rem;
-  }
-`;
-
-const SBall = styled(Ball)`
-  margin-top: -7rem;
-
-  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    width: 6rem;
-    margin-top: -14rem;
-  }
-`;
-
-const MobileTitleContainer = styled.div`
-  transform: rotate(3deg);
-`;
-
-export function Lore() {
-  const { isMobile } = useWindowDimensions();
-
-  return (
-    <PageContent>
-      <SBall />
-
-      <HeroDivider>
-        {!isMobile && (
-          <>
-            <LiquidDistortion text="WOND3RLAND IS NOT A PLACE," />
-            <LiquidDistortion text="IT'S A FEELING WITHIN, A PROCESS." />
-          </>
-        )}
-
-        {isMobile && (
-          <MobileTitleContainer>
-            <LiquidDistortion text="WOND3RLAND" fontSize={65} />
-            <LiquidDistortion text="IS NOT A PLACE," fontSize={65} />
-            <LiquidDistortion text="IT'S A FEELING WITHIN," fontSize={65} />
-            <LiquidDistortion text="A PROCESS." fontSize={65} />
-          </MobileTitleContainer>
-        )}
-      </HeroDivider>
-      <SCone src={CONE} alt="starts background" />
-
-      <TextSection />
-
-      <StyledApproachSection />
-    </PageContent>
-  );
-}
+export * from "./Lore";