From fe980cb5e06ba289aafd78f08226d9364e53553d Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 8 Aug 2024 11:52:10 +0200
Subject: [PATCH 1/8] Adapt HighlightText to receive arrays on highlight and
 color props

---
 src/common/ui/HighlightText.tsx               | 36 ++++++++++++-------
 src/features/new-project/NewProject.tsx       |  6 ++--
 .../new-project/view/NewProjectSteps.tsx      |  4 +--
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/common/ui/HighlightText.tsx b/src/common/ui/HighlightText.tsx
index 0f3cd9ed..c61b309b 100644
--- a/src/common/ui/HighlightText.tsx
+++ b/src/common/ui/HighlightText.tsx
@@ -7,18 +7,18 @@ type CustomTypographyVariant = TypographyVariant | 'body0' | 'body3';
 
 interface HighlightTextProps {
   content: string
-  highlight: string
-  color: string
+  highlight: string[]
+  color: string[]
   height?: string
-  isSolidOpacity?: boolean
+  opacity?: number
   isBoldText?: boolean
   variant?: CustomTypographyVariant
   sx?: SxProps
 }
 
 const HighlightSpan = styled.span<{
-    color: string; isSolidOpacity: boolean; height: string; isBoldText: boolean 
-  }>`
+  color: string; opacity: number; height: string; isBoldText: boolean 
+}>`
   position: relative;
   display: inline-block;
   ${({ isBoldText }) => isBoldText && "font-weight: 600"};
