<script setup lang="ts">
import { BackgroundBeams } from '@/components/ui/background-beams'
</script>

<template>
  <div class="relative h-[40rem] w-full rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased">
    <div class="max-w-2xl mx-auto p-4">
      <h1 class="relative z-10 text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-center font-sans font-bold">
        Raya UI
      </h1>
      <p class="text-neutral-500 max-w-lg mx-auto my-2 text-sm text-center relative z-10">
        Raya (Persian: رایا) means Thought and Vision.
        A collection of UI primitives crafted with precision and intelligence for modern dashboards.
      </p>
      <div class="relative z-10 mt-4 flex justify-center">
        <button class="bg-teal-500 hover:bg-teal-600 text-black font-bold py-2 px-6 rounded-full transition-colors">
          Get Started
        </button>
      </div>
    </div>
    <BackgroundBeams />
  </div>
</template>