From 4f340d43e925a51d17be6858942da236530afd86 Mon Sep 17 00:00:00 2001
From: jakebogan01 <jakebogan01@gmail.com>
Date: Mon, 13 May 2024 17:35:33 -0400
Subject: [PATCH] adds a completed user profile section and fixes newsletter
 styles

---
 .../molecules/NewsletterForm.svelte           |  14 +-
 .../organisms/CompletedUserProfiles.svelte    | 133 ++++++++++++++++++
 .../components/organisms/Newsletter.svelte    |   8 +-
 src/lib/scss/_themes.scss                     |   2 +
 src/routes/(waves)/+page.svelte               |   2 +
 5 files changed, 152 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/organisms/CompletedUserProfiles.svelte

diff --git a/src/lib/components/molecules/NewsletterForm.svelte b/src/lib/components/molecules/NewsletterForm.svelte
index 5b4aad0..bcdf25d 100644
--- a/src/lib/components/molecules/NewsletterForm.svelte
+++ b/src/lib/components/molecules/NewsletterForm.svelte
@@ -90,19 +90,26 @@
 			background-color: #ffffff;
 			color: rgb(17 24 39 / 1);
 			padding: 0.5rem 0.875rem;
-			box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+			//box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+      box-shadow: -4px 4px 2px rgba(0, 0, 0, 0.3);
 			border-width: 0;
 			border-radius: 0.375rem;
 			flex: 1 1 auto;
 			min-width: 0;
 			appearance: none;
 			margin: 0;
