Skip to content

New UX #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
theamankumarsingh merged 10 commits into from
May 6, 2026
Merged

New UX #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c30bef0
chore: Change online round date
theamankumarsingh May 4, 2026
8b2f210
feat: restructure homepage layout and modernize top navigation compon…
BIJJUDAMA May 5, 2026
e99f59c
feat: implement tactical hero section with modernized glitch and type…
BIJJUDAMA May 5, 2026
11069b1
feat: standardize about, prizes, and faq sections with tactical badge…
BIJJUDAMA May 5, 2026
f652151
feat: implement mission timeline and modernized training and resource…
BIJJUDAMA May 5, 2026
f100dd2
feat: unify speakers and sponsors sections with centered tactical hea…
BIJJUDAMA May 5, 2026
ffb68f4
fix: optimize responsive layouts for mission control and bento compon…
BIJJUDAMA May 5, 2026
53c9a40
fix: resolve typescript build errors in TopBar component by aligning …
BIJJUDAMA May 5, 2026
51da2a2
fix: remove CBSE logo
BIJJUDAMA May 5, 2026
b25ca93
Merge branch 'main' into develop
theamankumarsingh May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 27 additions & 94 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,20 @@ import React, { useState, useEffect } from 'react';
import TopBar from '../src/components/shared/TopBar';
import StarfieldBackground from '../src/components/shared/StarfieldBackground';
import LandingHeader from '../src/components/landing/Header';
import MissionBrief from '../src/components/landing/MissionBrief';
import CrewEligibility from '../src/components/landing/CrewEligibility';
import CrewRewards from '../src/components/landing/CrewRewards';
import MissionCredentials from '../src/components/landing/MissionCredentials';
import PastSponsorsTable from '../src/components/landing/PastSponsorsTable';
import LandingAboutInCTF from '../src/components/landing/About';
import LandingTrainingSection from '../src/components/landing/TrainingSection';
import LandingResourcesSection from '../src/components/landing/ResourcesSection';
import LandingPrizeDetails from '../src/components/landing/Prizes';
import LandingFAQ from '../src/components/landing/LandingFAQ';
import LandingOrganizedBy from '../src/components/landing/LandingOrganizedBy';
import CurrentSpeakers from '../src/components/landing/CurrentSpeakers';
import OperationTimeline from '../src/components/landing/OperationTimeline';
import CurrentSponsors from '../src/components/landing/CurrentSponsors';
import Footer from '../src/components/shared/Footer';
import JoinMissionControl from '../src/components/landing/JoinMissionControl';
import BentoCard from '../src/components/landing/BentoCard';
import Link from 'next/link';
import BentoGridContainer from '../src/components/landing/BentoGridContainer';
import BentoHoverButton from '../src/components/landing/BentoHoverButton';
import FloatingContactButton from '@/src/components/landing/FloatingContactForm';

