fix: remove main titles animation on mobile

src/components/common/MainTitle.tsx

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+import { FONT_DISPLAY } from "./Variables";
+
+interface TitleProps {
+  fontSize?: number;
+}
+export const MainTitle = styled.h1<TitleProps>`
+  font-family: ${FONT_DISPLAY};
+  text-align: center;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : 5)}rem;
+  width: max-content;
+  margin: 0 auto;
+  letter-spacing: 0.4px;
+  line-height: 1.15;
+`;

src/components/common/index.ts

@@ -1,12 +1,13 @@
-export * from './AnimationIn';
-export * from './Ball';
-export * from './Button';
-export * from './DistortionText';
-export * from './DisplayText';
-export * from './GradientTitle';
-export * from './Link';
-export * from './LiquidDistortion';
-export * from './Ring';
-export * from './Section';
-export * from './SectionArticle';
-export * from './Variables';
+export * from "./AnimationIn";
+export * from "./Ball";
+export * from "./Button";
+export * from "./DistortionText";
+export * from "./DisplayText";
+export * from "./GradientTitle";
+export * from "./Link";
+export * from "./LiquidDistortion";
+export * from "./Ring";
+export * from "./Section";
+export * from "./SectionArticle";
+export * from "./MainTitle";
+export * from "./Variables";

src/containers/Navbar/index.tsx

@@ -65,6 +65,7 @@ export const Navbar = ({ className }: NavbarProps) => {
     });
 
     if (index !== undefined) newNavLink[index].disabled = true;
+    setShowNavbar(false);
     setNavLink(newNavLink);
   }, [pathname]);
 

src/pages/Blog/Blog.styles.tsx

@@ -29,10 +29,12 @@ export const BackgroundImage = styled(SectionBackground)`
 export const Title = styled.div`
   margin-top: 16rem;
   margin-bottom: 10rem;
+  height: 22rem;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     margin-top: 10rem;
     margin-bottom: 5rem;
+    height: unset;
   }
 `;
 
@@ -99,6 +101,10 @@ export const DetailsContainer = styled.div`
   align-items: flex-start;
   height: 100%;
   width: 100%;
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    padding: 0;
+  }
 `;
 
 export const TitleContainer = styled.div`

src/pages/Blog/Blog.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
-import { POSTS } from '~/constants/posts';
-import { Distortion } from '~/components/common/DistortionText';
+import { POSTS } from "~/constants/posts";
+import { Distortion, MainTitle } from "~/components/common";
 import {
   PageContainer,
   Title,
@@ -34,8 +34,8 @@ export function Blog() {
         )}
         {isMobile && (
           <>
-            <Distortion text='NEWS, STORIES AND' fontSize={55} />
-            <Distortion text='UPDATES FROM WONDERLAND' fontSize={55} />
+            <MainTitle fontSize={5.5}>NEWS, STORIES AND</MainTitle>
+            <MainTitle fontSize={5.5}>UPDATES FROM WONDERLAND</MainTitle>
           </>
         )}
       </Title>

src/pages/Landing/HeroSection/index.tsx

@@ -1,8 +1,13 @@
 import { FC } from 'react';
 import styled from 'styled-components';
 
-import { Section, Distortion, MOBILE_MAX_WIDTH } from '~/components/common';
-import { useWindowDimensions } from '~/hooks/windowDimensions';
+import {
+  Section,
+  Distortion,
+  MOBILE_MAX_WIDTH,
+  MainTitle,
+} from "~/components/common";
+import { useWindowDimensions } from "~/hooks/windowDimensions";
 
 const HeroDivider = styled.img`
   position: absolute;
@@ -28,7 +33,7 @@ const StyledHeroSection = styled(Section)`
     background-image: url('/img/hero/hero_mobile.png');
 
     & div {
-      top: 5rem;
+      top: 10rem;
     }
   }
 `;
@@ -39,10 +44,25 @@ export const HeroSection: FC = ({ ...props }) => {
   const { isMobile, isTablet } = useWindowDimensions();
   return (
     <>
-      <StyledHeroSection full backgroundImage='/img/hero/hero-bg.jpg' {...props}>
-        {!isMobile && <Distortion text='TO HELP THE WEB3 ECOSYSTEM THRIVE' fontSize={isTablet ? 100 : 120} />}
-        {isMobile && <SDistortion text='TO HELP THE WEB3 ECOSYSTEM THRIVE' fontSize={45} />}
-        <HeroDivider src='/img/hero/hero-bg-divider.png' />
+      <StyledHeroSection
+        full
+        backgroundImage="/img/hero/hero-bg.jpg"
+        {...props}
+      >
+        {!isMobile && (
+          <Distortion
+            text="TO HELP THE WEB3 ECOSYSTEM THRIVE"
+            fontSize={isTablet ? 100 : 120}
+          />
+        )}
+        {isMobile && (
+          <div>
+            <MainTitle fontSize={4.4}>
+              TO HELP THE WEB3 ECOSYSTEM THRIVE
+            </MainTitle>
+          </div>
+        )}
+        <HeroDivider src="/img/hero/hero-bg-divider.png" />
       </StyledHeroSection>
     </>
   );

src/pages/Landing/IntroMask/Intro.styles.tsx

@@ -18,7 +18,7 @@ export const IntroContainer = styled.div`
   justify-content: space-between;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    background-image: url('/img/hero/hero-bg.jpg');
+    background-image: url("/img/hero/hero_mobile.png");
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;

src/pages/Lore/Lore.tsx

