Please make sure that the web interface is very easy to use and not complicated at all we want our staff to be able to function very easily and make things flow

components/footer.js

@@ -71,28 +71,18 @@ class CustomFooter extends HTMLElement {
       <footer>
         <div class="footer-content">
           <div class="footer-section">
-            <h3>Blank Canvas</h3>
-            <p>Unleash your creativity with our platform. The possibilities are endless.</p>
+            <h3>Work Portal</h3>
+            <p>Simple interface for staff productivity</p>
           </div>
           <div class="footer-section">
-            <h3>Resources</h3>
+            <h3>Quick Links</h3>
             <ul>
-              <li><a href="#">Documentation</a></li>
-              <li><a href="#">Tutorials</a></li>
-              <li><a href="#">API</a></li>
-              <li><a href="#">Community</a></li>
+              <li><a href="#">My Tasks</a></li>
+              <li><a href="#">Team Calendar</a></li>
+              <li><a href="#">Help Desk</a></li>
             </ul>
           </div>
-          <div class="footer-section">
-            <h3>Company</h3>
-            <ul>
-              <li><a href="#">About</a></li>
-              <li><a href="#">Careers</a></li>
-              <li><a href="#">Privacy</a></li>
-              <li><a href="#">Terms</a></li>
-            </ul>
-          </div>
-        </div>
+</div>
         <div class="social-links">
           <a href="#"><i data-feather="twitter"></i></a>
           <a href="#"><i data-feather="instagram"></i></a>

components/navbar.js

@@ -61,19 +61,18 @@ class CustomNavbar extends HTMLElement {
           }
         }
       </style>
-      <nav>
+        <nav>
         <a href="/" class="logo">
-          <i data-feather="pen-tool" class="logo-icon"></i>
-          <span>Blank Canvas</span>
+          <i data-feather="briefcase" class="logo-icon"></i>
+          <span>Work Portal</span>
         </a>
         <ul>
           <li><a href="/" class="active"><i data-feather="home"></i> Home</a></li>
-          <li><a href="#"><i data-feather="grid"></i> Features</a></li>
-          <li><a href="#"><i data-feather="info"></i> About</a></li>
-          <li><a href="#"><i data-feather="user"></i> Account</a></li>
+          <li><a href="#"><i data-feather="file"></i> Projects</a></li>
+          <li><a href="#"><i data-feather="calendar"></i> Schedule</a></li>
         </ul>
       </nav>
-    `;
+`;
   }
 }
 customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -15,20 +15,20 @@
     
     <main class="flex-grow flex items-center justify-center" id="vanta-bg">
         <div class="text-center p-8 bg-white bg-opacity-90 rounded-xl shadow-2xl max-w-2xl mx-4">
-            <h1 class="text-5xl font-bold mb-6 text-gray-800">The Ultimate Blank Canvas</h1>
-            <p class="text-xl text-gray-600 mb-8">
-                Your imagination is the limit. Start creating something amazing today!
-            </p>
-            <div class="flex justify-center gap-4">
-                <a href="#" class="px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 transition flex items-center gap-2">
-                    <i data-feather="plus"></i> Create
+            <h1 class="text-5xl font-bold mb-6 text-gray-800">Simple Dashboard</h1>
+            <div class="flex flex-col gap-3 max-w-xs mx-auto">
+                <a href="#" class="px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 transition flex items-center justify-center gap-2">
+                    <i data-feather="plus"></i> New Project
                 </a>
-                <a href="#" class="px-6 py-3 border border-black text-black rounded-lg hover:bg-gray-100 transition flex items-center gap-2">
-                    <i data-feather="book-open"></i> Learn
+                <a href="#" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center gap-2">
+                    <i data-feather="list"></i> View Projects
+                </a>
+                <a href="#" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center justify-center gap-2">
+                    <i data-feather="users"></i> Team Members
                 </a>
             </div>
         </div>
-    </main>
+</main>
 
     <custom-footer></custom-footer>
 

style.css

@@ -4,14 +4,16 @@ body {
     font-family: 'Inter', sans-serif;
     background-color: #f8fafc;
 }
-
-/* Animation for the hero section */
-@keyframes float {
-    0% { transform: translateY(0px); }
-    50% { transform: translateY(-15px); }
-    100% { transform: translateY(0px); }
+/* Simplified button styles */
+a {
+    transition: all 0.2s ease;
+    font-weight: 500;
 }
 
-.floating {
-    animation: float 6s ease-in-out infinite;
-}
+/* Larger click targets for mobile */
+@media (max-width: 768px) {
+    a, button {
+        padding: 12px 16px !important;
+        font-size: 1.1rem !important;
+    }
+}