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/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}>