fix: landing content margins (#25)

* fix: member list on carousel * fix: center content section * fix: portfolio padding * style: fix padding on project description * fix: new star icon on landing page * fix: divider line * style: landing title and hero section * fix: optimize hero image
defi-wonderland · Feb 20, 2023 · 93efbd7 · 93efbd7
1 parent 4985f73
commit 93efbd7
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 69 deletions.
diff --git a/public/img/hero/hero_mobile.png b/public/img/hero/hero_mobile.png
diff --git a/src/pages/Landing/ContentSection/ContentSection.styles.tsx b/src/pages/Landing/ContentSection/ContentSection.styles.tsx
@@ -6,6 +6,7 @@ import {
   FONT_DISPLAY,
   FONT_MEDIUM_L,
   MOBILE_MAX_WIDTH,
+  PAGE_MAX_WIDTH,
   SectionBackground,
   TABLET_MAX_WIDTH,
 } from "~/components/common";
@@ -20,7 +21,6 @@ export const BackgroundContainer = styled.div`
   justify-content: center;
 
   @media screen and (max-width: ${TABLET_MAX_WIDTH}) {
-    position: relative;
     right: -5rem;
   }
 `;
@@ -29,9 +29,18 @@ export const BG_1 = styled(SectionBackground)`
   position: relative;
   width: 50%;
   margin: 0 auto;
-  margin-top: 120rem;
+  margin-top: 20rem;
+
+  @media screen and (max-width: ${PAGE_MAX_WIDTH}) {
+    margin-top: 40rem;
+  }
 
   @media screen and (max-width: ${TABLET_MAX_WIDTH}) {
+    width: 100%;
+    margin-top: 10rem;
+  }
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     position: absolute;
     width: 150%;
     margin-top: 110rem;
@@ -40,31 +49,36 @@ export const BG_1 = styled(SectionBackground)`
 
 export const Cone = styled.img`
   position: absolute;
-  margin-top: 70rem;
   margin-left: 25%;
   width: 90rem;
 
   @media screen and (max-width: ${TABLET_MAX_WIDTH}) {
-    width: 120%;
+    margin-right: -10rem;
     margin-top: 125rem;
+  }
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    width: 120%;
+    margin-right: unset;
     margin-left: -3.5rem;
   }
 `;
 
 export const LandingContainer = styled.section`
   width: 100%;
-  margin: 5rem auto 10rem;
+  padding: 5rem 7.5rem 10rem 2.5rem;
+  position: relative;
   display: grid;
   grid-template-areas:
     "star title"
     "empty firstBlock"
     "empty landingDivider"
     "empty secondBlock"
     "icon secondTitle";
-  width: auto;
+  grid-template-columns: 5rem auto;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    margin: 0rem;
+    padding: 0;
     display: flex;
     flex-direction: column;
   }
@@ -140,8 +154,9 @@ export const FirstBlockContainer = styled.div`
 
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
 
-  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+  @media screen and (max-width: ${TABLET_MAX_WIDTH}) {
     flex-direction: column;
     padding: 2.4rem 1.6rem;
     border-left: none;
@@ -183,6 +198,17 @@ export const Divider = styled.div`
   }
 `;
 
+export const DividerLine = styled.div`
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0.5) 0%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(14, 21, 44, 0) 100%
+  );
+  height: 1px;
+  width: 100%;
+`;
+
 export const DividerText = styled.p`
   font-family: ${FONT_DISPLAY};
   font-weight: 300;
@@ -199,9 +225,6 @@ export const DividerText = styled.p`
   color: transparent;
   -webkit-text-fill-color: transparent;
 
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     text-align: start;
     font-size: 6.4rem;
@@ -224,11 +247,6 @@ export const GradientText = styled(DividerText)`
 
 export const TextContainer = styled.div`
   padding: 5rem 4rem;
-  padding-right: 35rem;
-
-  @media screen and (max-width: ${TABLET_MAX_WIDTH}) {
-    padding-right: 25rem;
-  }
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 0rem;

diff --git a/src/pages/Landing/ContentSection/ContentSection.tsx b/src/pages/Landing/ContentSection/ContentSection.tsx
@@ -4,6 +4,7 @@ import {
   CommunityButton,
   Cone,
   Divider,
+  DividerLine,
   DividerText,
   FirstBlockContainer,
   FirstTitle,
@@ -20,63 +21,63 @@ import { ProjectsList } from "~/pages/Portfolio/ProjectsList";
 import { RightCard } from "./RightCard";
 import { Team } from "../TeamSection";
 import StarIcon from "/img/footer/star-icon.svg";
+import MobileStar from "~/assets/lore-stars.svg";
 import Flower from "~/assets/flower.svg";
 import ConeBackground from "~/assets/landing_bg.png";
 import { Link } from "~/components/common";
 
 export function ContentSection() {
   return (
-    <>
+    <LandingContainer>
       <BackgroundContainer>
         <BG_1 type="1" align="center" />
         <Cone src={ConeBackground} alt="cone image" />
       </BackgroundContainer>
+      <Star src={StarIcon} alt="Star icon" />
+      <FirstTitle>
+        <Star src={MobileStar} alt="Star icon" />
+        developing for a greater good
+      </FirstTitle>
 
-      <LandingContainer>
-        <Star src={StarIcon} alt="Star icon" />
-        <FirstTitle>
-          <Star src={StarIcon} alt="Star icon" />
-          developing for a greater good
-        </FirstTitle>
+      <FirstBlockContainer>
+        <TextContainer>
+          <GradientText>To</GradientText>
+          <GradientText>become part</GradientText>
+          <GradientText>of</GradientText>
+          <GradientText>something bigger</GradientText>
+          <GradientText>than</GradientText>
+          <GradientText>ourselves</GradientText>
+        </TextContainer>
 
-        <FirstBlockContainer>
-          <TextContainer>
-            <GradientText>To</GradientText>
-            <GradientText>become part</GradientText>
-            <GradientText>of</GradientText>
-            <GradientText>something bigger</GradientText>
-            <GradientText>than</GradientText>
-            <GradientText>ourselves</GradientText>
-          </TextContainer>
+        <RightCard />
+      </FirstBlockContainer>
 
-          <RightCard />
-        </FirstBlockContainer>
+      <Divider>
+        <DividerLine />
+        <DividerText>WONDERLAND IN PROGRESS...</DividerText>
+        <DividerLine />
+      </Divider>
 
-        <Divider>
-          <DividerText>WONDERLAND IN PROGRESS...</DividerText>
-        </Divider>
+      <SecondBlockContainer>
+        <ProjectsList />
 
-        <SecondBlockContainer>
-          <ProjectsList />
+        <SButton>
+          <Link to="/portfolio">FULL PORTFOLIO</Link>
+        </SButton>
 
-          <SButton>
-            <Link to="/portfolio">FULL PORTFOLIO</Link>
-          </SButton>
+        <Team />
+      </SecondBlockContainer>
 
-          <Team />
-        </SecondBlockContainer>
-
-        <Icon src={Flower} alt="flower icon" />
-        <SecondTitle>
-          <div>
-            <Icon src={Flower} alt="flower icon" />
-            fix-to-earn
-          </div>
-          <CommunityButton>
-            <Link to="/team">VIEW ALL COMMUNITY</Link>
-          </CommunityButton>
-        </SecondTitle>
-      </LandingContainer>
-    </>
+      <Icon src={Flower} alt="flower icon" />
+      <SecondTitle>
+        <div>
+          <Icon src={Flower} alt="flower icon" />
+          fix-to-earn
+        </div>
+        <CommunityButton>
+          <Link to="/team">VIEW ALL COMMUNITY</Link>
+        </CommunityButton>
+      </SecondTitle>
+    </LandingContainer>
   );
 }
diff --git a/src/pages/Landing/HeroSection/index.tsx b/src/pages/Landing/HeroSection/index.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import styled from "styled-components";
 
-import { Section, LiquidDistortion } from "~/components/common";
+import { Section, Distortion, MOBILE_MAX_WIDTH } from "~/components/common";
 import { useWindowDimensions } from "~/hooks/windowDimensions";
 
 const HeroDivider = styled.img`
@@ -11,19 +11,47 @@ const HeroDivider = styled.img`
   z-index: 0;
 `;
 
-const StyledHeroSection = styled(Section)``;
+const StyledHeroSection = styled(Section)`
+  & div {
+    position: absolute;
+    width: 100%;
+    top: 7rem;
+    left: 0;
+  }
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    top: -2rem;
+    min-height: unset;
+    height: 50rem;
+    background-image: url("/img/hero/hero_mobile.png");
+  }
+`;
+
+export const SDistortion = styled(Distortion)``;
 
 export interface HeroSectionProps {}
 
 export const HeroSection: FC<HeroSectionProps> = ({ ...props }) => {
-  const { isMobile } = useWindowDimensions();
+  const { isMobile, isTablet } = useWindowDimensions();
   return (
-    <StyledHeroSection full backgroundImage="/img/hero/hero-bg.jpg" {...props}>
-      <LiquidDistortion
-        text="TO HELP THE WEB3 ECOSYSTEM THRIVE"
-        fontSize={isMobile ? 50 : 140}
-      />
-      <HeroDivider src="/img/hero/hero-bg-divider.png" />
-    </StyledHeroSection>
+    <>
+      <StyledHeroSection
+        full
+        backgroundImage="/img/hero/hero-bg.jpg"
+        {...props}
+      >
+        {!isMobile && (
+          <SDistortion
+            text="TO HELP THE WEB3 ECOSYSTEM THRIVE"
+            fontSize={isTablet ? 100 : 120}
+          />
+        )}
+        <HeroDivider src="/img/hero/hero-bg-divider.png" />
+      </StyledHeroSection>
+
+      {isMobile && (
+        <SDistortion text="TO HELP THE WEB3 ECOSYSTEM THRIVE" fontSize={45} />
+      )}
+    </>
   );
 };
diff --git a/src/pages/Landing/TeamSection/TeamSection.tsx b/src/pages/Landing/TeamSection/TeamSection.tsx
@@ -31,7 +31,6 @@ export function Team() {
             showThumbs={false}
             showIndicators={false}
             selectedItem={Math.ceil(lastIndex / 2)}
-            infiniteLoop
           >
             {MEMBERS.map((member) => (
               <NameContainer key={member.name}>

diff --git a/src/pages/Portfolio/ProjectsList/ProjectsList.styles.tsx b/src/pages/Portfolio/ProjectsList/ProjectsList.styles.tsx
@@ -15,6 +15,7 @@ export const ProjectContainer = styled.button`
   flex-direction: column;
   align-items: center;
   width: 100%;
+  padding: 0;
 `;
 
 export const ProjectHeader = styled.div`
@@ -57,6 +58,10 @@ export const Name = styled.strong`
   z-index: -1;
   color: white;
   text-align: start;
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    padding-left: 1.6rem;
+  }
 `;
 
 export const Circle = styled.img`
@@ -83,7 +88,7 @@ export const ProjectDescription = styled.div`
   & div {
     font-family: ${FONT_MEDIUM};
     font-size: 1.8rem;
-    padding-bottom: 5rem;
+    padding: 0 1.6rem 5rem;
     color: white;
     -webkit-text-fill-color: white;
     opacity: 1;