Finished styling services section on main page

This commit is contained in:
2026-10-03 23:50:27 -06:00
parent bfd0c93dbb
commit b394489b36
+9 -10
View File
@@ -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'>