FIX: Adding the Incoming Board
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
@@ -3,7 +3,7 @@ import Reveal from "./Reveal";
|
|||||||
|
|
||||||
const INCOMING_OFFICERS = [
|
const INCOMING_OFFICERS = [
|
||||||
{ role: "President", name: "Rtn. Er. G. Muralidharan", image: "/images/incoming-president1.png" },
|
{ role: "President", name: "Rtn. Er. G. Muralidharan", image: "/images/incoming-president1.png" },
|
||||||
{ role: "Secretary", name: "Rtn. M. Bhimarao", image: "/images/incoming-secretary1.png" },
|
{ role: "Secretary", name: "Rtn. M. Bhimarao", image: "/images/incoming-secretary2.png" },
|
||||||
{ role: "Treasurer", name: "Rtn. K. Kumar", image: "/images/incoming-treasurer.jpg" },
|
{ role: "Treasurer", name: "Rtn. K. Kumar", image: "/images/incoming-treasurer.jpg" },
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -21,23 +21,26 @@ export default function IncomingBoard() {
|
|||||||
</Reveal>
|
</Reveal>
|
||||||
|
|
||||||
<Reveal delay={100}>
|
<Reveal delay={100}>
|
||||||
<div className="mt-8 grid grid-cols-3 gap-3 sm:gap-6">
|
<div className="mt-8 grid grid-cols-3 gap-2.5 sm:gap-6">
|
||||||
{INCOMING_OFFICERS.map((o) => (
|
{INCOMING_OFFICERS.map((o) => (
|
||||||
<div key={o.role} className="flex flex-col items-center">
|
<div key={o.role} className="flex flex-col items-center">
|
||||||
<div className="w-full max-w-[9rem] rounded-2xl border border-rotary-gold/40 bg-white p-2 shadow-[0_6px_20px_-8px_rgba(3,20,58,0.25)] ring-1 ring-rotary-navy/[0.04] sm:max-w-[11rem]">
|
<div className="w-full max-w-[9rem] rounded-2xl border border-rotary-gold/40 bg-white p-1.5 shadow-[0_6px_20px_-8px_rgba(3,20,58,0.25)] ring-1 ring-rotary-navy/[0.04] sm:max-w-[11rem] sm:p-2">
|
||||||
<div className="overflow-hidden rounded-xl">
|
<div className="relative aspect-[3/4] w-full overflow-hidden rounded-xl">
|
||||||
<Image
|
<Image
|
||||||
src={o.image}
|
src={o.image}
|
||||||
alt={`${o.name}, ${o.role} 2026-27`}
|
alt={`${o.name}, ${o.role} 2026-27`}
|
||||||
width={400}
|
fill
|
||||||
height={500}
|
sizes="(min-width: 640px) 176px, 33vw"
|
||||||
sizes="(min-width: 640px) 176px, 144px"
|
className="object-cover object-top"
|
||||||
className="h-auto w-full object-contain"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-3 text-center text-sm font-semibold text-rotary-navy">{o.name}</p>
|
<p className="mt-2 text-center text-[11px] font-semibold leading-tight text-rotary-navy sm:mt-3 sm:text-sm">
|
||||||
<p className="text-center text-xs uppercase tracking-wider text-rotary-ink/50">{o.role}</p>
|
{o.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-center text-[9px] uppercase tracking-wider text-rotary-ink/50 sm:text-xs">
|
||||||
|
{o.role}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user