Hero 2

"use client";

import { ArrowRightIcon } from "lucide-react";
import { motion } from "motion/react";
import { ContentRail, SectionShell } from "@/components/layout-contract";
import { Button } from "@/components/ui/button";
import { GridPattern } from "@/components/ui/grid-pattern";
import { cn } from "@/lib/utils";

export function HeroMotionSection() {
	return (
		<SectionShell spacingMode="section" className="relative isolate overflow-hidden lg:py-16">
			<div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
				<div className="absolute top-0 left-1/2 h-[640px] w-[900px] -translate-x-1/2 rounded-full bg-primary/[0.09] blur-3xl" />
				<div className="absolute -bottom-32 left-1/2 h-[400px] w-[600px] -translate-x-1/2 rounded-full bg-foreground/[0.03] blur-3xl" />
				<GridPattern
					className="absolute inset-0 mask-[radial-gradient(ellipse_at_top,white,transparent_68%)] stroke-foreground/[0.07]"
					height={56}
					width={56}
				/>
			</div>

			<ContentRail className="relative text-center" maxWidth="max-w-4xl">
				<motion.a
					className="group mb-8 inline-flex items-center gap-2 rounded-[var(--radius-md)] border bg-card/80 px-3 py-1.5 text-sm font-medium shadow-sm backdrop-blur-sm transition-colors hover:bg-card"
					href="#"
					initial={{ opacity: 0, y: 12 }}
					animate={{ opacity: 1, y: 0 }}
					transition={{ duration: 0.5 }}
				>
					<span className="size-1.5 rounded-full bg-primary" />
					<span>Now with Slack &amp; Jira integrations</span>
					<ArrowRightIcon className="size-3.5 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
				</motion.a>

				<motion.h1
					className={cn(
						"text-balance font-medium text-4xl tracking-[-0.04em] md:text-6xl lg:text-7xl",
						"text-shadow-[0_0px_80px_theme(--color-foreground/.12)]",
					)}
					initial={{ opacity: 0, y: 24 }}
					animate={{ opacity: 1, y: 0 }}
					transition={{ duration: 0.6, delay: 0.1 }}
				>
					Build faster with a platform
					<span className="block text-muted-foreground">your team will love</span>
				</motion.h1>

				<motion.p
					className="mx-auto mt-6 max-w-2xl text-muted-foreground text-base md:text-lg"
					initial={{ opacity: 0, y: 16 }}
					animate={{ opacity: 1, y: 0 }}
					transition={{ duration: 0.5, delay: 0.2 }}
				>
					Plan roadmaps, ship features, and align stakeholders — all in one workspace
					designed for product teams that move fast.
				</motion.p>

				<motion.div
					className="mt-10 flex flex-wrap items-center justify-center gap-3"
					initial={{ opacity: 0, y: 16 }}
					animate={{ opacity: 1, y: 0 }}
					transition={{ duration: 0.5, delay: 0.3 }}
				>
					<Button>
						Get started free
						<ArrowRightIcon data-icon="inline-end" />
					</Button>
					<Button variant="outline">Talk to sales</Button>
				</motion.div>
			</ContentRail>
		</SectionShell>
	);
}