GRV-Summit-Site/components/home/AttendSummitSection.tsx
“kirukib” 3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Add site-wide topography patterns and refine section styling.
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>
2026-05-20 20:34:36 +03:00

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>
);
}