Merge version_3_1782149892990 into main #2
@@ -1,156 +1,30 @@
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
|
||||
import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import LevelsSection from './HomePage/sections/Levels';
|
||||
import LeaderboardSection from './HomePage/sections/Leaderboard';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import DashboardSection from './HomePage/sections/Dashboard';
|
||||
import LoginSection from './HomePage/sections/Login';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitMediaGrid
|
||||
tag="Play & Code"
|
||||
title="Level Up Your Coding Skills via Competitive Gaming"
|
||||
description="Unlock your potential by tackling the hardest algorithmic challenges. Three levels, intense timers, and global leaderboards await."
|
||||
primaryButton={{
|
||||
text: "Start Playing",
|
||||
href: "#login",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Leaderboard",
|
||||
href: "#leaderboard",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-gaming-device_23-2151005796.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="levels" data-section="levels">
|
||||
<SectionErrorBoundary name="levels">
|
||||
<FeaturesMediaCards
|
||||
tag="Progression"
|
||||
title="Level Up Your Skills"
|
||||
description="Master C, Python, Java, C++, and DBMS Query through three distinct, progressively harder stages."
|
||||
items={[
|
||||
{
|
||||
title: "Level 1: MCQ Challenge",
|
||||
description: "Hardest theory, output prediction, and True/False with a 30s timer per question.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289241.jpg",
|
||||
},
|
||||
{
|
||||
title: "Level 2: Coding Sprint",
|
||||
description: "10 tricky problem statements, 5 min each. Pass test cases to unlock expert status.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/programming-flat-line-icon-set_1057-10098.jpg",
|
||||
},
|
||||
{
|
||||
title: "Level 3: ICPC Grand Finale",
|
||||
description: "Top-tier competitive problems. 2 massive tasks, 10 minutes total. Pure precision.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<LevelsSection />
|
||||
|
||||
<div id="leaderboard" data-section="leaderboard">
|
||||
<SectionErrorBoundary name="leaderboard">
|
||||
<SocialProofMarquee
|
||||
tag="Top Coders"
|
||||
title="Who's Leading the Arena?"
|
||||
description="Global rankings for all tracks. Keep coding to reach the top."
|
||||
names={[
|
||||
"AlphaCoder",
|
||||
"CodeNinja",
|
||||
"DevWizard",
|
||||
"BinaryBoss",
|
||||
"AlgoExpert",
|
||||
"SyntaxKing",
|
||||
"LogicMaster",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<LeaderboardSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Need Help?"
|
||||
title="Platform Guidelines"
|
||||
description="Common questions about game play, languages, and scoring."
|
||||
items={[
|
||||
{
|
||||
question: "What languages are available?",
|
||||
answer: "We support C, Python, Java, C++, and DBMS Query.",
|
||||
},
|
||||
{
|
||||
question: "How do sound effects work?",
|
||||
answer: "Audio cues signal correct, wrong, and critical time-closing events.",
|
||||
},
|
||||
{
|
||||
question: "Is the admin dashboard public?",
|
||||
answer: "No, admin access requires private authentication for security.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="dashboard" data-section="dashboard">
|
||||
<SectionErrorBoundary name="dashboard">
|
||||
<MetricsMediaCards
|
||||
tag="Admin Access Only"
|
||||
title="Game Activity Overview"
|
||||
description="Track all user activities, scores, and login details through this secure spreadsheet-style portal."
|
||||
metrics={[
|
||||
{
|
||||
value: "1.2k+",
|
||||
title: "Active Players",
|
||||
description: "Global player count.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-bulb-front-side-white-background_187299-40172.jpg",
|
||||
},
|
||||
{
|
||||
value: "5.4k",
|
||||
title: "Solved Problems",
|
||||
description: "Total submissions verified.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/creative-programming-coding-25-blue-icon-pack-such-as-development-coding-development-programming-develop_1142-23816.jpg",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
title: "Accuracy",
|
||||
description: "Verified system performance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<DashboardSection />
|
||||
|
||||
<div id="login" data-section="login">
|
||||
<SectionErrorBoundary name="login">
|
||||
<ContactCta
|
||||
tag="Access Portal"
|
||||
text="Login with your credentials and select your language track to begin. Admin login is private."
|
||||
primaryButton={{
|
||||
text: "Login as Player",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Admin Access",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<LoginSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
40
src/pages/HomePage/sections/Dashboard.tsx
Normal file
40
src/pages/HomePage/sections/Dashboard.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "dashboard" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function DashboardSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="dashboard" data-section="dashboard">
|
||||
<SectionErrorBoundary name="dashboard">
|
||||
<MetricsMediaCards
|
||||
tag="Admin Access Only"
|
||||
title="Game Activity Overview"
|
||||
description="Track all user activities, scores, and login details through this secure spreadsheet-style portal."
|
||||
metrics={[
|
||||
{
|
||||
value: "1.2k+",
|
||||
title: "Active Players",
|
||||
description: "Global player count.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-bulb-front-side-white-background_187299-40172.jpg",
|
||||
},
|
||||
{
|
||||
value: "5.4k",
|
||||
title: "Solved Problems",
|
||||
description: "Total submissions verified.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/creative-programming-coding-25-blue-icon-pack-such-as-development-coding-development-programming-develop_1142-23816.jpg",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
title: "Accuracy",
|
||||
description: "Verified system performance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Faq.tsx
Normal file
34
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Need Help?"
|
||||
title="Platform Guidelines"
|
||||
description="Common questions about game play, languages, and scoring."
|
||||
items={[
|
||||
{
|
||||
question: "What languages are available?",
|
||||
answer: "We support C, Python, Java, C++, and DBMS Query.",
|
||||
},
|
||||
{
|
||||
question: "How do sound effects work?",
|
||||
answer: "Audio cues signal correct, wrong, and critical time-closing events.",
|
||||
},
|
||||
{
|
||||
question: "Is the admin dashboard public?",
|
||||
answer: "No, admin access requires private authentication for security.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/pages/HomePage/sections/Hero.tsx
Normal file
36
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitMediaGrid
|
||||
tag="Play & Code"
|
||||
title="Level Up Your Coding Skills via Competitive Gaming"
|
||||
description="Unlock your potential by tackling the hardest algorithmic challenges. Three levels, intense timers, and global leaderboards await."
|
||||
primaryButton={{
|
||||
text: "Start Playing",
|
||||
href: "#login",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Leaderboard",
|
||||
href: "#leaderboard",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-gaming-device_23-2151005796.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/Leaderboard.tsx
Normal file
29
src/pages/HomePage/sections/Leaderboard.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "leaderboard" section.
|
||||
|
||||
import React from 'react';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function LeaderboardSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="leaderboard" data-section="leaderboard">
|
||||
<SectionErrorBoundary name="leaderboard">
|
||||
<SocialProofMarquee
|
||||
tag="Top Coders"
|
||||
title="Who's Leading the Arena?"
|
||||
description="Global rankings for all tracks. Keep coding to reach the top."
|
||||
names={[
|
||||
"AlphaCoder",
|
||||
"CodeNinja",
|
||||
"DevWizard",
|
||||
"BinaryBoss",
|
||||
"AlgoExpert",
|
||||
"SyntaxKing",
|
||||
"LogicMaster",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Levels.tsx
Normal file
37
src/pages/HomePage/sections/Levels.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "levels" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function LevelsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="levels" data-section="levels">
|
||||
<SectionErrorBoundary name="levels">
|
||||
<FeaturesMediaCards
|
||||
tag="Progression"
|
||||
title="Level Up Your Skills"
|
||||
description="Master C, Python, Java, C++, and DBMS Query through three distinct, progressively harder stages."
|
||||
items={[
|
||||
{
|
||||
title: "Level 1: MCQ Challenge",
|
||||
description: "Hardest theory, output prediction, and True/False with a 30s timer per question.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289241.jpg",
|
||||
},
|
||||
{
|
||||
title: "Level 2: Coding Sprint",
|
||||
description: "10 tricky problem statements, 5 min each. Pass test cases to unlock expert status.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/programming-flat-line-icon-set_1057-10098.jpg",
|
||||
},
|
||||
{
|
||||
title: "Level 3: ICPC Grand Finale",
|
||||
description: "Top-tier competitive problems. 2 massive tasks, 10 minutes total. Pure precision.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
118
src/pages/HomePage/sections/Login.tsx
Normal file
118
src/pages/HomePage/sections/Login.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import Input from "@/components/ui/Input";
|
||||
import Label from "@/components/ui/Label";
|
||||
import { useState } from "react";
|
||||
|
||||
const LoginInline = () => {
|
||||
const [role, setRole] = useState<'player' | 'admin'>('player');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const handleLogin = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (role === 'player') {
|
||||
window.location.hash = '#levels';
|
||||
} else {
|
||||
window.location.hash = '#dashboard';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section aria-label="Login section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
|
||||
<HeroBackgroundSlot />
|
||||
<div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto">
|
||||
<div className="w-full md:w-1/2">
|
||||
<div className="flex flex-col items-center md:items-start gap-3">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>Access Portal</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text="Login to access your account"
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text="Select your role and enter your credentials to continue."
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="slide-up" delay={0.2} className="w-full md:w-1/2 p-6 md:p-8 card rounded overflow-hidden">
|
||||
<div className="flex gap-4 mb-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setRole('player')}
|
||||
className={`flex-1 py-2 rounded text-sm font-medium transition-colors ${role === 'player' ? 'primary-button' : 'secondary-button'}`}
|
||||
>
|
||||
Player
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setRole('admin')}
|
||||
className={`flex-1 py-2 rounded text-sm font-medium transition-colors ${role === 'admin' ? 'primary-button' : 'secondary-button'}`}
|
||||
>
|
||||
Admin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="username" className="text-foreground mb-1 block">Username</Label>
|
||||
<Input
|
||||
id="username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={role === 'admin' ? 'admin' : 'player123'}
|
||||
required
|
||||
className="w-full"
|
||||
></Input>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="password" className="text-foreground mb-1 block">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
required
|
||||
className="w-full"
|
||||
></Input>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="primary-button w-full py-3 rounded font-medium"
|
||||
>
|
||||
Login as {role === 'player' ? 'Player' : 'Admin'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function LoginSection() {
|
||||
return (
|
||||
<div data-webild-section="login" id="login">
|
||||
<LoginInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user