Notification bar

frontend/src/app/header.tsx

@@ -6,6 +6,7 @@ import {
     ActionIcon,
     Divider,
     Tooltip,
+    Stack,
 } from "@mantine/core";
 import { FC } from "react";
 import { RiMoneyDollarCircleLine } from "react-icons/ri";
@@ -32,19 +33,28 @@ const VoucherNotification: FC = () => {
 
 export const Header: FC = () => {
     return (
-        <Group h="100%" px={20}>
-            <Center>
-                <Anchor href="/" underline="never">
-                    <Title>🪲 Bug Buster</Title>
-                </Anchor>
-            </Center>
-            <Group justify="flex-end" style={{ flex: 1 }}>
-                <HasConnectedAccount>
-                    <VoucherNotification />
-                </HasConnectedAccount>
-                <Divider orientation="vertical" />
-                <ConnectButton />
+        <Stack align="stretch" justify="flex-start" gap="5px">
+            <Group bg="gray">
+                <Center w="100%">
+                    <Anchor href="/notification" underline="never">
+                        We are in Alpha stage, read more.
+                    </Anchor>
+                </Center>
             </Group>
-        </Group>
+            <Group h="100%" px={20}>
+                <Group justify="flex-end">
+                    <Anchor href="/" underline="never">
+                        <Title>🪲 Bug Buster</Title>
+                    </Anchor>
+                </Group>
+                <Group justify="flex-end" style={{ flex: 1 }}>
+                    <HasConnectedAccount>
+                        <VoucherNotification />
+                    </HasConnectedAccount>
+                    <Divider orientation="vertical" />
+                    <ConnectButton />
+                </Group>
+            </Group>
+        </Stack>
     );
 };

frontend/src/app/notification/page.tsx

@@ -0,0 +1,54 @@
+import { Anchor, Group, Stack, Text, Title } from "@mantine/core";
+import { FC } from "react";
+
+const WordsOfCaution: FC = () => {
+    return (
+        <Group justify="center">
+            <Stack align="center" w="60%">
+                <Title mt="lg">
+                    🚨 Considerations for early user adopters 🚨
+                </Title>
+                <Text>
+                    Bug Buster is in alpha stage, which means its development is
+                    heavily active, and changes (such as fixes and improvements)
+                    can come at any time.
+                </Text>
+                <Text>
+                    Regarding security, Bug Buster is built on top of the
+                    Cartesi Rollups SDK and developed with meticulous care and
+                    attention to detail. However, we cannot guarantee that the
+                    platform is entirely free of bugs or vulnerabilities at this
+                    stage.
+                </Text>
+                <Text>
+                    To avoid any potential loss of funds, we recommend that you
+                    use the platform with caution, and avoid depositing large
+                    amounts of funds.
+                </Text>
+                <Text>
+                    Nevertheless, this is an exciting phase of development and
+                    your feedback really matters! Together, let&apos;s build an
+                    innovative, safer, and user-friendly open-source bug bounty
+                    platform for the Web3 industry.🌟
+                </Text>
+                <Text>
+                    Feel free to explore, ask questions, and provide feedback on
+                    our{" "}
+                    <Anchor
+                        href="https://discord.com/channels/600597137524391947/1166042819782258788"
+                        underline="never"
+                    >
+                        Discord channel
+                    </Anchor>{" "}
+                    or message us on our{" "}
+                    <Anchor href="https://x.com/BugBusterApp" underline="never">
+                        X account
+                    </Anchor>
+                    .
+                </Text>
+            </Stack>
+        </Group>
+    );
+};
+
+export default WordsOfCaution;