feat: switch to relative paths

src/component/ApplyPage/Position/index.tsx

@@ -4,12 +4,13 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import { useParams } from 'react-router-dom';
 
-import applicationsByTeams from '../../../data/ApplyData/allApps';
-import type { Position as PositionData } from '../../../data/ApplyData/types';
+import NavBar from '@/component/NavBar';
+import ShadowedButton from '@/component/ShadowedButton';
+
 import './style.css';
-import useWebsite from '../../../shared/useWebsite';
-import NavBar from '../../NavBar';
-import ShadowedButton from '../../ShadowedButton';
+import applicationsByTeams from '@/data/ApplyData/allApps';
+import type { Position as PositionData } from '@/data/ApplyData/types';
+import useWebsite from '@/shared/useWebsite';
 
 type ApplicationGroup = keyof typeof applicationsByTeams;
 

src/component/CulturePage/BelongHere/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import ColorBlock from '../../../assets/images/culturepage/Color block.png';
+import ColorBlock from '@/assets/images/culturepage/Color block.png';
+
 import './style.css';
-import type { SectionProps } from '../types';
+import type { SectionProps } from '@/component/CulturePage/types';
 
 const desktopContent = () => (
   // <div className="container">

src/component/CulturePage/Collage/index.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 
-import firstimg from '../Collage/website-8.jpg';
+import firstimg from '@/component/CulturePage/Collage/website-8.jpg';
+
 import './style.css';
-import secondimg from '../Collage/website-9.jpg';
-import thirdimg from '../Collage/website-12.jpg';
-import fourimg from '../Collage/website-14.jpg';
-import fiveimg from '../Collage/website-15.jpg';
-import siximg from '../Collage/website-16.jpg';
-import sevenimg from '../Collage/website-21.jpg';
-import eightimg from '../Collage/website-23.jpg';
-import nineimg from '../Collage/website-24.jpg';
-import tenimg from '../Collage/website-25.jpg';
-import type { SectionProps } from '../types';
+import secondimg from '@/component/CulturePage/Collage/website-9.jpg';
+import thirdimg from '@/component/CulturePage/Collage/website-12.jpg';
+import fourimg from '@/component/CulturePage/Collage/website-14.jpg';
+import fiveimg from '@/component/CulturePage/Collage/website-15.jpg';
+import siximg from '@/component/CulturePage/Collage/website-16.jpg';
+import sevenimg from '@/component/CulturePage/Collage/website-21.jpg';
+import eightimg from '@/component/CulturePage/Collage/website-23.jpg';
+import nineimg from '@/component/CulturePage/Collage/website-24.jpg';
+import tenimg from '@/component/CulturePage/Collage/website-25.jpg';
+import type { SectionProps } from '@/component/CulturePage/types';
 
 const desktopContent = (
   <div className="nospacing">

src/component/CulturePage/Diversity/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import type { SectionProps } from '../types';
+import type { SectionProps } from '@/component/CulturePage/types';
+
 import './style.css';
 
 const desktopContent = () => (

src/component/CulturePage/Equity/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import type { SectionProps } from '../types';
+import type { SectionProps } from '@/component/CulturePage/types';
+
 import './style.css';
 
 const desktopContent = (

src/component/CulturePage/Events/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import type { SectionProps } from '../types';
+import type { SectionProps } from '@/component/CulturePage/types';
+
 import './style.css';
 import RectImg1 from './website-5.jpg';
 import RectImg2 from './website-6.jpg';

src/component/CulturePage/Events2/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import CelebrateRepresent from '../Events2/CelebrateRepresent.png';
+import CelebrateRepresent from '@/component/CulturePage/Events2/CelebrateRepresent.png';
+
 import './style.css';
-import type { SectionProps } from '../types';
+import type { SectionProps } from '@/component/CulturePage/types';
 
 const desktopContent = (
   <>

src/component/CulturePage/Inclusion/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import type { SectionProps } from '../types';
+import type { SectionProps } from '@/component/CulturePage/types';
+
 import './style.css';
 
 const desktopContent = (

src/component/CulturePage/IntroImages/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import IntroImg1 from '../../../component/CulturePage/IntroImages/website-2.jpg';
+import IntroImg1 from '@/component/CulturePage/IntroImages/website-2.jpg';
+
 import './style.css';
-import IntroImg2 from '../../../component/CulturePage/IntroImages/website-3.jpg';
-import IntroImg3 from '../../../component/CulturePage/IntroImages/website-4.jpg';
-import type { SectionProps } from '../types';
+import IntroImg2 from '@/component/CulturePage/IntroImages/website-3.jpg';
+import IntroImg3 from '@/component/CulturePage/IntroImages/website-4.jpg';
+import type { SectionProps } from '@/component/CulturePage/types';
 
 const desktopContent = () => {
   return (

src/component/CulturePage/IntroSection/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import NavBar from '../../NavBar';
-import logo from '../IntroSection/GeneratePeaceLogo.png';
-import type { SectionProps } from '../types';
+import logo from '@/component/CulturePage/IntroSection/GeneratePeaceLogo.png';
+import type { SectionProps } from '@/component/CulturePage/types';
+import NavBar from '@/component/NavBar';
+
 import './style.css';
 
 const desktopContent = () => (

src/component/CulturePage/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import useWebsite from '../../shared/useWebsite';
-import HorizontalDesktopContainer from '../DesktopMobileHandler/HorizontalDesktopContainer';
-import NewMobileContainer from '../DesktopMobileHandler/NewMobileContainer';
-import Footer from '../Footer';
-import NextPage from '../NextPage';
+import HorizontalDesktopContainer from '@/component/DesktopMobileHandler/HorizontalDesktopContainer';
+import NewMobileContainer from '@/component/DesktopMobileHandler/NewMobileContainer';
+import Footer from '@/component/Footer';
+import NextPage from '@/component/NextPage';
+import useWebsite from '@/shared/useWebsite';
+
 import BelongHere from './BelongHere';
 import CollageSection from './Collage';
 import Diversity from './Diversity';

src/component/Footer/HorizontalFooter/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import '../style.css';
+import '@/component/Footer/style.css';
 import { useNavigate } from 'react-router-dom';
 
-import GenerateLogo from '../../../assets/images/landingpage-v2/footerlogo.svg'; //"../../assets/images/landingpage-v2/footerlogo.svg";
-import ShadowedButton from '../../ShadowedButton';
-import { SocialIcon } from '../../SocialIcon';
-import { socialIcons } from '../../socialIcons';
-import FooterLink from '../FooterLink';
-import { pages } from '../pages';
+import GenerateLogo from '@/assets/images/landingpage-v2/footerlogo.svg'; //"../../assets/images/landingpage-v2/footerlogo.svg";
+import FooterLink from '@/component/Footer/FooterLink';
+import { pages } from '@/component/Footer/pages';
+import ShadowedButton from '@/component/ShadowedButton';
+import { SocialIcon } from '@/component/SocialIcon';
+import { socialIcons } from '@/component/socialIcons';
 
 function HorizontalFooter() {
   const navigate = useNavigate();

src/component/Footer/VerticalFooter/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import '../style.css';
+import '@/component/Footer/style.css';
 import { useNavigate } from 'react-router-dom';
 
-import GenerateLogo from '../../../assets/images/landingpage-v2/footerlogo.svg';
-import ShadowedButton from '../../ShadowedButton';
-import { SocialIcon } from '../../SocialIcon';
-import { socialIcons } from '../../socialIcons';
-import FooterLink from '../FooterLink';
-import { pages } from '../pages';
+import GenerateLogo from '@/assets/images/landingpage-v2/footerlogo.svg';
+import FooterLink from '@/component/Footer/FooterLink';
+import { pages } from '@/component/Footer/pages';
+import ShadowedButton from '@/component/ShadowedButton';
+import { SocialIcon } from '@/component/SocialIcon';
+import { socialIcons } from '@/component/socialIcons';
 
 function VerticalFooter() {
   const currentPageUrl = window.location.href;

src/component/Footer/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import useWebsite from '../../shared/useWebsite';
+import useWebsite from '@/shared/useWebsite';
+
 import HorizontalFooter from './HorizontalFooter';
 import VerticalFooter from './VerticalFooter';
 

src/component/LandingPage/MemberInfoSession/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import PopupAd from '../PopupAd';
+import PopupAd from '@/component/LandingPage/PopupAd';
+
 import puzzle from './assets/gen-puzzle.svg';
 import './style.css';
 

src/component/NavBar/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import './style.css';
-import GenerateLogo from '../../assets/images/landingpage/affiliateorgintros/Generate Logo_Nav.png';
+import GenerateLogo from '@/assets/images/landingpage/affiliateorgintros/Generate Logo_Nav.png';
 
 const NavBar = () => {
   const currentUrl = window.location.href.split('/').at(-1);

src/component/NextPage/index.tsx

@@ -1,5 +1,5 @@
 import './style.css';
-import Arrow from '../../assets/images/nextpage/arrow.svg';
+import Arrow from '@/assets/images/nextpage/arrow.svg';
 
 type NextPageProps = {
   url: string;

src/component/ProjectsPage/AllProjects/AllProjects.tsx

@@ -1,13 +1,14 @@
 import './style.css';
 import { useState } from 'react';
 
-import Alia from '../../../assets/images/projectspage/alia.svg';
-import Arctic from '../../../assets/images/projectspage/arctic.svg';
-import AutoPasser from '../../../assets/images/projectspage/autopasser.svg';
-import HotDate from '../../../assets/images/projectspage/hotdate.svg';
-import Jurni from '../../../assets/images/projectspage/jurni.svg';
-import ShowNxt from '../../../assets/images/projectspage/shownxt.svg';
-import toPairs from '../../../shared/toPairs';
+import Alia from '@/assets/images/projectspage/alia.svg';
+import Arctic from '@/assets/images/projectspage/arctic.svg';
+import AutoPasser from '@/assets/images/projectspage/autopasser.svg';
+import HotDate from '@/assets/images/projectspage/hotdate.svg';
+import Jurni from '@/assets/images/projectspage/jurni.svg';
+import ShowNxt from '@/assets/images/projectspage/shownxt.svg';
+import toPairs from '@/shared/toPairs';
+
 import Project from './Project/Project';
 import type { ProjectTeam } from './Project/Project';
 

src/component/ProjectsPage/AllProjects/Project/Project.tsx

@@ -1,6 +1,6 @@
 import './style.css';
-import Hardware from '../../../../assets/images/projectspage/hardware.svg';
-import Software from '../../../../assets/images/projectspage/software.svg';
+import Hardware from '@/assets/images/projectspage/hardware.svg';
+import Software from '@/assets/images/projectspage/software.svg';
 
 export type ProjectTeam = 'hardware' | 'software';
 

src/component/ProjectsPage/FeaturedProjects/FeaturedProjects.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 
-import Arrow from '../../../assets/images/projectspage/arrowbutton.svg';
+import Arrow from '@/assets/images/projectspage/arrowbutton.svg';
+
 import './style.css';
-import Projects from '../../../data/featuredProjectData';
-import type { FeaturedProject } from '../../../data/featuredProjectData';
-import useWebsite from '../../../shared/useWebsite';
-import NavBar from '../../NavBar';
-import ShadowedButton from '../../ShadowedButton';
+import NavBar from '@/component/NavBar';
+import ShadowedButton from '@/component/ShadowedButton';
+import Projects from '@/data/featuredProjectData';
+import type { FeaturedProject } from '@/data/featuredProjectData';
+import useWebsite from '@/shared/useWebsite';
 
 type FeaturedProjectsViewProps = {
   handleProject: (dir: number) => void;

src/component/ProjectsPage/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import NewMobileContainer from '../../component/DesktopMobileHandler/NewMobileContainer';
-import useWebsite from '../../shared/useWebsite';
-import HorizontalDesktopContainer from '../DesktopMobileHandler/HorizontalDesktopContainer';
-import Footer from '../Footer';
-import NextPage from '../NextPage';
+import HorizontalDesktopContainer from '@/component/DesktopMobileHandler/HorizontalDesktopContainer';
+import NewMobileContainer from '@/component/DesktopMobileHandler/NewMobileContainer';
+import Footer from '@/component/Footer';
+import NextPage from '@/component/NextPage';
+import useWebsite from '@/shared/useWebsite';
+
 import AllProjects from './AllProjects/AllProjects';
 import FeaturedProjects from './FeaturedProjects/FeaturedProjects';
 

src/component/ShadowedButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ReactNode } from 'react';
 
 import './style.css';
-import { constants } from '../../assets/constants';
+import { constants } from '@/assets/constants';
 
 type ShadowedButtonProps = {
   text: ReactNode;

src/component/socialIcons.ts

@@ -1,10 +1,10 @@
-import FbIcon from '../assets/images/socialMediaIcons/Facebook.svg?react';
-import InstaIcon from '../assets/images/socialMediaIcons/Insta.svg?react';
-import LinkedInIcon from '../assets/images/socialMediaIcons/Linkedin.svg?react';
-import MosaicIcon from '../assets/images/socialMediaIcons/Mosaic.svg?react';
-import NortheasternIcon from '../assets/images/socialMediaIcons/Northeaster.svg?react';
-import Sherm from '../assets/images/socialMediaIcons/Sherm.svg?react';
-import YoutubeIcon from '../assets/images/socialMediaIcons/Youtube.svg?react';
+import FbIcon from '@/assets/images/socialMediaIcons/Facebook.svg?react';
+import InstaIcon from '@/assets/images/socialMediaIcons/Insta.svg?react';
+import LinkedInIcon from '@/assets/images/socialMediaIcons/Linkedin.svg?react';
+import MosaicIcon from '@/assets/images/socialMediaIcons/Mosaic.svg?react';
+import NortheasternIcon from '@/assets/images/socialMediaIcons/Northeaster.svg?react';
+import Sherm from '@/assets/images/socialMediaIcons/Sherm.svg?react';
+import YoutubeIcon from '@/assets/images/socialMediaIcons/Youtube.svg?react';
 
 export const socialIcons = [
   [

src/data/ApplyData/types.ts

@@ -1,4 +1,4 @@
-import type { Team } from '../teams';
+import type { Team } from '@/data/teams';
 
 export type ApplicationGroup = Team | 'clients';
 

src/data/featuredProjectData.ts

@@ -1,5 +1,5 @@
-import EarnzMockUp from '../assets/images/landingpage-v2/Earnz_Mock_Up.png';
-import SmartyPillMockup from '../assets/images/landingpage-v2/SmartyPill Mock Up.png';
+import EarnzMockUp from '@/assets/images/landingpage-v2/Earnz_Mock_Up.png';
+import SmartyPillMockup from '@/assets/images/landingpage-v2/SmartyPill Mock Up.png';
 
 export type FeaturedProject = {
   name: string;

src/data/teamPageDetails.ts

@@ -1,18 +1,19 @@
-import CommunityActiveIcon from '../assets/icons/teams/colored/Community.png';
-import HardwareActiveIcon from '../assets/icons/teams/colored/Hardware.png';
-import ManagementActiveIcon from '../assets/icons/teams/colored/Management.png';
-import OperationsActiveIcon from '../assets/icons/teams/colored/Operations.png';
-import SoftwareActiveIcon from '../assets/icons/teams/colored/Software.png';
-import CommunityInactiveIcon from '../assets/icons/teams/gray/Community.png';
-import HardwareInactiveIcon from '../assets/icons/teams/gray/Hardware.png';
-import ManagementInactiveIcon from '../assets/icons/teams/gray/Management.png';
-import OperationsInactiveIcon from '../assets/icons/teams/gray/Operations.png';
-import SoftwareInactiveIcon from '../assets/icons/teams/gray/Software.png';
-import ManagementLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH1.png';
-import OperationsLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH2.png';
-import SoftwareLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH3.png';
-import HardwareLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH4.png';
-import EngagementLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH5.png';
+import CommunityActiveIcon from '@/assets/icons/teams/colored/Community.png';
+import HardwareActiveIcon from '@/assets/icons/teams/colored/Hardware.png';
+import ManagementActiveIcon from '@/assets/icons/teams/colored/Management.png';
+import OperationsActiveIcon from '@/assets/icons/teams/colored/Operations.png';
+import SoftwareActiveIcon from '@/assets/icons/teams/colored/Software.png';
+import CommunityInactiveIcon from '@/assets/icons/teams/gray/Community.png';
+import HardwareInactiveIcon from '@/assets/icons/teams/gray/Hardware.png';
+import ManagementInactiveIcon from '@/assets/icons/teams/gray/Management.png';
+import OperationsInactiveIcon from '@/assets/icons/teams/gray/Operations.png';
+import SoftwareInactiveIcon from '@/assets/icons/teams/gray/Software.png';
+import ManagementLargePicture from '@/assets/images/TeamsPageImages/TeamsPagePH1.png';
+import OperationsLargePicture from '@/assets/images/TeamsPageImages/TeamsPagePH2.png';
+import SoftwareLargePicture from '@/assets/images/TeamsPageImages/TeamsPagePH3.png';
+import HardwareLargePicture from '@/assets/images/TeamsPageImages/TeamsPagePH4.png';
+import EngagementLargePicture from '@/assets/images/TeamsPageImages/TeamsPagePH5.png';
+
 import type { Team } from './teams';
 
 // yellow - "#FFBF3C"

src/pages/ApplyPageV2/RoleCategory/index.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 
 import './style.css';
-import type { ApplicationRole } from '../types';
+import type { ApplicationRole } from '@/pages/ApplyPageV2/types';
 
 type RoleCategoryProps = {
   roleCategory?: {