From 8dedff78320407293350e1378c14814595ad08d1 Mon Sep 17 00:00:00 2001
From: scientlogistics <rohin@scientsolutions.ca>
Date: Wed, 13 Dec 2023 19:12:20 -0500
Subject: [PATCH] added in the skeleton css and a page for the skeleton

---
 client/src/pages/skeleton/Skeleton.css | 95 ++++++++++++++++++++++++++
 client/src/pages/skeleton/skel.jsx     | 52 ++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 client/src/pages/skeleton/Skeleton.css
 create mode 100644 client/src/pages/skeleton/skel.jsx

diff --git a/client/src/pages/skeleton/Skeleton.css b/client/src/pages/skeleton/Skeleton.css
new file mode 100644
index 00000000..9683c54b
--- /dev/null
+++ b/client/src/pages/skeleton/Skeleton.css
@@ -0,0 +1,95 @@
+/* Compiled CSS */
+body {
+    background-color: #6b46c1;
+    color: #fff;
+    min-height: 100vh;
+   }
+   
+   
+   @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+   }
+   
+   
+   .animate-pulse {
+    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+   }
+   
+   
+   header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+   }
+   
+   
+   .logo-container {
+    display: flex;
+    gap: 1rem;
+   }
+   
+   
+   .placeholder {
+    background-color: #9f7aea;
+    border-radius: 0.25rem;
+   }
+   
+   
+   main {
+    padding: 1.5rem;
+    gap: 1.5rem;
+   }
+   
+   
+   .banner {
+    height: 5rem;
+    border-radius: 0.25rem;
+   }
+   
+   
+   .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+   }
+   
+   
+   .item {
+    height: 9rem;
+    border-radius: 0.25rem;
+   }
+   
+   
+   .schedule {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+   }
+   
+   
+   .button-container {
+    display: flex;
+    gap: 1rem;
+   }
+   
+   
+   .button {
+    flex-grow: 1;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+   }
+   
+   
+   @media (min-width: 768px) {
+    .grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+   }
+   
\ No newline at end of file
diff --git a/client/src/pages/skeleton/skel.jsx b/client/src/pages/skeleton/skel.jsx
new file mode 100644
index 00000000..80502928
--- /dev/null
+++ b/client/src/pages/skeleton/skel.jsx
@@ -0,0 +1,52 @@
+import {
+    React,
+    // useState
+   } from 'react';
+   import './Skeleton.css';
+   
+   
+   const PageAbout = () => {
+    return (
+      <div className="App">
+        <header>
+          <div className="logo-container">
+            <div className="placeholder logo" />
+            <h1>Lambda</h1>
+          </div>
+          <nav>
+            {/* Navigation items */}
+            <button className="register">Register</button>
+          </nav>
+        </header>
+        <main>
+          <div className="banner placeholder" />
+          <section className="tasks-announcements">
+            <h2>Tasks and Announcements</h2>
+            <div className="grid">
+              {/* Replace these placeholders with actual content */}
+              <div className="item placeholder" />
+              <div className="item placeholder" />
+              {/* Add more placeholders as needed */}
+            </div>
+          </section>
+          <section className="schedule">
+            <h2>Schedule</h2>
+            <div className="button-container">
+              {/* Replace these placeholders with actual buttons */}
+              <button className="button placeholder">Monday</button>
+              <button className="button placeholder">Tuesday</button>
+              <button className="button placeholder">Wednesday</button>
+              <button className="button placeholder">Thursday</button>
+              <button className="button placeholder">Friday</button>
+            </div>
+          </section>
+        </main>
+      </div>
+    );
+   };
+   
+   
+   export default PageAbout;
+   
+   
+   export { PageAbout };
\ No newline at end of file