Blog

1"use client";23import { cn } from "@/lib/utils";45type Blog01Props = {6  className?: string;7};89const POSTS = [10  {11    title: "Shipping blocks that match your tokens",12    excerpt: "How we keep every section restylable without a second design pass.",13    category: "Product",14    date: "Mar 12, 2026",15    image: "/assets/brand/demos/attachments/attachment-1.png",16  },17  {18    title: "A boring install story on purpose",19    excerpt: "CLI, drop-in, ship — why the path to first paint should feel uneventful.",20    category: "Engineering",21    date: "Mar 4, 2026",22    image: "/assets/brand/demos/attachments/attachment-2.png",23  },24  {25    title: "Light, dark, and everything between",26    excerpt: "Semantic surfaces so marketing pages don’t need a night-mode rewrite.",27    category: "Design",28    date: "Feb 21, 2026",29    image: "/assets/brand/demos/attachments/attachment-3.png",30  },31] as const;3233export function Blog01({ className }: Blog01Props) {34  return (35    <section className={cn("@container w-full bg-background", className)}>36      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">37        <div className="mx-auto max-w-md text-center">38          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">39            From the blog40          </h2>41          <p className="mt-2 text-sm tracking-wide text-muted-foreground">42            Notes on product, design, and shipping interfaces that feel finished.43          </p>44        </div>45        <ul className="mt-8 grid grid-cols-1 gap-6 @[40rem]:grid-cols-3 @[40rem]:gap-4">46          {POSTS.map((post) => (47            <li key={post.title} className="flex min-w-0 flex-col">48              <div className="aspect-[16/10] w-full overflow-hidden rounded-xl bg-muted">49                <img50                  src={post.image}51                  alt=""52                  className="size-full object-cover"53                />54              </div>55              <div className="mt-3 flex items-center justify-between gap-3 text-[11px] tracking-wide text-muted-foreground">56                <span>{post.category}</span>57                <span>{post.date}</span>58              </div>59              <h3 className="mt-1.5 line-clamp-2 text-sm font-medium tracking-wide text-foreground">60                {post.title}61              </h3>62              <p className="mt-1.5 line-clamp-2 text-xs tracking-wide text-muted-foreground">63                {post.excerpt}64              </p>65            </li>66          ))}67        </ul>68      </div>69    </section>70  );71}

1"use client";23import { cn } from "@/lib/utils";45type Blog02Props = {6  className?: string;7};89const FEATURED = {10  title: "Shipping a full marketing kit",11  excerpt: "Patterns that held up when teams started installing blocks.",12  category: "Product",13  date: "Mar 18, 2026",14  image: "/assets/brand/demos/attachments/attachment-4.png",15} as const;1617const POSTS = [18  {19    title: "Token-ready defaults",20    excerpt: "Restyle every section without a second design pass.",21    category: "Design",22    date: "Mar 10, 2026",23    image: "/assets/brand/demos/attachments/attachment-1.png",24  },25  {26    title: "Keep the CLI boring",27    excerpt: "Install, import, ship — no ceremony required.",28    category: "Engineering",29    date: "Mar 2, 2026",30    image: "/assets/brand/demos/attachments/attachment-2.png",31  },32  {33    title: "Compose without fights",34    excerpt: "Mix heroes, pricing, and FAQs in any order.",35    category: "Guides",36    date: "Feb 24, 2026",37    image: "/assets/brand/demos/attachments/attachment-3.png",38  },39] as const;4041export function Blog02({ className }: Blog02Props) {42  return (43    <section className={cn("@container w-full bg-background", className)}>44      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">45        <div className="mx-auto max-w-md text-center">46          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">47            Latest writing48          </h2>49          <p className="mt-2 text-sm tracking-wide text-muted-foreground">50            A featured story up top, then three recent posts underneath.51          </p>52        </div>5354        <article className="relative mt-8 aspect-[21/9] overflow-hidden rounded-xl bg-muted @[32rem]:aspect-[2.4/1]">55          <img56            src={FEATURED.image}57            alt=""58            className="absolute inset-0 size-full object-cover"59          />60          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />61          <div className="absolute inset-x-0 bottom-0 p-4 @[32rem]:p-6">62            <p className="text-[11px] tracking-wide text-white/75">63              {FEATURED.category}64              <span className="mx-1.5 text-white/40">·</span>65              {FEATURED.date}66            </p>67            <h3 className="mt-1.5 line-clamp-2 text-sm font-medium tracking-wide text-white @[32rem]:text-base">68              {FEATURED.title}69            </h3>70            <p className="mt-1.5 line-clamp-2 max-w-xl text-xs tracking-wide text-white/75">71              {FEATURED.excerpt}72            </p>73          </div>74        </article>7576        <ul className="mt-8 grid grid-cols-1 gap-6 @[40rem]:grid-cols-3 @[40rem]:gap-4">77          {POSTS.map((post) => (78            <li key={post.title} className="flex min-w-0 flex-col">79              <div className="aspect-[16/10] w-full overflow-hidden rounded-xl bg-muted">80                <img81                  src={post.image}82                  alt=""83                  className="size-full object-cover"84                />85              </div>86              <div className="mt-3 flex items-center justify-between gap-3 text-[11px] tracking-wide text-muted-foreground">87                <span>{post.category}</span>88                <span>{post.date}</span>89              </div>90              <h3 className="mt-1.5 line-clamp-2 text-sm font-medium tracking-wide text-foreground">91                {post.title}92              </h3>93              <p className="mt-1.5 line-clamp-2 text-xs tracking-wide text-muted-foreground">94                {post.excerpt}95              </p>96            </li>97          ))}98        </ul>99      </div>100    </section>101  );102}

