fix images not showing

skillswap/src/components/header.jsx

 import { Link } from 'react-router-dom';
 import { Button } from './ui/button';
 
+import Logo from '../assets/logo.svg';
+
 export default function Header() {
   return (
     <header>
       <nav className='bg-violet-50 py-2 px-4 md:px-6 lg:px-10 flex items-center justify-between'>
         <Link to='/'>
-          <img
-            src='/src/assets/logo.svg'
-            className='h-16 w-auto'
-            alt='SkillSwap Logo'
-          />
+          <img src={Logo} className='h-16 w-auto' alt='SkillSwap Logo' />
         </Link>
 
         <div className='flex items-center gap-5'>

skillswap/src/components/login-form.jsx

@@ -4,6 +4,8 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
+import loginIllustration from '../assets/form-illustration.svg';
+
 export function LoginForm({ className, ...props }) {
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
@@ -90,7 +92,7 @@ export function LoginForm({ className, ...props }) {
           </form>
           <div className='relative hidden bg-violet-50 md:inline-flex md:items-center'>
             <img
-              src='/src/assets/form-illustration.svg'
+              src={loginIllustration}
               alt='Image'
               className='w-full dark:brightness-[0.2] dark:grayscale'
             />

skillswap/src/components/register-form.jsx

@@ -4,6 +4,8 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
+import registerIllustration from '../assets/register-illustration.svg';
+
 export function RegisterForm({ className, ...props }) {
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
@@ -102,7 +104,7 @@ export function RegisterForm({ className, ...props }) {
           </form>
           <div className='relative hidden bg-violet-50 md:inline-flex md:items-center'>
             <img
-              src='/src/assets/register-illustration.svg'
+              src={registerIllustration}
               alt='Image'
               className='w-full dark:brightness-[0.2] dark:grayscale'
             />

skillswap/src/pages/Landing.jsx

@@ -12,6 +12,11 @@ import {
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
+import Char1 from '../assets/char-1.avif';
+import Char2 from '../assets/char-2.avif';
+
+import heroIllustration from '../assets/hero-illustration.svg';
+
 const reviews = [
   {
     name: 'Shamma',
@@ -19,7 +24,7 @@ const reviews = [
     skill: 'Guitar',
     review:
       'Thanks to SkillSwap, I learned to play guitar while teaching photography. It is amazing how much you can grow by helping others!',
-    image: '/src/assets/char-1.avif',
+    image: Char1,
   },
   {
     name: 'Tim',
@@ -27,7 +32,7 @@ const reviews = [
     skill: 'Graphic Design',
     review:
       'Thanks to SkillSwap, I learned how to code while teaching graphic design. It is amazing how much you can grow by helping others!',
-    image: '/src/assets/char-2.avif',
+    image: Char2,
   },
 ];
 
@@ -67,7 +72,7 @@ export default function LandingPage() {
             </div>
             <div className='relative lg:order-last'>
               <img
-                src='/src/assets/hero-illustration.svg'
+                src={heroIllustration}
                 alt='Skills exchange illustration'
                 width={600}
                 height={600}