Merge version_4_1782150249373 into main #3
@@ -1,37 +1,167 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "levels" section.
|
||||
/* 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 TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { useState } from "react";
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
const languages = [
|
||||
{
|
||||
id: "c",
|
||||
title: "C Programming",
|
||||
description: "Master the fundamentals with pointers and memory management.",
|
||||
imageSrc: "https://picsum.photos/seed/1212478007/1200/800"
|
||||
},
|
||||
{
|
||||
id: "python",
|
||||
title: "Python",
|
||||
description: "Tackle algorithms using Python's elegant syntax.",
|
||||
imageSrc: "https://picsum.photos/seed/806211616/1200/800"
|
||||
},
|
||||
{
|
||||
id: "java",
|
||||
title: "Java",
|
||||
description: "Build robust object-oriented solutions and logic.",
|
||||
imageSrc: "https://picsum.photos/seed/387063574/1200/800"
|
||||
},
|
||||
{
|
||||
id: "cpp",
|
||||
title: "C++",
|
||||
description: "Optimize performance with advanced STL concepts.",
|
||||
imageSrc: "https://picsum.photos/seed/170534033/1200/800"
|
||||
},
|
||||
{
|
||||
id: "dbms",
|
||||
title: "DBMS Query",
|
||||
description: "Solve intricate database puzzles and optimize SQL.",
|
||||
imageSrc: "https://picsum.photos/seed/758983490/1200/800"
|
||||
}
|
||||
];
|
||||
|
||||
const 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"
|
||||
}
|
||||
];
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
interface FeaturesMediaCardsProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: FeatureItem[];
|
||||
}
|
||||
|
||||
const LevelsInline = () => {
|
||||
const [selectedLanguage, setSelectedLanguage] = useState("");
|
||||
|
||||
const activeLanguage = languages.find(function(l) { return l.id === selectedLanguage; });
|
||||
|
||||
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>
|
||||
<section aria-label="Features section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{selectedLanguage ? "Select Level" : "Select Language"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={selectedLanguage ? `${activeLanguage?.title} Challenges` : "Choose Your Weapon"}
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={selectedLanguage ? "Progress through three distinct, progressively harder stages." : "Select one of the five languages to begin your competitive programming journey."}
|
||||
variant="fade-blur"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{selectedLanguage && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
<Button text="Back to Languages" onClick={function() { setSelectedLanguage(""); }} variant="secondary" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="slide-up">
|
||||
{!selectedLanguage ? (
|
||||
<GridOrCarousel>
|
||||
{languages.map(function(item) {
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded cursor-pointer hover:ring-2 ring-primary-cta transition-all"
|
||||
onClick={function() { setSelectedLanguage(item.id); }}
|
||||
>
|
||||
<div className="aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5">
|
||||
<ImageOrVideo imageSrc={item.imageSrc} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4">
|
||||
<h3 className="text-2xl font-semibold leading-snug">{item.title}</h3>
|
||||
<p className="text-base leading-snug">{item.description}</p>
|
||||
</div>
|
||||
<div className="mt-auto px-3 xl:px-3.5 2xl:px-4 pb-3">
|
||||
<Button text="Select Language" variant="primary" className="w-full" onClick={function(e: any) { e.stopPropagation(); setSelectedLanguage(item.id); }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</GridOrCarousel>
|
||||
) : (
|
||||
<GridOrCarousel>
|
||||
{items.map(function(item) {
|
||||
return (
|
||||
<div key={item.title} className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded">
|
||||
<div className="aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5">
|
||||
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4">
|
||||
<h3 className="text-2xl font-semibold leading-snug">{item.title}</h3>
|
||||
<p className="text-base leading-snug">{item.description}</p>
|
||||
</div>
|
||||
<div className="mt-auto px-3 xl:px-3.5 2xl:px-4 pb-3">
|
||||
<Button text="Start Level" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</GridOrCarousel>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function LevelsSection() {
|
||||
return (
|
||||
<div data-webild-section="levels" id="levels">
|
||||
<LevelsInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user