@dailyautomations/ui 1.0.1 → 1.2.0

package/examples/pages/AboutPage.tsx

@@ -0,0 +1,343 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../src/components/common/button"
+import { Card, CardContent } from "../../src/components/common/card"
+import { cn } from "../../src/utils/cn"
+
+// Icons
+const Icons = {
+  target: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+    </svg>
+  ),
+  heart: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
+    </svg>
+  ),
+  lightning: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z"/>
+    </svg>
+  ),
+  globe: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    </svg>
+  ),
+  twitter: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+    </svg>
+  ),
+  linkedin: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+    </svg>
+  ),
+}
+
+// Value Card
+interface ValueProps {
+  icon: React.ReactNode
+  title: string
+  description: string
+}
+
+function ValueCard({ icon, title, description }: ValueProps) {
+  return (
+    <Card className="group hover:border-purple-500/50 transition-colors">
+      <CardContent className="p-6">
+        <div className="w-12 h-12 rounded-lg bg-purple-500/10 flex items-center justify-center mb-4 group-hover:bg-purple-500/20 transition-colors">
+          {icon}
+        </div>
+        <h3 className="text-lg font-semibold mb-2">{title}</h3>
+        <p className="text-zinc-400 text-sm">{description}</p>
+      </CardContent>
+    </Card>
+  )
+}
+
+// Team Member Card
+interface TeamMemberProps {
+  name: string
+  role: string
+  bio: string
+  avatar: string
+  social?: { twitter?: string; linkedin?: string }
+}
+
+function TeamMember({ name, role, bio, avatar, social }: TeamMemberProps) {
+  return (
+    <Card className="overflow-hidden group">
+      <div className={cn("h-48 bg-gradient-to-br", avatar)} />
+      <CardContent className="p-5">
+        <h3 className="font-semibold">{name}</h3>
+        <p className="text-sm text-purple-400 mb-2">{role}</p>
+        <p className="text-sm text-zinc-400 mb-3">{bio}</p>
+        {social && (
+          <div className="flex gap-2">
+            {social.twitter && (
+              <a href={social.twitter} className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-zinc-700 transition-colors">
+                <Icons.twitter className="w-4 h-4" />
+              </a>
+            )}
+            {social.linkedin && (
+              <a href={social.linkedin} className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-zinc-700 transition-colors">
+                <Icons.linkedin className="w-4 h-4" />
+              </a>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// Stat
+interface StatProps {
+  value: string
+  label: string
+}
+
+function Stat({ value, label }: StatProps) {
+  return (
+    <div className="text-center">
+      <p className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-orange-400">
+        {value}
+      </p>
+      <p className="text-zinc-400 mt-1">{label}</p>
+    </div>
+  )
+}
+
+export function AboutPage() {
+  const team: TeamMemberProps[] = [
+    {
+      name: "Sarah Chen",
+      role: "CEO & Co-founder",
+      bio: "Former Google PM. Stanford CS grad. Passionate about AI and automation.",
+      avatar: "from-purple-600 to-purple-900",
+      social: { twitter: "#", linkedin: "#" },
+    },
+    {
+      name: "Mike Torres",
+      role: "CTO & Co-founder",
+      bio: "Ex-Stripe engineer. Built systems processing billions of transactions.",
+      avatar: "from-orange-600 to-red-900",
+      social: { twitter: "#", linkedin: "#" },
+    },
+    {
+      name: "Emma Wilson",
+      role: "Head of Design",
+      bio: "Award-winning designer. Previously at Figma and Airbnb.",
+      avatar: "from-blue-600 to-cyan-900",
+      social: { twitter: "#", linkedin: "#" },
+    },
+    {
+      name: "Alex Kim",
+      role: "Head of Engineering",
+      bio: "Systems architect with 15 years of experience building scalable platforms.",
+      avatar: "from-green-600 to-emerald-900",
+      social: { linkedin: "#" },
+    },
+    {
+      name: "Lisa Park",
+      role: "VP of Product",
+      bio: "Product leader focused on user-centered design and data-driven decisions.",
+      avatar: "from-pink-600 to-rose-900",
+      social: { twitter: "#", linkedin: "#" },
+    },
+    {
+      name: "James Liu",
+      role: "Head of AI",
+      bio: "PhD in Machine Learning. Published researcher in NLP and document understanding.",
+      avatar: "from-indigo-600 to-violet-900",
+      social: { linkedin: "#" },
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-[#0F0F14] text-white">
+      {/* Header */}
+      <header className="border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+          <span className="text-xl font-bold">
+            <span className="text-purple-500">daily</span>
+            <span className="text-orange-500">X</span>
+          </span>
+          <nav className="hidden md:flex items-center gap-6">
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">Product</a>
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">Pricing</a>
+            <a href="#" className="text-sm text-white font-medium">About</a>
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">Contact</a>
+            <Button size="sm">Get Started</Button>
+          </nav>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="py-20 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="max-w-3xl">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+              We're building the future of{" "}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-orange-400">
+                document automation
+              </span>
+            </h1>
+            <p className="text-xl text-zinc-400 mb-8">
+              Founded in 2023, Daily X is on a mission to eliminate tedious document work and help teams focus on what matters most.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section className="py-16 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+            <Stat value="1M+" label="Documents processed" />
+            <Stat value="10K+" label="Happy customers" />
+            <Stat value="50+" label="Team members" />
+            <Stat value="99.9%" label="Uptime SLA" />
+          </div>
+        </div>
+      </section>
+
+      {/* Mission */}
+      <section className="py-20 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 mb-4">
+                Our Mission
+              </span>
+              <h2 className="text-3xl md:text-4xl font-bold mb-6">
+                Empowering teams to work smarter, not harder
+              </h2>
+              <p className="text-zinc-400 mb-4">
+                We believe that knowledge workers spend too much time on repetitive document tasks. Our AI-powered platform automates the mundane so teams can focus on creative, high-impact work.
+              </p>
+              <p className="text-zinc-400">
+                From startups to Fortune 500 companies, we're trusted by organizations that value efficiency and innovation.
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="h-48 rounded-lg bg-gradient-to-br from-purple-600/50 to-purple-900/50" />
+              <div className="h-48 rounded-lg bg-gradient-to-br from-orange-600/50 to-orange-900/50 mt-8" />
+              <div className="h-48 rounded-lg bg-gradient-to-br from-blue-600/50 to-blue-900/50 -mt-8" />
+              <div className="h-48 rounded-lg bg-gradient-to-br from-green-600/50 to-green-900/50" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Values */}
+      <section className="py-20 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="text-center mb-12">
+            <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 mb-4">
+              Our Values
+            </span>
+            <h2 className="text-3xl md:text-4xl font-bold">What drives us</h2>
+          </div>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <ValueCard
+              icon={<Icons.target className="w-6 h-6 text-purple-400" />}
+              title="Customer First"
+              description="Every decision starts with the customer. Their success is our success."
+            />
+            <ValueCard
+              icon={<Icons.lightning className="w-6 h-6 text-purple-400" />}
+              title="Move Fast"
+              description="We ship quickly, learn from feedback, and iterate relentlessly."
+            />
+            <ValueCard
+              icon={<Icons.heart className="w-6 h-6 text-purple-400" />}
+              title="Care Deeply"
+              description="We sweat the details and take pride in everything we build."
+            />
+            <ValueCard
+              icon={<Icons.globe className="w-6 h-6 text-purple-400" />}
+              title="Think Global"
+              description="We build for a diverse world with accessibility and inclusion in mind."
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Team */}
+      <section className="py-20 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="text-center mb-12">
+            <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 mb-4">
+              Our Team
+            </span>
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">Meet the people behind Daily X</h2>
+            <p className="text-zinc-400 max-w-2xl mx-auto">
+              We're a diverse team of engineers, designers, and problem-solvers united by a passion for building great products.
+            </p>
+          </div>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {team.map((member) => (
+              <TeamMember key={member.name} {...member} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Timeline */}
+      <section className="py-20 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="text-center mb-12">
+            <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 mb-4">
+              Our Journey
+            </span>
+            <h2 className="text-3xl md:text-4xl font-bold">From idea to impact</h2>
+          </div>
+          <div className="max-w-3xl mx-auto">
+            {[
+              { year: "2023", title: "Founded", description: "Sarah and Mike start Daily X in a San Francisco garage." },
+              { year: "2024", title: "Seed Round", description: "Raised $5M to build out the core platform and team." },
+              { year: "2024", title: "1K Customers", description: "Reached our first thousand paying customers." },
+              { year: "2025", title: "Series A", description: "Raised $25M led by Sequoia to accelerate growth." },
+              { year: "2026", title: "Global Expansion", description: "Opened offices in NYC and London. 10K+ customers worldwide." },
+            ].map((event, index) => (
+              <div key={index} className="flex gap-6 mb-8 last:mb-0">
+                <div className="flex flex-col items-center">
+                  <div className="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 font-semibold text-sm">
+                    {event.year}
+                  </div>
+                  {index < 4 && <div className="w-0.5 h-full bg-zinc-800 mt-2" />}
+                </div>
+                <div className="pt-2">
+                  <h3 className="font-semibold mb-1">{event.title}</h3>
+                  <p className="text-zinc-400 text-sm">{event.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20">
+        <div className="max-w-6xl mx-auto px-6 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">Join our journey</h2>
+          <p className="text-xl text-zinc-400 mb-8 max-w-2xl mx-auto">
+            We're always looking for talented people to join our team.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Button size="lg">View open positions</Button>
+            <Button variant="outline" size="lg">Contact us</Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default AboutPage

package/examples/pages/BlogPage.tsx

@@ -0,0 +1,294 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../src/components/common/button"
+import { Card, CardContent } from "../../src/components/common/card"
+import { Input } from "../../src/components/common/input"
+import { cn } from "../../src/utils/cn"
+
+// Icons
+const Icons = {
+  search: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+    </svg>
+  ),
+  calendar: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+    </svg>
+  ),
+  clock: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    </svg>
+  ),
+  arrowRight: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+    </svg>
+  ),
+}
+
+// Blog Post Card
+interface BlogPostProps {
+  title: string
+  excerpt: string
+  category: string
+  date: string
+  readTime: string
+  image: string
+  featured?: boolean
+  author: {
+    name: string
+    avatar: string
+  }
+}
+
+function BlogPost({ title, excerpt, category, date, readTime, image, featured, author }: BlogPostProps) {
+  if (featured) {
+    return (
+      <Card className="overflow-hidden group cursor-pointer">
+        <div className="grid md:grid-cols-2 gap-0">
+          <div className={cn("h-64 md:h-auto bg-gradient-to-br", image)} />
+          <CardContent className="p-8 flex flex-col justify-center">
+            <span className="inline-flex w-fit px-3 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 mb-4">
+              {category}
+            </span>
+            <h2 className="text-2xl font-bold mb-3 group-hover:text-purple-400 transition-colors">{title}</h2>
+            <p className="text-zinc-400 mb-6 line-clamp-3">{excerpt}</p>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className={cn("w-10 h-10 rounded-full", author.avatar)} />
+                <div>
+                  <p className="text-sm font-medium">{author.name}</p>
+                  <p className="text-xs text-zinc-500">{date}</p>
+                </div>
+              </div>
+              <span className="text-sm text-zinc-500 flex items-center gap-1">
+                <Icons.clock className="w-4 h-4" />
+                {readTime}
+              </span>
+            </div>
+          </CardContent>
+        </div>
+      </Card>
+    )
+  }
+
+  return (
+    <Card className="overflow-hidden group cursor-pointer hover:border-zinc-700 transition-colors">
+      <div className={cn("h-48 bg-gradient-to-br", image)} />
+      <CardContent className="p-5">
+        <span className="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 mb-3">
+          {category}
+        </span>
+        <h3 className="text-lg font-semibold mb-2 group-hover:text-purple-400 transition-colors line-clamp-2">{title}</h3>
+        <p className="text-sm text-zinc-400 mb-4 line-clamp-2">{excerpt}</p>
+        <div className="flex items-center justify-between text-xs text-zinc-500">
+          <div className="flex items-center gap-2">
+            <div className={cn("w-6 h-6 rounded-full", author.avatar)} />
+            <span>{author.name}</span>
+          </div>
+          <span>{readTime}</span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// Category Filter
+const categories = ["All", "Product", "Engineering", "Design", "Company", "Tutorials"]
+
+export function BlogPage() {
+  const [activeCategory, setActiveCategory] = React.useState("All")
+  const [searchQuery, setSearchQuery] = React.useState("")
+
+  const posts: BlogPostProps[] = [
+    {
+      title: "Introducing AI-Powered Document Processing",
+      excerpt: "We're excited to announce our latest feature that uses machine learning to automatically categorize and extract insights from your documents. This breakthrough technology will save hours of manual work.",
+      category: "Product",
+      date: "Jan 28, 2026",
+      readTime: "5 min read",
+      image: "from-purple-600 to-purple-900",
+      featured: true,
+      author: { name: "Sarah Chen", avatar: "bg-purple-500" },
+    },
+    {
+      title: "How We Scaled to 1 Million Users",
+      excerpt: "A deep dive into our infrastructure journey and the lessons we learned scaling our platform.",
+      category: "Engineering",
+      date: "Jan 25, 2026",
+      readTime: "8 min read",
+      image: "from-orange-600 to-red-900",
+      author: { name: "Mike Torres", avatar: "bg-orange-500" },
+    },
+    {
+      title: "Design System 2.0: What's New",
+      excerpt: "Exploring the improvements and new components in our updated design system.",
+      category: "Design",
+      date: "Jan 22, 2026",
+      readTime: "4 min read",
+      image: "from-blue-600 to-cyan-900",
+      author: { name: "Emma Wilson", avatar: "bg-blue-500" },
+    },
+    {
+      title: "Building Accessible Web Applications",
+      excerpt: "Best practices for creating inclusive experiences that work for everyone.",
+      category: "Tutorials",
+      date: "Jan 20, 2026",
+      readTime: "6 min read",
+      image: "from-green-600 to-emerald-900",
+      author: { name: "Alex Kim", avatar: "bg-green-500" },
+    },
+    {
+      title: "Our Journey to Carbon Neutrality",
+      excerpt: "How we're reducing our environmental footprint and building a sustainable business.",
+      category: "Company",
+      date: "Jan 18, 2026",
+      readTime: "3 min read",
+      image: "from-teal-600 to-teal-900",
+      author: { name: "Lisa Park", avatar: "bg-teal-500" },
+    },
+    {
+      title: "Getting Started with the Daily X API",
+      excerpt: "A comprehensive guide to integrating our API into your applications.",
+      category: "Tutorials",
+      date: "Jan 15, 2026",
+      readTime: "10 min read",
+      image: "from-indigo-600 to-violet-900",
+      author: { name: "James Liu", avatar: "bg-indigo-500" },
+    },
+  ]
+
+  const filteredPosts = posts.filter(post => {
+    const matchesCategory = activeCategory === "All" || post.category === activeCategory
+    const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase())
+    return matchesCategory && matchesSearch
+  })
+
+  const [featuredPost, ...otherPosts] = filteredPosts
+
+  return (
+    <div className="min-h-screen bg-[#0F0F14] text-white">
+      {/* Header */}
+      <header className="border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+          <span className="text-xl font-bold">
+            <span className="text-purple-500">daily</span>
+            <span className="text-orange-500">X</span>
+            <span className="text-zinc-500 font-normal ml-2">/ Blog</span>
+          </span>
+          <nav className="hidden md:flex items-center gap-6">
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">Product</a>
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">Pricing</a>
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">About</a>
+            <Button size="sm">Get Started</Button>
+          </nav>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="py-16 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6 text-center">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+            Insights & Updates
+          </h1>
+          <p className="text-xl text-zinc-400 max-w-2xl mx-auto mb-8">
+            Stories about product updates, engineering challenges, and the future of document automation.
+          </p>
+
+          {/* Search */}
+          <div className="max-w-md mx-auto relative">
+            <Icons.search className="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500" />
+            <Input
+              type="text"
+              placeholder="Search articles..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-12 h-12"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Category Filter */}
+      <section className="py-6 border-b border-zinc-800 sticky top-0 bg-[#0F0F14]/95 backdrop-blur z-10">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="flex items-center gap-2 overflow-x-auto pb-2">
+            {categories.map((category) => (
+              <button
+                key={category}
+                onClick={() => setActiveCategory(category)}
+                className={cn(
+                  "px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors",
+                  activeCategory === category
+                    ? "bg-purple-500 text-white"
+                    : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
+                )}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Blog Posts */}
+      <section className="py-12">
+        <div className="max-w-6xl mx-auto px-6">
+          {filteredPosts.length === 0 ? (
+            <div className="text-center py-16">
+              <p className="text-zinc-400">No articles found matching your criteria.</p>
+            </div>
+          ) : (
+            <>
+              {/* Featured Post */}
+              {featuredPost && (
+                <div className="mb-12">
+                  <BlogPost {...featuredPost} featured />
+                </div>
+              )}
+
+              {/* Post Grid */}
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {otherPosts.map((post, index) => (
+                  <BlogPost key={index} {...post} />
+                ))}
+              </div>
+
+              {/* Load More */}
+              <div className="text-center mt-12">
+                <Button variant="outline" size="lg">
+                  Load more articles
+                  <Icons.arrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </section>
+
+      {/* Newsletter */}
+      <section className="py-16 border-t border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <Card className="bg-gradient-to-r from-purple-900/50 to-orange-900/50 border-0">
+            <CardContent className="p-8 md:p-12 text-center">
+              <h2 className="text-2xl md:text-3xl font-bold mb-3">Stay in the loop</h2>
+              <p className="text-zinc-300 mb-6 max-w-md mx-auto">
+                Get the latest articles and product updates delivered to your inbox.
+              </p>
+              <div className="flex gap-3 max-w-md mx-auto">
+                <Input type="email" placeholder="you@example.com" className="flex-1" />
+                <Button>Subscribe</Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default BlogPage