Minor homepage UI improvements (#388)

* fix(ui): improve badges layout

* fix(ui): improve spacing and hover effects for library cards

* fix(ui): enhance layout and spacing for better readability and visual appeal

* remove the first `hr` and reduce the margin on the library parent title

* remove 'new' for router

---------

Co-authored-by: Sean Cassiere <[email protected]>

Author: wazeerc

app/libraries/router.tsx

@@ -24,7 +24,7 @@ export const routerProject = {
   ogImage: 'https://github.com/tanstack/router/raw/main/media/header.png',
   bgStyle: 'bg-emerald-500',
   textStyle: textStyles,
-  badge: 'new',
+  badge: undefined,
   repo,
   latestBranch: 'main',
   latestVersion: 'v1',

app/routes/_libraries/index.tsx

@@ -139,18 +139,18 @@ function Index() {
             </p>
           </div>
         </div>
-        <div className="h-8" />
+        <div className="my-16" />
         <div className="w-fit mx-auto px-4">
           <OpenSourceStats />
         </div>
-        <div className="h-12" />
+        <div className="my-16" />
         <div className="px-4 lg:max-w-screen-lg md:mx-auto">
           <h3 className={`text-4xl font-light`}>Open Source Libraries</h3>
 
           {Object.entries(librariesByGroup).map(
             ([groupName, groupLibraries]: [string, Library[]]) => (
               <div key={groupName} className="mt-8">
-                <h4 className={`text-2xl font-medium capitalize mb-4`}>
+                <h4 className={`text-2xl font-medium capitalize mb-6`}>
                   {
                     librariesGroupNamesMap[
                       groupName as keyof typeof librariesGroupNamesMap
@@ -159,7 +159,7 @@ function Index() {
                 </h4>
                 {/* Library Cards */}
                 <div
-                  className={`grid grid-cols-1 gap-4 gap-y-8 justify-center
+                  className={`grid grid-cols-1 gap-6 gap-y-8 justify-center
                 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3`}
                 >
                   {groupLibraries.map((library, i: number) => {
@@ -169,7 +169,7 @@ function Index() {
                         to={library.to ?? '#'}
                         params
                         className={twMerge(
-                          `border-2 border-transparent rounded-xl shadow-md p-6 transition-all duration-200
+                          `border-2 border-transparent rounded-xl shadow-md p-8 transition-all duration-300
                           bg-white/90 dark:bg-black/40 backdrop-blur-sm
                           dark:border-gray-800/50`,
                           'hover:shadow-lg',
@@ -226,9 +226,9 @@ function Index() {
 
                         {/* Foreground content that appears on hover */}
                         <div
-                          className="absolute inset-0 z-10 bg-white/95 dark:bg-black/95 p-6 
-                          flex flex-col justify-center opacity-0 group-hover:opacity-100 
-                          transition-opacity duration-200"
+                          className="absolute inset-0 z-30 bg-white/95 dark:bg-black/95 p-6
+                          backdrop-blur-sm flex flex-col justify-center opacity-0 group-hover:opacity-100
+                          transition-opacity duration-300"
                         >
                           <div
                             className={`text-sm text-gray-800 dark:text-gray-200 leading-relaxed`}
@@ -264,16 +264,16 @@ function Index() {
                           >
                             <div
                               className={twMerge(
-                                `w-20 h-20 rounded-full translate-x-1/2 -translate-y-1/2`,
+                                `w-[100px] h-[100px] rounded-full translate-x-1/2 -translate-y-1/2`,
                                 library.bgStyle
                               )}
                             />
                             <span
                               className={twMerge(
-                                'inline-block transform rotate-45 uppercase text-white font-black italic animate-pulse absolute top-3 right-1',
+                                'inline-block transform rotate-45 uppercase text-white font-black italic animate-pulse text-xs',
                                 library.badge.length > 4
-                                  ? 'text-[10px]'
-                                  : 'text-xs'
+                                  ? 'absolute top-[16px] right-[-2px]'
+                                  : 'absolute top-[14px] right-[5px]'
                               )}
                             >
                               {library.badge}
@@ -288,9 +288,9 @@ function Index() {
             )
           )}
         </div>
-        <div className="h-12" />
+        <hr className="my-16 border-gray-200 dark:border-gray-500/10" />
         <div className="px-4 lg:max-w-screen-lg md:mx-auto">
-          <h3 className={`text-4xl font-light mb-4`}>Partners</h3>
+          <h3 className={`text-4xl font-light mb-6`}>Partners</h3>
           <div className={`grid grid-cols-1 gap-6 sm:grid-cols-2`}>
             {partners.map((partner) => {
               return (
@@ -301,20 +301,20 @@ function Index() {
                   className="bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 dark:bg-black/40 dark:shadow-none group overflow-hidden grid"
                   rel="noreferrer"
                 >
-                  <div className="z-0 row-start-1 col-start-1 flex items-center justify-center group-hover:blur-sm transition-all duration-200">
+                  <div className="z-0 row-start-1 col-start-1 flex items-center justify-center group-hover:blur-md transition-all duration-200 p-4">
                     {partner.homepageImg}
                   </div>
-                  <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
+                  <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/80">
                     {partner.content}
                   </div>
                 </a>
               )
             })}
           </div>
         </div>
-        <div className="h-20" />
+        <hr className="my-16 border-gray-200 dark:border-gray-500/10" />
         <div className={`lg:max-w-screen-lg px-4 mx-auto`}>
-          <h3 className={`text-4xl font-light`}>Courses</h3>
+          <h3 className={`text-4xl font-light mb-6`}>Courses</h3>
           <div className={`mt-4 grid grid-cols-1 gap-4`}>
             {courses.map((course) => (
               <a
@@ -346,24 +346,25 @@ function Index() {
             ))}
           </div>
         </div>
-        <div className="h-12" />
+        <hr className="my-16 border-gray-200 dark:border-gray-500/10" />
         <div className={`lg:max-w-screen-lg px-4 mx-auto`}>
           <h3 className={`text-4xl font-light`}>OSS Sponsors</h3>
-          <div className="h-4" />
+          <div className="h-6" />
           <div
             style={{
               aspectRatio: '1/1',
             }}
+            className="max-w-2xl mx-auto"
           >
             <Await
               promise={sponsorsPromise}
-              fallback={<CgSpinner className="text-2xl animate-spin" />}
+              fallback={<CgSpinner className="text-2xl animate-spin mx-auto" />}
               children={(sponsors) => {
                 return <SponsorPack sponsors={sponsors} />
               }}
             />
           </div>
-          <div className={`h-6`} />
+          <div className={`h-8`} />
           <div className={`text-center`}>
             <div>
               <a
@@ -384,29 +385,29 @@ function Index() {
             </p>
           </div>
         </div>
-        <div className="h-12" />
+        <hr className="my-16 border-gray-200 dark:border-gray-500/10" />
         <div className={`lg:max-[400px] px-4 mx-auto`}>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 items-center">
             <div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white max-w-[250px] mx-auto">
               <Carbon />
             </div>
             <span
               className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
-                dark:bg-opacity-20 self-center"
+                dark:bg-opacity-20 self-center text-center"
             >
               This ad helps us be happy about our invested time and not burn out
               and rage-quit OSS. Yay money! 😉
             </span>
           </div>
         </div>
-        <div className="h-12" />
+        <hr className="my-16 border-gray-200 dark:border-gray-500/10" />
         <div className="px-4 mx-auto max-w-screen-lg">
           <div
             className={`
           rounded-md p-4 grid gap-6
           bg-discord text-white overflow-hidden relative
           shadow-xl shadow-indigo-700/30
-          sm:p-8 sm:grid-cols-3`}
+          sm:p-8 sm:grid-cols-3 items-center`}
           >
             <div
               className={`absolute transform opacity-10 z-0