feat: add welcome page

feat: add welcome page

apps/web/cypress/component/Welcome.cy.tsx

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+import React from "react";
+import Welcome from "../../src/components/Welcome";
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "../../src/theme";
+import { CssBaseline } from "@mui/material";
+
+describe("Welcome", () => {
+  beforeEach(() => {
+    cy.mount(
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Welcome onContinue={cy.stub().as("continueHandler")} />
+      </ThemeProvider>,
+    );
+  });
+
+  it("should display the correct heading", () => {
+    cy.contains("Account created!").should("be.visible");
+  });
+
+  it("should display the welcome text", () => {
+    cy.contains("Welcome and thank you for joining").should("be.visible");
+    cy.contains("automatically receive your wallet").should("be.visible");
+  });
+
+  it("should have a continue button", () => {
+    cy.contains("button", "Continue").should("be.visible");
+  });
+
+  it("should call onContinue when button is clicked", () => {
+    cy.contains("button", "Continue").click();
+    cy.get("@continueHandler").should("have.been.called");
+  });
+
+  it("should have the check circle icon", () => {
+    cy.get("svg").should("be.visible");
+  });
+});

apps/web/src/app/welcome/Page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import Welcome from "@/components/Welcome";
+
+export default function Page() {
+  const router = useRouter();
+
+  const handleContinue = () => {
+    router.push("/home");
+  };
+
+  return <Welcome onContinue={handleContinue} />;
+}

apps/web/src/components/Welcome.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Box, Button, Container, Typography, useTheme } from "@mui/material";
+import { CheckCircle } from "@mui/icons-material";
+
+interface WelcomeProps {
+  onContinue?: () => void;
+}
+
+export default function Welcome({ onContinue }: WelcomeProps) {
+  const theme = useTheme();
+
+  const handleContinue = () => {
+    if (onContinue) {
+      onContinue();
+    }
+  };
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          backgroundColor: "white",
+          textAlign: "center",
+          minHeight: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 3,
+          py: 4,
+        }}>
+        <Typography variant="h5">Account created!</Typography>
+
+        <CheckCircle
+          sx={{
+            fontSize: 40,
+            color: theme.palette.header.main,
+            my: 0,
+          }}
+        />
+
+        <Typography variant="body1" sx={{ mb: 1, width: "95%" }}>
+          Welcome and thank you for joining our reforestation mission and
+          becoming part of our global community dedicated to positive
+          environmental impact.
+        </Typography>
+
+        <Typography variant="body1" sx={{ mb: 3, width: "95%" }}>
+          Upon creating your account, you will automatically receive your
+          wallet, which you can rename later.
+        </Typography>
+
+        <Button
+          variant="contained"
+          color="primary"
+          size="large"
+          onClick={handleContinue}
+          sx={{
+            width: "95%",
+            px: 4,
+            py: 1.5,
+            borderRadius: 2,
+            textTransform: "none",
+            fontSize: "1rem",
+          }}>
+          Continue
+        </Button>
+      </Box>
+    </Container>
+  );
+}