scripts and texts

frontend/src/pages/Home.tsx

@@ -1,9 +1,162 @@
-import Title from 'antd/lib/typography/Title';
+import { ApartmentOutlined, AreaChartOutlined, HomeOutlined, MonitorOutlined, RightOutlined } from '@ant-design/icons';
+import { Button, Card, Col, List, Row, Space, Typography } from 'antd';
+import type { ReactElement, ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
 
-export default function Home() {
+import FirewallIcon from '../icons/FirewallIcon';
+import TerminalIcon from '../icons/TerminalIcon';
+import { PATHS } from '../routes';
+
+const { Title, Paragraph, Text } = Typography;
+
+type SectionCard = {
+  key: string;
+  title: string;
+  route?: string;
+  icon: ReactNode;
+  summary: string;
+  bullets: string[];
+};
+
+const mainSections: SectionCard[] = [
+  {
+    key: 'home',
+    title: 'Home',
+    route: PATHS.HOME,
+    icon: <HomeOutlined style={{ fontSize: 22 }} />,
+    summary: 'Landing page with a overview of the platform and its main functionalities.',
+    bullets: [''],
+  },
+  {
+    key: 'network',
+    title: 'Network',
+    route: PATHS.NETWORK,
+    icon: <ApartmentOutlined style={{ fontSize: 22 }} />,
+    summary: 'Inspect interfaces, routes, and link-state, create brdiges and enable bridge link state propagation.',
+    bullets: [
+      'Shows the current network state and interface details.',
+      'Creates and removes bridges for traffic interception setups.',
+      'Manages bridge link-state watcher behavior and interface reset operations.',
+    ],
+  },
+  {
+    key: 'firewall',
+    title: 'Firewall',
+    route: PATHS.FIREWALL,
+    icon: <FirewallIcon style={{ fontSize: 22 }} />,
+    summary: 'Build and inspect nftables rules that steer or control packet handling.',
+    bullets: [
+      'Display the current nftables ruleset.',
+      'Create tables, chains and rules without writing everything by hand.',
+      'Push packets into NFQUEUEs.',
+    ],
+  },
+  {
+    key: 'sniffing',
+    title: 'Sniffing',
+    route: PATHS.SNIFFING,
+    icon: <MonitorOutlined style={{ fontSize: 22 }} />,
+    summary: 'Start live packet capture sessions and inspect captured traffic across interfaces and bridges.',
+    bullets: [
+      'Start and stop capture sessions per interface or bridge.',
+      'Show capture status to see where packets are currently being collected.',
+      'Displays captured packets for live inspection.',
+    ],
+  },
+  {
+    key: 'scripting',
+    title: 'Scripting',
+    route: PATHS.SCRIPTING,
+    icon: <TerminalIcon style={{ fontSize: 22 }} width={22} height={22} />,
+    summary: 'Manage NFQUEUE Python scripts that can inspect, modify, delay, or drop packets inline.',
+    bullets: [
+      'Upload and download saved scripts and optional requirements.',
+      'Enable and disable scripts as systemd-backed queue workers.',
+      'Example scripts as baseline for developing new use-cases.',
+    ],
+  },
+  {
+    key: 'analysis',
+    title: 'Analysis',
+    route: PATHS.ANALYSIS,
+    icon: <AreaChartOutlined style={{ fontSize: 22 }} />,
+    summary:
+      'Turn captured traffic into higher-level insights such as hosts, paths, conversations, and protocol usage.',
+    bullets: ['Display visualizations from observed traffic.'],
+  },
+];
+
+function OverviewCard({ section, onOpen }: { section: SectionCard; onOpen?: (route: string) => void }): ReactElement {
   return (
-    <div>
-      <Title level={2}>TBD</Title>
+    <Card
+      title={
+        <Space align="center">
+          {section.icon}
+          <span>{section.title}</span>
+        </Space>
+      }
+      extra={
+        section.route && onOpen ? (
+          <Button type="link" onClick={() => onOpen(section.route!)}>
+            Open <RightOutlined />
+          </Button>
+        ) : null
+      }
+      style={{ height: '100%' }}
+    >
+      <Paragraph style={{ minHeight: 66 }}>{section.summary}</Paragraph>
+      <List
+        size="small"
+        dataSource={section.bullets}
+        renderItem={(item) => (
+          <List.Item style={{ paddingInline: 0 }}>
+            <Text>{item}</Text>
+          </List.Item>
+        )}
+      />
+    </Card>
+  );
+}
+
+export default function Home(): ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <div style={{ padding: 16 }}>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Card>
+            <Title level={2} style={{ marginTop: 0 }}>
+              MITM Webserver App Overview
+            </Title>
+            <Paragraph>
+              This application is a proof-of-concept platform for network traffic configuration, interception,
+              manipulation, and analyzation. It combines network setup, firewall control, packet capture, inline NFQUEUE
+              scripting, and higher-level traffic analysis in one app while trying to stay hidden from the communicating
+              entities.
+            </Paragraph>
+          </Card>
+        </Col>
+
+        <Col span={24}>
+          <Card>
+            <Title level={4} style={{ marginTop: 0 }}>
+              Main Pages
+            </Title>
+            <Paragraph>
+              These are the core working areas of the application. Each page supports a different phase of network
+              experimentation, monitoring, or analysis.
+            </Paragraph>
+            <Row gutter={[16, 16]}>
+              {mainSections.map((section) => (
+                <Col xs={24} md={12} xl={8} key={section.key}>
+                  <OverviewCard section={section} onOpen={(route) => navigate(route)} />
+                </Col>
+              ))}
+            </Row>
+          </Card>
+        </Col>
+      </Row>
     </div>
   );
 }