1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { attendCopy, attendPaths } from "@/content/attend";
|
|
import { site } from "@/content/site";
|
|
import { Section } from "@/components/layout/Section";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function AttendSummitSection() {
|
|
return (
|
|
<Section id="attend" variant="muted" riftPattern="vein-left" className="py-14 md:py-20">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-[#1a5c38]">
|
|
{attendCopy.eyebrow}
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl">
|
|
{attendCopy.headline}
|
|
</h2>
|
|
<p className="mt-4 text-muted-foreground leading-relaxed">{attendCopy.subheadline}</p>
|
|
<p className="mt-2 text-sm font-medium text-[#1a5c38]/80">
|
|
{site.dates.label} · {site.venue.name}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
|
{attendPaths.map((path) => {
|
|
const Icon = path.icon;
|
|
return (
|
|
<article
|
|
key={path.id}
|
|
className={cn(
|
|
"group flex flex-col rounded-2xl border border-border bg-white p-6 shadow-sm",
|
|
"transition-shadow duration-200 hover:border-[#1a5c38]/25 hover:shadow-md"
|
|
)}
|
|
>
|
|
<span className="inline-flex size-11 items-center justify-center rounded-xl bg-[#1a5c38]/10 text-[#1a5c38]">
|
|
<Icon className="size-5" strokeWidth={1.75} aria-hidden />
|
|
</span>
|
|
<h3 className="mt-4 text-lg font-bold text-foreground">{path.title}</h3>
|
|
<p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">
|
|
{path.description}
|
|
</p>
|
|
<Button
|
|
variant="ghost"
|
|
className="mt-5 h-auto justify-start px-0 text-[#1a5c38] hover:bg-transparent hover:text-[#0d3d26]"
|
|
asChild
|
|
>
|
|
<Link href={path.href}>
|
|
{path.cta}
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
|
|
</Link>
|
|
</Button>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-10 flex flex-wrap items-center justify-center gap-3">
|
|
<Button
|
|
className="rounded-full bg-[#ffb300] px-8 text-[#0f0404] hover:bg-[#ffb300]/90"
|
|
asChild
|
|
>
|
|
<Link href="/payment">Get tickets</Link>
|
|
</Button>
|
|
<Button variant="outline" className="rounded-full border-[#1a5c38]/30 text-[#1a5c38]" asChild>
|
|
<Link href="/contact">Contact the team</Link>
|
|
</Button>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|