76 lines
3.1 KiB
TypeScript
76 lines
3.1 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-white relative overflow-hidden">
|
|
{/* Background Elements */}
|
|
<div className="absolute inset-0">
|
|
<div className="absolute top-0 left-1/4 w-96 h-96 bg-lime-100 rounded-full blur-3xl opacity-50" />
|
|
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-sky-100 rounded-full blur-3xl opacity-50" />
|
|
</div>
|
|
|
|
<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-black text-white px-4 py-2 text-xs font-medium tracking-wider rounded-full mb-8">
|
|
<Sparkles className="w-4 h-4 text-lime-400" />
|
|
LIMITED TIME
|
|
</div>
|
|
|
|
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-black mb-6 leading-tight">
|
|
Ready to Showcase
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-lime-600">
|
|
Your Masterpiece?
|
|
</span>
|
|
</h2>
|
|
|
|
<p className="text-zinc-600 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-white text-black px-10 py-5 text-base font-bold tracking-wide border-2 border-black hover:bg-black hover:text-white 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-100 px-6 py-3 rounded-full"
|
|
>
|
|
<span className="w-3 h-3 bg-red-500 rounded-full animate-pulse" />
|
|
<span className="text-zinc-700 font-medium">
|
|
Submissions close on <span className="text-black font-bold">February 28, 2026</span>
|
|
</span>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|