resources page test

Author: Sam-Bieberich

src/App.js

@@ -10,6 +10,7 @@ import About from './About';
 import Officers from './Officers';
 import Calendar from './Calendar';
 import Newsletter from './Newsletter';
+import Resources from './Resources';
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
                 <Link to='/about'>About Us</Link> |
                 <Link to='/calendar'>Calendar</Link> |
                 <Link to='/officers'>Officers</Link> |
+                <Link to='/resources'>Resources</Link> |
                 <Link to='/newsletter'>Newsletter</Link>
               </nav>
             </div>
@@ -38,6 +40,7 @@ function App() {
           <Route path='/about' element={<About />} />
           <Route path='/calendar' element={<Calendar />} /> 
           <Route path='/officers' element= {<Officers />} />
+          <Route path='/resources' element= {<Resources />} />
           <Route path='/newsletter' element={<Newsletter />} />
         </Routes>
 

src/Resources.css

@@ -1 +1,67 @@
+.resources-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #f9f9f9;
+  }
+  
+  .header-section {
+    font-size: 2em;
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  .coming-soon {
+    font-size: 1.5em;
+    color: #666;
+    margin-top: 50px;
+  }
+  
+  .add-resource {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  
+  .add-resource input {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 300px;
+  }
+  
+  .add-resource-button {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .add-resource-button:hover {
+    background-color: #0056b3;
+  }
+  
+  .resource-list {
+    width: 100%;
+    max-width: 600px;
+  }
+  
+  .resource-list ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  .resource-list li {
+    background-color: white;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
 
+  

src/Resources.js

@@ -1 +1,13 @@
+import React from 'react';
+import './Resources.css';
 
+function Resources() {
+  return (
+    <main className='resources-container'>
+      <h1 className='header-section'>Resources</h1>
+      <p className='coming-soon'>Coming Soon</p>
+    </main>
+  );
+}
+
+export default Resources;