fix(config, dependencies, pages, components): update next.config for supabase, upgrade dependencies, enhance layout in blog and trending pages, and improve navbar styling

Author: tyronejosee

next.config.ts

@@ -13,6 +13,11 @@ const nextConfig: NextConfig = {
         hostname: "lh3.googleusercontent.com",
         pathname: "/**",
       },
+      {
+        protocol: "https",
+        hostname: "aqdmihqntpulvkgwrmwb.supabase.co",
+        pathname: "/**",
+      },
     ],
   },
 };

package.json

@@ -16,23 +16,25 @@
     "@react-spring/web": "9.7.5",
     "@supabase/ssr": "^0.6.1",
     "@supabase/supabase-js": "^2.49.4",
-    "framer-motion": "^12.6.3",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.10.5",
     "lucide-react": "0.475.0",
     "next": "15.2.5",
     "next-themes": "^0.4.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.56.1",
-    "zod": "^3.24.3",
+    "react-hook-form": "^7.56.3",
+    "react-intersection-observer": "^9.16.0",
+    "zod": "^3.24.4",
     "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@types/node": "^20",
-    "@types/react": "^19",
+    "@eslint/eslintrc": "^3.3.1",
+    "@types/node": "^20.17.46",
+    "@types/react": "^19.1.3",
     "@types/react-dom": "^19",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9",
+    "eslint": "^9.26.0",
     "eslint-config-next": "15.2.5",
     "postcss": "^8.5.3",
     "tailwindcss": "3.4.17",

src/app/(public)/blog/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 export default function BlogPage() {
   return (
-    <main className="max-w-screen-xl mx-auto p-4">
+    <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading title="Blog" subtitle="Articles and posts" />
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tenetur

src/app/(public)/trending/page.tsx

@@ -15,7 +15,7 @@ export default async function TrendingPage() {
   if (resources.length === 0) return <div>No resources found</div>;
 
   return (
-    <main className="max-w-screen-xl mx-auto p-4">
+    <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading
         title="Trending"
         subtitle="Trending resources among developers"

src/components/layout/navbar.tsx

@@ -13,7 +13,7 @@ export default function Navbar() {
   const { user } = useAuthUser();
 
   return (
-    <nav className="sticky top-0 z-20 flex items-center justify-between gap-2 px-4 py-4 bg-white dark:bg-neutral-950">
+    <nav className="sticky top-0 z-20 flex items-center justify-between gap-2 px-4 py-4 bg-white dark:bg-neutral-950 border-b-2 border-neutral-200 dark:border-neutral-800">
       <div className="flex items-center gap-4">
         <Button
           isIconOnly

src/components/ui/heading.tsx

@@ -13,10 +13,10 @@ export default function Heading({
 
   return (
     <header className="flex flex-col gap-2">
-      <HeadingTag className="text-3xl md:text-4xl font-bold text-neutral-950 dark:text-white">
+      <HeadingTag className="text-3xl md:text-4xl font-bold tracking-tight text-neutral-950 dark:text-white">
         {title}
       </HeadingTag>
-      <p className="text-neutral-500">{subtitle}</p>
+      <p className="text-neutral-500 font-medium">{subtitle}</p>
     </header>
   );
 }