From 3bc31af3c0eb78063194046755d75f80560601e1 Mon Sep 17 00:00:00 2001
From: Space <space@reversed.dev>
Date: Thu, 23 Jan 2025 20:44:55 +0100
Subject: [PATCH] Refactor styles in Index component for consistency and
 improved readability

---
 app/routes/_index.tsx | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index f960077..c16ec80 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -72,7 +72,7 @@ export default function Index() {
 					<div className="flex items-center justify-center gap-3 mb-3">
 						<h1 className="text-6xl font-bold text-gray-100">Paul W.</h1>
 					</div>
-					<span className="px-3 py-1.5 text-base bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100 rounded-full">
+					<span className="px-3 py-1.5 text-base  bg-blue-900 text-blue-100 rounded-full">
 						Developer & Gamer
 					</span>
 					<p className="text-xl text-gray-300 mt-4">Woah, thats me😲</p>
@@ -84,7 +84,7 @@ export default function Index() {
 						About Me
 					</h2>
 					<div
-						className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg
+						className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
               flex flex-col md:flex-row gap-8 items-center"
 					>
 						<div className="flex-1 space-y-6">
@@ -135,14 +135,14 @@ export default function Index() {
 						Blog Posts
 					</h2>
 					<div
-						className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg
+						className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
               flex flex-col md:flex-row gap-8 items-center"
 					>
 						<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
 							{posts.map((post) => (
 								<article
 									key={post.id}
-									className="p-6 rounded-xl border dark:border-gray-700 bg-white dark:bg-gray-800 
+									className="p-6 rounded-xl border border-gray-700 bg-gray-800 
                   transform transition-all duration-300 hover:scale-105 hover:shadow-xl
                   backdrop-blur-sm hover:bg-opacity-90"
 								>
@@ -155,16 +155,16 @@ export default function Index() {
 										{post.tags.map((tag) => (
 											<span
 												key={tag}
-												className="px-3 py-1 text-sm bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 rounded-full"
+												className="px-3 py-1 text-sm   bg-gray-900 text-gray-100 rounded-full"
 											>
 												{tag}
 											</span>
 										))}
 									</div>
-									<h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-gray-100">
+									<h3 className="text-xl font-bold mb-3 text-gray-100">
 										{post.title}
 									</h3>
-									<p className="text-gray-600 dark:text-gray-400 text-base mb-4">
+									<p className=" text-gray-400 text-base mb-4">
 										{post.excerpt}
 									</p>
 									<Link
@@ -200,7 +200,7 @@ export default function Index() {
 						My Dawg
 					</h2>
 					<div
-						className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg
+						className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
             flex flex-col md:flex-row gap-8 items-center"
 					>
 						<div className="flex-1 space-y-6">
@@ -249,7 +249,7 @@ export default function Index() {
 						{projects.map((project, index) => (
 							<div
 								key={index}
-								className="p-6 rounded-xl border dark:border-gray-700 bg-white dark:bg-gray-800 
+								className="p-6 rounded-xl border border-gray-700 bg-gray-800 
               transform transition-all duration-300 hover:scale-105 hover:shadow-xl
               backdrop-blur-sm hover:bg-opacity-90"
 							>
@@ -264,10 +264,10 @@ export default function Index() {
 										/>
 									</div>
 								)}
-								<h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-gray-100">
+								<h3 className="text-xl font-bold mb-3  text-gray-100">
 									{project.name}
 								</h3>
-								<p className="text-gray-600 dark:text-gray-400 text-base mb-4">
+								<p className=" text-gray-400 text-base mb-4">
 									{project.description}
 								</p>
 								<div className="flex flex-col sm:flex-row gap-3 justify-center">
@@ -287,9 +287,9 @@ export default function Index() {
 										<a
 											href={project.open_source.link}
 											target="_blank"
-											className="px-6 py-2 border border-gray-300 dark:border-gray-600 
+											className="px-6 py-2 border  border-gray-600 
                   rounded-full font-medium transition-all duration-300 
-                  hover:bg-gray-100 dark:hover:bg-gray-700"
+                   hover:bg-gray-700"
 										>
 											View Source
 										</a>
@@ -306,7 +306,7 @@ export default function Index() {
 						Contact
 					</h2>
 					<div
-						className="p-6 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg 
+						className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg 
               transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
 					>
 						<p className="text-gray-300 text-lg text-center">
@@ -344,7 +344,7 @@ export default function Index() {
 						Skills? Whats that? Never heard of it🤔
 					</p>
 					<div
-						className="p-6 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg 
+						className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg 
               hover:shadow-xl"
 					>
 						<ul className="space-y-4 text-center">
@@ -375,7 +375,7 @@ export default function Index() {
 						What's Next?
 					</h2>
 					<div
-						className="p-6 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg 
+						className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg 
               transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
 					>
 						<ul className="space-y-4 text-center">