Improve the styles

Author: hasparus

src/app/(main)/resources/blog-section.tsx

@@ -148,7 +148,7 @@ function BlogPostRow({
       </p>
 
       <div className="row-span-full pr-6 [grid-column:5] max-sm:hidden">
-        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400" />
+        <ArrowDownIcon className="size-8 -rotate-90 text-neu-400 group-hover:text-neu-800" />
       </div>
     </Link>
   )

src/app/(main)/resources/categories-section.tsx

@@ -25,42 +25,54 @@ const categories: Category[] = [
     name: "Frontend",
     description:
       "Build better queries and optimize UI performance with the right client tools.",
-    icon: <FrontendIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <FrontendIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "backend",
     name: "Backend",
     description:
       "From resolvers to execution — everything you need to run a GraphQL server in production.",
-    icon: <BackendIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <BackendIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "federation",
     name: "Federation",
     description:
       "Design and manage distributed graphs that scale across teams and services.",
-    icon: <FederationIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <FederationIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "security",
     name: "Security",
     description:
       "Secure your GraphQL API with query limits and schema protection.",
-    icon: <SecurityIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <SecurityIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "ai",
     name: "AI",
     description:
       "Use GraphQL to power AI systems — patterns, tools and implementations.",
-    icon: <AIIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <AIIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
   {
     id: "monitoring",
     name: "Monitoring",
     description:
       "Track performance, usage and schema changes to keep your graph healthy.",
-    icon: <MonitoringIcon className="size-12 text-pri-base dark:text-pri-light" />,
+    icon: (
+      <MonitoringIcon className="size-8 text-pri-base dark:text-pri-light lg:size-12" />
+    ),
   },
 ]
 
@@ -91,15 +103,15 @@ function CategoryCard({ category }: { category: Category }) {
   return (
     <Link
       href={`/resources/${category.id}`}
-      className="group flex h-[202px] flex-col justify-between border border-neu-200 bg-neu-0 p-6 transition-colors hover:bg-neu-50 hover:duration-0 dark:border-neu-100"
+      className="group flex flex-col justify-between gap-4 border border-neu-200 bg-neu-0 p-6 transition-colors hover:bg-neu-50 hover:duration-0 dark:border-neu-100 lg:h-[202px] lg:gap-6"
     >
       <div className="flex items-start justify-between">
         {category.icon}
         <ArrowDownIcon className="size-6 -rotate-90 text-neu-900 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover:duration-0 group-focus-visible:opacity-100" />
       </div>
       <div>
-        <h3 className="typography-h3 group-hover:hidden">{category.name}</h3>
-        <p className="typography-body-md hidden group-hover:block">
+        <h3 className="typography-h3 lg:group-hover:hidden">{category.name}</h3>
+        <p className="typography-body-md group-hover:block max-lg:mt-4 lg:hidden">
           {category.description}
         </p>
       </div>

src/app/(main)/resources/reading-resources-section.tsx

@@ -59,7 +59,7 @@ function ReadingLink({ href, icon, label }: ReadingLinkProps) {
   return (
     <Link
       href={href}
-      className="group typography-body-md flex items-center justify-between gap-6 border border-neu-200 bg-neu-0 p-6 hover:bg-neu-100 dark:border-neu-100 dark:bg-neu-0/50 [&>svg]:size-6"
+      className="group typography-body-md flex items-center justify-between gap-6 border border-neu-200 bg-neu-0 p-6 hover:ring hover:ring-neu-100 dark:border-neu-100 dark:bg-neu-0/50 dark:hover:ring-neu-50 [&>svg]:size-6"
     >
       {icon}
       {label}

src/app/(main)/resources/video-resources-section.tsx

@@ -8,7 +8,7 @@ export function VideoResourcesSection() {
       <Eyebrow>video resources library</Eyebrow>
 
       <div className="mt-8 flex flex-col items-start gap-8 lg:flex-row lg:justify-between">
-        <div className="flex shrink-0 items-center justify-center border border-neu-200 bg-neu-0 text-neu-400 dark:border-neu-100 dark:bg-neu-0/50 max-lg:size-16 max-lg:p-2 lg:order-1 lg:size-[294px]">
+        <div className="flex shrink-0 items-center justify-center border border-neu-200 bg-neu-0 text-neu-400 dark:border-neu-100 dark:bg-neu-0/50 max-lg:size-16 max-lg:p-2 max-md:hidden lg:order-1 lg:size-[294px]">
           <VideoPlayerIcon className="size-12 lg:size-36" />
         </div>