From b394489b3664591bf8a51e47be5fc97b47882f6e Mon Sep 17 00:00:00 2001
From: Nathan Young <yyou9481138@gmail.com>
Date: Sat, 3 Oct 2026 23:50:27 -0600
Subject: [PATCH] Finished styling services section on main page

---
 includes/main.php | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/includes/main.php b/includes/main.php
index f9d1bd0..ef16a34 100644
--- a/includes/main.php
+++ b/includes/main.php
@@ -98,7 +98,6 @@ function grid() {
       <div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
         <!-- Centered Header -->
         <div class='text-center max-w-3xl mx-auto mb-16' data-motion='header' style='opacity: 1;'>
-          <!-- <h1 class='text-indigo-400 text-l font-bold'>Balls</h1> -->
           <h2 class='text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6'>
             Services
           </h2>
@@ -160,10 +159,10 @@ function grid() {
 
           
           <!-- ROW 2 -->
-          <div data-motion='card' class='p-8 bg-fuchsia-700/40 rounded-3xl flex flex-col justify-between'>
-            <a href='https://navidrome.happylizard.me'>
+          <div data-motion='card' class='p-8 bg-fuchsia-800/80 dark:bg-fuchsia-700/40 rounded-3xl flex flex-col justify-between'>
+            <a href='https://gitea.happylizard.me'>
             <div>
-              <div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
+              <div data-motion='icon' class='w-25 h-20 rounded-xl flex items-center justify-center mb-6'>
                 <img src='assets/img/gitea.png'>
               </div>
               <h3 class='text-white text-xl font-semibold mb-3'>Gitea</h3>
@@ -214,23 +213,23 @@ function grid() {
             </a>
           </div>
 
-          <div data-motion='card' class='p-6 bg-white dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
+          <div data-motion='card' class='p-6 bg-neutral-300 dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
             <a href='https://convert.happylizard.me'>
-            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
+            <div data-motion='icon' class='w-20 h-20 flex items-center justify-center mb-5'>
               <img src='assets/img/portal_runner.png'>
             </div>
             <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Any-File converter</h3>
-            <p class='text-slate-600 dark:text-neutral-400 text-sm'>
+            <p class='text-black dark:text-neutral-400 text-sm'>
               A ffmpeg converter that attempts to take any file and convert it into another format SYNCRONOUSLY
             </p>
             </a>
-            <a data-motion='button' href='https://www.youtube.com/watch?v=btUbcsTbVA8' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
+            <a data-motion='button' href='https://www.youtube.com/watch?v=btUbcsTbVA8' class='inline-flex items-center gap-2 text-black dark:text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
               Youtube video explaining it
               <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                 <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8l4 4m0 0l-4 4m4-4H3'></path>
               </svg>
             </a>
-            <a data-motion='button' href='https://github.com/p2r3/convert' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
+            <a data-motion='button' href='https://github.com/p2r3/convert' class='inline-flex items-center gap-2 text-black dark:text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
               Github to project
               <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                 <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8l4 4m0 0l-4 4m4-4H3'></path>
@@ -238,7 +237,7 @@ function grid() {
             </a>
           </div>
 
-          <div data-motion='card' class='p-8 bg-blue-800/60 rounded-3xl flex flex-col justify-between'>
+          <div data-motion='card' class='p-8 bg-blue-800/80 rounded-3xl flex flex-col justify-between'>
             <a href='https://copyparty.happylizard.me'>
             <div>
               <div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>