first commit
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@@ -1,28 +1,26 @@
|
||||
import Image from "next/image";
|
||||
import Reveal from "./Reveal";
|
||||
|
||||
const DETAILS = [
|
||||
{
|
||||
label: "Date",
|
||||
value: "3rd July 2026",
|
||||
sub: "Friday",
|
||||
icon: (
|
||||
<path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Time",
|
||||
value: "6:30 PM",
|
||||
sub: "Doors open at 6:00 PM",
|
||||
icon: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 3" strokeLinecap="round" strokeLinejoin="round" /></>,
|
||||
},
|
||||
{
|
||||
label: "Venue",
|
||||
value: "Hotel Khanna, Laya Hall",
|
||||
sub: "Anna Salai, Vellore",
|
||||
value: "Ladies Recreation Club, 19 Anna Salai, Bishop David Nagar, Kosapet, Vellore, Tamil Nadu 632001",
|
||||
icon: (
|
||||
<><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21Z" strokeLinecap="round" strokeLinejoin="round" /><circle cx="12" cy="9.5" r="2.5" /></>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Landmark",
|
||||
value: "Near Mummy Hospital, easily spotted off Anna Salai",
|
||||
icon: (
|
||||
<path d="M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6M9 12h.01M15 12h.01" strokeLinecap="round" strokeLinejoin="round" />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Meeting Time",
|
||||
value: "Every Friday, 7:30 PM onwards",
|
||||
icon: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 3" strokeLinecap="round" strokeLinejoin="round" /></>,
|
||||
},
|
||||
];
|
||||
|
||||
export default function EventDetails() {
|
||||
@@ -31,35 +29,57 @@ export default function EventDetails() {
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<Reveal>
|
||||
<p className="text-center text-xs font-semibold uppercase tracking-[0.28em] text-rotary-azure">
|
||||
Save the date
|
||||
Where we meet
|
||||
</p>
|
||||
<h2 className="mt-2 text-center font-serif text-3xl font-semibold text-rotary-navy sm:text-4xl">
|
||||
Join us for the evening
|
||||
<h2 className="mt-2 text-center text-3xl font-semibold text-rotary-navy sm:text-4xl">
|
||||
Join us every week
|
||||
</h2>
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-8 grid gap-3 sm:grid-cols-3">
|
||||
{DETAILS.map((d, i) => (
|
||||
<Reveal key={d.label} delay={i * 100}>
|
||||
<div className="group flex h-full items-center gap-3 rounded-xl border border-rotary-navy/[0.06] bg-white p-3.5 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md hover:shadow-rotary-blue/10">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-rotary-blue/[0.08] text-rotary-blue transition-colors duration-300 group-hover:bg-rotary-gold/15 group-hover:text-rotary-gold">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4">
|
||||
{/* Meeting details + location, as simple points below the title */}
|
||||
<Reveal delay={60}>
|
||||
<ul className="mx-auto mt-6 max-w-2xl space-y-3">
|
||||
{DETAILS.map((d) => (
|
||||
<li key={d.label} className="flex items-start gap-3">
|
||||
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-rotary-blue/[0.08] text-rotary-blue">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-3.5 w-3.5">
|
||||
{d.icon}
|
||||
</svg>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-rotary-azure">
|
||||
{d.label}
|
||||
</span>
|
||||
<p className="text-sm leading-relaxed text-rotary-ink/75">
|
||||
<span className="font-semibold text-rotary-navy">{d.label}: </span>
|
||||
{d.value}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Reveal>
|
||||
|
||||
{/* Premium portrait photo */}
|
||||
<Reveal delay={120}>
|
||||
<div className="mt-8 flex justify-center">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-3 rounded-[1.75rem] border border-rotary-gold/30" />
|
||||
<div className="relative h-64 w-64 overflow-hidden rounded-[1.5rem] shadow-[0_20px_50px_-20px_rgba(3,20,58,0.35)] ring-4 ring-white sm:h-80 sm:w-[880px]">
|
||||
<Image
|
||||
src="/images/meeting.png"
|
||||
alt="Rotary Club of Vellore weekly meeting"
|
||||
fill
|
||||
sizes="288px"
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-rotary-navy/85 to-transparent px-4 pb-4 pt-10">
|
||||
<p className="text-[10px] uppercase tracking-widest text-rotary-goldlight">
|
||||
Fellowship, every week
|
||||
</p>
|
||||
<p className="truncate font-serif text-base font-semibold leading-tight text-rotary-navy">
|
||||
{d.value}
|
||||
<p className="font-serif text-base font-semibold leading-tight text-white">
|
||||
Fridays · 7:30 PM
|
||||
</p>
|
||||
<p className="truncate text-xs text-rotary-ink/55">{d.sub}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -6,12 +6,12 @@ const GUESTS = [
|
||||
name: "Rtn. PDG. M. Rajan Babu",
|
||||
role: "Chief Guest",
|
||||
subrole: "Past District Governor, 3231",
|
||||
photo: "/images/chief-guest-couple.png",
|
||||
photo: "/images/chief-guest-couple.jpg",
|
||||
},
|
||||
{
|
||||
name: "Rtn. Yelagiri V. Selvam",
|
||||
role: "Guest of Honour",
|
||||
subrole: "Chairman, Kodai Vizha 2026 – 27",
|
||||
subrole: "Chairman, Kodai Vizha 2026 - 27",
|
||||
photo: "/images/guest-of-honour.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
+102
-29
@@ -30,43 +30,116 @@ function OfficerCard({
|
||||
<div
|
||||
className={`relative overflow-hidden rounded-2xl border p-6 sm:p-7 ${
|
||||
incoming
|
||||
? "border-rotary-gold/30 bg-rotary-navy text-white shadow-lg shadow-rotary-navy/20"
|
||||
? "border-white/15 bg-rotary-navy text-white shadow-[inset_0_0_60px_-8px_rgba(56,146,246,0.45),0_10px_30px_-12px_rgba(3,20,58,0.5)]"
|
||||
: "border-rotary-navy/[0.08] bg-white"
|
||||
}`}
|
||||
>
|
||||
{incoming && (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
|
||||
<div className="absolute inset-y-0 -left-1/4 w-1/3 -skew-x-12 bg-gradient-to-r from-transparent via-rotary-amber/35 to-transparent blur-2xl animate-shine" />
|
||||
{/* base tint so the waves have water to sit "in" */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-rotary-navy via-[#0c2f63] to-[#123a7a]" />
|
||||
|
||||
{/* far layer — slow, soft, deep */}
|
||||
<svg
|
||||
className="wave-layer wave-far absolute -bottom-10 left-0 h-40 w-[200%] opacity-40 blur-2xl"
|
||||
viewBox="0 0 1600 200"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 100 C 80 60, 160 140, 240 100 C 320 60, 400 140, 480 100 C 560 60, 640 140, 720 100 C 800 60, 880 140, 800 100 L 800 200 L 0 200 Z
|
||||
M800 100 C 880 60, 960 140, 1040 100 C 1120 60, 1200 140, 1280 100 C 1360 60, 1440 140, 1520 100 C 1600 60, 1680 140, 1600 100 L 1600 200 L 800 200 Z"
|
||||
fill="rgba(125,196,255,0.5)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* mid layer — brighter, medium speed */}
|
||||
<svg
|
||||
className="wave-layer wave-mid absolute -bottom-6 left-0 h-32 w-[200%] opacity-50 blur-lg"
|
||||
viewBox="0 0 1600 200"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 110 C 100 150, 200 70, 300 110 C 400 150, 500 70, 600 110 C 700 150, 800 70, 800 110 L 800 200 L 0 200 Z
|
||||
M800 110 C 900 150, 1000 70, 1100 110 C 1200 150, 1300 70, 1400 110 C 1500 150, 1600 70, 1600 110 L 1600 200 L 800 200 Z"
|
||||
fill="rgba(190,224,255,0.45)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* near layer — brightest crest line, thin, fast */}
|
||||
<svg
|
||||
className="wave-layer wave-near absolute -bottom-3 left-0 h-20 w-[200%] opacity-60 blur-md"
|
||||
viewBox="0 0 1600 200"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 120 C 60 95, 120 145, 180 120 C 240 95, 300 145, 360 120 C 420 95, 480 145, 540 120 C 600 95, 660 145, 720 120 C 780 95, 800 120, 800 120 L 800 200 L 0 200 Z
|
||||
M800 120 C 860 95, 920 145, 980 120 C 1040 95, 1100 145, 1160 120 C 1220 95, 1280 145, 1340 120 C 1400 95, 1460 145, 1520 120 C 1580 95, 1600 120, 1600 120 L 1600 200 L 800 200 Z"
|
||||
fill="rgba(255,255,255,0.4)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* frosted glass film */}
|
||||
<div className="absolute inset-0 bg-white/[0.04] backdrop-blur-[3px]" />
|
||||
|
||||
{/* diagonal glass sheen */}
|
||||
<div className="sheen absolute inset-y-0 -left-1/3 w-1/3 -skew-x-12 bg-gradient-to-r from-transparent via-white/15 to-transparent" />
|
||||
|
||||
<style>{`
|
||||
.wave-far {
|
||||
animation: waveScroll 16s linear infinite;
|
||||
}
|
||||
.wave-mid {
|
||||
animation: waveScroll 11s linear infinite reverse;
|
||||
}
|
||||
.wave-near {
|
||||
animation: waveScroll 7s linear infinite;
|
||||
}
|
||||
.sheen {
|
||||
animation: sheenSweep 6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes waveScroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
@keyframes sheenSweep {
|
||||
0% { transform: translateX(0) skewX(-12deg); }
|
||||
50% { transform: translateX(340%) skewX(-12deg); }
|
||||
100% { transform: translateX(0) skewX(-12deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)}
|
||||
<p
|
||||
className={`text-xs font-semibold uppercase tracking-[0.2em] ${
|
||||
incoming ? "text-rotary-goldlight" : "text-rotary-azure"
|
||||
}`}
|
||||
>
|
||||
{incoming ? "Incoming Board" : "Outgoing Board"}
|
||||
</p>
|
||||
<p className={`mt-1 font-serif text-2xl font-semibold ${incoming ? "text-white" : "text-rotary-navy"}`}>
|
||||
{group.label}
|
||||
</p>
|
||||
|
||||
<ul className="mt-5 space-y-3.5">
|
||||
{group.officers.map((o) => (
|
||||
<li
|
||||
key={o.role}
|
||||
className={`flex items-center justify-between gap-4 border-b pb-3.5 last:border-b-0 last:pb-0 ${
|
||||
incoming ? "border-white/10" : "border-rotary-navy/[0.06]"
|
||||
}`}
|
||||
>
|
||||
<span className={`text-sm ${incoming ? "text-white/60" : "text-rotary-ink/55"}`}>
|
||||
{o.role}
|
||||
</span>
|
||||
<span className={`text-right text-sm font-medium ${incoming ? "text-white" : "text-rotary-navy"}`}>
|
||||
{o.name}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="relative">
|
||||
<p
|
||||
className={`text-xs font-semibold uppercase tracking-[0.2em] ${
|
||||
incoming ? "text-rotary-skylight" : "text-rotary-azure"
|
||||
}`}
|
||||
>
|
||||
{incoming ? "Incoming Board" : "Outgoing Board"}
|
||||
</p>
|
||||
<p className={`mt-1 font-serif text-2xl font-semibold ${incoming ? "text-white" : "text-rotary-navy"}`}>
|
||||
{group.label}
|
||||
</p>
|
||||
|
||||
<ul className="mt-5 space-y-3.5">
|
||||
{group.officers.map((o) => (
|
||||
<li
|
||||
key={o.role}
|
||||
className={`flex items-center justify-between gap-4 border-b pb-3.5 last:border-b-0 last:pb-0 ${
|
||||
incoming ? "border-white/10" : "border-rotary-navy/[0.06]"
|
||||
}`}
|
||||
>
|
||||
<span className={`text-sm ${incoming ? "text-white/60" : "text-rotary-ink/55"}`}>
|
||||
{o.role}
|
||||
</span>
|
||||
<span className={`text-right text-sm font-medium ${incoming ? "text-white" : "text-rotary-navy"}`}>
|
||||
{o.name}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+44
-41
@@ -16,53 +16,56 @@ export default function Hero() {
|
||||
/>
|
||||
|
||||
<div className="relative mx-auto max-w-7xl">
|
||||
{/* Brand row — replaces the old header's logo now that it's gone */}
|
||||
<div className="mb-12 flex flex-wrap items-center gap-4 sm:mb-16">
|
||||
<span className="flex flex-col leading-tight">
|
||||
<span className="font-serif text-base font-semibold tracking-tight text-white sm:text-lg">
|
||||
Rotary Club of Vellore
|
||||
{/* Row 1: thumbnails on the left, brand name + logo on the right */}
|
||||
<div className="mb-10 flex items-center justify-between gap-4 sm:mb-12">
|
||||
{/* Advisor + President thumbnails */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-white/15 sm:h-34 sm:w-34">
|
||||
<Image
|
||||
src="/images/club-advisor.jpg"
|
||||
alt="Rtn. Dr. T. Jacob John, Club Advisor"
|
||||
fill
|
||||
sizes="96px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-rotary-gold/60 sm:h-34 sm:w-34">
|
||||
<Image
|
||||
src="/images/TSRavikumar.png"
|
||||
alt="Rtn. Er. G. Muralidharan, President 2026-27"
|
||||
fill
|
||||
sizes="96px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Brand name + logo */}
|
||||
<div className="flex items-center gap-5">
|
||||
<span className="hidden flex-col leading-tight text-right sm:flex">
|
||||
<span className="font-serif text-lg font-semibold tracking-tight text-white sm:text-xl">
|
||||
Rotary Club of Vellore
|
||||
</span>
|
||||
<span className="text-xs uppercase tracking-[0.18em] text-rotary-goldlight/90">
|
||||
District 3231 · Est. 1948
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-[11px] uppercase tracking-[0.18em] text-rotary-goldlight/90">
|
||||
District 3231 · Est. 1948
|
||||
</span>
|
||||
</span>
|
||||
<span className="hidden h-8 w-px bg-white/15 sm:block" />
|
||||
<div className="rounded-xl bg-white px-3 py-1.5 shadow-lg shadow-black/20">
|
||||
<Image
|
||||
src="/images/rotary-logo.png"
|
||||
alt="Rotary International — Create Lasting Impact"
|
||||
width={220}
|
||||
height={64}
|
||||
className="h-9 w-auto object-contain sm:h-11"
|
||||
/>
|
||||
<div className="rounded-xl bg-white px-4 py-2.5 shadow-lg shadow-black/20">
|
||||
<Image
|
||||
src="/images/rotary-logo.png"
|
||||
alt="Rotary International — Create Lasting Impact"
|
||||
width={220}
|
||||
height={64}
|
||||
className="h-12 w-auto object-contain sm:h-14"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: content on the left, president portrait centered on the right */}
|
||||
<div className="grid items-center gap-12 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
{/* Copy */}
|
||||
<div className="animate-fade-up">
|
||||
{/* Advisor + President thumbnails */}
|
||||
<div className="mb-6 flex items-center gap-4">
|
||||
<div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-white/15 sm:h-34 sm:w-34">
|
||||
<Image
|
||||
src="/images/club-advisor.jpg"
|
||||
alt="Rtn. Dr. T. Jacob John, Club Advisor"
|
||||
fill
|
||||
sizes="96px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-rotary-gold/60 sm:h-34 sm:w-34">
|
||||
<Image
|
||||
src="/images/president1.jpg"
|
||||
alt="Rtn. Er. G. Muralidharan, President 2026-27"
|
||||
fill
|
||||
sizes="96px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-rotary-goldlight">
|
||||
Rotary Club of Vellore · Club No. 15900 · Charter 05.03.1948
|
||||
</p>
|
||||
@@ -114,7 +117,7 @@ export default function Hero() {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* President portrait */}
|
||||
{/* President portrait — vertically centered against the copy column */}
|
||||
<div className="animate-fade-up [animation-delay:150ms] justify-self-center lg:justify-self-end">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-3 rounded-[2rem] border border-rotary-gold/30" />
|
||||
|
||||
Reference in New Issue
Block a user