efa48f6f6b
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Limit mainwhite pattern to the landing hero and a bottom footer band; remove it from sections and page headers. Add vertical water-flow animation and stronger hero particles with hover boost. Fix green text on white sections and card descriptions in green bands, including the two-days program cards. Co-authored-by: Cursor <cursoragent@cursor.com>
59 lines
2.2 KiB
TypeScript
59 lines
2.2 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="topo-on-green-bg 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="topo-card-surface overflow-hidden border-0 bg-white text-[#1a5c38]">
|
|
<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-[#3d5248]">
|
|
Day {i + 1}
|
|
</p>
|
|
<CardTitle>{exp.title}</CardTitle>
|
|
<CardDescription className="text-[#3d5248]">{exp.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
variant="ghost"
|
|
className="topo-card-link px-0 hover:bg-transparent"
|
|
asChild
|
|
>
|
|
<Link href={exp.href}>
|
|
Learn more <ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|