269 lines
11 KiB
TypeScript
269 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Diamond, Users, Trophy, Palette, Target, Heart } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
const stats = [
|
|
{ number: "500+", label: "Expected Participants" },
|
|
{ number: "3", label: "Categories" },
|
|
{ number: "₹50K+", label: "Prize Pool" },
|
|
{ number: "1", label: "Week of Creativity" },
|
|
];
|
|
|
|
const values = [
|
|
{
|
|
icon: Palette,
|
|
title: "Creativity",
|
|
description: "We celebrate original thinking and artistic expression in all its forms.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Community",
|
|
description: "Building connections between artists and art enthusiasts across SJEC.",
|
|
},
|
|
{
|
|
icon: Trophy,
|
|
title: "Excellence",
|
|
description: "Recognizing and rewarding outstanding artistic talent and dedication.",
|
|
},
|
|
{
|
|
icon: Heart,
|
|
title: "Inclusivity",
|
|
description: "Welcoming artists of all skill levels and artistic backgrounds.",
|
|
},
|
|
];
|
|
|
|
const timeline = [
|
|
{ date: "Feb 15, 2026", event: "Registration Opens", status: "completed" },
|
|
{ date: "Feb 21, 2026", event: "Submissions Begin", status: "active" },
|
|
{ date: "Feb 28, 2026", event: "Submission Deadline", status: "upcoming" },
|
|
{ date: "Mar 1-5, 2026", event: "Public Voting", status: "upcoming" },
|
|
{ date: "Mar 7, 2026", event: "Winners Announced", status: "upcoming" },
|
|
];
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<main className="min-h-screen bg-black pt-32 pb-20">
|
|
{/* Hero Section */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center"
|
|
>
|
|
<span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
|
|
ABOUT US
|
|
</span>
|
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-white mb-6">
|
|
Celebrating Art at
|
|
<span className="text-lime-400"> SJEC</span>
|
|
</h1>
|
|
<p className="text-zinc-400 text-lg max-w-3xl mx-auto leading-relaxed">
|
|
ArtSplash is St. Joseph Engineering College's premier art competition,
|
|
brought to you by <span className="text-lime-400 font-semibold">Sceptix</span> —
|
|
the official technical club. We're on a mission to discover, celebrate,
|
|
and showcase the incredible artistic talent within our community.
|
|
</p>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Stats Section */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="grid grid-cols-2 md:grid-cols-4 gap-6"
|
|
>
|
|
{stats.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 text-center"
|
|
>
|
|
<div className="text-3xl sm:text-4xl font-black text-lime-400 mb-2">
|
|
{stat.number}
|
|
</div>
|
|
<div className="text-zinc-400 text-sm">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Mission Section */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="inline-block bg-zinc-800 text-lime-400 px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
|
|
OUR MISSION
|
|
</span>
|
|
<h2 className="text-3xl sm:text-4xl font-black text-white mb-6">
|
|
Empowering Artists,
|
|
<br />
|
|
<span className="text-lime-400">Inspiring Creativity</span>
|
|
</h2>
|
|
<p className="text-zinc-400 leading-relaxed mb-6">
|
|
ArtSplash was created to provide a platform where students can express
|
|
their creativity, gain recognition for their work, and connect with
|
|
fellow artists. Whether you're a digital artist, traditional painter,
|
|
or poster designer, there's a place for you here.
|
|
</p>
|
|
<p className="text-zinc-400 leading-relaxed">
|
|
Our competition is open to all SJEC students who want to showcase their
|
|
artistic talents. The public voting system ensures that the community
|
|
has a voice in celebrating the best artworks.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="grid grid-cols-2 gap-4"
|
|
>
|
|
{values.map((value, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 hover:border-lime-400/50 transition-colors"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-lime-400/10 flex items-center justify-center mb-4">
|
|
<value.icon className="w-6 h-6 text-lime-400" />
|
|
</div>
|
|
<h3 className="text-white font-bold mb-2">{value.title}</h3>
|
|
<p className="text-zinc-500 text-sm">{value.description}</p>
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Timeline Section */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<span className="inline-block bg-zinc-800 text-lime-400 px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
|
|
EVENT TIMELINE
|
|
</span>
|
|
<h2 className="text-3xl sm:text-4xl font-black text-white">
|
|
Important <span className="text-lime-400">Dates</span>
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="relative">
|
|
{/* Timeline Line */}
|
|
<div className="absolute left-1/2 top-0 bottom-0 w-px bg-zinc-800 hidden md:block" />
|
|
|
|
<div className="space-y-8">
|
|
{timeline.map((item, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className={`flex flex-col md:flex-row items-center gap-4 ${
|
|
index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
|
|
}`}
|
|
>
|
|
<div className={`flex-1 ${index % 2 === 0 ? "md:text-right" : "md:text-left"}`}>
|
|
<div
|
|
className={`inline-block bg-zinc-900 border rounded-2xl p-6 ${
|
|
item.status === "active"
|
|
? "border-lime-400"
|
|
: item.status === "completed"
|
|
? "border-zinc-700"
|
|
: "border-zinc-800"
|
|
}`}
|
|
>
|
|
<div className="text-lime-400 text-sm font-bold mb-1">{item.date}</div>
|
|
<div className="text-white font-semibold">{item.event}</div>
|
|
<div
|
|
className={`text-xs mt-2 px-2 py-1 rounded-full inline-block ${
|
|
item.status === "active"
|
|
? "bg-lime-400/20 text-lime-400"
|
|
: item.status === "completed"
|
|
? "bg-zinc-700 text-zinc-400"
|
|
: "bg-zinc-800 text-zinc-500"
|
|
}`}
|
|
>
|
|
{item.status === "active"
|
|
? "In Progress"
|
|
: item.status === "completed"
|
|
? "Completed"
|
|
: "Upcoming"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Dot */}
|
|
<div
|
|
className={`w-4 h-4 rounded-full border-4 ${
|
|
item.status === "active"
|
|
? "bg-lime-400 border-lime-400/30"
|
|
: item.status === "completed"
|
|
? "bg-zinc-600 border-zinc-700"
|
|
: "bg-zinc-800 border-zinc-700"
|
|
}`}
|
|
/>
|
|
|
|
<div className="flex-1 hidden md:block" />
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Organized By Section */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="bg-zinc-900 border border-zinc-800 rounded-3xl p-8 md:p-12 text-center"
|
|
>
|
|
<span className="inline-block bg-lime-400/10 text-lime-400 px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
|
|
ORGANIZED BY
|
|
</span>
|
|
<div className="flex items-center justify-center gap-3 mb-6">
|
|
<Diamond className="w-10 h-10 text-lime-400" />
|
|
<span className="text-3xl font-black text-white">SCEPTIX</span>
|
|
</div>
|
|
<p className="text-zinc-400 max-w-2xl mx-auto mb-8">
|
|
Sceptix is the official technical club of St. Joseph Engineering College,
|
|
dedicated to fostering innovation, creativity, and technical excellence
|
|
among students.
|
|
</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-8 py-4 text-sm font-bold tracking-wider hover:bg-lime-300 transition-all rounded-full"
|
|
>
|
|
JOIN ARTSPLASH
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="inline-flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 text-sm font-bold tracking-wider border border-zinc-700 hover:border-zinc-500 transition-all rounded-full"
|
|
>
|
|
CONTACT US
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|