fix: links and projects and squad interaction

src/pages/Creations/ProjectsList/ProjectsList.styles.tsx

@@ -53,9 +53,11 @@ export const Name = styled.strong`
   z-index: -1;
   color: white;
   text-align: start;
+  padding-right: 2rem;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding-left: 1.6rem;
+    padding-right: 1rem;
   }
 `;
 

src/pages/Creations/ProjectsList/index.tsx

@@ -39,11 +39,11 @@ export function ProjectsList({ projects }: ProjectListProps) {
 
   const handleClick = (project: Project, target: Element) => {
     if (!projectMap[project.name]) {
-      target.classList.add('active');
-      target.classList.add('gradient');
+      target.parentElement?.classList.add('active');
+      target.parentElement?.classList.add('gradient');
     } else {
-      target.classList.remove('active');
-      target.classList.remove('gradient');
+      target.parentElement?.classList.remove('active');
+      target.parentElement?.classList.remove('gradient');
     }
 
     projectMap[project.name] = !projectMap[project.name];
@@ -53,13 +53,12 @@ export function ProjectsList({ projects }: ProjectListProps) {
   return (
     <List>
       {projects.map((project) => (
-        <ProjectContainer
-          key={project.name}
-          onClick={(e) => {
-            handleClick(project, e.currentTarget);
-          }}
-        >
-          <ProjectHeader>
+        <ProjectContainer key={project.name}>
+          <ProjectHeader
+            onClick={(e) => {
+              handleClick(project, e.currentTarget);
+            }}
+          >
             <Name>{project.name}</Name>
             <Circle src={circle} alt='circle icon' />
             <HLine />

src/pages/Insights/Insights.styles.tsx

@@ -56,6 +56,7 @@ export const BlogsContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     justify-content: center;
+    width: 100%;
   }
 `;
 
@@ -78,7 +79,7 @@ export const BlogPost = styled.div`
   }
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    width: calc(100% - 3rem);
+    width: 95vw;
   }
 `;
 
@@ -89,7 +90,8 @@ export const Image = styled.img`
   min-height: 31rem;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    height: 65%;
+    min-height: unset;
+    height: 55%;
   }
 `;
 
@@ -127,11 +129,13 @@ export const TitleContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 1.6rem;
+    gap: 1rem;
 
     & h1 {
       white-space: unset;
       text-overflow: unset;
       overflow: unset;
+      font-size: 1.8rem;
     }
   }
 `;
@@ -148,6 +152,10 @@ export const DescriptionContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 2rem 2rem 0;
+
+    & p {
+      font-size: 1.8rem;
+    }
   }
 `;
 
@@ -163,6 +171,10 @@ export const TagsContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 1.6rem 2rem;
+
+    & div strong {
+      font-size: 1.8rem;
+    }
   }
 `;
 

src/pages/Insights/Insights.tsx

@@ -19,13 +19,21 @@ import {
 import VIDEO_CHROME from '~/assets/videos/insights.webm';
 import VIDEO_SAFARI from '~/assets/videos/insights.mp4';
 import { TitleContainer } from '../Landing/HeroSection';
+import { MOBILE_MAX_WIDTH } from '~/components/common';
 import StarIcon from '/img/footer/star-icon.svg';
 import styled from 'styled-components';
 
 const BlogTitleContainer = styled(TitleContainer)`
   & video {
     max-width: 450px;
   }
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    padding-top: 5rem;
+    & video {
+      max-width: 300px;
+    }
+  }
 `;
 
 export const Star = styled.img.attrs({ loading: 'lazy' })`

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

@@ -14,7 +14,7 @@ export const IntroContainer = styled.div`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   justify-content: space-between;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
@@ -84,6 +84,7 @@ export const Text = styled.span<StyledContainerProps>`
   user-select: none;
   opacity: ${(props) => 1 - props.backgroundEffect * 3};
   z-index: 100;
+  text-align: center;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     font-size: 2rem;

src/pages/Landing/IntroMask/Intro.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Draggable from 'react-draggable';
 
 import { StyledNavbar } from '~/containers/Navbar/Navbar.styles';
@@ -28,10 +29,16 @@ export function Intro({ showBackground, setShowBackground, ...props }: IntroProp
   const [activateDragEffect, setDragEffect] = useState(false);
   const [backgroundEffect, setBackgroundEffect] = useState(0);
   const nodeRef = useRef(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (activateDragEffect) {
       setShowBackground(true);
+
+      // wait until animation is done to navigate to landing
+      setTimeout(() => {
+        navigate('/landing');
+      }, 1400);
     }
   }, [activateDragEffect]);
 

src/pages/Landing/SquadSection/SquadSection.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 
 import {
@@ -16,6 +17,7 @@ import Key from '~/assets/key.png';
 import members from '~/data/squad.json';
 
 export function Squad() {
+  const [selectedItem, setSelectedItem] = useState(0);
   return (
     <>
       <TeamContainer>
@@ -28,7 +30,13 @@ export function Squad() {
             showStatus={false}
             showThumbs={false}
             showIndicators={false}
-            selectedItem={0}
+            selectedItem={selectedItem}
+            onClickItem={(index: number) => {
+              setSelectedItem(index);
+            }}
+            onChange={(index: number) => {
+              setSelectedItem(index);
+            }}
           >
             {members.map((member) => (
               <NameContainer key={member.name}>