fix missing images

apps/web/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "PORT=4200 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

apps/web/src/common/components/Footer/components/Banner/index.tsx

@@ -4,9 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { Stack } from '@mui/material'
 import Link from 'next/link'
 
-import bigLogo from '@web/assets/images/cgrLogoLight.svg'
-import github from '@web/assets/images/github.svg'
-import thincLogo from '@web/assets/images/thincLogo.svg'
 import { useConsentsStore } from '@web/store/consents'
 
 import {
@@ -26,20 +23,20 @@ export function Banner() {
   return (
     <BannerContainer spacing={[1, 3]}>
       <Link href="/">
-        <img src={bigLogo} width="172.75" height="56.31" alt="" />
+        <img src="/assets/images/cgrLogoLight.svg" width="172.75" height="56.31" alt="" />
       </Link>
 
       <ResponsiveStack>
         <Stack direction="row" alignItems="center" spacing={2}>
           <a href="https://www.facebook.com/ThailandIncubator" style={{ height: 35 }}>
-            <img src={thincLogo} width="78" height="32" alt="" />
+            <img src="/assets/images/thincLogo.svg" width="78" height="32" alt="" />
           </a>
           <BannerSubtitle>{t('university')}</BannerSubtitle>
         </Stack>
         <StyledDivider orientation={'vertical'} />
         <GithubLink href="https://github.com/thinc-org">
           <BannerSubtitle>{t('github')}</BannerSubtitle>
-          <img src={github} width="20" height="20" alt="" />
+          <img src="/assets/images/github.svg" width="20" height="20" alt="" />
         </GithubLink>
       </ResponsiveStack>
       <Stack gap={2} direction="row">

apps/web/src/common/components/TopBar/components/MobileNavBar/index.tsx

@@ -7,7 +7,6 @@ import { default as MaterialLink } from '@mui/material/Link'
 import { observer } from 'mobx-react'
 import { useRouter } from 'next/router'
 
-import cgrLogoDark from '@web/assets/images/cgrLogoDark.svg'
 import { Analytics } from '@web/common/context/Analytics/components/Analytics'
 import { LinkWithAnalytics } from '@web/common/context/Analytics/components/LinkWithAnalytics'
 import {
@@ -44,7 +43,7 @@ export const MobileNavBar = observer(() => {
       </MoreButton>
       <Drawer anchor="right" open={isOpen} onClose={onClose}>
         <DrawerContent>
-          <Logo src={cgrLogoDark} alt={t('translation:appName')} />
+          <Logo src="/assets/images/cgrLogoDark.svg" alt={t('translation:appName')} />
           <div style={{ marginTop: '2rem' }}>
             <LinkWithAnalytics
               href={buildLink(`/courses`)}

apps/web/src/common/components/TopBar/components/NavBar/index.tsx

@@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next'
 
 import { useMediaQuery, useTheme } from '@mui/material'
 
-import cgrLogoDark from '@web/assets/images/cgrLogoDark.svg'
 import { Analytics } from '@web/common/context/Analytics/components/Analytics'
 import { LinkWithAnalytics } from '@web/common/context/Analytics/components/LinkWithAnalytics'
 import {
@@ -53,7 +52,7 @@ export function NavBar() {
       <FlexContainer>
         <LinkWithAnalytics href={buildLink(`/courses`)} passHref elementName={GETREG_LOGO}>
           <Logo>
-            <img src={cgrLogoDark} alt={t('translation:appName')} />
+            <img src="/assets/images/cgrLogoDark.svg" alt={t('translation:appName')} />
           </Logo>
         </LinkWithAnalytics>
         {isLargeScreen ? (