Revamp Blog Page UI for Improved User Experience

src/app/(app)/blog/[postSlug]/page.tsx → src/app/(app)/blogs/[postSlug]/page.tsx

@@ -74,7 +74,7 @@ export default async function PageComponent({ params }: PageParams) {
             })}
           </p>
           <div
-            className="pb-12 pt-8 prose max-w-3xl text-foreground dark:text-white" // Updated for dark mode
+            className="pb-12 pt-8 prose max-w-3xl text-foreground dark:text-white"
             dangerouslySetInnerHTML={{
               __html: post.content.html,
             }}

src/app/(app)/blogs/page.tsx

@@ -1,14 +1,10 @@
-import Blog from '@/app/(app)/blog/blogfinal';
 import Footer from '@/components/footer';
+import { Blog } from '@/components/blog';
 
 const Blogs = () => {
   return (
-    <div className="container mt-32 font-semibold flex flex-col items-center gap-20 justify-center  ">
-      <div className="text-6xl">Blogs</div>
-      <div className="text-3xl">
-        <Blog />
-        <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 dark:from-pink-500 to-orange-600 dark:to-amber-400"></span>
-      </div>
+    <div className="container mt-32 font-semibold flex flex-col items-center gap-20">
+      <Blog />
       <Footer />
     </div>
   );

src/app/(app)/components/[[...slug]]/page.tsx

@@ -1,6 +1,5 @@
 import { allDocuments } from 'contentlayer/generated';
 import { notFound } from 'next/navigation';
-
 import { ChevronRightIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import Balancer from 'react-wrap-balancer';

src/components/blog-grid.tsx

@@ -0,0 +1,59 @@
+import { Post } from '@/types/posts';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+import { Button } from './ui/button';
+
+interface BlogGridProps {
+  posts: Post[];
+}
+
+const BlogGrid = ({ posts }: BlogGridProps) => {
+  return (
+    <>
+      <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-8">
+        {posts?.slice(1)?.map((post) => (
+          <li
+            key={post.id}
+            className="bg-white rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:-translate-y-1 overflow-hidden"
+          >
+            <Link href={`/blogs/${post.slug}`} className="block">
+              <div className="relative">
+                <Image
+                  width={400}
+                  height={250}
+                  className="object-cover w-full h-48"
+                  src={post.coverImage.url}
+                  alt={post.title}
+                />
+                <div className="absolute top-2 left-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full p-2">
+                  <span className="text-lg">➔</span>
+                </div>
+              </div>
+              <div className="p-4">
+                <h3 className="text-xl font-semibold text-gray-800">
+                  {post.title}
+                </h3>
+                <p className="text-gray-500 mt-2 text-sm">
+                  {new Date(post.publishedAt).toLocaleDateString('en-us', {
+                    weekday: 'long',
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                  })}
+                </p>
+              </div>
+              <div className="p-4">
+                <Button className="py-2 px-4 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors">
+                  Read More
+                </Button>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default BlogGrid;

src/components/blog.tsx

@@ -0,0 +1,36 @@
+import { Post } from '@/types/posts';
+import { fetchBlogPosts } from '@/utils/hashnode';
+import Container from '@/components/Container';
+import FeaturedBlogPost from './featured-blog-post';
+import BlogGrid from './blog-grid';
+
+export async function Blog() {
+  const publication = await fetchBlogPosts();
+  if (!publication) {
+    throw new Error('Failed to fetch blog posts');
+  }
+
+  const posts: Array<Post> = publication.posts.edges.map(
+    ({ node }: { node: Post }) => node,
+  );
+  return (
+    <Container className="max-w-6xl mx-auto space-y-16">
+      <div className="text-center mt-16">
+        <h1 className="text-5xl font-bold mb-4">
+          Insights for Building Web Applications
+        </h1>
+        <p className="text-lg text-gray-500">
+          Dive deep into the latest trends, tips, and techniques for creating
+          powerful, user-focused web applications.
+        </p>
+      </div>
+      <FeaturedBlogPost
+        title={posts[0].title}
+        slug={posts[0].slug}
+        imageUrl={posts[0].coverImage.url}
+      />
+
+      <BlogGrid posts={posts} />
+    </Container>
+  );
+}

src/components/featured-blog-post.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from './ui/button';
+import Image from 'next/image';
+import { BlogParams } from '@/types/blog';
+import Link from 'next/link';
+
+const FeaturedBlogPost = ({ title, slug, imageUrl }: BlogParams) => {
+  return (
+    <div className="relative flex flex-col md:flex-row gap-8 items-center text-white rounded-lg p-8 shadow-lg overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 opacity-70 animate-liquid"></div>
+      <div className="w-full md:w-1/2 relative z-10 text-center md:text-left">
+        <h2 className="text-2xl font-semibold">{title}</h2>
+        <Link href={`/blogs/${slug}`}>
+          <Button className="mt-4 py-2 px-4 bg-white text-purple-600 font-semibold rounded-lg hover:bg-gray-100">
+            Read More
+          </Button>
+        </Link>
+      </div>
+      <Image
+        width={300}
+        height={200}
+        src={imageUrl}
+        alt="Featured Post Image"
+        className="rounded-lg relative z-10 w-full md:w-auto"
+      />
+    </div>
+  );
+};
+
+export default FeaturedBlogPost;

src/types/blog.ts

@@ -0,0 +1,5 @@
+export interface BlogParams {
+  title: string;
+  slug: string;
+  imageUrl: string;
+}