+			transition: box-shadow 0.15s ease-in-out;
+
+			&:hover {
+        box-shadow: 0 0 0 rgb(207 160 14);
+			}
 		}
 
 		button {
 			display: flex;
 			justify-content: center;
-			box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+			//box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+      box-shadow: -4px 4px 2px rgba(0, 0, 0, 0.3);
 			color: var(--color--secondary);
 			font-weight: 600;
 			font-size: 0.875rem;
@@ -117,7 +124,7 @@
 			margin: 0;
 			outline: none;
 			border: none;
-			transition: color 0.2s, background-color 0.2s;
+			transition: color 0.2s, background-color 0.2s, box-shadow 0.15s ease-in-out;
 
 			@include for-tablet-portrait-down {
 				margin-top: 1rem;
@@ -126,6 +133,7 @@
 			&:hover {
 				background-color: var(--color--secondary);
 				color: #ffffff;
+        box-shadow: 0 0 0 rgb(207 160 14);
 			}
 
 			svg {
diff --git a/src/lib/components/organisms/CompletedUserProfiles.svelte b/src/lib/components/organisms/CompletedUserProfiles.svelte
new file mode 100644
index 0000000..96c2278
--- /dev/null
+++ b/src/lib/components/organisms/CompletedUserProfiles.svelte
@@ -0,0 +1,133 @@
+<section id="completeduserprofiles">
+	<div class="profile-wrapper">
+		<div class="profile-header">
+			<h2>Recent Completed Profiles</h2>
+		</div>
+		<ul role="list">
+			<!--
+			loop through recent completed users profiles api,
+			limit by 6 or by 3,
+			sort by most recent.
+			Feel free to add a link to the user profile page.
+			-->
+			{#each Array(6) as _, i}
+				<li>
+					<!--the online status needs to be dynamic, remove if not planning to use-->
+					<div class="online-status" style={i % 2 === 0 ? 'background-color: #59FE59' : 'background-color: var(--color--secondary)'}></div>
+					<img src="https://avatars.githubusercontent.com/u/3280475?v=4" alt="User">
+					<h3>Leonard Krasner</h3>
+					<p>Speaks: <span style="color: #ffffff">French</span></p>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</section>
+
+<style lang="scss">
+  @import '$lib/scss/breakpoints.scss';
+
+	#completeduserprofiles {
+		background-color: var(--color--text-inverse);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+		padding: 35px 0;
+		border-radius: 10px;
+
+		@media (min-width: 640px) {
+      padding: 25px 0;
+		}
+
+		.profile-wrapper {
+			margin: auto;
+      max-width: 1280px;
+      padding-left: 24px;
+      padding-right: 24px;
+			text-align: center;
+
+			@media (min-width: 1024px) {
+        padding-left: 32px;
+        padding-right: 32px;
+			}
+
+			.profile-header {
+        margin: auto;
+        max-width: 672px;
+
+				h2 {
+          font-size: 30px;
+          line-height: 36px;
+					font-weight: bold;
+          letter-spacing: -0.025em;
+					color: #ffffff;
+
+          @media (min-width: 640px) {
+            font-size: 36px;
+            line-height: 40px;
+					}
+				}
+			}
+
+			ul {
+				display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        gap: 24px;
+        max-width: 672px;
+        margin: 80px auto 0 auto;
+
+        @media (min-width: 640px) {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+				}
+
+        @media (min-width: 1024px) {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+          gap: 32px;
+					margin: 80px 0 0 0;
+          max-width: none;
+				}
+
+				li {
+          position: relative;
+					list-style: none;
+					background-color: var(--color--profile-card-color);
+          border-radius: 16px;
+          padding: 40px 32px;
+
+					.online-status {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            width: 20px;
+            height: 20px;
+            border-radius: 9999px;
+					}
+
+					img {
+						margin: auto;
+            height: 192px;
+            width: 192px;
+            border-radius: 9999px;
+
+            @media (min-width: 768px) {
+              height: 224px;
+              width: 224px;
+						}
+					}
+
+					h3 {
+            margin-top: 24px;
+            font-size: 16px;
+						font-weight: bold;
+            line-height: 28px;
+            letter-spacing: -0.025em;
+						color: #ffffff;
+					}
+
+					p {
+            font-size: 14px;
+            line-height: 24px;
+						color: var(--color--secondary);
+					}
+        }
+      }
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/organisms/Newsletter.svelte b/src/lib/components/organisms/Newsletter.svelte
index f835016..8290989 100644
--- a/src/lib/components/organisms/Newsletter.svelte
+++ b/src/lib/components/organisms/Newsletter.svelte
@@ -50,15 +50,15 @@
 				font-weight: 300;
 				text-align: center;
 				max-width: 38rem;
-				margin: 0.5rem auto 2.5rem auto;
+				margin: 0.5rem auto 3rem auto;
 			}
 
 			svg {
-				width: 64rem;
+				width: 76rem;
 				z-index: -10;
 				position: absolute;
-				min-width: 64rem;
-				top: 61%;
+				min-width: 76rem;
+				top: 48%;
 				left: 50%;
 				display: block;
 				transform: translateX(-50%);
diff --git a/src/lib/scss/_themes.scss b/src/lib/scss/_themes.scss
index 8db8a43..1292c7a 100644
--- a/src/lib/scss/_themes.scss
+++ b/src/lib/scss/_themes.scss
@@ -15,6 +15,7 @@
 	@include define-color('text-shade', #5d5f65);
 	@include define-color('text-inverse', #ffffff);
 	@include define-color('text-inverse-shade', #9eb4b5);
+	@include define-color('profile-card-color', #ffc409);
 
 	@include define-color('page-background', #f4f8fb);
 	@include define-color('post-page-background', #f3fbfc);
@@ -59,6 +60,7 @@
 	@include define-color('text-shade', #9eb4b5);
 	@include define-color('text-inverse', #000000);
 	@include define-color('text-inverse-shade', #5d5f65);
+	@include define-color('profile-card-color', #32343e);
 
 	@include define-color('page-background', #1c1e26);
 	@include define-color('post-page-background', #141519);
diff --git a/src/routes/(waves)/+page.svelte b/src/routes/(waves)/+page.svelte
index abad3cb..81293d4 100644
--- a/src/routes/(waves)/+page.svelte
+++ b/src/routes/(waves)/+page.svelte
@@ -5,6 +5,7 @@
 	import RecentPosts from '$lib/components/organisms/RecentPosts.svelte';
 	import Faq from '$lib/components/organisms/FAQ.svelte';
 	import CSponsors from '$lib/components/organisms/CSponsors.svelte';
+	// import CompletedUserProfiles from '$lib/components/organisms/CompletedUserProfiles.svelte';
 	import BCSponsors from '$lib/components/organisms/BCSponsors.svelte';
 	import Testimonials from '$lib/components/organisms/Testimonials.svelte';
 	import Newsletter from '$lib/components/organisms/Newsletter.svelte';
@@ -24,6 +25,7 @@
 	<Testimonials />
 	<CSponsors />
 	<Features {features} />
+<!--	<CompletedUserProfiles />-->
 	{#if posts && posts.length > 0}
 		<RecentPosts {posts} />
 	{/if}