feat: add broken link reporting workflow to 404 page

src/sections/404/404.style.js

@@ -1,42 +1,46 @@
 import styled from "styled-components";
 
 const L404SectionWrapper = styled.section`
-    padding: 150px 0 100px 0;
-    position: relative;
-    overflow: hidden;
-    text-align: center;
+  padding: 150px 0 100px 0;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
 
-    h1.message {
-        font-size: 2rem;
-        line-height: 2rem;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
-    h2.subtitle {      
-        font-weight: 400;       
-        font-size: 1.5rem;
-        color: ${props => props.theme.greyDEE3DEToGrey363636};
-        font-style: italic;
-        margin-top: 2.5rem;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  h1.message {
+    font-size: 2rem;
+    line-height: 2rem;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  h2.subtitle {
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: ${(props) => props.theme.greyDEE3DEToGrey363636};
+    font-style: italic;
+    margin-top: 2.5rem;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  .button-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+    margin-top: 2.5rem;
+
+    img {
+      display: block;
+      margin: auto;
+      margin-top: 3.125rem;
+      max-width: 50%;
+      @media only screen and (max-width: 700px) {
+        max-width: 100%;
+      }
     }
-    .button-row{
-        display: flex;
-        flex-direction: column;
-        img{
-            display:block;
-            margin:auto;
-            margin-top: 3.125rem;
-            max-width: 50%;
-            @media only screen and (max-width:700px){
-                max-width: 100%;
-            }
-        }
-
-        button{
-            margin-top: 2.5rem;
-            color: black;
-        }
+
+    button {
+      color: black;
     }
+  }
 `;
 
 export default L404SectionWrapper;

src/sections/404/index.js

@@ -76,13 +76,33 @@ const messages = [
 
 const L404 = () => {
   const [message, setMessage] = useState(null);
+  const [reportUrl, setReportUrl] = useState(
+    "https://github.com/layer5io/layer5/issues/new?template=bug_report.md",
+  );
 
   const getRandomMessage = () => {
     return messages[Math.floor(Math.random() * messages.length)];
   };
 
   useEffect(() => {
     setMessage(getRandomMessage());
+
+    if (typeof window !== "undefined") {
+      const brokenUrl = window.location.href;
+      const referrer = document.referrer || "Direct / Bookmark";
+      const userAgent = navigator.userAgent;
+      const issueTitle = encodeURIComponent("[404] Broken Link Found");
+      const issueBody = encodeURIComponent(
+        "### 404 Broken Link Report\n\n" +
+          `- **Broken URL:** ${brokenUrl}\n` +
+          `- **Referrer:** ${referrer}\n` +
+          `- **User Agent:** ${userAgent}\n\n` +
+          "*Reported automatically by the 404 Page.*",
+      );
+      setReportUrl(
+        `https://github.com/layer5io/layer5/issues/new?template=bug_report.md&title=${issueTitle}&body=${issueBody}`,
+      );
+    }
   }, []);
 
   const handleNewMessage = () => {
@@ -116,6 +136,16 @@ const L404 = () => {
           >
             Show another message
           </Button>
+
+          <Button
+            id="report-broken-link"
+            aria-label="report-broken-link-button"
+            $secondary
+            $url={reportUrl}
+            $external={true}
+          >
+            Report Broken Link
+          </Button>
         </div>
       </Container>
     </L404SectionWrapper>