1"use client";23import { cn } from "@/lib/utils";45type Blog03Props = {6  className?: string;7};89const POSTS = [10  {11    title: "Shipping blocks that match your tokens",12    excerpt: "Keep every section restylable without a second design pass.",13    category: "Product",14    date: "Mar 12, 2026",15    author: "Maya Chen",16    avatar: "/assets/brand/demos/avatars/avatar-1.png",17    image: "/assets/brand/demos/attachments/attachment-1.png",18  },19  {20    title: "A boring install story on purpose",21    excerpt: "Why the path to first paint should feel uneventful.",22    category: "Engineering",23    date: "Mar 4, 2026",24    author: "Priya Nair",25    avatar: "/assets/brand/demos/avatars/avatar-3.png",26    image: "/assets/brand/demos/attachments/attachment-2.png",27  },28  {29    title: "Light, dark, and everything between",30    excerpt: "Semantic surfaces so night mode isn’t a rewrite.",31    category: "Design",32    date: "Feb 21, 2026",33    author: "Jordan Hale",34    avatar: "/assets/brand/demos/avatars/avatar-2.png",35    image: "/assets/brand/demos/attachments/attachment-3.png",36  },37  {38    title: "Composing pages without layout fights",39    excerpt: "Mix heroes, pricing, and FAQs without nesting wars.",40    category: "Guides",41    date: "Feb 14, 2026",42    author: "Chris Ortega",43    avatar: "/assets/brand/demos/avatars/avatar-4.png",44    image: "/assets/brand/demos/attachments/attachment-5.png",45  },46] as const;4748export function Blog03({ className }: Blog03Props) {49  return (50    <section className={cn("@container w-full bg-background", className)}>51      <div className="mx-auto w-full max-w-3xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">52        <div className="mx-auto max-w-md text-center">53          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">54            All posts55          </h2>56          <p className="mt-2 text-sm tracking-wide text-muted-foreground">57            A simple reading list with author and cover on each row.58          </p>59        </div>60        <ul className="mt-8 flex flex-col gap-3">61          {POSTS.map((post) => (62            <li63              key={post.title}64              className="flex gap-4 rounded-xl bg-muted p-3 @[32rem]:p-4"65            >66              <div className="hidden size-24 shrink-0 overflow-hidden rounded-lg bg-background @[32rem]:block">67                <img68                  src={post.image}69                  alt=""70                  className="size-full object-cover"71                />72              </div>73              <div className="flex min-w-0 flex-1 flex-col justify-center">74                <div className="flex items-center justify-between gap-3 text-[11px] tracking-wide text-muted-foreground">75                  <span>{post.category}</span>76                  <span>{post.date}</span>77                </div>78                <h3 className="mt-1 line-clamp-2 text-sm font-medium tracking-wide text-foreground">79                  {post.title}80                </h3>81                <p className="mt-1 line-clamp-2 text-xs tracking-wide text-muted-foreground">82                  {post.excerpt}83                </p>84                <div className="mt-3 flex items-center gap-2">85                  <img86                    src={post.avatar}87                    alt=""88                    className="size-5 rounded-full object-cover"89                  />90                  <span className="text-[11px] tracking-wide text-muted-foreground">91                    {post.author}92                  </span>93                </div>94              </div>95            </li>96          ))}97        </ul>98      </div>99    </section>100  );101}