3693495dd0
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>
55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { experiences } from "@/content/program";
|
|
import { Section } from "@/components/layout/Section";
|
|
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
|
|
import { ScrollReveal } from "@/components/motion/ScrollReveal";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
export function ExperienceCards() {
|
|
return (
|
|
<Section variant="inverse" id="program">
|
|
<TopoProseSurface tone="green" className="max-w-3xl">
|
|
<h2 className="text-3xl font-bold md:text-5xl">
|
|
Two days to go deep into what Ethiopia's innovators need
|
|
</h2>
|
|
<p className="mt-4 max-w-2xl text-white/85">
|
|
Workshops, exhibition, and Africa's largest non-dilutive grant pitch event.
|
|
</p>
|
|
</TopoProseSurface>
|
|
<div className="mt-12 grid gap-6 md:grid-cols-3">
|
|
{experiences.map((exp, i) => (
|
|
<ScrollReveal key={exp.id} variant="card" delay={i * 90} as="div">
|
|
<Card className="overflow-hidden border-0 bg-white text-foreground">
|
|
<div className="relative h-48">
|
|
<Image
|
|
src="/branding/booth-mockup.png"
|
|
alt={exp.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<CardHeader>
|
|
<p className="text-xs font-medium uppercase text-muted-foreground">
|
|
Day {i + 1}
|
|
</p>
|
|
<CardTitle>{exp.title}</CardTitle>
|
|
<CardDescription>{exp.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button variant="ghost" className="px-0 text-[#1f3d7e]" asChild>
|
|
<Link href={exp.href}>
|
|
Learn more <ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|