@@ -1,13 +1,21 @@
-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';
+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,
+  MainTitle,
+} 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';
@@ -83,10 +91,10 @@ export function Lore() {
 
         {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} />
+            <MainTitle fontSize={6.5}>WOND3RLAND</MainTitle>
+            <MainTitle fontSize={6.5}>IS NOT A PLACE,</MainTitle>
+            <MainTitle fontSize={6.5}>IT'S A FEELING WITHIN,</MainTitle>
+            <MainTitle fontSize={6.5}>A PROCESS.</MainTitle>
           </MobileTitleContainer>
         )}
       </HeroDivider>

src/pages/Portfolio/Portfolio.styles.tsx

@@ -6,7 +6,6 @@ import {
   MOBILE_MAX_WIDTH,
   SectionBackground,
   SPACING_128,
-  SPACING_256,
   TABLET_MAX_WIDTH,
 } from '~/components/common';
 
@@ -27,7 +26,7 @@ export const HeroDivider = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: ${SPACING_256};
+  margin-top: 21rem;
 
   @media screen and (max-width: ${TABLET_MAX_WIDTH}) {
     margin-top: 12rem;

src/pages/Portfolio/index.tsx

@@ -12,11 +12,11 @@ import {
   ProjectTitle,
   ProjectsContainer,
   MobileTitleContainer,
-} from './Portfolio.styles';
-import { ProjectsList } from './ProjectsList';
-import { Distortion } from '~/components/common/DistortionText';
-import { Divider } from './ProjectsList/ProjectsList.styles';
-import { useWindowDimensions } from '~/hooks/windowDimensions';
+} from "./Portfolio.styles";
+import { ProjectsList } from "./ProjectsList";
+import { Divider } from "./ProjectsList/ProjectsList.styles";
+import { useWindowDimensions } from "~/hooks/windowDimensions";
+import { MainTitle, Distortion } from "~/components/common";
 
 export function Portfolio() {
   const { isMobile } = useWindowDimensions();
@@ -39,11 +39,11 @@ export function Portfolio() {
 
           {isMobile && (
             <MobileTitleContainer>
-              <Distortion text='TOGETHER,' fontSize={50} />
-              <Distortion text='WE WANT TO SUSTAINBLY' fontSize={50} />
-              <Distortion text='BUILD A MORE INCLUSIVE' fontSize={50} />
-              <Distortion text='AND DECENTRALIZED' fontSize={50} />
-              <Distortion text='FINANCIAL ECOSYSTEM' fontSize={50} />
+              <MainTitle>TOGETHER,</MainTitle>
+              <MainTitle>WE WANT TO SUSTAINBLY</MainTitle>
+              <MainTitle>BUILD A MORE INCLUSIVE</MainTitle>
+              <MainTitle>AND DECENTRALIZED</MainTitle>
+              <MainTitle>FINANCIAL ECOSYSTEM</MainTitle>
             </MobileTitleContainer>
           )}
           <Ball_1 />

src/pages/Team/Team.styles.tsx

@@ -6,7 +6,6 @@ import {
   MOBILE_MAX_WIDTH,
   SectionBackground,
   SPACING_1152,
-  SPACING_256,
   SPACING_384,
 } from '~/components/common';
 
@@ -30,16 +29,18 @@ export const STitle = styled.img`
 
 export const HeroDivider = styled.div`
   width: 100%;
+  height: 51rem;
   bottom: 0;
   z-index: 3;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: end;
   align-items: center;
-  margin-top: ${SPACING_256};
+  margin-top: 18rem;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     margin-top: 15.5rem;
+    height: unset;
   }
 `;
 

src/pages/Team/index.tsx

@@ -1,7 +1,7 @@
-import { WonderTeamSection } from './TeamGrid.tsx';
-import { BackgroundImg, Container, HeroDivider, TeamBall } from './Team.styles';
-import { LiquidDistortion } from '~/components/common';
-import { useWindowDimensions } from '~/hooks/windowDimensions';
+import { WonderTeamSection } from "./TeamGrid.tsx";
+import { BackgroundImg, Container, HeroDivider, TeamBall } from "./Team.styles";
+import { LiquidDistortion, MainTitle } from "~/components/common";
+import { useWindowDimensions } from "~/hooks/windowDimensions";
 
 export function Team() {
   const { isMobile } = useWindowDimensions();
@@ -11,8 +11,27 @@ export function Team() {
       <BackgroundImg type='3' align='center' />
       <Container>
         <HeroDivider>
-          <LiquidDistortion text='WOND3RLAND IS NOT A PLACE,' fontSize={isMobile ? 50 : 140} />
-          <LiquidDistortion text="IT'S A FEELING WITHIN, A PROCESS." fontSize={isMobile ? 50 : 140} />
+          {!isMobile && (
+            <>
+              <LiquidDistortion
+                text="WOND3RLAND IS NOT A PLACE,"
+                fontSize={140}
+              />
+              <LiquidDistortion
+                text="IT'S A FEELING WITHIN, A PROCESS."
+                fontSize={140}
+              />
+            </>
+          )}
+
+          {isMobile && (
+            <>
+              <MainTitle fontSize={4.8}>WOND3RLAND IS NOT A PLACE,</MainTitle>
+              <MainTitle fontSize={4.8}>
+                IT'S A FEELING WITHIN, A PROCESS
+              </MainTitle>
+            </>
+          )}
           <TeamBall />
         </HeroDivider>
         <WonderTeamSection />