UI components and marketing blocks for content-driven Astro websites

---
import ArrowRight from "@lucide/astro/icons/arrow-right"
import Blocks from "@lucide/astro/icons/blocks"
import Component from "@lucide/astro/icons/component"

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

<section class="grid gap-6 lg:grid-cols-[0.75fr_1.25fr] lg:items-start">
  <div class="max-w-2xl space-y-3 lg:sticky lg:top-6">
    <h2 class="text-foreground text-2xl font-semibold tracking-tight">
      This is a block preview and documentation, in one place.
    </h2>
  </div>

  <div class="grid gap-4">
    <div
      class="from-primary/6 via-primary/2 to-border rounded-xl bg-gradient-to-br p-px"
    >
      <div
        class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-gradient-to-br p-5"
      >
        <div class="space-y-2">
          <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-parity primitives plus Astro extras for content websites:
            typography, metadata, pricing, ratings, 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-gradient-to-br p-px"
    >
      <div
        class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-gradient-to-br p-5"
      >
        <div class="space-y-2">
          <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 rounded-lg border md:grid-cols-2">
  <div class="flex flex-col gap-5 p-5">
    <div class="space-y-2">
      <p class="text-sm font-medium">Shadcn-parity 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-sm font-medium">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 registry workflow for real Astro projects"
  description="Use gnosticai UI when you want copyable source, clear docs, and full page sections that stay portable outside this website."
  features={[
    {
      icon: "file-code",
      title: "Copyable source",
      description:
        "Components and blocks install into your project as files you can version, inspect, and customize.",
    },
    {
      icon: "terminal",
      title: "shadcn-compatible installs",
      description:
        "Add individual items through the @gnosticai registry namespace with familiar shadcn CLI commands.",
    },
    {
      icon: "palette",
      title: "Token-driven theming",
      description:
        "Customize color, radius, spacing, and visual tone through CSS variables and Tailwind conventions.",
    },
    {
      icon: "blocks",
      title: "Components and blocks",
      description:
        "Start with primitives for precise control or use complete sections when the page needs stronger composition.",
    },
    {
      icon: "book-open",
      title: "Live documentation",
      description:
        "MDX examples render live previews and source so docs stay useful as implementation references.",
    },
    {
      icon: "shield-check",
      title: "Portable registry items",
      description:
        "Installable files avoid private docs, layout, route, global, and schema imports from this site.",
    },
  ]}
/>

---
import FaqBlock from "@/components/blocks/faqs-1.astro"
---

<FaqBlock
  title="Frequently asked questions"
  description="Practical answers for teams deciding how gnosticai UI fits alongside shadcn/ui and Astro content sites."
  defaultItem="homepage-faq-1"
  faqs={[
    {
      id: "homepage-faq-1",
      question: "Why another component library?",
      answer:
        "gnosticai UI is focused on content-driven Astro sites. It includes familiar primitives, but also adds blocks and content components for docs, marketing pages, articles, pricing, FAQs, and other editorial surfaces.",
    },
    {
      id: "homepage-faq-2",
      question: "Why use gnosticai instead of only shadcn/ui?",
      answer:
        "gnosticai components are Astro-first and avoid framework runtime cost where interaction is unnecessary. That makes them a better fit for static, content-heavy pages and minimal-interactivity interfaces.",
    },
    {
      id: "homepage-faq-3",
      question: "Can I still use shadcn/ui?",
      answer:
        "Yes. gnosticai follows shadcn-compatible conventions and works well next to shadcn/ui. Use shadcn/ui where React interactivity is the right tradeoff, and gnosticai where Astro source and lighter output fit better.",
    },
    {
      id: "homepage-faq-4",
      question: "Can I customize the source?",
      answer:
        "Yes. Components and blocks install as local source files, so you can change markup, tokens, styling, and composition inside your own Astro project.",
    },
  ]}
/>

---
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-gradient-to-br"
  title="Build open-source Astro interfaces"
  description="Install source-owned primitives, compose complete sections, and adapt every file in your project."
  buttons={[
    { label: "Read the docs", href: "/docs/" },
    {
      label: "Browse components",
      href: "/components/",
      variant: "outline",
    },
  ]}
  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: "+8",
    text: "560 GitHub stars 16 contributors",
  }}
/>