Home

import { HomeCta } from "./components/home-cta"
import { HomeFeature } from "./components/home-feature"
import { HomeHero } from "./components/home-hero"
import { MainLayout } from "./components/home-main-layout"

const demoHeader = {
  title: "XACLABS.DEV",
  description: "Open Source Organization",
  menus: [
    { title: "Blocks", href: "/blocks" },
    { title: "Components", href: "/docs" },
    { title: "Blog", href: "/articles" },
  ],
}

const demoFooter = {
  title: "XaC Labs UI",
  description: "A modern, open source component library.",
  copyright: "XaC Labs",
  menus: [
    {
      title: "Documentation",
      children: [
        { title: "Introduction", href: "/docs" },
        { title: "Components", href: "/docs/components/header" },
      ],
    },
  ],
}

const demoHero = {
  title: "Build Better UIs with XaC Labs",
  description:
    "A collection of beautifully designed, accessible components built with Radix UI and Tailwind CSS.",
  actions: [
    { title: "Get Started", href: "/docs", variant: "default" as const },
    {
      title: "GitHub",
      href: "https://github.com",
      variant: "outline" as const,
    },
  ],
}

const demoFeature = {
  variant: "default" as const,
  layout: "bento" as const,
  title: "Features",
  description: "Everything you need to build modern web applications.",
  items: [
    {
      title: "Accessible",
      description: "Built on Radix UI primitives for full accessibility.",
      action: { title: "Learn more", href: "#" },
      span: 1,
    },
    {
      title: "Themeable",
      description: "Customizable with CSS variables and Tailwind.",
      action: { title: "Learn more", href: "#" },
      span: 1,
    },
    {
      title: "Composable",
      description: "Mix and match components to build any UI.",
      action: { title: "Learn more", href: "#" },
      span: 1,
    },
  ],
}

const demoCta = {
  variant: "primary" as const,
  title: "Ready to get started?",
  description:
    "Install XaC Labs UI and start building your next project today.",
  action: { title: "Get Started", href: "/docs" },
}

export default function HomeBlockPage() {
  return (
    <MainLayout header={demoHeader} footer={demoFooter}>
      <HomeHero hero={demoHero} />
      <HomeFeature feature={demoFeature} />
      <HomeCta cta={demoCta} />
    </MainLayout>
  )
}