Skip to content

Commit

Permalink
feat: add TCP1P CTF 2025 components and FAQ; remove outdated 2024 files
Browse files Browse the repository at this point in the history
  • Loading branch information
dimasma0305 committed Jan 14, 2025
1 parent b9d07d2 commit eef1ff9
Show file tree
Hide file tree
Showing 10 changed files with 193 additions and 191 deletions.
3 changes: 3 additions & 0 deletions src/app/_components/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ const Navbar: React.FC = () => {
<Link href="/repositories" className="nav-item text-gray-300 hover:text-red-400 transition-colors duration-300">
Repositories
</Link>
<Link href="/tcp1pctf-2025" className="nav-item text-gray-300 hover:text-red-400 transition-colors duration-300">
TCP1P CTF 2025
</Link>
</div>

<div className="hidden md:block">
Expand Down
51 changes: 0 additions & 51 deletions src/app/tcp1pctf-2024/page.tsx

This file was deleted.

86 changes: 0 additions & 86 deletions src/app/tcp1pctf-2024/sponsors.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@ export function Categories() {
<>
<div className="grid lg:grid-cols-3 md:grid-cols-2 gap-4">
{categories.map((category, index) => (
<div key={index} className="card w-full image-full">
<figure className="px-10 pt-10">
<FontAwesomeIcon icon={category.iconClass} className="text-7xl"></FontAwesomeIcon>
</figure>
<div className="card-body items-center text-center">
<h2 className="card-title">{category.text}</h2>
<p>{category.description}</p>
<div key={index} className="bg-gray-900/50 backdrop-blur-xl rounded-xl border border-red-500/10 p-6 hover:border-red-400/30 transition-all duration-300">
<div className="card-body items-center text-center text-white">
<div className="w-12 h-12 bg-red-900/30 rounded-xl flex items-center justify-center mx-auto mb-4">
<FontAwesomeIcon icon={category.iconClass} className="text-red-400 text-3xl" />
</div>
<h2 className="card-title text-lg font-medium mb-2">{category.text}</h2>
<p className="text-gray-400 mb-4">{category.description}</p>
</div>
</div>
))}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
'use client'
'use client';
import { useEffect, useState } from "react";

export function Countdown({ endDate }: { endDate: number }) {
Expand Down Expand Up @@ -29,36 +29,33 @@ export function Countdown({ endDate }: { endDate: number }) {
}

return (
<>
<div className="flex gap-5">
<div className="rounded-xl text-center">
<div className="flex justify-center gap-5 text-white text-2xl font-medium">
<div>
<span className="countdown font-mono text-2xl">
{timeLeft.days}
</span>
days
<div className="bg-gray-800/50 rounded-lg p-4 mb-2">
<span className="font-mono">{timeLeft.days}</span>
</div>
<span className="text-gray-400">days</span>
</div>
<div>
<span className="countdown font-mono text-2xl">
{/* @ts-ignore */}
<span style={{ "--value": timeLeft.hours }}></span>
</span>
hours
<div className="bg-gray-800/50 rounded-lg p-4 mb-2">
<span className="font-mono">{timeLeft.hours}</span>
</div>
<span className="text-gray-400">hours</span>
</div>
<div>
<span className="countdown font-mono text-2xl">
{/* @ts-ignore */}
<span style={{ "--value": timeLeft.minutes }}></span>
</span>
min
<div className="bg-gray-800/50 rounded-lg p-4 mb-2">
<span className="font-mono">{timeLeft.minutes}</span>
</div>
<span className="text-gray-400">min</span>
</div>
<div>
<span className="countdown font-mono text-2xl">
{/* @ts-ignore */}
<span style={{ "--value": timeLeft.seconds }}></span>
</span>
sec
<div className="bg-gray-800/50 rounded-lg p-4 mb-2">
<span className="font-mono">{timeLeft.seconds}</span>
</div>
<span className="text-gray-400">sec</span>
</div>
</div>
</>
</div>
);
}
File renamed without changes.
File renamed without changes.
41 changes: 17 additions & 24 deletions src/app/tcp1pctf-2024/faq.tsx → src/app/tcp1pctf-2025/faq.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,44 @@ export function FAQ() {
const faqs = [
{
text: 'Who is TCP1P?',
description: <>
description: `
TCP1P is a CTF (Capture The Flag) community from Indonesia. We are enthusiastic about CTF and
actively participate in CTF events on <a className="link" target="_blank"
actively participate in CTF events on <a class="link" target="_blank"
href="https://ctftime.org/team/187248">CTFtime</a>. Our mission is to bring together CTF
players from all corners of Nusantara, so we can play and learn CTF together. If you are a CTF
player from Indonesia, we welcome you to join us!
</>
`
},
{
text: 'Who can join?',
description: <>
description: `
This CTF welcomes participants from all corners of the world, ensuring that it is accessible to
people worldwide. To participate, all you need to do is form a team with a minimum of one
person. Whether you choose to collaborate with a small group or assemble a larger team, there
are no restrictions on the team size.
</>
`
},
{
text: 'How to join?',
description: <>
description: `
To join this CTF, we recommend that you first create a team on CTFtime. Once you have formed
your team, you can add this <a className="link" target="_blank"
your team, you can add this <a class="link" target="_blank"
href="https://ctftime.org/event/2256/">event</a> and wait for the start of the CTF on
October 11th. Lastly, don't forget to join our Discord server for more information. Here is the
link: <a className="link" target="_blank" rel="noopener noreferrer"
link: <a class="link" target="_blank" rel="noopener noreferrer"
href="https://discord.gg/Gj6h9TjN3D">Discord</a>.
</>
`
}
];

return (
<>
<div className="grid gap-4">
{faqs.map((category, index) => (
<div key={index} className="collapse collapse-arrow w-full image-full">
<input type="radio" name="my-accordion-2" />
<div className="collapse-title text-xl font-medium">
{category.text}
</div>
<div className="collapse-content">
<p>{category.description}</p>
</div>
</div>
))}
</div>
</>
<div className="grid gap-4">
{faqs.map((faq, index) => (
<div key={index} className="bg-gray-900/50 backdrop-blur-xl rounded-xl border border-red-500/10 p-6 hover:border-red-400/30 transition-all duration-300">
<div className="text-xl font-medium text-white mb-4">{faq.text}</div>
<div className="text-gray-400" dangerouslySetInnerHTML={{ __html: faq.description }}></div>
</div>
))}
</div>
);
}
57 changes: 57 additions & 0 deletions src/app/tcp1pctf-2025/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { Categories } from "./categories";
import { Countdown } from "./countdown";
import { CrateTemplate } from "./crate";
import { Donator } from "./donations";
import { FAQ } from "./faq";
import { Sponsor } from "./sponsors";

export default function Page() {
const ctfDate = new Date("2025-10-11").getTime();
return (
<main className="flex-1 pt-24 px-4 sm:px-6 lg:px-8 relative z-10">
<CrateTemplate />
<div className="flex flex-col">
<div className="lg:w-8/12 md:w-10/12 self-center text-center mx-4">
<div className="items-center">
<h1 className="text-6xl text-white mb-16">TCP1P CTF 2025</h1>
<div className="mb-12">
<Countdown endDate={ctfDate} />
</div>
<p className="text-gray-300 mb-8">Exploring Nusantara's Digital Realm</p>
<div className="divider mb-8"></div>
<p className="text-justify text-gray-400">
TCP1PCTF 2024 is an annual Capture The Flag (CTF) event organized by the TCP1P community. This marks the second edition of our international CTF event. This thrilling CTF follows a jeopardy-style format and encompasses a variety of challenges ranging in difficulty from easy to medium-high. Participants will have the opportunity to test their skills and knowledge across various categories, ensuring a diverse and engaging experience.
</p>
</div>
<section className="my-16 p-8">
<h2 className="text-4xl text-white mb-10">Categories</h2>
<div className="divider mb-10"></div>
<Categories />
</section>
<section className="my-16 p-8">
<h2 className="text-4xl text-white mb-10">FAQ</h2>
<div className="divider mb-10"></div>
<FAQ />
</section>
<section className="my-16 p-8">
<h2 className="text-4xl text-white mb-10">Call for Sponsorships</h2>
<div className="divider mb-10"></div>
<p className="text-gray-300">
The call for sponsorship for TCP1P-CTF 2024 is open! For more details contact us at <a className="link" href="mailto:[email protected]">[email protected]</a>.
</p>
</section>
<section className="my-16 p-8">
<h2 className="text-4xl text-white mb-10">Sponsors</h2>
<div className="divider mb-10"></div>
<Sponsor />
</section>
<section className="my-16 p-8">
<h2 className="text-4xl text-white mb-10">Donators</h2>
<div className="divider mb-10"></div>
<Donator />
</section>
</div>
</div>
</main>
);
}
Loading

0 comments on commit eef1ff9

Please sign in to comment.