From 98071855679991b5ef7ff20f2aa64668c0f4010e Mon Sep 17 00:00:00 2001
From: ahaapple <work@ahaapple.com>
Date: Tue, 5 Nov 2024 21:37:08 +0800
Subject: [PATCH] Update blog page UI with pagegen ai

---
 .../app/[locale]/(marketing)/blog/page.tsx    |  2 +-
 frontend/components/blog-posts.tsx            | 52 -----------------
 frontend/components/blog/blog-card.tsx        | 52 +++++++++++++++++
 frontend/components/blog/blog-posts.tsx       | 30 ++++++++++
 frontend/components/blog/latest-blog-card.tsx | 57 +++++++++++++++++++
 frontend/components/blog/random-image.ts      | 13 +++++
 6 files changed, 153 insertions(+), 53 deletions(-)
 delete mode 100644 frontend/components/blog-posts.tsx
 create mode 100644 frontend/components/blog/blog-card.tsx
 create mode 100644 frontend/components/blog/blog-posts.tsx
 create mode 100644 frontend/components/blog/latest-blog-card.tsx
 create mode 100644 frontend/components/blog/random-image.ts

diff --git a/frontend/app/[locale]/(marketing)/blog/page.tsx b/frontend/app/[locale]/(marketing)/blog/page.tsx
index 2aee3b4a..86d5362b 100644
--- a/frontend/app/[locale]/(marketing)/blog/page.tsx
+++ b/frontend/app/[locale]/(marketing)/blog/page.tsx
@@ -1,7 +1,7 @@
 import { allPosts } from 'contentlayer/generated';
 import { compareDesc } from 'date-fns';
 
-import { BlogPosts } from '@/components/blog-posts';
+import { BlogPosts } from '@/components/blog/blog-posts';
 import { siteConfig } from '@/config';
 import { unstable_setRequestLocale } from 'next-intl/server';
 import { type Locale } from '@/i18n/routing';
