Initial commit

app/blog/page.tsx

@@ -0,0 +1,64 @@
+import { Navbar } from "@/components/navbar"
+import { Footer } from "@/components/footer"
+import { Badge } from "@/components/ui/badge"
+import { BlogCard } from "@/components/blog-card"
+import type { Metadata } from "next"
+import { Animate } from "@/components/animations/animate"
+import { Stagger } from "@/components/animations/stagger"
+import blogPosts from "@/data/blog"
+
+export const metadata: Metadata = {
+  title: "Blog | TECHTONIC FAULT",
+  description: "Insight e articoli su sviluppo software, tecnologia e trasformazione digitale",
+}
+
+export default function BlogPage() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Navbar />
+
+      <main className="flex-1">
+        {/* Hero Section */}
+        <section className="w-full py-12 md:py-24 lg:py-32 bg-primary-50 dark:bg-gray-900">
+          <div className="container px-4 md:px-6 mx-auto">
+            <div className="flex flex-col items-center text-center space-y-4">
+              <Animate animation="fadeInUp" delay={0.1}>
+                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-primary-900 dark:text-primary-300">
+                  Ultimi articoli
+                </h1>
+              </Animate>
+              <Animate animation="fadeInUp" delay={0.2}>
+                <p className="max-w-[900px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                  Resta aggiornato con i nostri ultimi post su tecnologia, sviluppo e trend d'industria.
+                </p>
+              </Animate>
+            </div>
+          </div>
+        </section>
+
+        {/* Blog Posts */}
+        <section className="w-full py-12 md:py-24 bg-white dark:bg-gray-950">
+          <div className="container px-4 md:px-6 mx-auto">
+            <Stagger className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" delay={0.3}>
+              {blogPosts.map((post) => (
+                <BlogCard key={post.slug} post={post} />
+              ))}
+            </Stagger>
+          </div>
+        </section>
+
+        {!blogPosts.length && <>
+          <section className="w-full py-12 md:py-24 bg-white dark:bg-gray-950">
+            <div className="flex flex-col items-center text-center space-y-4 -mt-32 container px-4 md:px-6 mx-auto text-gray-500 dark:text-gray-400">
+              <Animate delay={0.3}>
+                Non ci sono post.
+              </Animate>
+            </div>
+          </section>
+        </>}
+      </main>
+
+      <Footer />
+    </div>
+  )
+}