Repository: Hardhat-Enterprises/Deakin-Detonator-Toolkit
Pull request #1179: Homepage
Author: login: hades7200
Created: 2025-04-07T06:07:54Z | Merged: 2025-04-26T08:47:43Z

Hey just added homepage with beginer and advanced section


Diff:
diff --git a/src/App.tsx b/src/App.tsx
index 2b232aef0..3ac9eb24f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,31 +30,18 @@ export default function App() {
     const toggleColorScheme = (value?: ColorScheme) => {
         const nextColorScheme = value || (colorScheme === "dark" ? "light" : "dark");
         setColorScheme(nextColorScheme);
-        document.body.className = nextColorScheme + "-mode"; // Update body class
-        console.log("Color scheme toggled to:", nextColorScheme); // Log the color scheme change
+        document.body.className = nextColorScheme + "-mode";
+        console.log("Color scheme toggled to:", nextColorScheme);
     };
 
     const toggleOpened = () => {
         setOpened(!opened);
     };
 
-    const handleGoBack = () => {
-        window.history.back();
-    };
-
-    const handleGoForward = () => {
-        window.history.forward();
-    };
-
     useEffect(() => {
-        document.body.className = colorScheme + "-mode"; // Initialize body class
+        document.body.className = colorScheme + "-mode";
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-        if (prefersDarkScheme) {
-            setImageSrc("/src/logo/logo-dark.png"); // Use dark mode logo
-        } else {
-            setImageSrc("/src/logo/logo-light.png"); // Use light mode logo
-        }
+        setImageSrc(prefersDarkScheme ? "/src/logo/logo-dark.png" : "/src/logo/logo-light.png");
     }, [colorScheme]);
 
     return (
@@ -70,7 +57,7 @@ export default function App() {
                             <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
                                 <Aside p="md" hiddenBreakpoint="sm" width={{ sm: 120, lg: 120 }}>
                                     <Group style={{ justifyContent: "center" }}>
-                                        <Button onClick={handleGoBack} color="red">
+                                        <Button onClick={() => window.history.back()} color="red">
                                             Go Back
                                         </Button>
                                     </Group>
@@ -92,7 +79,7 @@ export default function App() {
                                             mr="xl"
                                         />
                                     </MediaQuery>
-                                    <Text className={"large-text"} inherit variant={"gradient"} component={"span"}>
+                                    <Text className="large-text" inherit variant="gradient" component="span">
                                         Deakin Detonator Toolkit
                                     </Text>
                                     <Image
@@ -109,7 +96,7 @@ export default function App() {
                     >
                         <Routes>
                             {ROUTES.map((route) => (
-                                <Route key={route.path} {...route}></Route>
+                                <Route key={route.path} {...route} />
                             ))}
                         </Routes>
                     </AppShell>
diff --git a/src/components/NavBar/MainLinks.tsx b/src/components/NavBar/MainLinks.tsx
index b385adbcf..113962028 100644
--- a/src/components/NavBar/MainLinks.tsx
+++ b/src/components/NavBar/MainLinks.tsx
@@ -1,5 +1,5 @@
 import { Group, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
-import { IconQuestionMark, IconStepInto, IconTools, IconSearch, IconTarget } from "@tabler/icons";
+import { IconHome, IconQuestionMark, IconStepInto, IconTools, IconSearch, IconTarget } from "@tabler/icons";
 import React from "react";
 import { Link } from "react-router-dom";
 
@@ -37,6 +37,14 @@ function MainLink({ icon, color, label, route }: MainLinkProps) {
     );
 }
 
+// Home Page Data
+const homeData = {
+    icon: <IconHome size={16} />,
+    color: "teal",
+    label: "Home",
+    route: "/",
+};
+
 const aboutData = {
     icon: <IconQuestionMark size={16} />,
     color: "orange",
@@ -72,7 +80,7 @@ const referencesData = {
     route: "/references",
 };
 
-const data = [aboutData, toolsData, attackVectorsData, walkthroughsData, referencesData];
+const data = [homeData, aboutData, toolsData, attackVectorsData, walkthroughsData, referencesData];
 
 export function MainLinks() {
     const links = data.map((link) => <MainLink {...link} key={link.label} />);
diff --git a/src/components/RouteWrapper.tsx b/src/components/RouteWrapper.tsx
index 53becf209..e9bf7dc0e 100644
--- a/src/components/RouteWrapper.tsx
+++ b/src/components/RouteWrapper.tsx
@@ -1,4 +1,5 @@
 import AboutPage from "../pages/About";
+import HomePage from "../pages/HomePage";
 import { AttackVectors } from "../pages/AttackVectors";
 import ReferencesPage from "../pages/References";
 import ToolsPage from "../pages/Tools";
@@ -108,7 +109,7 @@ export const ROUTES: RouteProperties[] = [
     {
         name: "Home",
         path: "/",
-        element: <AboutPage />,
+        element: <HomePage />,
         description: "Home page",
         category: "",
     },
diff --git a/src/logo/Advanced.png b/src/logo/Advanced.png
new file mode 100644
index 000000000..06d25bb58
Binary files /dev/null and b/src/logo/Advanced.png differ
diff --git a/src/logo/Rookie.png b/src/logo/Rookie.png
new file mode 100644
index 000000000..f9cc86323
Binary files /dev/null and b/src/logo/Rookie.png differ
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 000000000..72fa71ddb
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,63 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    return (
+        <>
+            <Stack align={"center"}>
+                <Title>Welcome to the Deakin Detonator Toolkit</Title>
+                <Text>Your one-stop toolkit for both beginners and advanced penetration testers.</Text>
+            </Stack>
+
+            <Grid gutter="lg" mt="xl">
+                {/* Beginner Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="src/logo/Rookie.png"
+                                alt="Beginner section preview"
+                                height={window.outerHeight / 2}
+                            />
+                        </CardSection>
+                        <Title order={3} align="center" mt="md">
+                            Beginner Section
+                        </Title>
+                        <Text align="center" mt="sm">
+                            Perfect for those starting their journey in penetration testing. Learn the basics through
+                            guided walkthroughs and simple tools.
+                        </Text>
+                        <Button fullWidth color="blue" mt="md" leftIcon={<IconSchool size={18} />} disabled>
+                            Explore Beginner
+                        </Button>
+                    </Card>
+                </Grid.Col>
+
+                {/* Advanced Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="src/logo/Advanced.png"
+                                alt="Advanced section preview"
+                                height={window.outerHeight / 2}
+                            />
+                        </CardSection>
+                        <Title order={3} align="center" mt="md">
+                            Advanced Section
+                        </Title>
+                        <Text align="center" mt="sm">
+                            Dive deep into advanced penetration testing techniques and tools. Ideal for experienced
+                            testers seeking complex strategies.
+                        </Text>
+                        <Button fullWidth color="violet" mt="md" leftIcon={<IconRocket size={18} />} disabled>
+                            Explore Advanced
+                        </Button>
+                    </Card>
+                </Grid.Col>
+            </Grid>
+        </>
+    );
+};
+
+export default HomePage;


Reviews:
user: login: GoldenBanksia
body: Hey Ishan, the feature looks great. Couple of changes needed before implementation as commented:
HomePage.tsx
- height update for both images
- path to img files update for both images
- add disabled flags to both buttons
- remove unused theme references 
App.tsx 
- remove Route to HomePage
- remove import HomePage

!NEW add file changes RouteWrapper.tsx
- add import HomePage
- change path to / from AboutPage to HomePage

Once done, resolve relevant comments/conversations and request review 

Other feedback: 
-Great work on the homepage itself, the design of the file is succinct and matches other docs. Scales relatively nicely. Changes to App file look good, I like the small fixes/updates you have done to streamline the code. All in all, a nicely done PR/feature implementation
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-18T07:36:59Z
user: login: GoldenBanksia
body: Changes look great - RouteWrapper.tsx and App.tsx updated for route to Home page, images fixed. 

Just need to add disabled flags + remove final unused code, to resolve last 3 change comments then good to merge
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-23T16:51:34Z
user: login: GoldenBanksia
body: All requested changes implemented - code looks good. No conflicts with main branch

Approved to merge into main
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-26T08:47:14Z

Review comments:
diff_hunk: @@ -72,7 +80,8 @@ const referencesData = {
     route: "/references",
 };
 
-const data = [aboutData, toolsData, attackVectorsData, walkthroughsData, referencesData];
+// Adding Home at the top
path: src/components/NavBar/MainLinks.tsx
user: login: GoldenBanksia
body: Normally would not need comment here giving update details. This is okay however as it communicates to future devs the reason behind this order of pages 
created_at: 2025-04-18T07:04:15Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,66 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    const theme = useMantineTheme();
+    const getColor = (color: string) => theme.colors[color][theme.colorScheme === "dark" ? 5 : 7];
+
+    return (
+        <>
+            <Stack align={"center"}>
+                <Title>Welcome to the Deakin Detonator Toolkit</Title>
+                <Text>Your one-stop toolkit for both beginners and advanced penetration testers.</Text>
+            </Stack>
+
+            <Grid gutter="lg" mt="xl">
+                {/* Beginner Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Rookie.png" // Corrected path
+                                alt="Beginner section preview"
+                                height={200}
+                            />
+                        </CardSection>
+                        <Title order={3} align="center" mt="md">
+                            Beginner Section
+                        </Title>
+                        <Text align="center" mt="sm">
+                            Perfect for those starting their journey in penetration testing. Learn the basics through
+                            guided walkthroughs and simple tools.
+                        </Text>
+                        <Button fullWidth color="blue" mt="md" leftIcon={<IconSchool size={18} />}>
+                            Explore Beginner
+                        </Button>
+                    </Card>
+                </Grid.Col>
+
+                {/* Advanced Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Advanced.png" // Corrected path
path: src/pages/HomePage.tsx
user: login: GoldenBanksia
body: update to:
src="src/logo/Advanced.png"

not currently loading
created_at: 2025-04-18T07:14:18Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,66 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    const theme = useMantineTheme();
+    const getColor = (color: string) => theme.colors[color][theme.colorScheme === "dark" ? 5 : 7];
+
+    return (
+        <>
+            <Stack align={"center"}>
+                <Title>Welcome to the Deakin Detonator Toolkit</Title>
+                <Text>Your one-stop toolkit for both beginners and advanced penetration testers.</Text>
+            </Stack>
+
+            <Grid gutter="lg" mt="xl">
+                {/* Beginner Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Rookie.png" // Corrected path
path: src/pages/HomePage.tsx
user: login: GoldenBanksia
body: update to:
src="src/logo/Rookie.png"

not currently loading
created_at: 2025-04-18T07:14:32Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,66 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    const theme = useMantineTheme();
+    const getColor = (color: string) => theme.colors[color][theme.colorScheme === "dark" ? 5 : 7];
+
+    return (
+        <>
+            <Stack align={"center"}>
+                <Title>Welcome to the Deakin Detonator Toolkit</Title>
+                <Text>Your one-stop toolkit for both beginners and advanced penetration testers.</Text>
+            </Stack>
+
+            <Grid gutter="lg" mt="xl">
+                {/* Beginner Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Rookie.png" // Corrected path
+                                alt="Beginner section preview"
+                                height={200}
path: src/pages/HomePage.tsx
user: login: GoldenBanksia
body: update to:
height={window.outerHeight/2} 

to scale across different screen sizes
created_at: 2025-04-18T07:15:27Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,66 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    const theme = useMantineTheme();
+    const getColor = (color: string) => theme.colors[color][theme.colorScheme === "dark" ? 5 : 7];
+
+    return (
+        <>
+            <Stack align={"center"}>
+                <Title>Welcome to the Deakin Detonator Toolkit</Title>
+                <Text>Your one-stop toolkit for both beginners and advanced penetration testers.</Text>
+            </Stack>
+
+            <Grid gutter="lg" mt="xl">
+                {/* Beginner Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Rookie.png" // Corrected path
+                                alt="Beginner section preview"
+                                height={200}
+                            />
+                        </CardSection>
+                        <Title order={3} align="center" mt="md">
+                            Beginner Section
+                        </Title>
+                        <Text align="center" mt="sm">
+                            Perfect for those starting their journey in penetration testing. Learn the basics through
+                            guided walkthroughs and simple tools.
+                        </Text>
+                        <Button fullWidth color="blue" mt="md" leftIcon={<IconSchool size={18} />}>
+                            Explore Beginner
+                        </Button>
+                    </Card>
+                </Grid.Col>
+
+                {/* Advanced Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Advanced.png" // Corrected path
+                                alt="Advanced section preview"
+                                height={200}
path: src/pages/HomePage.tsx
user: login: GoldenBanksia
body: update to:
height={window.outerHeight/2} 

to scale across different screen sizes
created_at: 2025-04-18T07:15:35Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,66 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    const theme = useMantineTheme();
+    const getColor = (color: string) => theme.colors[color][theme.colorScheme === "dark" ? 5 : 7];
+
+    return (
+        <>
+            <Stack align={"center"}>
+                <Title>Welcome to the Deakin Detonator Toolkit</Title>
+                <Text>Your one-stop toolkit for both beginners and advanced penetration testers.</Text>
+            </Stack>
+
+            <Grid gutter="lg" mt="xl">
+                {/* Beginner Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Rookie.png" // Corrected path
+                                alt="Beginner section preview"
+                                height={200}
+                            />
+                        </CardSection>
+                        <Title order={3} align="center" mt="md">
+                            Beginner Section
+                        </Title>
+                        <Text align="center" mt="sm">
+                            Perfect for those starting their journey in penetration testing. Learn the basics through
+                            guided walkthroughs and simple tools.
+                        </Text>
+                        <Button fullWidth color="blue" mt="md" leftIcon={<IconSchool size={18} />}>
path: src/pages/HomePage.tsx
user: login: GoldenBanksia
body: add disabled flag as feature not currently implemented:
<Button fullWidth color="blue" mt="md" leftIcon={<IconSchool size={18} />} disabled>
created_at: 2025-04-18T07:18:38Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,66 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    const theme = useMantineTheme();
+    const getColor = (color: string) => theme.colors[color][theme.colorScheme === "dark" ? 5 : 7];
+
+    return (
+        <>
+            <Stack align={"center"}>
+                <Title>Welcome to the Deakin Detonator Toolkit</Title>
+                <Text>Your one-stop toolkit for both beginners and advanced penetration testers.</Text>
+            </Stack>
+
+            <Grid gutter="lg" mt="xl">
+                {/* Beginner Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Rookie.png" // Corrected path
+                                alt="Beginner section preview"
+                                height={200}
+                            />
+                        </CardSection>
+                        <Title order={3} align="center" mt="md">
+                            Beginner Section
+                        </Title>
+                        <Text align="center" mt="sm">
+                            Perfect for those starting their journey in penetration testing. Learn the basics through
+                            guided walkthroughs and simple tools.
+                        </Text>
+                        <Button fullWidth color="blue" mt="md" leftIcon={<IconSchool size={18} />}>
+                            Explore Beginner
+                        </Button>
+                    </Card>
+                </Grid.Col>
+
+                {/* Advanced Section */}
+                <Grid.Col span={6}>
+                    <Card shadow="sm" p="lg" radius="md" withBorder>
+                        <CardSection>
+                            <Image
+                                src="/logo/Advanced.png" // Corrected path
+                                alt="Advanced section preview"
+                                height={200}
+                            />
+                        </CardSection>
+                        <Title order={3} align="center" mt="md">
+                            Advanced Section
+                        </Title>
+                        <Text align="center" mt="sm">
+                            Dive deep into advanced penetration testing techniques and tools. Ideal for experienced
+                            testers seeking complex strategies.
+                        </Text>
+                        <Button fullWidth color="violet" mt="md" leftIcon={<IconRocket size={18} />}>
path: src/pages/HomePage.tsx
user: login: GoldenBanksia
body: add disabled flag as feature not currently implemented:
<Button fullWidth color="violet" mt="md" leftIcon={<IconRocket size={18} />} disabled>
created_at: 2025-04-18T07:19:05Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,66 @@
+import { Image, Text, Stack, Title, Button, Grid, Card, CardSection, useMantineTheme } from "@mantine/core";
+import { IconRocket, IconSchool } from "@tabler/icons";
+
+const HomePage = () => {
+    const theme = useMantineTheme();
+    const getColor = (color: string) => theme.colors[color][theme.colorScheme === "dark" ? 5 : 7];
path: src/pages/HomePage.tsx
user: login: GoldenBanksia
body: not actually used - to be removed: lines 5 & 6
also remove 'useMantineTheme' from import 

dark & light modes rendered through App.tsx 
created_at: 2025-04-18T07:21:42Z
author_association: COLLABORATOR
diff_hunk: @@ -20,6 +20,7 @@ import "./App.css";
 import Navigation from "./components/NavBar/Navigation";
 import { ROUTES } from "./components/RouteWrapper";
 import { NotificationsProvider } from "@mantine/notifications";
+import HomePage from "./pages/HomePage";
path: src/App.tsx
user: login: GoldenBanksia
body: remove import HomePage - should instead be added into RouteWrapper.tsx
created_at: 2025-04-18T07:26:03Z
author_association: COLLABORATOR
diff_hunk: @@ -30,31 +31,18 @@ export default function App() {
     const toggleColorScheme = (value?: ColorScheme) => {
         const nextColorScheme = value || (colorScheme === "dark" ? "light" : "dark");
         setColorScheme(nextColorScheme);
-        document.body.className = nextColorScheme + "-mode"; // Update body class
-        console.log("Color scheme toggled to:", nextColorScheme); // Log the color scheme change
+        document.body.className = nextColorScheme + "-mode";
+        console.log("Color scheme toggled to:", nextColorScheme);
     };
 
     const toggleOpened = () => {
         setOpened(!opened);
     };
 
-    const handleGoBack = () => {
-        window.history.back();
-    };
-
-    const handleGoForward = () => {
-        window.history.forward();
-    };
-
     useEffect(() => {
-        document.body.className = colorScheme + "-mode"; // Initialize body class
+        document.body.className = colorScheme + "-mode";
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-        if (prefersDarkScheme) {
-            setImageSrc("/src/logo/logo-dark.png"); // Use dark mode logo
-        } else {
-            setImageSrc("/src/logo/logo-light.png"); // Use light mode logo
-        }
+        setImageSrc(prefersDarkScheme ? "/src/logo/logo-dark.png" : "/src/logo/logo-light.png");
path: src/App.tsx
user: login: GoldenBanksia
body: nice change
created_at: 2025-04-18T07:28:46Z
author_association: COLLABORATOR
diff_hunk: @@ -108,8 +96,9 @@ export default function App() {
                         }
                     >
                         <Routes>
+                            <Route path="/" element={<HomePage />} />
path: src/App.tsx
user: login: GoldenBanksia
body: route to home page needs to be removed from App.tsx and added to RouteWrapper.tsx by:
1) adding import HomePage 
2)  update route to path: "/" from element AboutPage to HomePage

created_at: 2025-04-18T07:30:47Z
author_association: COLLABORATOR

PR comments:
user: login: GoldenBanksia
created_at: 2025-04-07T10:06:13Z
body: Helped troubleshoot issues with divergent branch + removing committed changes to yarn.lock and install files
author_association: COLLABORATOR
user: login: GoldenBanksia
created_at: 2025-04-10T08:45:47Z
body: Hey @hades7200 Ishan you need to remove the commit 56ef63e which added the 'yarn.lock' and 'install-state.gz' files to your commit/push. 

When pushing to GitHub, do not use 'git add .' use 'git add <filename' to only add specific files. Your PR will not be reviewed until these additional files are removed 
author_association: COLLABORATOR