Hero Section One

1import { Badge } from '@/components/ui/badge'
2import { Button } from '@/components/ui/button'
3import { IconCaretRightFilled } from '@tabler/icons-react'
4import { Mail, SendHorizontal } from 'lucide-react'
5import Image from 'next/image'
6import Link from 'next/link'
7 
8import HeaderOne from '../header/header-one'
9 
10export default function HeroSectionOne() {
11  return (
12    <section className="overflow-hidden bg-background text-foreground">
13      <HeaderOne />
14 
15      <div className="mt-20 flex flex-col items-center justify-center gap-6 px-4 py-16 sm:mt-10 md:py-24">
16        <Badge asChild variant="outline">
17          <Link
18            href="#announcement"
19            className="group gap-1 border-border/70 bg-muted/70 px-3 py-1.5 text-sm text-foreground shadow-sm ring-1 ring-foreground/5 transition-[background-color,color,box-shadow] duration-200 hover:bg-accent hover:text-accent-foreground hover:shadow-md"
20          >
21            Now available for teams and individuals
22            <IconCaretRightFilled
23              aria-hidden="true"
24              className="size-4 transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none"
25            />
26          </Link>
27        </Badge>
28 
29        <div className="mx-auto flex max-w-3xl flex-col items-center justify-center gap-4 text-center">
30          <h1 className="bg-linear-to-b from-zinc-950 via-zinc-800 to-zinc-600 bg-clip-text text-4xl leading-[1.15] font-semibold tracking-tight text-balance text-transparent md:text-5xl md:leading-[1.1] dark:from-white dark:via-zinc-200 dark:to-zinc-500">
31            Your personal AI workspace, built around how you actually work
32          </h1>
33 
34          <p className="max-w-xl text-base leading-relaxed text-balance text-muted-foreground md:text-lg">
35            A smart assistant that connects your notes, conversations, and files into one searchable
36            workspace — so you can find answers instantly and stay focused on real work.
37          </p>
38        </div>
39 
40        <div className="w-full pt-6">
41          <form className="mx-auto max-w-sm">
42            <div className="relative grid grid-cols-[1fr_auto] items-center rounded-full border border-border/80 bg-background pr-1 shadow-sm ring-1 shadow-zinc-950/5 ring-foreground/5 transition-[background-color,border-color,box-shadow] duration-200 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 dark:bg-muted/30 dark:shadow-black/30">
43              <Mail
44// … truncated