Merge pull request #30 from Harshil-0707/responsive-UI

Responsive UI

.gitignore

@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-
+package-lock.json
 # testing
 /coverage
 

package.json

@@ -40,5 +40,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -7,32 +7,6 @@ body {
   background-color: #f4f4f4;
 }
 
-header {
-  background: #333;
-  color: #fff;
-  padding: 20px;
-  text-align: center;
-}
-
-header h1 {
-  margin: 0;
-  font-size: 2.5em;
-}
-
-header p {
-  font-size: 1.1em;
-}
-
-.section {
-  padding: 20px;
-  margin: 0 auto;
-  max-width: 1200px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-}
-
 h2 {
   border-bottom: 2px solid #333;
   padding-bottom: 10px;
@@ -74,23 +48,4 @@ li {
 
 input[type="checkbox"] {
   margin-right: 10px;
-}
-
-footer {
-  background: #333;
-  color: #fff;
-  text-align: center;
-  padding: 10px;
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-}
-
-footer a {
-  color: #fff;
-  text-decoration: none;
-}
-
-footer a:hover {
-  text-decoration: underline;
 }

src/App.js

@@ -3,11 +3,6 @@ import './App.css';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Navbar from './HEADERS/Header';
 import BottomNavBar from './FOOTERS/BottomNavBar';
-
-
-
-import Hline from './GENERAL_COMPONENTS/lines';
-
 import MLA2ZCourseOutLine from './MLA2ZCOURSE/MLA2ZCourseOutLine';
 import ESP32CourseOutLine from './ESP32COURSE/ESP32CourseOutLine';
 
@@ -48,7 +43,7 @@ const AuthComponents = () => <MLA2ZCourseOutLine />;
 const DashboardComponents = () => <MLA2ZCourseOutLine />;
 
 // contributers
-const contributorsComponents =()=><Contributors/>
+const contributorsComponents = () => <Contributors />
 //  Deep AI research
 
 // module 0
@@ -98,11 +93,10 @@ function App() {
   return (
     <BrowserRouter>
       <Navbar />
-      {/* <Hline color={'purple'} /> */}
       <Routes>
         <Route path="/" exact element={HomeComponents()} />
         <Route path="/courses" exact element={CoursesComponents()} />
-        <Route path='/contributors' exact element = {contributorsComponents()}/>
+        <Route path='/contributors' exact element={contributorsComponents()} />
         <Route path="/ESP32" exact element={ESP32Components()} />
         <Route path="/DeepAI" exact element={DeepAIComponents()} />
         <Route path="/coaches" element={CoachesComponents()} />
@@ -148,13 +142,13 @@ function App() {
         <Route path="/MLA2ZCourse/Modules/Module2/Topic1/Stage1" exact element={MLA2ZModule_2_Topic_1_Stage_1()} />
         <Route path="/MLA2ZCourse/Modules/Module2/Topic1/Stage2" exact element={MLA2ZModule_2_Topic_1_Stage_2()} />
       </Routes>
-      <p style={{ height: '300px', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
-  Open Source Project, Contribute Today...
-</p>
+      <p className="flex text-center justify-center items-center mb-10">
+        Open Source Project, Contribute Today...
+      </p>
 
       <BottomNavBar />
 
-    </BrowserRouter>
+    </BrowserRouter >
   );
 }
 

src/CONTRIBUTORS/contributorTable.js

@@ -2,28 +2,38 @@ import React from 'react';
 
 const ContributorTable = ({ contributors }) => {
   return (
-    <table className="contributors-table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>LinkedIn</th>
-          <th>Contribution In</th>
-        </tr>
-      </thead>
-      <tbody>
-        {contributors.map((contributor, index) => (
-          <tr key={index}>
-            <td>{contributor.name}</td>
-            <td>
-              <a href={contributor.linkedIn} target="_blank" rel="noopener noreferrer">
-                {contributor.linkedIn}
-              </a>
-            </td>
-            <td>{contributor.contributionIn}</td>
+    <div className="overflow-x-auto">
+      <table className="min-w-full border-collapse border border-gray-300">
+        <thead>
+          <tr className="bg-gray-200">
+            <th className="px-5 py-1 border border-gray-300 text-left">Name</th>
+            <th className="px-5 py-1 border border-gray-300 text-left">LinkedIn</th>
+            <th className="px-5 py-1 border border-gray-300 text-left">Contribution In</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {contributors.map((contributor, index) => (
+            <tr
+              key={index}
+              className={`${index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}`}
+            >
+              <td className="px-5 py-1 border border-gray-300">{contributor.name}</td>
+              <td className="px-5 py-1 border border-gray-300">
+                <a
+                  href={contributor.linkedIn}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:underline"
+                >
+                  {contributor.linkedIn}
+                </a>
+              </td>
+              <td className="px-5 py-1 border border-gray-300">{contributor.contributionIn}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
 

src/CONTRIBUTORS/contributors.css

@@ -1,30 +1,29 @@
-
 .contributors-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-  }
-  
-  .contributors-table th, .contributors-table td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
-  }
-  
-  .contributors-table th {
-    background-color: #f2f2f2;
-  }
-  
-  .contributors-table tr:nth-child(even) {
-    background-color: #f9f9f9;
-  }
-  
-  .contributors-table a {
-    color: #0066cc;
-    text-decoration: none;
-  }
-  
-  .contributors-table a:hover {
-    text-decoration: underline;
-  }
-  
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+.contributors-table th,
+.contributors-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.contributors-table th {
+  background-color: #f2f2f2;
+}
+
+.contributors-table tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.contributors-table a {
+  color: #0066cc;
+  text-decoration: none;
+}
+
+.contributors-table a:hover {
+  text-decoration: underline;
+}

src/CONTRIBUTORS/contributors.js

@@ -7,37 +7,25 @@ const mlContributors = [
 
 ];
 const esp32Contributors = [
-
-];
-const reactContributors = [
-  { name: 'Alaka Singh', linkedIn: 'https://www.linkedin.com/in/alaka-singh-9776b9275/', contributionIn: 'UI/UX + React + Website Developer'},
-  { name: 'Nimish Bhardwaj', linkedIn: 'https://www.linkedin.com/in/nimishbhardwaj93/', contributionIn: 'Overlapping issue + Shadow to navbar js/css'},
-  { name: 'Zhen Liu', linkedIn: 'https://www.linkedin.com/in/zh3nl', contributionIn: 'Modification in manifest.json'},
-  { name: 'Harsh Nagar', linkedIn: 'https://www.linkedin.com/in/harsh-nagar-311904256', contributionIn: 'Modification in BottomNavbar + HeaderNavBar js/css'},
 
 ];
-
+
+
 const uiContributors = [];
 const documentationContributors = [];
 const marketingContributors = [];
 const seoContributors = [];
 export default function Contributors() {
   return (
-    <div className='content' >
-
-      <h1>Top 10 Contributors in Machine Learning</h1>
+    <div className='content w-full overflow-x-hidden' >
+      <h1 className="text-2xl font-bold">Top 10 Contributors in Machine Learning</h1>
       <ContributorTable contributors={mlContributors} />
-      <h1>Top 10 Contributors in React</h1>
-      <ContributorTable contributors={reactContributors} />
-      <h1>Top 10 Contributors in ESP32</h1>
-      <ContributorTable contributors={esp32Contributors} />
-      <h1>Top 10 Contributors in SEO (Search Engine Optimization)</h1>
       <ContributorTable contributors={seoContributors} />
-      <h1>Top 10 Contributors in Figma/Canva Design(UI)</h1>
+      <h1 className="text-2xl font-bold">Top 10 Contributors in Figma/Canva Design(UI)</h1>
       <ContributorTable contributors={uiContributors} />
-      <h1>Top 10 Contributors in Documentation</h1>
+      <h1 className="text-2xl font-bold">Top 10 Contributors in Documentation</h1>
       <ContributorTable contributors={documentationContributors} />
-      <h1>Top 10 Contributors in Marketing</h1>
+      <h1 className="text-2xl font-bold">Top 10 Contributors in Marketing</h1>
       <ContributorTable contributors={marketingContributors} />
     </div>
   );

src/FOOTERS/BottomNavBar.css

@@ -1,54 +1,3 @@
-/* Footer Styles */
-.footer {
-  background-color:transparent;
-  color: #ffffff;
-  height: 100px; /* Set height to 100px */
-  padding:0; /* Set padding to 2px from top and bottom */
-  text-align: center;
-  position: fixed ; /* Make the footer fixed */
-  top: 0; /* Position it at the bottom */
-  width: 100%; /* Ensure it takes full width */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 60px;
-}
-
-.footer .container {
-  max-width: 800px;
-  margin: 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  gap: 10px;
-}
-
-.footer ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  gap: 10px;
-}
-
-.footer ul li {
-  margin: 0;
-}
-
-.footer ul li a {
-  display: inline-block;
-  padding: 10px 15px;
-  background-color: #00aced;
-  color: #000000;
-  text-decoration: none;
-  border-radius: 5px;
-  transition: background-color 0.3s, transform 0.3s;
-}
-
-.footer ul li a:hover {
-  background-color: #007bb5;
-  transform: scale(1.05);
-}
 
 .footer-text a {
   display: inline-block;
@@ -65,18 +14,4 @@
 .footer-text a:hover {
   background-color: #007bb5;
   transform: scale(1.05);
-}
-
-.copyright {
-  background-color: rgb(255, 255, 255);
-  color: #000;
-  /* margin-top: 1px; */
-  font-size: 12px;
-  border-top: 1px solid #444;
-  /* padding-top: 1px; */
-  padding-bottom: 20px;   
-  margin-top: -60px ;
-  width: 100%;
-  height: 50px;
-  /* margin: 0 auto; */
 }