dionjoshualobo/ArtSplash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed the Jerks of the Marquee effect

Browse Source
This commit is contained in:
ShovinDsouza
2026-02-21 15:19:04 +05:30
parent 29fc82c104
commit 58394b4236
4 changed files with 258 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/CTA.tsx
View File

@@ -6,13 +6,7 @@ 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>
<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 }}
@@ -20,20 +14,20 @@ export default function CTA() {
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" />
<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-black mb-6 leading-tight">
<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-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-lime-600">
<span className="text-lime-400">
Your Masterpiece?
</span>
</h2>
<p className="text-zinc-600 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
<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.
@@ -49,7 +43,7 @@ export default function CTA() {
</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"
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>
@@ -61,11 +55,11 @@ export default function CTA() {
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"
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-700 font-medium">
Submissions close on <span className="text-black font-bold">February 28, 2026</span>
<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>