fix: Fix and scaffold some components

Author: 0xdevcollins

app/(landing)/blog/[slug]/not-found.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import { ArrowLeft, Home } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export default function BlogNotFound() {
+  return (
+    <div className='flex min-h-[80vh] items-center justify-center bg-[#030303]'>
+      <div className='mx-auto max-w-md px-6 text-center'>
+        <div className='mb-8'>
+          <h1 className='mb-4 text-6xl font-bold text-white'>404</h1>
+          <h2 className='mb-4 text-2xl font-semibold text-white'>
+            Blog Post Not Found
+          </h2>
+          <p className='mb-8 text-[#B5B5B5]'>
+            The blog post you're looking for doesn't exist or has been moved.
+          </p>
+        </div>
+
+        <div className='flex flex-col gap-4 sm:flex-row sm:justify-center'>
+          <Button
+            asChild
+            variant='outline'
+            className='border-[#2B2B2B] text-white hover:bg-[#2B2B2B]'
+          >
+            <Link href='/blog'>
+              <ArrowLeft className='mr-2 h-4 w-4' />
+              Back to Blog
+            </Link>
+          </Button>
+
+          <Button
+            asChild
+            className='bg-[#A7F950] text-black hover:bg-[#A7F950]/90'
+          >
+            <Link href='/'>
+              <Home className='mr-2 h-4 w-4' />
+              Go Home
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(landing)/blog/[slug]/page.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import BlogPostDetails from '../../../../components/landing-page/blog/BlogPostDetails';
+import { getBlogPost, getAllBlogPosts } from '@/lib/data/blog';
+import { generateBlogPostMetadata } from '@/lib/metadata';
+
+export async function generateStaticParams() {
+  const posts = await getAllBlogPosts();
+
+  return posts.map(post => ({
+    slug: post.slug,
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await getBlogPost(slug);
+
+  if (!post) {
+    return {
+      title: 'Blog Post Not Found',
+      description: 'The requested blog post could not be found.',
+    };
+  }
+
+  return generateBlogPostMetadata(post);
+}
+
+const BlogPostPage = async ({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) => {
+  const { slug } = await params;
+  const post = await getBlogPost(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return <BlogPostDetails post={post} />;
+};
+
+export default BlogPostPage;

app/(landing)/blog/page.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
+import BlogHero from '@/components/landing-page/blog/BlogHero';
+import BlogGrid from '@/components/landing-page/blog/BlogGrid';
+import { getAllBlogPosts } from '@/lib/data/blog';
 
 export const metadata: Metadata = generatePageMetadata('blog');
 
-const BlogPage = () => {
+const BlogPage = async () => {
+  const posts = await getAllBlogPosts();
+  const otherPosts = posts.slice(1);
+
   return (
-    <div className='mt-10 text-center text-4xl font-bold text-white'>
-      Blog Page
+    <div className='min-h-screen bg-[#030303]'>
+      <BlogHero />
+      <BlogGrid posts={otherPosts} showLoadMore={false} />
     </div>
   );
 };