Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. Co-authored-by: Cursor <cursoragent@cursor.com>
80 lines
3.0 KiB
TypeScript
80 lines
3.0 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 { ScrollReveal } from "@/components/motion/ScrollReveal";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function AttendSummitSection() {
|
|
return (
|
|
<Section id="attend" variant="muted" 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-[#ffb300]">
|
|
{attendCopy.eyebrow}
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight text-white md:text-4xl">
|
|
{attendCopy.headline}
|
|
</h2>
|
|
<p className="mt-4 text-white/85 leading-relaxed">{attendCopy.subheadline}</p>
|
|
<p className="mt-2 text-sm font-medium text-white/75">
|
|
{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, i) => {
|
|
const Icon = path.icon;
|
|
return (
|
|
<ScrollReveal
|
|
key={path.id}
|
|
variant="card"
|
|
delay={i * 75}
|
|
as="article"
|
|
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>
|
|
</ScrollReveal>
|
|
);
|
|
})}
|
|
</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-white/40 bg-transparent text-white hover:bg-white/10 hover:text-white"
|
|
asChild
|
|
>
|
|
<Link href="/contact">Contact the team</Link>
|
|
</Button>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|