import LandingChampionshipWorks from '../src/components/landing/HowItWorks';
export default function LandingPage() {
return (
<div className="bg-obsidian min-h-screen text-ghost-white relative overflow-x-hidden" id="landing-page">
<div className="scanlines fixed inset-0 pointer-events-none z-50"></div>

{/* Blurred Satellite Background */}
<div className="fixed inset-0 z-0 pointer-events-none overflow-hidden">
<img
Expand All @@ -45,94 +38,34 @@ export default function LandingPage() {

<section className="relative z-50 overflow-x-hidden pt-12 md:pt-10 flex flex-col justify-center -mt-4 md:-mt-8">
<LandingHeader />
<CurrentSponsors />
</section>

{/* Mission Timeline Section */}
<OperationTimeline />
{/* About / What is InCTF Section */}
<LandingAboutInCTF />

{/* Current Speakers Section */}
<CurrentSpeakers />
{/* Why Participate — Prizes, Perks & Career Outcomes Section */}
<LandingPrizeDetails />

{/* Bento Grid Section */}
<section className="py-16 relative z-30" id="mission-grid">
<div className="container mx-auto px-4">
<BentoGridContainer>
{/* 1. Mission Brief */}
<div className="md:col-span-2 flex w-full bento-card-wrapper opacity-0">
<BentoCard title="Mission Brief">
<div className="flex-grow flex flex-col justify-between">
<div className="text-sky-digital font-mono text-sm md:text-base mb-6 leading-relaxed space-y-4">
<p className="flex items-start"><span className="text-alert-crimson mr-2">&gt;</span> A dormant deep-orbit system has resumed transmission. Unidentified protocols, unauthorized access attempts, and system anomalies have been detected across critical digital infrastructure.</p>
<p className="flex items-start"><span className="text-alert-crimson mr-2">&gt;</span> In response, Amrita InCTF 2026 has been activated as a national-level operation to recruit, train, and evaluate cyber defence personnel capable of analysing advanced threats, decoding unfamiliar systems, and securing sensitive digital assets under real-world conditions.</p>
</div>
<div className="mt-auto text-center">
<Link href="/mission-brief">
<button className="px-6 py-2 border border-alert-crimson text-alert-crimson hover:bg-alert-crimson hover:text-white hover:-translate-y-1 font-mono uppercase tracking-wider text-sm transition shadow-[0_0_12px_rgba(244,63,94,0.25)] hover:shadow-[0_0_20px_rgba(244,63,94,0.5)]">
[ Know More ]
</button>
</Link>
</div>
</div>
</BentoCard>
</div>
{/* How the Championship Works Section */}
<LandingChampionshipWorks />

{/* 2. Crew Eligibility */}
<div className="md:col-span-1 flex w-full bento-card-wrapper opacity-0">
<BentoCard title="Crew Eligibility">
<div className="flex-grow flex flex-col justify-between">
<ul className="space-y-3 text-sky-digital font-mono text-sm md:text-base mb-6">
<li className="flex items-start"><span className="mr-2 text-alert-crimson">&gt;</span> Undergraduate students (1st, 2nd, 3rd, and 4th year)</li>
<li className="flex items-start"><span className="mr-2 text-alert-crimson">&gt;</span> Disciplines: Computer Science, IT, AI, Cyber Security, ECE, and related fields</li>
<li className="flex items-start"><span className="mr-2 text-alert-crimson">&gt;</span> Cyber-security-interested professionals</li>
<li className="flex items-start"><span className="mr-2 text-alert-crimson">&gt;</span> Teams consisting of 1 to 5 members</li>
</ul>
<div className="mt-auto text-center">
<Link href="/eligibility">
<button className="px-6 py-2 border border-alert-crimson text-alert-crimson hover:bg-alert-crimson hover:text-white hover:-translate-y-1 font-mono uppercase tracking-wider text-sm transition shadow-[0_0_12px_rgba(244,63,94,0.25)] hover:shadow-[0_0_20px_rgba(244,63,94,0.5)]">
[ Know More ]
</button>
</Link>
</div>
</div>
</BentoCard>
</div>
{/* Timeline & Key Milestones Section */}
<OperationTimeline />

{/* 3. Mission Credentials */}
<div className="md:col-span-1 flex w-full bento-card-wrapper opacity-0">
<BentoCard title="Mission Credentials">
<ul className="space-y-4 text-sky-digital font-mono text-sm md:text-base flex-grow">
<li className="flex items-start"><span className="mr-2 text-alert-crimson">&gt;</span> Operational continuously since 2010</li>
<li className="flex items-start"><span className="mr-2 text-alert-crimson">&gt;</span> Hosted by Amrita Vishwa Vidyapeetham</li>
<li className="flex items-start"><span className="mr-2 text-alert-crimson">&gt;</span> Organised in collaboration with team bi0s</li>
</ul>
</BentoCard>
</div>
{/* Training & Learning Section */}
<LandingTrainingSection />

{/* 4. Join Mission Control */}
<div className="md:col-span-2 flex w-full bento-card-wrapper opacity-0">
<BentoCard title="Join Mission Control">
<div className="flex-grow flex flex-col justify-between">
<p className="text-sky-digital font-mono text-base md:text-lg mb-8 text-center">
Receive mission updates, briefings, timelines, and official communications.
</p>
<div className="flex flex-col md:flex-row gap-4 justify-center mt-auto">
<BentoHoverButton href="/mission-control" className="w-full md:w-auto px-6 sm:px-16 py-4 sm:py-5 bg-gradient-to-br from-red-900 to-red-800 border border-white/40 text-white font-mono font-bold tracking-wider rounded text-[10px] sm:text-sm hover:brightness-110 shadow-[0_0_12px_rgba(244,63,94,0.3)] hover:shadow-[0_0_22px_rgba(244,63,94,0.6)] transition-all duration-300 whitespace-nowrap flex items-center justify-center">
[ Enter Mission Control ]
</BentoHoverButton>
<BentoHoverButton href="/mission-brief" className="w-full md:w-auto px-6 sm:px-16 py-4 sm:py-5 bg-gradient-to-br from-red-900 to-red-800 border border-white/40 text-white font-mono font-bold tracking-wider rounded text-[10px] sm:text-sm hover:brightness-110 shadow-[0_0_12px_rgba(244,63,94,0.3)] hover:shadow-[0_0_22px_rgba(244,63,94,0.6)] transition-all duration-300 whitespace-nowrap flex items-center justify-center">
[ View Mission Brief ]
</BentoHoverButton>
</div>
</div>
</BentoCard>
</div>
</BentoGridContainer>
</div>
</section>
{/* Resources to Level Up Section */}
<LandingResourcesSection />

{/* Social Proof — Expert Speakers Section */}
<CurrentSpeakers />

{/* Social Proof — Organized By & Partners */}
<LandingOrganizedBy />

{/* Past Sponsors */}
<PastSponsorsTable />
{/* FAQ */}
<LandingFAQ />

{/* Footer */}
<Footer />
Expand Down
136 changes: 49 additions & 87 deletions src/components/landing/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,11 @@
import React, { useState } from 'react';
import Link from 'next/link';
import { motion, AnimatePresence } from 'framer-motion';
import { FileText, ShieldAlert, Activity, Target, Terminal, ChevronDown, ChevronRight, Lock } from 'lucide-react';

import React from 'react';
import { motion } from 'framer-motion';
import { ShieldCheck, Target, Users, Terminal } from 'lucide-react';
import animation from '@/src/animation';

const eventID = process.env.EVENT_ID || process.env.NEXT_PUBLIC_EVENT_ID;
const data = require(`../../data/${eventID}/index.json`);

const ClassifiedSection = ({ title, icon: Icon, children, delay = 0 }: any) => (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay, duration: 0.5 }}
viewport={{ once: true }}
className="mb-6 border-l-2 border-sky-digital/30 pl-4 bg-sky-digital/5 p-4 rounded-r-lg hover:bg-sky-digital/10 transition-colors"
>
<div className="flex items-center gap-3 mb-2 text-sky-400 font-tactical tracking-wider text-sm uppercase">
<Icon size={16} />
<span>{title}</span>
</div>
<div className="text-slate-300 font-mono text-sm leading-relaxed whitespace-pre-line">
{children}
</div>
</motion.div>
);

const LandingAboutInCTF = () => (
<section className="container mx-auto py-20 px-4" id="mission-brief">

<div className="flex flex-col lg:flex-row gap-12">
<section className="container mx-auto py-20 px-6 md:px-8" id="what-is-inctf">
<div className="flex flex-col lg:flex-row gap-12 items-center">
{/* Main Brief Column */}
<div className="lg:w-1/2">
<motion.div
Expand All @@ -38,85 +14,71 @@ const LandingAboutInCTF = () => (
whileInView="tacticalFocus"
viewport={{ once: true }}
>
<h2 className="text-4xl font-heading font-black text-white mb-6 flex items-center gap-3">
<span className="text-alert-crimson"><Terminal size={32} /></span>
MISSION BRIEF
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/60 border border-sky-500/30 text-sky-400 font-mono text-xs tracking-widest uppercase mb-4 shadow-[0_0_10px_rgba(56,189,248,0.2)]">
<Terminal size={14} /> Operation Overview
</div>
<h2 className="text-3xl md:text-5xl font-heading font-black text-white mb-6 uppercase tracking-wider">
What is <span className="text-cyan-400">InCTF?</span>
</h2>

<p className="text-lg md:text-xl text-slate-200 border-l-4 border-alert-crimson pl-6 py-2 mb-12 font-medium leading-relaxed bg-gradient-to-r from-alert-crimson/10 to-transparent">
{data.MissionBrief.summary}
</p>

<div className="font-mono text-xs text-sky-digital mb-2">CLASSIFIED BRIEF // EYE ONLY</div>
<div className="grid gap-4">
<ClassifiedSection title="SITUATION REPORT" icon={Activity} delay={0.1}>
<ul className="list-disc list-inside space-y-2">
{data.ClassifiedBrief.SituationReport.map((item: string, i: number) => (
<li key={i}>{item}</li>
))}
</ul>
</ClassifiedSection>

<ClassifiedSection title="THREAT ASSESSMENT" icon={ShieldAlert} delay={0.2}>
<ul className="list-disc list-inside space-y-2 text-alert-crimson/90">
{data.ClassifiedBrief.ThreatAssessment.map((item: string, i: number) => (
<li key={i}>{item}</li>
))}
</ul>
</ClassifiedSection>
<div className="text-lg md:text-xl text-slate-200 border-l-4 border-cyan-500 pl-6 py-2 mb-8 font-medium leading-relaxed bg-gradient-to-r from-cyan-500/10 to-transparent">
<p className="mb-4">
InCTF is a national-level ethical hacking championship run by Team bi0s in association with Amrita Vishwa Vidyapeetham and the Amrita Center for Cyber Security. The programme is designed for college students and professionals who want to learn, compete, and grow in cybersecurity.
</p>
<p>
Started in 2010, InCTF has reached over 1,000+ university students across India from 25 states through its contest and training ecosystem.
</p>
</div>
</motion.div>
</div>

{/* Operational Column */}
<div className="lg:w-1/2">
<div className="lg:w-1/2 w-full">
<motion.div
variants={animation}
initial="hiddenBlur"
whileInView="tacticalFocus"
viewport={{ once: true }}
className="bg-obsidian border border-slate-800 p-6 rounded-xl relative overflow-hidden"
className="bg-obsidian border border-slate-800 p-6 md:p-8 rounded-xl relative overflow-hidden shadow-[0_0_25px_rgba(56,189,248,0.1)]"
>
<div className="absolute top-0 right-0 p-4 opacity-10">
<Lock size={120} />
</div>

<ClassifiedSection title="OPERATIONAL RESPONSE" icon={Target} delay={0.3}>
<ul className="list-disc list-inside space-y-2">
{data.ClassifiedBrief.OperationalResponse.map((item: string, i: number) => (
<li key={i}>{item}</li>
))}
</ul>
</ClassifiedSection>

<ClassifiedSection title="MISSION PARAMETERS" icon={FileText} delay={0.4}>
<ul className="list-disc list-inside space-y-2">
{data.ClassifiedBrief.MissionParameters.map((item: string, i: number) => (
<li key={i}>{item}</li>
))}
</ul>
</ClassifiedSection>

<h3 className="font-mono text-cyan-400 text-sm mb-6 uppercase tracking-widest font-bold border-b border-slate-800 pb-4">Key Highlights</h3>
<ul className="space-y-6">
<li className="flex items-start gap-4">
<div className="bg-sky-500/10 p-2 rounded text-cyan-400 mt-1 shrink-0">
<Target size={20} />
</div>
<p className="text-slate-300 leading-relaxed font-medium">
multi-month, completely free programme.
</p>
</li>
<li className="flex items-start gap-4">
<div className="bg-sky-500/10 p-2 rounded text-cyan-400 mt-1 shrink-0">
<ShieldCheck size={20} />
</div>
<p className="text-slate-300 leading-relaxed font-medium">
Beginner-friendly learning path with room for advanced participation.
</p>
</li>
<li className="flex items-start gap-4">
<div className="bg-sky-500/10 p-2 rounded text-cyan-400 mt-1 shrink-0">
<Users size={20} />
</div>
<p className="text-slate-300 leading-relaxed font-medium">
Organized by Team bi0s and supported by Amrita's cybersecurity ecosystem.
</p>
</li>
</ul>

<div className="mt-8 p-6 border border-sky-digital/30 bg-sky-digital/5 rounded relative">
<div className="absolute top-0 left-0 w-4 h-4 border-t border-l border-sky-digital"></div>
<div className="absolute bottom-0 right-0 w-4 h-4 border-b border-r border-sky-digital"></div>

<h4 className="font-tactical text-sky-digital text-sm mb-2 uppercase tracking-widest">FINAL DIRECTIVE</h4>
<p className="font-mono text-slate-300 text-sm italic">
&quot;{data.ClassifiedBrief.FinalDirective}&quot;
<p className="font-mono text-cyan-300 text-sm italic text-center">
"Learn, compete, and grow in cybersecurity."
</p>
</div>

<div className="mt-6 flex justify-end">
<Link href="#crew-eligibility" className="flex items-center gap-2 text-sm font-bold text-sky-digital hover:text-white transition-colors uppercase tracking-wider">
Proceed to Crew Selection <ChevronRight size={16} />
</Link>
</div>

</motion.div>
</div>
</div>

</section>
);

Expand Down
Loading
Loading