Merge #83: Components and Images folders

ac9407e move appropriate components into components folder in lib. Add images folder to static folder and replace links in image src (grmbyrn)

Pull request description:

  ## Changes Made:

  Moved relevant components from the `routes` folder to a new `components` folder within the `lib` directory for better organisation.

  Created an `images` folder in the `static` directory and updated references to images in the code to use relative paths instead of hardcoding image addresses in the `src`.

  ## Details:

  ### 1. Component Organization:
  Before: Components were scattered across the `routes` folder.
  After: Components are now organized in a dedicated `components` folder within the lib directory.
  ### 2. Image Handling:
  Before: Image addresses were hardcoded in the `src` attribute, making it less maintainable.
  After: Images are now stored in the `static/images` folder, and references have been updated to use relative paths, improving maintainability and allowing for easier changes.

  ## Additional Notes
  The changes aim to enhance project structure, making it more modular and maintainable.
  Please review the updated code to ensure there are no regressions or issues.

ACKs for top commit:
  josecelano:
    ACK ac9407e

Tree-SHA512: e1c197da4fa6d9da14c96cd80e8b5737edd6c9ea814871b0ea43d81da6dedea46b3965d514abe4bc410cd5cb3707dc6c5fbb250d97feb5a2dea59257e1b9a4bb

src/routes/contact.svelte → src/lib/components/Contact.svelte

@@ -11,10 +11,7 @@
 		</p>
 	</div>
 	<div class="contact-img">
-		<img
-			src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
-			alt=""
-		/>
+		<img src="/images/dylan-gillis-KdeqA3aTnBY-unsplash.jpg" alt="" />
 	</div>
 </div>
 

src/routes/contribute.svelte → src/lib/components/Contribute.svelte

@@ -28,7 +28,7 @@
 		</div>
 		<div class="contribute-image">
 			<img
-				src="https://images.unsplash.com/photo-1531537571171-a707bf2683da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
+				src="/images/mimi-thian-lp1AKIUV3yo-unsplash.jpg"
 				alt="person listening to another person"
 			/>
 		</div>

src/routes/header.svelte → src/lib/components/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as config from '$lib/config';
-	import Toggle from './toggle.svelte';
+	import Toggle from '$lib/components/Toggle.svelte';
 </script>
 
 <nav>

src/routes/+layout.svelte

@@ -2,8 +2,8 @@
 	import 'open-props/style';
 	import 'open-props/normalize';
 	import 'open-props/buttons';
-	import Header from './header.svelte';
-	import Footer from './footer.svelte';
+	import Header from '$lib/components/Header.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 	import '../app.css';
 </script>
 

src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import * as config from '$lib/config';
 	export let data;
-	import Hero from './hero.svelte';
-	import Contribute from './contribute.svelte';
-	import Contact from './contact.svelte';
+	import Hero from '$lib/components/Hero.svelte';
+	import Contribute from '$lib/components/Contribute.svelte';
+	import Contact from '$lib/components/Contact.svelte';
 </script>
 
 <svelte:head>
@@ -16,12 +16,12 @@
 	<section class="articles-section">
 		<div class="articles-image">
 			<img
-				src="https://images.unsplash.com/photo-1543269865-cbf427effbad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
+				src="/images/brooke-cagle--uHVRvDr7pg-unsplash.jpg"
 				class="top-img"
 				alt="group of people talking"
 			/>
 			<img
-				src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
+				src="/images/annie-spratt-QckxruozjRg-unsplash.jpg"
 				class="btm-img"
 				alt="group of people talking with laptops"
 			/>