diff --git a/frontend/components/blog-posts.tsx b/frontend/components/blog-posts.tsx
deleted file mode 100644
index 9b50f9a9..00000000
--- a/frontend/components/blog-posts.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { formatDate } from '@/lib/utils';
-import Image from 'next/image';
-import Link from 'next/link';
-
-export function BlogPosts({ posts }) {
-    return (
-        <div className="container space-y-10 py-6 md:py-10">
-            <section>
-                <h2 className="mb-4 font-heading text-3xl">Last Post</h2>
-                <article className="relative grid grid-cols-1 gap-6 md:grid-cols-2">
-                    <div>
-                        {posts[0].image && (
-                            <Image
-                                alt={posts[0].title}
-                                className="w-full rounded-lg border object-cover object-center md:h-64 lg:h-72"
-                                height={452}
-                                src={posts[0].image}
-                                width={804}
-                            />
-                        )}
-                    </div>
-                    <div className="flex flex-col justify-center">
-                        <h3 className="mb-2 text-balance font-heading text-2xl md:text-4xl">{posts[0].title}</h3>
-                        {posts[0].description && <p className="text-balance text-muted-foreground md:text-lg">{posts[0].description}</p>}
-                        <Link href={posts[0].slug} prefetch={false} className="absolute inset-0">
-                            <span className="sr-only">View Article</span>
-                        </Link>
-                    </div>
-                </article>
-            </section>
-
-            <section>
-                <h2 className="mb-4 font-heading text-3xl">Blog Posts</h2>
-                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                    {posts.slice(1).map((post) => (
-                        <article key={post._id} className="group relative flex flex-col space-y-2">
-                            {post.image && (
-                                <Image alt={post.title} src={post.image} width={804} height={452} className="rounded-md border bg-muted transition-colors" />
-                            )}
-                            <h2 className="line-clamp-1 font-heading text-2xl">{post.title}</h2>
-                            {post.description && <p className="line-clamp-1 text-muted-foreground">{post.description}</p>}
-                            {post.date && <p className="text-sm text-muted-foreground">{formatDate(post.date)}</p>}
-                            <Link href={post.slug} prefetch={false} className="absolute inset-0">
-                                <span className="sr-only">View Article</span>
-                            </Link>
-                        </article>
-                    ))}
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/frontend/components/blog/blog-card.tsx b/frontend/components/blog/blog-card.tsx
new file mode 100644
index 00000000..47308130
--- /dev/null
+++ b/frontend/components/blog/blog-card.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Calendar, Clock } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import Link from 'next/link';
+import { getRandomImage } from '@/components/blog/random-image';
+
+interface BlogCardProps {
+    href: string;
+    title: string;
+    description: string;
+    date: string;
+    readTime?: string;
+}
+
+export default function BlogCard({ href, title, description, date, readTime = '5 min read' }: BlogCardProps) {
+    return (
+        <Link href={href} className="block size-full max-w-sm mx-auto">
+            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="h-full">
+                <Card className="overflow-hidden bg-white dark:bg-gray-800 hover:shadow-xl transition-all duration-300 group h-full flex flex-col">
+                    <div className="relative h-48 overflow-hidden">
+                        <img
+                            src={getRandomImage()}
+                            alt={title}
+                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                        />
+                    </div>
+
+                    <CardContent className="p-6 flex flex-col flex-grow">
+                        <h2 className="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-100 transition-transform duration-300 group-hover:translate-x-2">
+                            {title}
+                        </h2>
+
+                        <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3  flex-grow">{description}</p>
+
+                        <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400 mt-auto">
+                            <div className="flex items-center">
+                                <Calendar className="w-4 h-4 mr-2" />
+                                <span>{date}</span>
+                            </div>
+                            <div className="flex items-center">
+                                <Clock className="w-4 h-4 mr-2" />
+                                <span>{readTime}</span>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </motion.div>
+        </Link>
+    );
+}
diff --git a/frontend/components/blog/blog-posts.tsx b/frontend/components/blog/blog-posts.tsx
new file mode 100644
index 00000000..b5117f0d
--- /dev/null
+++ b/frontend/components/blog/blog-posts.tsx
@@ -0,0 +1,30 @@
+import BlogCard from '@/components/blog/blog-card';
+import LatestBlogCard from '@/components/blog/latest-blog-card';
+import { formatDate } from '@/lib/utils';
+
+export function BlogPosts({ posts }) {
+    const latestPost = posts[0];
+    return (
+        <div className="container space-y-10 py-6 md:py-10">
+            <section>
+                <h2 className="mb-4 font-bold text-2xl">Latest Post</h2>
+                <LatestBlogCard
+                    key={latestPost._id}
+                    title={latestPost.title}
+                    description={latestPost.description}
+                    date={formatDate(latestPost.date)}
+                    href={latestPost.slug}
+                />
+            </section>
+
+            <section>
+                <h2 className="mb-4 font-bold text-2xl">Blog Posts</h2>
+                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                    {posts.slice(1).map((post) => (
+                        <BlogCard key={post._id} title={post.title} description={post.description} date={formatDate(post.date)} href={post.slug} />
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+}
diff --git a/frontend/components/blog/latest-blog-card.tsx b/frontend/components/blog/latest-blog-card.tsx
new file mode 100644
index 00000000..fe1aa8cd
--- /dev/null
+++ b/frontend/components/blog/latest-blog-card.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Calendar, Clock } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import Link from 'next/link';
+import { getRandomImage } from '@/components/blog/random-image';
+
+interface LastBlogCardProps {
+    href: string;
+    title: string;
+    description: string;
+    date: string;
+    readTime?: string;
+}
+
+export default function LatestBlogCard({ href, title, description, date, readTime = '8 min read' }: LastBlogCardProps) {
+    return (
+        <Link href={href} className="block w-full">
+            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
+                <Card className="overflow-hidden bg-white dark:bg-gray-800 hover:shadow-xl transition-all duration-300 group">
+                    <CardContent className="p-0">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="relative h-64 md:h-full overflow-hidden">
+                                <img
+                                    src={getRandomImage()}
+                                    alt={title}
+                                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                                />
+                            </div>
+
+                            <div className="p-6 flex flex-col justify-between h-full">
+                                <div className="py-10">
+                                    <h2 className="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100 transition-transform duration-300 group-hover:translate-x-2">
+                                        {title}
+                                    </h2>
+
+                                    <p className="text-gray-600 dark:text-gray-300 mt-6 line-clamp-3">{description}</p>
+                                </div>
+                                <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400 pb-10">
+                                    <div className="flex items-center">
+                                        <Calendar className="w-4 h-4 mr-2" />
+                                        <span>{date}</span>
+                                    </div>
+                                    <div className="flex items-center">
+                                        <Clock className="w-4 h-4 mr-2" />
+                                        <span>{readTime}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </motion.div>
+        </Link>
+    );
+}
diff --git a/frontend/components/blog/random-image.ts b/frontend/components/blog/random-image.ts
new file mode 100644
index 00000000..c8d20413
--- /dev/null
+++ b/frontend/components/blog/random-image.ts
@@ -0,0 +1,13 @@
+const imageList = [
+    'https://images.unsplash.com/photo-1616071906060-1f425a639465',
+    'https://images.unsplash.com/photo-1643986149937-5d0b9306dba5',
+    'https://images.unsplash.com/photo-1629140476584-f10ee7810d2c',
+    'https://images.unsplash.com/photo-1608501712351-a4ca8dc996fb',
+    'https://images.unsplash.com/photo-1495785870240-c8456d5aeda2',
+    'https://images.unsplash.com/photo-1616071906060-1f425a639465',
+];
+
+export const getRandomImage = () => {
+    const randomIndex = Math.floor(Math.random() * imageList.length);
+    return imageList[randomIndex];
+};