Components and Blocks for building content-driven Astro websites

---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---

<section
  class="grid gap-6 lg:grid-cols-[0.75fr_1.25fr] lg:items-start lg:gap-10"
>
  <div class="max-w-2xl space-y-3 lg:sticky lg:top-6">
    <h2 class="text-foreground text-2xl font-semibold tracking-tight">
      This homepage is built from live block previews.
    </h2>
  </div>

  <div class="grid gap-4">
    <div
      class="from-primary/6 via-primary/2 to-border rounded-xl bg-linear-to-br p-px"
    >
      <div
        class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-linear-to-br p-5"
      >
        <div class="space-y-2">
          <Icon name="component" class="text-primary size-5" />
          <h3 class="text-foreground text-lg font-semibold tracking-tight">
            Components
          </h3>
          <p class="text-muted-foreground max-w-2xl text-sm leading-6">
            Use Shadcn-style primitives plus Astro extras for content websites:
            typography, pricing, ratings, media, and docs navigation.
          </p>
        </div>
        <Button href="/components/" size="sm" class="mt-5">
          View components
        </Button>
      </div>
    </div>

    <div
      class="from-primary/6 via-primary/2 to-border rounded-xl bg-linear-to-br p-px"
    >
      <div
        class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-linear-to-br p-5"
      >
        <div class="space-y-2">
          <Icon name="blocks" class="text-primary size-5" />
          <h3 class="text-foreground text-lg font-semibold tracking-tight">
            Blocks
          </h3>
          <p class="text-muted-foreground max-w-2xl text-sm leading-6">
            Use complete Astro sections for heroes, features, FAQs, pricing,
            articles, contact pages, and calls to action.
          </p>
        </div>
        <Button href="/blocks/" size="sm" class="mt-5"> View blocks </Button>
      </div>
    </div>
  </div>
</section>

---
import { Button } from "@/components/ui/button"
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
import { Rating } from "@/components/ui/rating"
---

<div class="grid w-full gap-0 overflow-hidden md:grid-cols-2">
  <div class="flex flex-col gap-5 p-5">
    <div class="space-y-2">
      <p class="text-base font-semibold">Shadcn-style primitives</p>
      <p class="text-muted-foreground text-sm leading-6">
        Button, Card, Tabs, Accordion, Dialog, Form, Select, and other familiar
        building blocks keep Shadcn-style composition patterns.
      </p>
    </div>
    <div class="grid gap-3">
      <div class="flex flex-wrap gap-2">
        <Button size="sm">Save</Button>
        <Button size="sm" variant="outline">Preview</Button>
      </div>
      <Combobox class="w-full max-w-56">
        <ComboboxInput placeholder="Choose content type" />
        <ComboboxContent>
          <ComboboxList>
            <ComboboxEmpty>No content types found.</ComboboxEmpty>
            <ComboboxItem value="page">Page</ComboboxItem>
            <ComboboxItem value="article">Article</ComboboxItem>
            <ComboboxItem value="docs">Docs page</ComboboxItem>
            <ComboboxItem value="guide">Guide</ComboboxItem>
            <ComboboxItem value="landing">Landing page</ComboboxItem>
            <ComboboxItem value="changelog">Changelog</ComboboxItem>
            <ComboboxItem value="case-study">Case study</ComboboxItem>
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  </div>
  <div class="border-border flex flex-col gap-5 p-5 md:border-l">
    <div class="space-y-2">
      <p class="text-base font-semibold">Content-driven extras</p>
      <p class="text-muted-foreground text-sm leading-6">
        Typography, Table of Contents, Price, Rating, Video, Banner, and
        navigation components support docs, articles, and marketing pages.
      </p>
    </div>
    <div class="grid gap-3">
      <Price>
        <PriceValue price={49} />
        <PriceUnit>month</PriceUnit>
      </Price>
      <div class="flex items-center gap-3">
        <Rating value={4.5} />
        <span class="text-muted-foreground text-sm">Editorial kit</span>
      </div>
    </div>
  </div>
</div>

---
import Features2Block from "@/components/blocks/features-2.astro"
---

<Features2Block
  title="A solid foundation for Astro websites"
  description="Use Fulldev UI when you want installable source files, clear examples, and complete sections that developers and AI agents can adapt safely."
  features={[
    {
      icon: "file-code",
      title: "Source you own",
      description:
        "Components and blocks install into your project as Astro and Tailwind files you can version, inspect, and customize.",
    },
    {
      icon: "terminal",
      title: "Shadcn-compatible installs",
      description:
        "Add individual items through the @fulldev registry namespace with familiar Shadcn CLI commands.",
    },
    {
      icon: "rocket",
      title: "Astro performance model",
      description:
        "Use Astro-first components for content pages and current marketing sections, then add heavier interactivity only where the project needs it.",
    },
    {
      icon: "blocks",
      title: "Composition examples",
      description:
        "Use blocks directly, or let AI agents use them as examples for layout, props, spacing, and component composition.",
    },
    {
      icon: "book-open",
      title: "Docs for AI agents",
      description:
        "Every docs page has a Markdown version, and examples show the rendered preview and source together.",
    },
    {
      icon: "palette",
      title: "Token-driven theming",
      description:
        "Customize color, radius, spacing, and visual tone through CSS variables and Tailwind conventions.",
    },
  ]}
/>

---
import Cta7Block from "@/components/blocks/cta-7.astro"
import avatarBupt from "@/assets/avatar-contributor-BuptStEve.webp"
import avatarJeremy from "@/assets/avatar-contributor-jeremybosma.webp"
import avatarLjstella from "@/assets/avatar-contributor-ljstella.webp"
import avatarNeko from "@/assets/avatar-contributor-NekoSakuraLucia.webp"
import avatarRakshit from "@/assets/avatar-contributor-RakshitGumber.webp"
import avatarSaran from "@/assets/avatar-contributor-saran13raj.webp"
import avatarSil from "@/assets/avatar-contributor-silveltman.webp"
import avatarSpjpgrd from "@/assets/avatar-contributor-spjpgrd.webp"
---

<Cta7Block
  class="from-primary/8 via-primary/3 to-background bg-background bg-linear-to-br"
  title="Build content-driven Astro websites"
  description="Own the source, install with shadcn-compatible commands, and give developers and AI agents Astro-first examples they can adapt safely."
  buttons={[{ label: "Get started", href: "/docs/installation/" }]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
      { image: avatarJeremy, initials: "JB", name: "Jeremy Bosma" },
      { image: avatarSaran, initials: "SR", name: "Saran Raj" },
      { image: avatarNeko, initials: "NL", name: "NekoSakuraLucia" },
      { image: avatarRakshit, initials: "RG", name: "Rakshit Gumber" },
      { image: avatarBupt, initials: "BS", name: "BuptStEve" },
      { image: avatarLjstella, initials: "LJ", name: "ljstella" },
      { image: avatarSpjpgrd, initials: "SP", name: "spjpgrd" },
    ],
    count: "+9",
    text: "Open-source contributors",
  }}
/>