Files
hipctf/Home.tsx
m0rph3us1987 0d07264788 - Fixed Challenge Modal overlap issue by adjusting the main stacking context in App.tsx
- Implemented "click-outside-to-close" functionality for both the Challenge Modal and User Dropdown
- Added protocol-specific action buttons for challenges: "Open in new tab" for HTTP and "Copy to clipboard" for NC
- Enhanced Scoreboard rankings with significantly larger, consistent font sizes (text-2xl) for better readability
- Rebranded "TEAM_IDENTIFIER" to "PLAYER" and "TOTAL_POINTS" to "POINTS" across the platform (Scoreboard, Matrix, User Menu)
- Updated navigation: Renamed "SCOREBOARD" to "SCORES" in the nav bar and dynamic page titles
- Modernized User Dropdown menu with a dedicated "PLAYER" header and "LOGOUT" action
- Improved Score Matrix and Score Graph titles for consistency with the new "Player" terminology
- Added CAPTCHA human verification (svg-captcha) to Login and Registration flows for enhanced security
- Optimized frontend assets by migrating Tailwind and JetBrains Mono to local hosting
- Refactored Admin panel: Renamed "Operators" to "Users" and improved layout alignment
2026-03-11 17:47:46 +01:00

60 lines
2.1 KiB
TypeScript

import React from 'react';
import { Link } from 'react-router-dom';
import { Terminal, Newspaper } from 'lucide-react';
import { useCTF } from './CTFContext';
import { Button } from './UIComponents';
export const Home: React.FC = () => {
const { currentUser, state } = useCTF();
return (
<div className="max-w-4xl mx-auto py-20 px-4 text-center">
<div className="mb-12">
{state.config.logoData ? (
<img src={state.config.logoData} className="max-h-60 mx-auto mb-4 drop-shadow-[0_0_15px_rgba(255,0,0,0.3)]" />
) : (
<Terminal size={120} className="text-[#ff0000] mx-auto mb-4 animate-pulse" />
)}
<h1 className="text-8xl font-black italic text-white tracking-tighter">{state.config.conferenceName}</h1>
</div>
<div className="hxp-border p-8 mb-10 max-w-2xl mx-auto bg-black">
<p className="text-xl font-bold uppercase tracking-tight">{state.config.landingText}</p>
</div>
<div className="flex flex-col items-center gap-6">
{!currentUser ? (
<>
{/* Pyramid Peak */}
<div className="w-full flex justify-center">
<Link to="/blog">
<Button variant="secondary" className="text-xl px-16 flex items-center gap-3">
<Newspaper size={20} /> BLOG
</Button>
</Link>
</div>
{/* Pyramid Base */}
<div className="flex flex-wrap justify-center gap-6">
<Link to="/register">
<Button className="text-xl px-12">REGISTER</Button>
</Link>
<Link to="/login">
<Button variant="secondary" className="text-xl px-12">LOGIN</Button>
</Link>
</div>
</>
) : (
<div className="flex flex-wrap justify-center gap-6">
<Link to="/challenges">
<Button className="text-xl px-10">CHALLENGES</Button>
</Link>
<Link to="/blog">
<Button variant="secondary" className="text-xl px-10">BLOG</Button>
</Link>
</div>
)}
</div>
</div>
);
};