From 7f06edee127828baa806bc2ae061546bd48d5d78 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Mon, 29 Sep 2025 04:04:53 +0000
Subject: [PATCH] Add BlogPost page

cgen-2460306e91a5433ca2a0a06640ae6219
---
 client/pages/BlogPost.tsx | 107 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 client/pages/BlogPost.tsx

diff --git a/client/pages/BlogPost.tsx b/client/pages/BlogPost.tsx
new file mode 100644
index 00000000..549ec1d8
--- /dev/null
+++ b/client/pages/BlogPost.tsx
@@ -0,0 +1,107 @@
+import { useMemo } from "react";
+import { useParams, Link } from "react-router-dom";
+import Layout from "@/components/Layout";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { User, Calendar } from "lucide-react";
+import NotFound from "./NotFound";
+
+export default function BlogPost() {
+  const { slug } = useParams<{ slug: string }>();
+
+  const featuredPost = {
+    title: "The Future of Quantum Game Development",
+    excerpt:
+      "Exploring how quantum computing will revolutionize game AI, physics simulations, and procedural generation in the next decade.",
+    author: "Dr. Sarah Chen",
+    date: "December 15, 2024",
+    readTime: "8 min read",
+    category: "Research",
+    likes: 124,
+    comments: 23,
+    image:
+      "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=1200&h=600&fit=crop",
+  };
+
+  const posts = [
+    featuredPost,
+    {
+      title: "Building Scalable Game Architecture with Microservices",
+      excerpt:
+        "Learn how to design game backends that can handle millions of concurrent players using modern microservices patterns.",
+      author: "Marcus Rodriguez",
+      date: "December 12, 2024",
+      readTime: "6 min read",
+      category: "Technology",
+    },
+    {
+      title: "Advanced Unity Optimization Techniques",
+      excerpt:
+        "Performance optimization strategies that can boost your Unity game's frame rate by up to 300%.",
+      author: "Alex Thompson",
+      date: "December 10, 2024",
+      readTime: "12 min read",
+      category: "Tutorials",
+    },
+  ];
+
+  const normalize = (t?: string) =>
+    (t || "")
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9\s-]/g, "")
+      .replace(/\s+/g, "-")
+      .replace(/-+/g, "-");
+
+  const post = useMemo(() => {
+    if (!slug) return null;
+    return posts.find((p) => normalize(p.title) === normalize(slug));
+  }, [slug]);
+
+  if (!post) {
+    return <NotFound />;
+  }
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-aethex-gradient py-12">
+        <div className="container mx-auto px-4 max-w-3xl">
+          <Card className="overflow-hidden border-border/50 animate-scale-in">
+            <img src={post.image} alt={post.title} className="w-full h-64 object-cover" />
+            <CardHeader>
+              <Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">{post.category}</Badge>
+              <CardTitle className="text-3xl mt-2">{post.title}</CardTitle>
+              <CardDescription className="text-muted-foreground mt-2">{post.excerpt}</CardDescription>
+              <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <User className="h-4 w-4" /> <span>{post.author}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4" /> <span>{post.date}</span>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="prose max-w-none mt-6">
+              {/* Simple placeholder content for the article body */}
+              <p>
+                {post.excerpt}
+              </p>
+
+              <p>
+                This is a sample article page. In production the blog content would be loaded from the CMS or database and rendered here.
+              </p>
+
+              <p>
+                <strong>Author:</strong> {post.author}
+              </p>
+
+              <div className="pt-6">
+                <Link to="/blog" className="text-aethex-400 underline">Back to Blog</Link>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Layout>
+  );
+}