@@ -31,7 +31,7 @@ const HighlightSpan = styled.span<{
     width: 102%;
     background-color: ${({ color }) => color};
     z-index: -10;
-    opacity: ${({ isSolidOpacity }) => isSolidOpacity ? .7 : .3};
+    opacity: ${({ opacity }) => opacity * 0.1};
     transform: skewX(-2deg);
   }
 }`;
@@ -41,12 +41,21 @@ const HighlightText = ({
   highlight,
   color,
   height="50%",
-  isSolidOpacity=false,
+  opacity=3,
   isBoldText=false,
   variant,
   sx
 }: HighlightTextProps) => {
-  const parts = content.split(new RegExp(`(${highlight})`, 'gi'))
+  if (!highlight.length || !color.length) {
+    return (
+      <Typography variant={variant} sx={{ ...sx }}>
+        {content}
+      </Typography>
+    );
+  }
+
+  const parts = content.split(new RegExp(`(${highlight.join('|')})`, 'gi'));
+  const getColor = (index: number) => color[index % color.length];
 
   return (
     <Typography
@@ -57,12 +66,13 @@ const HighlightText = ({
         gap: 1,
       }}
     >
-      {parts.map((part, index) =>
-        part.toLowerCase() === highlight.toLowerCase() ? (
+      {parts.map((part, index) => {
+        const highlightIndex = highlight.findIndex(h => h.toLowerCase() === part.toLowerCase());
+        return highlightIndex !== -1 ? (
           <HighlightSpan
             key={`highlight-span-${index}`}
-            color={color}
-            isSolidOpacity={isSolidOpacity}
+            color={getColor(highlightIndex)}
+            opacity={opacity}
             height={height}
             isBoldText={isBoldText}>
             {part}
@@ -70,7 +80,7 @@ const HighlightText = ({
         ) : (
           part
         )
-      )}
+      })}
     </Typography>
   );
 };
diff --git a/src/features/new-project/NewProject.tsx b/src/features/new-project/NewProject.tsx
index 69092ae0..e58673b5 100644
--- a/src/features/new-project/NewProject.tsx
+++ b/src/features/new-project/NewProject.tsx
@@ -35,10 +35,10 @@ return (
     >
       <HighlightText
         content={`${title} ${SITE_NAME}`}
-        highlight={SITE_NAME}
-        color={BASE_COLORS[0]}
+        highlight={[SITE_NAME]}
+        color={[BASE_COLORS[0]]}
         variant="h4"
-        isSolidOpacity
+        opacity={7}
       />
       <NewProjectSteps 
         repositoryNameSuffix={repositoryNameSuffix}
diff --git a/src/features/new-project/view/NewProjectSteps.tsx b/src/features/new-project/view/NewProjectSteps.tsx
index ef1e6927..a84dba7d 100644
--- a/src/features/new-project/view/NewProjectSteps.tsx
+++ b/src/features/new-project/view/NewProjectSteps.tsx
@@ -54,8 +54,8 @@ const NewProjectSteps = ({
       {step.highlight ? 
         <HighlightText
           content={`${index + 1}. ${step.content}`}
-          highlight={step.highlight}
-          color={BASE_COLORS[2]}
+          highlight={[step.highlight]}
+          color={[BASE_COLORS[2]]}
           height="80%"
           variant="body3"
           sx={{ marginRight: { xs: 1 } }}

From c2bf66b908d17dc6e4dcb86ce6a5b7206110996a Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 8 Aug 2024 12:28:56 +0200
Subject: [PATCH 2/8] Change double brackets on slug file so "/" route has own
 page

---
 src/app/(authed)/(home)/{[[...slug]] => [...slug]}/layout.tsx | 0
 src/app/(authed)/(home)/{[[...slug]] => [...slug]}/page.tsx   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/app/(authed)/(home)/{[[...slug]] => [...slug]}/layout.tsx (100%)
 rename src/app/(authed)/(home)/{[[...slug]] => [...slug]}/page.tsx (100%)

diff --git a/src/app/(authed)/(home)/[[...slug]]/layout.tsx b/src/app/(authed)/(home)/[...slug]/layout.tsx
similarity index 100%
rename from src/app/(authed)/(home)/[[...slug]]/layout.tsx
rename to src/app/(authed)/(home)/[...slug]/layout.tsx
diff --git a/src/app/(authed)/(home)/[[...slug]]/page.tsx b/src/app/(authed)/(home)/[...slug]/page.tsx
similarity index 100%
rename from src/app/(authed)/(home)/[[...slug]]/page.tsx
rename to src/app/(authed)/(home)/[...slug]/page.tsx

From 93ba365fa0022cea982b4a3f9879b146f2aa0a30 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 8 Aug 2024 13:05:57 +0200
Subject: [PATCH 3/8] Create welcome page

---
 public/images/arrow_04.svg       |   1 +
 public/images/arrow_07.svg       |   1 +
 src/app/(authed)/(home)/page.tsx | 164 +++++++++++++++++++++++++++++++
 3 files changed, 166 insertions(+)
 create mode 100644 public/images/arrow_04.svg
 create mode 100644 public/images/arrow_07.svg
 create mode 100644 src/app/(authed)/(home)/page.tsx

diff --git a/public/images/arrow_04.svg b/public/images/arrow_04.svg
new file mode 100644
index 00000000..4296c2a1
--- /dev/null
+++ b/public/images/arrow_04.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95" height="20"><g fill="none" stroke="#9e9e9e" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10"><path d="M3.471 11.53c1.522 1.408 3.577 1.145 5.935 1.174 9.331.121 18.768-.963 28.067-1.583 15.529-1.034 32.082-3.414 47.576-.777"/><path stroke-linejoin="round" d="M81.662 16.798c2.522-3.59 6.828-3.986 9.867-6.88-2.967-1.208-8.871-3.928-10.767-6.716"/></g></svg>
\ No newline at end of file
diff --git a/public/images/arrow_07.svg b/public/images/arrow_07.svg
new file mode 100644
index 00000000..bc26d2ab
--- /dev/null
+++ b/public/images/arrow_07.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="60"><g fill="none" stroke="#9e9e9e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path d="M19.409 6.077C14.118 8.315 5.456 11.935 4.693 18.628c-.676 5.938 5.108 11.437 8.879 15.21 5.497 5.502 24.226 21.344 6.303 23.567-5.914.733-11.722-.262-17.337-2.13"/><path d="M19.307 13.743c.426-4.367 3.978-6.833 5.197-10.849-3.177.411-9.656.953-12.678-.541"/></g></svg>
\ No newline at end of file
diff --git a/src/app/(authed)/(home)/page.tsx b/src/app/(authed)/(home)/page.tsx
new file mode 100644
index 00000000..ddf1cc93
--- /dev/null
+++ b/src/app/(authed)/(home)/page.tsx
@@ -0,0 +1,164 @@
+import { env } from "@/common"
+import HighlightText from "@/common/ui/HighlightText"
+import { Box, Typography } from "@mui/material"
+import { BASE_COLORS } from "@/common/theme/theme"
+import { grey } from "@mui/material/colors"
+import Image from "next/image"
+import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
+
+const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
+const HELP_URL = env.get("NEXT_PUBLIC_SHAPE_DOCS_HELP_URL")
+
+
+const Page = () => {
+  const title = "Welcome to "
+  const description = [
+    "Easily manage and preview your OpenAPI documentation with GitHub integration",
+    "Simple, efficient, and collaborative"
+  ]
+
+return (
+  <Box
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    flexDirection="column"
+    height={1}
+    width={1}
+    gap={10}
+  >
+    <Box
+      position="absolute"
+      display={{ xs: "none", sm: "none", md: "flex"}}
+      alignItems="center"
+      width={1}
+      height={100}
+      top={-10}
+      left={350}
+      gap={2}
+      sx={{ color: grey[500] }}
+    >
+      <Box width={80} height={100} position="relative" mr={1}>
+          <Image
+            src="/images/arrow_04.svg"
+            alt="arrow"
+            layout="fill"
+            objectFit="contain"
+          />
+        </Box>
+        <Typography sx={{
+          display: { md: "flex" },
+          fontSize: 16,
+          fontStyle: "italic"
+        }}>
+          Start a new project here!
+        </Typography>
+    </Box>
+    <Box
+      position="absolute"
+      display={{ xs: "none", sm: "none", md: "flex"}}
+      alignItems="start"
+      width={1}
+      height={100}
+      top={120}
+      left={350}
+      gap={2}
+      sx={{ color: grey[500] }}
+    >
+      <Box width={80} height={80} position="relative" mr={1}>
+          <Image
+            src="/images/arrow_04.svg"
+            alt="arrow"
+            layout="fill"
+            objectFit="contain"
+          />
+        </Box>
+        <Typography sx={{
+          fontSize: 16,
+          fontStyle: "italic",
+          position: "absolute",
+          top: 28,
+          left: 100
+        }}>
+          Find all your project docs here
+        </Typography>
+    </Box>
+    <Box
+      position="absolute"
+      display={{ xs: "none", sm: "none", md: "flex"}}
+      alignItems="start"
+      width={1}
+      height={100}
+      bottom={0}
+      left={350}
+      gap={2}
+      sx={{ color: grey[500] }}
+    >
+      <Box width={70} height={70} position="relative" mr={1}>
+          <Image
+            src="/images/arrow_07.svg"
+            alt="arrow"
+            layout="fill"
+            objectFit="contain"
+          />
+        </Box>
+        <Typography sx={{
+          fontSize: 16,
+          fontStyle: "italic",
+          position: "absolute",
+          bottom: 100,
+          left: 70
+
+        }}>
+          Explore more features here
+        </Typography>
+    </Box>
+    
+    <HighlightText
+      content={`${title} ${SITE_NAME}`}
+      highlight={[SITE_NAME]}
+      color={[BASE_COLORS[0]]}
+      variant="h3"
+      opacity={7}
+    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      width={1}
+      gap={2}      
+    >
+      {description.map((line, index) => (
+        <Typography 
+          key={`description-line-${index}`}
+          sx={{
+            display: { md: "flex" },
+            fontSize: 20,
+            color: grey[700]
+          }}
+        >
+          {line}
+        </Typography>
+      ))}
+    </Box>
+    
+    {HELP_URL && 
+      <Box
+        position="absolute"
+        sx={{ color: grey[500] }}
+        bottom={30}
+        marginLeft="auto"
+      >
+        <MessageLinkFooter
+          url={`${HELP_URL}/Browsing-Documentation`}
+          content="Lost? Read more about it in our wiki documentation"
+        />
+      </Box>
+    }
+
+  </Box>
+)}
+
+export default Page
+

From f88f1c85b7f14722ed4ff930309f95c2d8397d15 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 8 Aug 2024 14:59:49 +0200
Subject: [PATCH 4/8] Add layout to welcome page & make it responsive

---
 public/images/arrow_26.svg                    |   1 +
 src/app/(authed)/(home)/(welcome)/layout.tsx  |  23 +++
 src/app/(authed)/(home)/(welcome)/page.tsx    |  22 +++
 src/app/(authed)/(home)/page.tsx              | 164 ------------------
 src/features/welcome/index.tsx                |  33 ++++
 .../welcome/view/ShowSectionsLayer.tsx        | 130 ++++++++++++++
 src/features/welcome/view/WelcomeContent.tsx  |  52 ++++++
 7 files changed, 261 insertions(+), 164 deletions(-)
 create mode 100644 public/images/arrow_26.svg
 create mode 100644 src/app/(authed)/(home)/(welcome)/layout.tsx
 create mode 100644 src/app/(authed)/(home)/(welcome)/page.tsx
 delete mode 100644 src/app/(authed)/(home)/page.tsx
 create mode 100644 src/features/welcome/index.tsx
 create mode 100644 src/features/welcome/view/ShowSectionsLayer.tsx
 create mode 100644 src/features/welcome/view/WelcomeContent.tsx

diff --git a/public/images/arrow_26.svg b/public/images/arrow_26.svg
new file mode 100644
index 00000000..1d94f8fc
--- /dev/null
+++ b/public/images/arrow_26.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110" height="60"><g fill="none" stroke="#9e9e9e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path d="M6.229 51.784c21.772-37.742 58.396-52.588 101-48.5M2.771 45.352c1.652 4.064-.345 7.899.445 12.021 2.62-1.841 8.103-5.334 11.474-5.418"/></g></svg>
\ No newline at end of file
diff --git a/src/app/(authed)/(home)/(welcome)/layout.tsx b/src/app/(authed)/(home)/(welcome)/layout.tsx
new file mode 100644
index 00000000..3ff0e605
--- /dev/null
+++ b/src/app/(authed)/(home)/(welcome)/layout.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
+import { Box } from "@mui/material"
+
+export default function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Box width={1} display={{ xs: "flex", sm: "flex", md: "none"}} paddingLeft={{ xs: 2 }}>
+        <SecondarySplitHeader showDivider={false} />
+      </Box>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        padding={{ xs: 4 }}
+        height={1}
+      >
+        {children}
+      </Box>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/app/(authed)/(home)/(welcome)/page.tsx b/src/app/(authed)/(home)/(welcome)/page.tsx
new file mode 100644
index 00000000..cd8e0515
--- /dev/null
+++ b/src/app/(authed)/(home)/(welcome)/page.tsx
@@ -0,0 +1,22 @@
+import WelcomePage from "@/features/welcome"
+import { Box } from "@mui/material"
+
+const Page = () => {
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      height={1}
+      width={1}
+      gap={10}
+    >
+      <WelcomePage />
+    </Box>
+  )
+}
+
+export default Page
+
diff --git a/src/app/(authed)/(home)/page.tsx b/src/app/(authed)/(home)/page.tsx
deleted file mode 100644
index ddf1cc93..00000000
--- a/src/app/(authed)/(home)/page.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { env } from "@/common"
-import HighlightText from "@/common/ui/HighlightText"
-import { Box, Typography } from "@mui/material"
-import { BASE_COLORS } from "@/common/theme/theme"
-import { grey } from "@mui/material/colors"
-import Image from "next/image"
-import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
-
-const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
-const HELP_URL = env.get("NEXT_PUBLIC_SHAPE_DOCS_HELP_URL")
-
-
-const Page = () => {
-  const title = "Welcome to "
-  const description = [
-    "Easily manage and preview your OpenAPI documentation with GitHub integration",
-    "Simple, efficient, and collaborative"
-  ]
-
-return (
-  <Box
-    display="flex"
-    alignItems="center"
-    justifyContent="center"
-    flexDirection="column"
-    height={1}
-    width={1}
-    gap={10}
-  >
-    <Box
-      position="absolute"
-      display={{ xs: "none", sm: "none", md: "flex"}}
-      alignItems="center"
-      width={1}
-      height={100}
-      top={-10}
-      left={350}
-      gap={2}
-      sx={{ color: grey[500] }}
-    >
-      <Box width={80} height={100} position="relative" mr={1}>
-          <Image
-            src="/images/arrow_04.svg"
-            alt="arrow"
-            layout="fill"
-            objectFit="contain"
-          />
-        </Box>
-        <Typography sx={{
-          display: { md: "flex" },
-          fontSize: 16,
-          fontStyle: "italic"
-        }}>
-          Start a new project here!
-        </Typography>
-    </Box>
-    <Box
-      position="absolute"
-      display={{ xs: "none", sm: "none", md: "flex"}}
-      alignItems="start"
-      width={1}
-      height={100}
-      top={120}
-      left={350}
-      gap={2}
-      sx={{ color: grey[500] }}
-    >
-      <Box width={80} height={80} position="relative" mr={1}>
-          <Image
-            src="/images/arrow_04.svg"
-            alt="arrow"
-            layout="fill"
-            objectFit="contain"
-          />
-        </Box>
-        <Typography sx={{
-          fontSize: 16,
-          fontStyle: "italic",
-          position: "absolute",
-          top: 28,
-          left: 100
-        }}>
-          Find all your project docs here
-        </Typography>
-    </Box>
-    <Box
-      position="absolute"
-      display={{ xs: "none", sm: "none", md: "flex"}}
-      alignItems="start"
-      width={1}
-      height={100}
-      bottom={0}
-      left={350}
-      gap={2}
-      sx={{ color: grey[500] }}
-    >
-      <Box width={70} height={70} position="relative" mr={1}>
-          <Image
-            src="/images/arrow_07.svg"
-            alt="arrow"
-            layout="fill"
-            objectFit="contain"
-          />
-        </Box>
-        <Typography sx={{
-          fontSize: 16,
-          fontStyle: "italic",
-          position: "absolute",
-          bottom: 100,
-          left: 70
-
-        }}>
-          Explore more features here
-        </Typography>
-    </Box>
-    
-    <HighlightText
-      content={`${title} ${SITE_NAME}`}
-      highlight={[SITE_NAME]}
-      color={[BASE_COLORS[0]]}
-      variant="h3"
-      opacity={7}
-    />
-    <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      width={1}
-      gap={2}      
-    >
-      {description.map((line, index) => (
-        <Typography 
-          key={`description-line-${index}`}
-          sx={{
-            display: { md: "flex" },
-            fontSize: 20,
-            color: grey[700]
-          }}
-        >
-          {line}
-        </Typography>
-      ))}
-    </Box>
-    
-    {HELP_URL && 
-      <Box
-        position="absolute"
-        sx={{ color: grey[500] }}
-        bottom={30}
-        marginLeft="auto"
-      >
-        <MessageLinkFooter
-          url={`${HELP_URL}/Browsing-Documentation`}
-          content="Lost? Read more about it in our wiki documentation"
-        />
-      </Box>
-    }
-
-  </Box>
-)}
-
-export default Page
-
diff --git a/src/features/welcome/index.tsx b/src/features/welcome/index.tsx
new file mode 100644
index 00000000..13f1e2e0
--- /dev/null
+++ b/src/features/welcome/index.tsx
@@ -0,0 +1,33 @@
+import { grey } from "@mui/material/colors"
+import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
+import ShowSectionsLayer from "@/features/welcome/view/ShowSectionsLayer"
+import WelcomeContent from "@/features/welcome/view/WelcomeContent"
+import { env } from "@/common"
+import { Box } from "@mui/material"
+
+const HELP_URL = env.get("NEXT_PUBLIC_SHAPE_DOCS_HELP_URL")
+
+const WelcomePage = () => {
+  return (
+    <>
+      <ShowSectionsLayer />
+      <WelcomeContent />
+
+      {HELP_URL && 
+        <Box
+          position="absolute"
+          sx={{ color: grey[500] }}
+          bottom={30}
+          marginLeft="auto"
+        >
+          <MessageLinkFooter
+            url={`${HELP_URL}/Browsing-Documentation`}
+            content="Lost? Read more about it in our wiki documentation"
+          />
+        </Box>
+      }
+    </>
+  )
+}
+
+export default WelcomePage
\ No newline at end of file
diff --git a/src/features/welcome/view/ShowSectionsLayer.tsx b/src/features/welcome/view/ShowSectionsLayer.tsx
new file mode 100644
index 00000000..b6787c68
--- /dev/null
+++ b/src/features/welcome/view/ShowSectionsLayer.tsx
@@ -0,0 +1,130 @@
+import { Box, Typography } from "@mui/material"
+import Image from "next/image"
+import { grey } from "@mui/material/colors"
+
+const ShowSectionsLayer = () => {
+
+  return (
+    <>
+      <Box
+        position="absolute"
+        display={{ xs: "flex", sm: "flex", md: "none"}}
+        alignItems="start"
+        width={1}
+        height={100}
+        top={27}
+        left={80}
+        gap={2}
+        sx={{ color: grey[500] }}
+      >
+        <Box width={70} height={70} position="relative" mr={1} sx={{ transform: "rotate(10deg) scaleX(-1)" }}>
+          <Image
+            src="/images/arrow_26.svg"
+            alt="arrow"
+            layout="fill"
+            objectFit="contain"
+          />
+        </Box>
+        <Typography sx={{
+          fontSize: 16,
+          fontStyle: "italic",
+          position: "absolute",
+          top: 90,
+          left: 0
+
+        }}>
+          Check all the cool features here!
+        </Typography>
+      </Box>
+
+      <Box
+        position="absolute"
+        display={{ xs: "none", sm: "none", md: "flex"}}
+        alignItems="center"
+        width={1}
+        height={100}
+        top={-10}
+        left={350}
+        gap={2}
+        sx={{ color: grey[500] }}
+      >
+        <Box width={80} height={100} position="relative" mr={1}>
+            <Image
+              src="/images/arrow_04.svg"
+              alt="arrow"
+              layout="fill"
+              objectFit="contain"
+            />
+          </Box>
+          <Typography sx={{
+            display: { md: "flex" },
+            fontSize: 16,
+            fontStyle: "italic"
+          }}>
+            Start a new project here!
+          </Typography>
+      </Box>
+      <Box
+        position="absolute"
+        display={{ xs: "none", sm: "none", md: "flex"}}
+        alignItems="start"
+        width={1}
+        height={100}
+        top={120}
+        left={350}
+        gap={2}
+        sx={{ color: grey[500] }}
+      >
+        <Box width={80} height={80} position="relative" mr={1}>
+            <Image
+              src="/images/arrow_04.svg"
+              alt="arrow"
+              layout="fill"
+              objectFit="contain"
+            />
+          </Box>
+          <Typography sx={{
+            fontSize: 16,
+            fontStyle: "italic",
+            position: "absolute",
+            top: 28,
+            left: 100
+          }}>
+            Find all your project docs here
+          </Typography>
+      </Box>
+      <Box
+        position="absolute"
+        display={{ xs: "none", sm: "none", md: "flex"}}
+        alignItems="start"
+        width={1}
+        height={100}
+        bottom={0}
+        left={350}
+        gap={2}
+        sx={{ color: grey[500] }}
+      >
+        <Box width={70} height={70} position="relative" mr={1}>
+            <Image
+              src="/images/arrow_07.svg"
+              alt="arrow"
+              layout="fill"
+              objectFit="contain"
+            />
+          </Box>
+          <Typography sx={{
+            fontSize: 16,
+            fontStyle: "italic",
+            position: "absolute",
+            bottom: 100,
+            left: 70
+
+          }}>
+            And explore more features here
+          </Typography>
+      </Box>
+    </>
+  )
+}
+
+export default ShowSectionsLayer
\ No newline at end of file
diff --git a/src/features/welcome/view/WelcomeContent.tsx b/src/features/welcome/view/WelcomeContent.tsx
new file mode 100644
index 00000000..35f545c6
--- /dev/null
+++ b/src/features/welcome/view/WelcomeContent.tsx
@@ -0,0 +1,52 @@
+import HighlightText from "@/common/ui/HighlightText"
+import { Box, Typography } from "@mui/material"
+import { BASE_COLORS } from "@/common/theme/theme"
+import { env } from "@/common"
+import { grey } from "@mui/material/colors"
+
+const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
+
+const WelcomeContent = () => {
+  const title = "Welcome to "
+  const description = [
+    "Easily manage and preview your OpenAPI documentation with GitHub integration",
+    "Simple, efficient, and collaborative"
+  ]
+
+  return (
+    <>
+      <HighlightText
+        content={`${title} ${SITE_NAME}`}
+        highlight={[SITE_NAME]}
+        color={[BASE_COLORS[0]]}
+        variant="h3"
+        opacity={7}
+        sx={{ textAlign: "center" }}
+      />
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+        width={1}
+        gap={{ xs: 6 ,md: 2}}  
+        textAlign="center"    
+      >
+        {description.map((line, index) => (
+          <Typography 
+            key={`description-line-${index}`}
+            sx={{
+              display: { md: "flex" },
+              fontSize: 20,
+              color: grey[700]
+            }}
+          >
+            {line}
+          </Typography>
+        ))}
+      </Box>
+    </>
+  )
+}
+
+export default WelcomeContent
\ No newline at end of file

From dfb3a2e06620f4b99a9a39f3a668d2fbcf42bd4c Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Fri, 9 Aug 2024 14:42:46 +0200
Subject: [PATCH 5/8] Add another tip on ShowSectionsLayer

---
 public/images/arrow_04.png                    | Bin 0 -> 2968 bytes
 public/images/arrow_04.svg                    |   1 -
 public/images/arrow_07.png                    | Bin 0 -> 5078 bytes
 public/images/arrow_07.svg                    |   1 -
 public/images/arrow_26.png                    | Bin 0 -> 6079 bytes
 public/images/arrow_26.svg                    |   1 -
 src/app/layout.tsx                            |   2 +-
 .../welcome/view/ShowSectionsLayer.tsx        | 169 +++++++++++-------
 8 files changed, 109 insertions(+), 65 deletions(-)
 create mode 100644 public/images/arrow_04.png
 delete mode 100644 public/images/arrow_04.svg
 create mode 100644 public/images/arrow_07.png
 delete mode 100644 public/images/arrow_07.svg
 create mode 100644 public/images/arrow_26.png
 delete mode 100644 public/images/arrow_26.svg

diff --git a/public/images/arrow_04.png b/public/images/arrow_04.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3831c3a0c70e4cda62f053fde6fea9e0e94cfb8
GIT binary patch
literal 2968
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

literal 0
HcmV?d00001

diff --git a/public/images/arrow_04.svg b/public/images/arrow_04.svg
deleted file mode 100644
index 4296c2a1..00000000
--- a/public/images/arrow_04.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="95" height="20"><g fill="none" stroke="#9e9e9e" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10"><path d="M3.471 11.53c1.522 1.408 3.577 1.145 5.935 1.174 9.331.121 18.768-.963 28.067-1.583 15.529-1.034 32.082-3.414 47.576-.777"/><path stroke-linejoin="round" d="M81.662 16.798c2.522-3.59 6.828-3.986 9.867-6.88-2.967-1.208-8.871-3.928-10.767-6.716"/></g></svg>
\ No newline at end of file
diff --git a/public/images/arrow_07.png b/public/images/arrow_07.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec1208cdf7a2ffead64f5a44d29f671a094dc781
GIT binary patch
literal 5078
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

literal 0
HcmV?d00001

diff --git a/public/images/arrow_07.svg b/public/images/arrow_07.svg
deleted file mode 100644
index bc26d2ab..00000000
--- a/public/images/arrow_07.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="60"><g fill="none" stroke="#9e9e9e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path d="M19.409 6.077C14.118 8.315 5.456 11.935 4.693 18.628c-.676 5.938 5.108 11.437 8.879 15.21 5.497 5.502 24.226 21.344 6.303 23.567-5.914.733-11.722-.262-17.337-2.13"/><path d="M19.307 13.743c.426-4.367 3.978-6.833 5.197-10.849-3.177.411-9.656.953-12.678-.541"/></g></svg>
\ No newline at end of file
diff --git a/public/images/arrow_26.png b/public/images/arrow_26.png
new file mode 100644
index 0000000000000000000000000000000000000000..d40e4c9d05f1694208ecc52cbce19c9540e10a89
GIT binary patch
literal 6079
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
ZqX<nlgetFyV07~xIAeGYsyaoE{y#ZwHE#d_

literal 0
HcmV?d00001

diff --git a/public/images/arrow_26.svg b/public/images/arrow_26.svg
deleted file mode 100644
index 1d94f8fc..00000000
--- a/public/images/arrow_26.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="110" height="60"><g fill="none" stroke="#9e9e9e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path d="M6.229 51.784c21.772-37.742 58.396-52.588 101-48.5M2.771 45.352c1.652 4.064-.345 7.899.445 12.021 2.62-1.841 8.103-5.334 11.474-5.418"/></g></svg>
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a22f3c64..03a4808a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <ThemeRegistry options={{ key: "mui" }}>
-        <body>
+        <body style={{ overflow: "hidden" }}>
           <CssBaseline/>
           {children}
         </body>
diff --git a/src/features/welcome/view/ShowSectionsLayer.tsx b/src/features/welcome/view/ShowSectionsLayer.tsx
index b6787c68..d067ab7f 100644
--- a/src/features/welcome/view/ShowSectionsLayer.tsx
+++ b/src/features/welcome/view/ShowSectionsLayer.tsx
@@ -1,8 +1,20 @@
+"use client"
+
 import { Box, Typography } from "@mui/material"
 import Image from "next/image"
 import { grey } from "@mui/material/colors"
+import ARROW_26 from "../../../../public/images/arrow_26.png"
+import ARROW_04 from "../../../../public/images/arrow_04.png"
+import ARROW_07 from "../../../../public/images/arrow_07.png"
+import { useSession } from "next-auth/react"
+import { useContext } from "react"
+import { ProjectsContainerContext } from "@/common"
 
 const ShowSectionsLayer = () => {
+  const { data: session, status } = useSession()
+  const { projects, isLoading } = useContext(ProjectsContainerContext)
+
+  const isLoadingSession = status == "loading"
 
   return (
     <>
@@ -19,10 +31,10 @@ const ShowSectionsLayer = () => {
       >
         <Box width={70} height={70} position="relative" mr={1} sx={{ transform: "rotate(10deg) scaleX(-1)" }}>
           <Image
-            src="/images/arrow_26.svg"
+            src={ARROW_26}
             alt="arrow"
-            layout="fill"
-            objectFit="contain"
+            fill
+            style={{ objectFit: "contain" }}
           />
         </Box>
         <Typography sx={{
@@ -36,7 +48,7 @@ const ShowSectionsLayer = () => {
           Check all the cool features here!
         </Typography>
       </Box>
-
+      
       <Box
         position="absolute"
         display={{ xs: "none", sm: "none", md: "flex"}}
@@ -50,10 +62,10 @@ const ShowSectionsLayer = () => {
       >
         <Box width={80} height={100} position="relative" mr={1}>
             <Image
-              src="/images/arrow_04.svg"
+              src={ARROW_04}
               alt="arrow"
-              layout="fill"
-              objectFit="contain"
+              fill
+              style={{ objectFit: "contain" }}
             />
           </Box>
           <Typography sx={{
@@ -64,65 +76,100 @@ const ShowSectionsLayer = () => {
             Start a new project here!
           </Typography>
       </Box>
-      <Box
-        position="absolute"
-        display={{ xs: "none", sm: "none", md: "flex"}}
-        alignItems="start"
-        width={1}
-        height={100}
-        top={120}
-        left={350}
-        gap={2}
-        sx={{ color: grey[500] }}
-      >
-        <Box width={80} height={80} position="relative" mr={1}>
-            <Image
-              src="/images/arrow_04.svg"
-              alt="arrow"
-              layout="fill"
-              objectFit="contain"
-            />
-          </Box>
-          <Typography sx={{
-            fontSize: 16,
-            fontStyle: "italic",
-            position: "absolute",
-            top: 28,
-            left: 100
-          }}>
-            Find all your project docs here
-          </Typography>
-      </Box>
-      <Box
-        position="absolute"
-        display={{ xs: "none", sm: "none", md: "flex"}}
-        alignItems="start"
-        width={1}
-        height={100}
-        bottom={0}
-        left={350}
-        gap={2}
-        sx={{ color: grey[500] }}
-      >
-        <Box width={70} height={70} position="relative" mr={1}>
+
+      {!isLoading &&
+        <Box
+          position="absolute"
+          display={{ xs: "none", sm: "none", md: "flex"}}
+          alignItems="start"
+          width={1}
+          height={100}
+          top={projects.length > 0 ? 120 : 90}
+          left={350}
+          gap={2}
+          sx={{ color: grey[500] }}
+        >
+          <Box width={80} height={80} position="relative" mr={1}>
             <Image
-              src="/images/arrow_07.svg"
+              src={ARROW_04}
               alt="arrow"
-              layout="fill"
-              objectFit="contain"
+              fill
+              style={{ objectFit: "contain" }}
             />
           </Box>
-          <Typography sx={{
-            fontSize: 16,
-            fontStyle: "italic",
-            position: "absolute",
-            bottom: 100,
-            left: 70
+          {projects.length > 0 ? 
+            <Typography sx={{
+              fontSize: 16,
+              fontStyle: "italic",
+              position: "absolute",
+              top: 28,
+              left: 100
+            }}>
+              Find all your project docs here
+            </Typography> : 
+            <>
+              <Box
+                width={70}
+                height={80}
+                position="absolute"
+                top={-60}
+                left={310}
+                mr={1}
+                sx={{ transform: "rotate(70deg) " }}
+              >
+                <Image
+                  src={ARROW_26}
+                  alt="arrow"
+                  fill
+                  style={{ objectFit: "contain" }}
+                />
+              </Box>
+              <Typography sx={{
+                fontSize: 16,
+                fontStyle: "italic",
+                position: "absolute",
+                top: 28,
+                left: 100
+              }}>
+                Oops, it looks like you don&apos;t have any project set up yet
+              </Typography>
+            </>
+          }
+        </Box>
+      }
+      {!isLoadingSession && session && session.user &&
+        <Box
+          position="absolute"
+          display={{ xs: "none", sm: "none", md: "flex"}}
+          alignItems="start"
+          width={1}
+          height={100}
+          bottom={0}
+          left={350}
+          gap={2}
+          sx={{ color: grey[500] }}
+        >
+          <Box width={70} height={70} position="relative" mr={1}>
+              <Image
+                src={ARROW_07}
+                alt="arrow"
+                layout="fill"
+                objectFit="contain"
+                placeholder="empty"
+              />
+            </Box>
+            <Typography sx={{
+              fontSize: 16,
+              fontStyle: "italic",
+              position: "absolute",
+              bottom: 100,
+              left: 70
 
-          }}>
-            And explore more features here
-          </Typography>
-      </Box>
+            }}>
+              And explore more features here
+            </Typography>
+        </Box>
+      }
     </>
   )
 }

From 83c99d678c845674fbc725ac1a4aa60c11b119e4 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Fri, 9 Aug 2024 14:45:57 +0200
Subject: [PATCH 6/8] Create Not Found page

---
 src/app/(authed)/(home)/[...slug]/layout.tsx |  3 +-
 src/features/projects/view/NotFound.tsx      | 50 ++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/features/projects/view/NotFound.tsx

diff --git a/src/app/(authed)/(home)/[...slug]/layout.tsx b/src/app/(authed)/(home)/[...slug]/layout.tsx
index 2e89f12a..6411654d 100644
--- a/src/app/(authed)/(home)/[...slug]/layout.tsx
+++ b/src/app/(authed)/(home)/[...slug]/layout.tsx
@@ -4,11 +4,12 @@ import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
 import TrailingToolbarItem from "@/features/projects/view/toolbar/TrailingToolbarItem"
 import MobileToolbar from "@/features/projects/view/toolbar/MobileToolbar"
 import { useProjectSelection } from "@/features/projects/data"
+import NotFound from "@/features/projects/view/NotFound"
 
 export default function Page({ children }: { children: React.ReactNode }) {
   const { project } = useProjectSelection()
   if (!project) {
-    return <></>
+    return <NotFound />
   }
   return (
     <>
diff --git a/src/features/projects/view/NotFound.tsx b/src/features/projects/view/NotFound.tsx
new file mode 100644
index 00000000..f87a5e50
--- /dev/null
+++ b/src/features/projects/view/NotFound.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { BASE_COLORS } from "@/common/theme/theme"
+import { Box, Typography, Button } from "@mui/material"
+import HighlightText from "@/common/ui/HighlightText"
+
+export default function NotFound() {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      textAlign="center"    
+      height={1}
+      width={1}
+      gap={8}
+      padding={{ xs: 4, md: 0}}
+    >
+      <HighlightText
+        content="Oops! Page Not Found"
+        highlight={["Page Not Found"]}
+        color={[BASE_COLORS[2]]}
+        variant="h3"
+        opacity={7}
+        sx={{ textAlign: "center" }}
+      />
+      <Typography 
+        sx={{
+          display: { md: "flex" },
+          fontSize: 20,
+        }}
+      >
+        We couldn&apos;t find the project or page you&apos;re looking for.
+        It might have been moved or doesn&apos;t exist.
+      </Typography>
+      <Button
+        id="create-repository"
+        type="button"
+        component={Link}
+        href="/"
+        variant="contained"
+        color="primary"
+        size="large"
+        sx={{ height: 56, width: 300 }}
+      >
+        Return to Home
+      </Button>
+    </Box>
+  )
+}
\ No newline at end of file

From b5176add1c610ba6cc1322ba25132ec2c7a6d773 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Fri, 9 Aug 2024 15:42:53 +0200
Subject: [PATCH 7/8] Adapt icon Menu on mobile for all pages

---
 src/app/(authed)/(home)/(welcome)/layout.tsx |  4 +---
 src/app/(authed)/(home)/[...slug]/layout.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/(authed)/(home)/(welcome)/layout.tsx b/src/app/(authed)/(home)/(welcome)/layout.tsx
index 3ff0e605..2d2c055c 100644
--- a/src/app/(authed)/(home)/(welcome)/layout.tsx
+++ b/src/app/(authed)/(home)/(welcome)/layout.tsx
@@ -1,12 +1,10 @@
-"use client"
-
 import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
 import { Box } from "@mui/material"
 
 export default function Page({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <Box width={1} display={{ xs: "flex", sm: "flex", md: "none"}} paddingLeft={{ xs: 2 }}>
+      <Box width={1} display={{ xs: "flex", sm: "flex", md: "none"}}>
         <SecondarySplitHeader showDivider={false} />
       </Box>
       <Box
diff --git a/src/app/(authed)/(home)/[...slug]/layout.tsx b/src/app/(authed)/(home)/[...slug]/layout.tsx
index 6411654d..4de3d599 100644
--- a/src/app/(authed)/(home)/[...slug]/layout.tsx
+++ b/src/app/(authed)/(home)/[...slug]/layout.tsx
@@ -9,7 +9,16 @@ import NotFound from "@/features/projects/view/NotFound"
 export default function Page({ children }: { children: React.ReactNode }) {
   const { project } = useProjectSelection()
   if (!project) {
-    return <NotFound />
+    return (
+      <>
+        <SecondarySplitHeader showDivider={false} >
+          <TrailingToolbarItem/>
+        </SecondarySplitHeader>
+        <main style={{ flexGrow: "1", overflowY: "auto" }}>
+          <NotFound />
+        </main>
+      </>
+    )
   }
   return (
     <>

From d9e305347423bf5df03e5a794e92095843b295a0 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Wed, 14 Aug 2024 16:02:10 +0200
Subject: [PATCH 8/8] Change text tips on welcome page

---
 .../welcome/view/ShowSectionsLayer.tsx        | 36 +++----------------
 src/features/welcome/view/WelcomeContent.tsx  |  3 +-
 2 files changed, 5 insertions(+), 34 deletions(-)

diff --git a/src/features/welcome/view/ShowSectionsLayer.tsx b/src/features/welcome/view/ShowSectionsLayer.tsx
index d067ab7f..554503ba 100644
--- a/src/features/welcome/view/ShowSectionsLayer.tsx
+++ b/src/features/welcome/view/ShowSectionsLayer.tsx
@@ -13,7 +13,6 @@ import { ProjectsContainerContext } from "@/common"
 const ShowSectionsLayer = () => {
   const { data: session, status } = useSession()
   const { projects, isLoading } = useContext(ProjectsContainerContext)
-
   const isLoadingSession = status == "loading"
 
   return (
@@ -45,7 +44,7 @@ const ShowSectionsLayer = () => {
           left: 0
 
         }}>
-          Check all the cool features here!
+          Find your projects here!
         </Typography>
       </Box>
       
@@ -97,7 +96,7 @@ const ShowSectionsLayer = () => {
               style={{ objectFit: "contain" }}
             />
           </Box>
-          {projects.length > 0 ? 
+          {projects.length > 0 && 
             <Typography sx={{
               fontSize: 16,
               fontStyle: "italic",
@@ -105,35 +104,8 @@ const ShowSectionsLayer = () => {
               top: 28,
               left: 100
             }}>
-              Find all your project docs here
-            </Typography> : 
-            <>
-              <Box
-                width={70}
-                height={80}
-                position="absolute"
-                top={-60}
-                left={310}
-                mr={1}
-                sx={{ transform: "rotate(70deg) " }}
-              >
-                <Image
-                  src={ARROW_26}
-                  alt="arrow"
-                  fill
-                  style={{ objectFit: "contain" }}
-                />
-              </Box>
-              <Typography sx={{
-                fontSize: 16,
-                fontStyle: "italic",
-                position: "absolute",
-                top: 28,
-                left: 100
-              }}>
-                Oops, it looks like you don&apos;t have any project set up yet
-              </Typography>
-            </>
+              Find your projects here
+            </Typography>
           }
         </Box>
       }
diff --git a/src/features/welcome/view/WelcomeContent.tsx b/src/features/welcome/view/WelcomeContent.tsx
index 35f545c6..658cc203 100644
--- a/src/features/welcome/view/WelcomeContent.tsx
+++ b/src/features/welcome/view/WelcomeContent.tsx
@@ -9,8 +9,7 @@ const SITE_NAME = env.getOrThrow("NEXT_PUBLIC_SHAPE_DOCS_TITLE")
 const WelcomeContent = () => {
   const title = "Welcome to "
   const description = [
-    "Easily manage and preview your OpenAPI documentation with GitHub integration",
-    "Simple, efficient, and collaborative"
+    "Centralizes your OpenAPI documentation and streamlines spec-driven development"
   ]
 
   return (