70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight, Sparkles } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default function CTA() {
|
|
return (
|
|
<section className="py-24 bg-black relative overflow-hidden">
|
|
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<div className="inline-flex items-center gap-2 bg-lime-400 text-black px-4 py-2 text-xs font-bold tracking-wider rounded-full mb-8">
|
|
<Sparkles className="w-4 h-4" />
|
|
LIMITED TIME
|
|
</div>
|
|
|
|
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-white mb-6 leading-tight">
|
|
Ready to Showcase
|
|
<br />
|
|
<span className="text-lime-400">
|
|
Your Masterpiece?
|
|
</span>
|
|
</h2>
|
|
|
|
<p className="text-zinc-400 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
|
|
Join hundreds of talented artists from SJEC in this creative
|
|
celebration. Submit your artwork and let the world vote for your
|
|
talent.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Link
|
|
href="/register"
|
|
className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-10 py-5 text-base font-bold tracking-wide hover:bg-lime-300 transition-all hover:scale-105 rounded-full shadow-xl shadow-lime-400/25"
|
|
>
|
|
REGISTER NOW
|
|
<ArrowRight className="w-5 h-5" />
|
|
</Link>
|
|
<Link
|
|
href="/rules"
|
|
className="inline-flex items-center justify-center gap-2 bg-transparent text-white px-10 py-5 text-base font-bold tracking-wide border-2 border-zinc-700 hover:border-lime-400 hover:text-lime-400 transition-all rounded-full"
|
|
>
|
|
VIEW RULES
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Deadline Notice */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.3 }}
|
|
className="mt-12 inline-flex items-center gap-3 bg-zinc-900 border border-zinc-800 px-6 py-3 rounded-full"
|
|
>
|
|
<span className="w-3 h-3 bg-red-500 rounded-full animate-pulse" />
|
|
<span className="text-zinc-400 font-medium">
|
|
Submissions close on <span className="text-lime-400 font-bold">February 28, 2026</span>
|
|
</span>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|