From a2eaf7e29006b04f4526b1ba5ecd8ae47aba08ea Mon Sep 17 00:00:00 2001
From: harvanchik <66141166+harvanchik@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:32:00 -0500
Subject: [PATCH] added links to types of blog posts (e.g., faith, family,
 food)

---
 src/routes/+layout.svelte |  2 +-
 src/routes/+page.svelte   | 84 +++++++++++++++++++++++++++++++++++----
 2 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index aa79a17..95a064f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -26,7 +26,7 @@
 	<!-- END: Navigation Bar -->
 	<div class="flex h-10 w-full bg-[#7b5e50] drop-shadow-lg">
 		<p class="mx-auto my-auto font-cormorant text-[1.37rem] italic text-[#faeee5]">
-			a feminine homemaker blogging on women's issues
+			embrace a journey of faith, wellness, and womanhood
 		</p>
 	</div>
 </header>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4bc1ba4..7e11cfe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,13 +1,83 @@
-<script>
-	// import Fa from 'svelte-fa/dist/fa.svelte';
-	// import { faPinterest } from '@fortawesome/free-brand-svg-icons/index.es';
-</script>
-
 <div
 	class="flex h-[50rem] bg-[url(https://images.unsplash.com/photo-1492052722242-2554d0e99e3a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)] bg-cover bg-bottom"
 >
-	<h1 class="text-shadow-lg my-auto ml-56 font-cormorant text-[6rem] font-semibold text-[#231a17]">
+	<h1 class="my-auto ml-56 font-cormorant text-[6rem] font-semibold text-[#231a17] text-shadow-lg">
 		Welcome!
 	</h1>
-	<!-- <Fa icon={faPinterest} /> -->
 </div>
+
+<section>
+	<div class="my-5 flex">
+		<ul
+			class="mx-auto flex w-max flex-row space-x-9 text-xl uppercase tracking-widest text-[#463530]"
+		>
+			<li class="transition-colors duration-500 ease-in-out hover:text-[#bf968a]">
+				<a href="#" rel="noopener noreferrer">All Posts</a>
+			</li>
+			<li class="transition-colors duration-500 ease-in-out hover:text-[#bf968a]">
+				<a href="#" rel="noopener noreferrer">Faith</a>
+			</li>
+			<li class="transition-colors duration-500 ease-in-out hover:text-[#bf968a]">
+				<a href="#" rel="noopener noreferrer">Family</a>
+			</li>
+			<li class="transition-colors duration-500 ease-in-out hover:text-[#bf968a]">
+				<a href="#" rel="noopener noreferrer">Homemaking</a>
+			</li>
+			<li class="transition-colors duration-500 ease-in-out hover:text-[#bf968a]">
+				<a href="#" rel="noopener noreferrer">Wellness</a>
+			</li>
+			<li class="transition-colors duration-500 ease-in-out hover:text-[#bf968a]">
+				<a href="#" rel="noopener noreferrer">Food</a>
+			</li>
+		</ul>
+	</div>
+</section>
+
+<section>
+	<div class=" bg-[#FAEEE5] py-20">
+		<h2 class="text-center font-cormorant text-5xl text-[#463530]">lately on my blog</h2>
+		<!-- Three blog style cards with image placeholder and blog title -->
+		<div class="mt-10 flex justify-center space-x-20">
+			<div class="h-80 w-80 rounded-xl bg-[#7b5e50] p-4 shadow-xl">
+				<img
+					src="https://images.unsplash.com/photo-1719530910477-182ceb10b681?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+					alt="blog image"
+					aria-hidden="true"
+					class="h-40 w-full object-cover"
+				/>
+				<h3 class="mt-4 text-center font-cormorant text-2xl text-[#faeee5]">
+					The Time I Au Paired in Spain
+				</h3>
+				<button class="mx-auto mt-4 block rounded bg-[#faeee5] px-4 py-2 text-[#7b5e50]"
+					>read my post</button
+				>
+			</div>
+			<div class="h-80 w-80 rounded-xl bg-[#7b5e50] p-4 shadow-xl">
+				<img
+					src="https://images.unsplash.com/photo-1719530910477-182ceb10b681?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+					alt="blog image"
+					aria-hidden="true"
+					class="h-40 w-full object-cover"
+				/>
+				<h3 class="mt-4 text-center font-cormorant text-2xl text-[#faeee5]">Yeah, I'm Crunchy</h3>
+				<button class="mx-auto mt-4 block rounded bg-[#faeee5] px-4 py-2 text-[#7b5e50]"
+					>read my post</button
+				>
+			</div>
+			<div class="h-80 w-80 rounded-xl bg-[#7b5e50] p-4 shadow-xl">
+				<img
+					src="https://images.unsplash.com/photo-1719530910477-182ceb10b681?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+					alt="blog image"
+					aria-hidden="true"
+					class="h-40 w-full object-cover"
+				/>
+				<h3 class="mt-4 text-center font-cormorant text-2xl text-[#faeee5]">
+					My Boyfriend is the Best
+				</h3>
+				<button class="mx-auto mt-4 block rounded bg-[#faeee5] px-4 py-2 text-[#7b5e50]"
+					>read my post</button
+				>
+			</div>
+		</div>
+	</div>
+</section>