forked from UKSOURCE/ipv6
58 lines
2.7 KiB
TypeScript
58 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
type Props = {
|
|
data: {
|
|
title: string;
|
|
description: string;
|
|
registerBtn: string;
|
|
viewMembersBtn: string;
|
|
};
|
|
};
|
|
|
|
export default function ReadyToJoin({ data }: Props) {
|
|
return (
|
|
<section className="py-[var(--spacing-section-gap)] relative px-[var(--spacing-gutter)] max-w-hd mx-auto">
|
|
<div className="max-w-5xl mx-auto glass-panel gold-border p-8 sm:p-12 lg:p-20 rounded-[2.5rem] lg:rounded-[4rem] overflow-hidden relative shadow-2xl">
|
|
{/* Background Decor */}
|
|
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-primary/5 to-transparent pointer-events-none" />
|
|
<div className="absolute -bottom-24 -right-24 w-96 h-96 bg-primary/10 blur-[120px] rounded-full pointer-events-none" />
|
|
<div className="absolute -top-24 -left-24 w-96 h-96 bg-primary/5 blur-[120px] rounded-full pointer-events-none" />
|
|
|
|
<div className="relative z-10 text-center space-y-6 sm:space-y-8">
|
|
{/* Title */}
|
|
<h2 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3.5vw,3rem)] text-on-surface mb-4 leading-[1.1] tracking-tight">
|
|
{data.title}
|
|
</h2>
|
|
|
|
{/* Description */}
|
|
<p className="font-[var(--font-body-base)] text-sm sm:text-base lg:text-[18px] text-on-surface-variant max-w-3xl mx-auto leading-relaxed opacity-80">
|
|
{data.description}
|
|
</p>
|
|
|
|
{/* Call-to-Action Buttons */}
|
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6 pt-4">
|
|
<Link
|
|
href="/registration"
|
|
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 gold-gradient-bg text-on-primary px-8 lg:px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs lg:text-sm shadow-2xl shadow-primary/20 hover:shadow-primary/40 hover:scale-105 active:scale-95 transition-all duration-300 group"
|
|
>
|
|
<span>{data.registerBtn}</span>
|
|
<span className="material-symbols-outlined group-hover:translate-x-1.5 transition-transform text-lg">
|
|
arrow_forward
|
|
</span>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/#agenda"
|
|
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-surface-container-high hover:bg-surface-container-highest border border-white/10 hover:border-primary/40 text-on-surface-variant px-8 lg:px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs lg:text-sm hover:scale-105 active:scale-95 transition-all duration-300"
|
|
>
|
|
<span>{data.viewMembersBtn}</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|