Skip to content

Commit 9943cdb

Browse files
committed
add reverse engineering page
1 parent dcd5bcd commit 9943cdb

File tree

1 file changed

+99
-0
lines changed
  • src/app/(pages)/ReverseEngineeringLab

1 file changed

+99
-0
lines changed
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
"use client"
2+
import React from 'react';
3+
import { Download, Terminal, Puzzle } from 'lucide-react';
4+
5+
const challenges = [
6+
{
7+
id: 1,
8+
title: "Retro Game Crack Challenge",
9+
description: "Learn how to reverse engineer old game binaries. Download the game binary and follow the step-by-step guide to find the hidden key.",
10+
fileUrl: "/downloads/retro_game_binary.zip",
11+
level: "Beginner",
12+
},
13+
{
14+
id: 2,
15+
title: "Old Software Debugging",
16+
description: "This challenge will guide you through debugging an old piece of software using popular reverse engineering tools. Identify and patch a bug in the binary.",
17+
fileUrl: "/downloads/old_software_debug.zip",
18+
level: "Intermediate",
19+
},
20+
{
21+
id: 3,
22+
title: "Gadget Firmware Analysis",
23+
description: "Take apart the firmware of an old gadget and learn how to analyze its functionalities. Understand how the hardware and software interact.",
24+
fileUrl: "/downloads/gadget_firmware.bin",
25+
level: "Advanced",
26+
}
27+
];
28+
29+
const ReverseEngineeringLab = () => {
30+
return (
31+
<div className="min-h-screen bg-gradient-to-t from-gray-100 via-white to-gray-50 text-gray-800 p-8 sm:p-16">
32+
<header className="flex flex-col md:flex-row justify-between items-center mb-16">
33+
<div className="mb-8 md:mb-0">
34+
<h1 className="text-4xl sm:text-6xl font-bold leading-tight text-blue-600">Reverse Engineering Lab</h1>
35+
<p className="text-lg sm:text-xl mt-4">Learn the basics of reverse engineering by diving into hands-on challenges involving old software, games, and gadgets.</p>
36+
</div>
37+
<Puzzle size={64} className="text-blue-600 animate-bounce" />
38+
</header>
39+
40+
{/* Challenges Section */}
41+
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
42+
{challenges.map((challenge) => (
43+
<div key={challenge.id} className="bg-blue-50 rounded-md shadow-lg p-8 border-l-4 border-blue-600 transition-transform transform hover:-translate-y-2 hover:shadow-2xl">
44+
<div className="flex items-start gap-4 mb-4">
45+
<Terminal size={32} className="text-blue-500" />
46+
<h3 className="text-3xl font-bold">{challenge.title}</h3>
47+
</div>
48+
<p className="text-lg text-gray-700 mb-4">{challenge.description}</p>
49+
<span className="inline-block mb-4 text-sm text-gray-600 font-semibold">Level: {challenge.level}</span>
50+
<a href={challenge.fileUrl} download className="inline-flex items-center bg-blue-500 text-white px-4 py-2 rounded-md shadow-md hover:bg-blue-600 transition-all">
51+
<Download size={20} className="mr-2" /> Download Challenge
52+
</a>
53+
</div>
54+
))}
55+
</div>
56+
57+
{/* Step-by-Step Guides Section */}
58+
<section className="max-w-6xl mx-auto mb-16 bg-blue-100 p-10 rounded-md shadow-lg">
59+
<h2 className="text-3xl font-bold mb-6 text-blue-700">Step-by-Step Guides</h2>
60+
<ul className="list-decimal list-inside space-y-4 text-gray-800">
61+
<li>Understand the basics of how software works to be better at reverse engineering.</li>
62+
<li>Use tools like Ghidra, IDA Pro, or Radare2 to disassemble binaries and inspect their internals.</li>
63+
<li>Follow our guides to learn how to extract, analyze, and modify executable code safely.</li>
64+
<li>Work with old software and games to get hands-on practice without risking current technologies.</li>
65+
</ul>
66+
</section>
67+
68+
{/* Tools and Resources Section */}
69+
<section className="max-w-6xl mx-auto mb-16 p-10 bg-white rounded-md shadow-md border border-gray-200">
70+
<h2 className="text-3xl font-bold mb-4 text-blue-700">Tools and Resources</h2>
71+
<p className="text-lg text-gray-700 mb-6">Here are some popular tools and resources you can use to begin your journey in reverse engineering:</p>
72+
<div className="flex flex-wrap gap-6">
73+
<div className="bg-blue-50 p-6 rounded-md shadow-sm flex-1 min-w-[250px]">
74+
<h3 className="text-xl font-bold mb-2">Ghidra</h3>
75+
<p className="text-sm text-gray-600">An open-source reverse engineering tool developed by the NSA that helps you decompile software and analyze its inner workings.</p>
76+
</div>
77+
<div className="bg-blue-50 p-6 rounded-md shadow-sm flex-1 min-w-[250px]">
78+
<h3 className="text-xl font-bold mb-2">IDA Pro</h3>
79+
<p className="text-sm text-gray-600">A powerful disassembler used by professionals for software reverse engineering, known for its extensibility and interactive analysis capabilities.</p>
80+
</div>
81+
<div className="bg-blue-50 p-6 rounded-md shadow-sm flex-1 min-w-[250px]">
82+
<h3 className="text-xl font-bold mb-2">Radare2</h3>
83+
<p className="text-sm text-gray-600">An open-source framework for reverse engineering and analyzing binaries, known for its versatility and scriptable nature.</p>
84+
</div>
85+
</div>
86+
</section>
87+
88+
{/* Footer Section */}
89+
<footer className="text-center pt-12 pb-6 border-t border-gray-300">
90+
<p className="text-lg text-gray-600">Thanks for exploring the Reverse Engineering Lab. Take on a challenge today and unlock the mysteries of old software and gadgets!</p>
91+
<button className="mt-4 bg-blue-600 text-white px-6 py-3 rounded-md shadow-md hover:bg-blue-700 transition-all">
92+
Start Your Challenge
93+
</button>
94+
</footer>
95+
</div>
96+
);
97+
};
98+
99+
export default ReverseEngineeringLab;

0 commit comments

Comments
 (0)