feat(pages): add Github Status page

This commit introduces a new page dedicated to displaying the real-time status of GitHub's services.  The page integrates a status component and provides users with up-to-date information on service availability.

src/layouts/Sidebar.astro

@@ -3,7 +3,7 @@ import Nav from '../components/layout/Nav.astro'
 import NavItem from '../components/layout/NavItem.astro';
 import NavLink from '../components/layout/NavLink.astro';
 import { Delete } from 'lucide-react'
-import { FaHome, FaTerminal, FaBook, FaTags, FaUserAlt, FaFileCode, FaSignOutAlt, FaSignInAlt, FaColumns, FaCog, FaTasks, FaFileAlt } from 'react-icons/fa';
+import { FaHome, FaTerminal, FaBook, FaTags, FaTools, FaFileCode, FaSignOutAlt, FaSignInAlt, FaColumns, FaCog, FaTasks, FaFileAlt } from 'react-icons/fa';
 
 const { class: className } = Astro.props;
 const userIsLoggedIn = !!Astro.locals.userId;
@@ -22,6 +22,7 @@ const userIsLoggedIn = !!Astro.locals.userId;
     <Nav>
       <br>
       <NavLink href="/" label="Home" icon={FaHome} />
+      <NavLink href="/github-status" label="Github Status" icon={FaTools} />
       <NavItem title="Features" open>
         {userIsLoggedIn ? (
           <>

src/pages/github-status.astro

@@ -0,0 +1,47 @@
+---
+import CTA from '../sections/CTA.astro';
+import Footer from '../components/layout/Footer.astro';
+import Header from '../components/layout/Header.astro';
+import Layout from '../layouts/Layout.astro';
+import Sidebar from '../layouts/Sidebar.astro';
+---
+
+<Layout title="Gitset - Advanced AI-Driven GitHub Tools Suite.">
+  <Sidebar />
+  <div class="flex flex-col min-h-screen">
+    <div class="hidden lg:block fixed w-64 h-full">
+      <Sidebar />
+    </div>
+
+    <div class="flex-1 lg:ml-64 flex flex-col">
+      <Header />
+      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 mt-16 lg:mt-0 top">
+          <div class="flex justify-center mt-16"></div>
+          <CTA
+
+            align="center"
+            title={`<span id="cta-title">Github <strong>Services Status</strong></span>`}
+            description={`
+              <span id="cta-description">
+                Monitor the real-time operational status of GitHub's core services including Actions, API, Git Operations, and more. Stay informed about the current state of GitHub's infrastructure and services.
+              </span>
+            `}
+          >
+            <div class="flex mx-auto my-0 gap-2.5 mt-4 relative top-4 justify-center">
+            <a href="/">
+              <button
+
+                class="dark:text-neutral-700 text-sm text-neutral-200 dark:bg-neutral-200 bg-neutral-700 px-6 py-4 rounded-[10px] transition-all duration-300 hover:text-[rgb(91,207,218)] dark:hover:text-[rgb(91,207,218)] cursor-pointer whitespace-nowrap flex items-center justify-center order-2 sm:order-1"
+              >
+                Back
+              </button>
+            </a>
+
+          </CTA>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  </div>
+</Layout>