Article With Sticky Contents RailPRO

npx shadcn add "https://ui.beste.co/r/post88?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/post88?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Post88, post88Demo } from "@/components/beste/block/post88";

export default function ArticlePage() {
  return <Post88 {...post88Demo} />;
}

import { Post88 } from "@/components/beste/block/post88";

export default function ArticlePage() {
  return (
    <Post88
      eyebrow="Practice"
      title="The estimate is the design work nobody sees"
      summary="Pricing a project is not admin you do after the thinking."
      date="18 March 2026"
      readTime="9 min read"
      author={{
        name: "Maria Santos",
        title: "Partner",
        avatar: { src: "/people/maria.jpg", alt: "Maria Santos" },
      }}
      featuredImage={{ src: "/covers/estimate.jpg", alt: "An estimate on a desk" }}
      tocTitle="On this page"
      content={[
        { type: "paragraph", content: "Every studio we know treats the estimate as the boring part." },
        {
          type: "heading",
          content: "What a number is actually saying",
          anchor: { title: "What a number is saying", id: "what-a-number-is-saying" },
        },
        { type: "list", items: ["How long the problem is.", "How much you have solved before."] },
        { type: "quote", content: "If the first line of your estimate is free, you have already told the client which part you do not value." },
      ]}
      tags={[{ label: "Pricing", href: "/subjects/pricing" }]}
    />
  );
}

type ContentBlock = {
  type: "paragraph" | "heading" | "subheading" | "list" | "quote";
  content?: string;
  items?: string[];
  anchor?: { title: string; id: string };
};

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
};

type FeaturedImage = {
  src: string;
  alt: string;
};

type Tag = {
  label: string;
  href: string;
};