From 56bdce277511aff82db1c6ffaaedc6b54b97e576 Mon Sep 17 00:00:00 2001
From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com>
Date: Thu, 8 Aug 2024 18:35:16 +0530
Subject: [PATCH]  Popular Project Showcase

---
 src/Components/CardMain.js                    |   4 +-
 src/Components/Login.js                       |   4 +-
 src/Components/Popular.js                     | 280 +++++++++---------
 src/Components/PortFolio/PortFolio.css        |   4 +-
 src/Components/PortFolio/PortFolio.js         |   4 +-
 src/Components/TopContainer.css               |   2 +-
 .../footer_section/Pricing/pricing.js         |   2 +-
 7 files changed, 154 insertions(+), 146 deletions(-)

diff --git a/src/Components/CardMain.js b/src/Components/CardMain.js
index bdf4e049..4b0c3f2e 100644
--- a/src/Components/CardMain.js
+++ b/src/Components/CardMain.js
@@ -119,7 +119,7 @@ const features = [
     img: Card9,
     pro: icon,
     hearts: 55,
-    title: "GameOn",
+    title: "BBlocks",
     dev: "ChrisClark",
     type: "Gaming",
     role: "Game Developer, Animator",
@@ -226,7 +226,7 @@ function CardMain() {
           />
           <div className="card_main_name">
             <h2>{project.title}</h2>
-            <div className="card_main_icon">
+            <div className="card_main_icon" style={{ marginTop: '-18px' }}>
               <i>
                 <BsFillHeartFill /> <span>{project.hearts}</span>
               </i>
diff --git a/src/Components/Login.js b/src/Components/Login.js
index 580ccc3c..906bfedf 100644
--- a/src/Components/Login.js
+++ b/src/Components/Login.js
@@ -465,8 +465,8 @@ const LogIn = () => {
           </div>
           <img src={logImg} className="image" alt="Log In" />
         </div>
-        <div className="panel right-panel">
-          <div className="content">
+        <div className="panel right-panel1">
+          <div className="content1">
             <h3>One of Us?</h3>
             <p>
               Log in to access your account and continue collaborating and
diff --git a/src/Components/Popular.js b/src/Components/Popular.js
index d52b18d8..f4454477 100644
--- a/src/Components/Popular.js
+++ b/src/Components/Popular.js
@@ -14,7 +14,7 @@ const Popular = () => {
       id: 1,
       name: 'StockIT',
       developer: 'X',
-      uploadedOn: 'dd:mm:yy',
+      type: 'DevOps',
       author: 'JaneSmith',
       likes: 83,
       image: Card1,
@@ -23,7 +23,7 @@ const Popular = () => {
       id: 2,
       name: 'TypingTest',
       developer: 'X',
-      uploadedOn: 'dd:mm:yy',
+      type: 'Education',
       author: 'SophiaWilson',
       likes: 90,
       image: Card2,
@@ -32,7 +32,7 @@ const Popular = () => {
       id: 3,
       name: 'Artisan',
       developer: 'X',
-      uploadedOn: 'dd:mm:yy',
+      type: 'Art & Design',
       author: 'DavidMartinez',
       likes: 95,
       image: Card3,
@@ -41,7 +41,7 @@ const Popular = () => {
       id: 4,
       name: 'BBlocks',
       developer: 'X',
-      uploadedOn: 'dd:mm:yy',
+      type: 'Gaming',
       author: 'RachelGreen',
       likes: 110,
       image: Card4,
@@ -50,7 +50,7 @@ const Popular = () => {
       id: 5,
       name: 'ZzShoes',
       developer: 'X',
-      uploadedOn: 'dd:mm:yy',
+      type: 'Inventory Management',
       author: 'ChrisMiller',
       likes: 83,
       image: Card5,
@@ -59,7 +59,7 @@ const Popular = () => {
       id: 6,
       name: 'SearchEngine',
       developer: 'X',
-      uploadedOn: 'dd:mm:yy',
+      type: 'Search Engine Optimization',
       author: 'LauraKing',
       likes: 86,
       image: Card6,
@@ -68,7 +68,7 @@ const Popular = () => {
       id: 7,
       name: 'AliImage',
       developer: 'X',
-      uploadedOn: 'dd:mm:yy',
+      type: 'AI Image Processing',
       author: 'OliviaTaylor',
       likes: 90,
       image: Card7,
@@ -77,131 +77,139 @@ const Popular = () => {
 
   return (
     <div className="popular-container">
-<style>{`
-  .popular-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px; /* Gap between cards */
-    margin-top: 5px;
-  }
-
-  .popular-card {
-    background-color: #2a2551;
-    border-radius: 10px;
-    padding: 20px;
-    width: calc(25% - 10px); /* Adjusted width for 4 cards per row, accounting for gap */
-    color: white;
-    text-align: left;
-    position: relative;
-    height: 330px;
-    transition: transform 0.3s ease-in-out;
-  }
-
-  .popular-card:hover {
-    transform: scale(1.05);
-  }
-
-  .popular-card img {
-    margin-left: -10px;
-    margin-top: -20px;
-    width: 260px;
-    height: 110px;
-    object-fit: cover;
-  }
-
-  .popular-card h3 {
-    margin: 10px;
-    font-size: 20px;
-    color: #fff;
-  }
-
-  .popular-card .likes {
-    position: absolute;
-    top: 125px;
-    right: 20px;
-    font-size: 16px;
-    color: white;
-  }
-
-  .popular-card .details {
-    display: flex;
-    justify-content: space-between;
-    margin-top: -12px;
-    padding: 0 10px;
-  }
-
-  .popular-card .developer {
-    font-size: 13px;
-    color: grey;
-    font-weight: bold;
-  }
-  .popular-card .uploadedOn {
-    font-size: 13px;
-    color: grey;
-    text-align: right;
-    margin-top: -48px;
-    font-weight: bold;
-  }
-
-  .popular-card .developer span {
-    display: block;
-    color: darkturquoise;
-    padding: 0 24px;
-  }
-  .popular-card .uploadedOn span {
-    display: block;
-    color: darkturquoise;
-    padding: 0 12px;
-  }
-
-  .popular-card .author {
-    font-size: 18px;
-    color: white;
-    margin: 10px 0;
-    padding: 0 12px;
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-  }
-
-  .popular-card .author p {
-    margin: 0;
-    margin-right: 15px; /* Gap between "By:" and the name */
-  }
-
-  .popular-card .author span {
-    color: #00c6ff;
-    font-weight: bold;
-  }
-
-  .popular-card .actions {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 28px;
-  }
-
-  .popular-card .read-more,
-  .popular-card .source-code {
-    background-color: #ff21bc;
-    color: white;
-    border: none;
-    padding: 0 12px;
-    border-radius: 20px;
-    cursor: pointer;
-    font-size: 10px;
-    font-weight: bold;
-    width: 45%;
-    text-align: center;
-    text-decoration: none;
-    height: 24px;
-    line-height: 24px;
-  }
-
-  .popular-card .source-code {
-    background-color: #00c6ff;
-  }
-`}</style>
-
+      <style>{`
+        .popular-container {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 10px; /* Gap between cards */
+          margin-top: 5px;
+        }
+.popular-card {
+  background-color: #171238;
+  border-radius: 10px;
+  padding: 20px;
+  width: calc(25% - 10px); /* Adjusted width for 4 cards per row, accounting for gap */
+  color: white;
+  text-align: justify;
+  position: relative;
+  height: 330px;
+  transition: transform 0.3s ease-in-out;
+  border: 2px solid black; /* Added black border */
+}
+
+        .popular-card:hover {
+          transform: scale(1.05);
+        }
+
+        .popular-card img {
+          margin-left: -10px;
+          margin-top: -20px;
+          width: 260px;
+          height: 110px;
+          object-fit: cover;
+        }
+
+        .popular-card h3 {
+          margin: 10px;
+          font-size: 20px;
+          color: #fff;
+        }
+
+        .popular-card .likes {
+          position: absolute;
+          top: 125px;
+          right: 20px;
+          font-size: 16px;
+          color: white;
+        }
+
+        .popular-card .details {
+          display: flex;
+          justify-content: space-between;
+          margin-top: -12px;
+          padding: 0 10px;
+          align-items: flex-start; /* Aligns the items at the start */
+        }
+
+        .popular-card .developer,
+        .popular-card .type {
+          flex: 1; /* Both sections take equal space */
+          font-size: 13px;
+          color: grey;
+          font-weight: bold;
+        }
+
+        .popular-card .developer span,
+        .popular-card .type span {
+          display: block;
+          color: darkturquoise;
+          padding: 0 12px;
+        }
+
+        .popular-card .type {
+          text-align: right;
+          margin-top: 0; /* Reset the margin */
+          max-width: 50%; /* Limits the width of the type section */
+          white-space: normal; /* Allows the text to wrap */
+          margin-top:-38px;
+          margin-left:105px;
+        }
+
+        .popular-card .developer {
+          padding-right: 10px; /* Adds a bit more space on the right */
+        }
+
+        .popular-card .type {
+          padding-left: 10px; /* Adds a bit more space on the left */
+        }
+
+        .popular-card .author {
+          font-size: 18px;
+          color: white;
+          margin: 10px 0;
+          padding: 0 12px;
+          display: flex;
+          align-items: center;
+          font-weight: bold;
+        }
+
+        .popular-card .author p {
+          margin: 0;
+          margin-right: 15px; /* Gap between "By:" and the name */
+        }
+
+        .popular-card .author span {
+          color: #00c6ff;
+          font-weight: bold;
+        }
+
+        .popular-card .actions {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 28px;
+        }
+
+        .popular-card .read-more,
+        .popular-card .source-code {
+          background-color: #ff21bc;
+          color: white;
+          border: none;
+          padding: 0 12px;
+          border-radius: 20px;
+          cursor: pointer;
+          font-size: 10px;
+          font-weight: bold;
+          width: 45%;
+          text-align: center;
+          text-decoration: none;
+          height: 24px;
+          line-height: 24px;
+        }
+
+        .popular-card .source-code {
+          background-color: #00c6ff;
+        }
+      `}</style>
 
       {popularItems.map((item) => (
         <div className="popular-card" key={item.id}>
@@ -210,12 +218,12 @@ const Popular = () => {
           <div className="likes">🤍 {item.likes}</div>
           <div className="details">
             <div className="developer">
-              Developer:
+              Developer
               <span>{item.developer}</span>
             </div>
-            <div className="uploadedOn">
-              Uploaded On:
-              <span>{item.uploadedOn}</span>
+            <div className="type">
+              Type of Project
+              <span>{item.type}</span>
             </div>
           </div>
           <div className="author">
diff --git a/src/Components/PortFolio/PortFolio.css b/src/Components/PortFolio/PortFolio.css
index 27d10630..ded6ff74 100644
--- a/src/Components/PortFolio/PortFolio.css
+++ b/src/Components/PortFolio/PortFolio.css
@@ -11,7 +11,7 @@ body {
     margin: 0 auto;
     padding: 20px;
 }
-.top {
+.top1 {
     position: absolute;
     top: 30px;
     left: 100px;
@@ -21,7 +21,7 @@ body {
     transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
 }
 
-.bottom {
+.bottom1 {
     position: absolute;
     top: 30px;
     right: 100px;
diff --git a/src/Components/PortFolio/PortFolio.js b/src/Components/PortFolio/PortFolio.js
index 27b36a39..89f7c1c4 100644
--- a/src/Components/PortFolio/PortFolio.js
+++ b/src/Components/PortFolio/PortFolio.js
@@ -12,8 +12,8 @@ const PortFolio = () => {
             <Link to="/" className="home-link">
               <img src={homeIcon} alt="Home" className="home-icon" />
             </Link>
-            <img src={Top} alt="Logo" className="top" style={{ width: '550px' }} />
-            <img src={Bottom} alt="Logo" className="bottom" style={{ width: '550px' }} />
+            <img src={Top} alt="Logo" className="top1" style={{ width: '550px' }} />
+            <img src={Bottom} alt="Logo" className="bottom1" style={{ width: '550px' }} />
             <header className="header">
                 <h1>UniCollab</h1>
                 <img 
diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
index 38b05b03..d4edc579 100644
--- a/src/Components/TopContainer.css
+++ b/src/Components/TopContainer.css
@@ -40,7 +40,7 @@
 /* Hover effect for nav item links */
 .largeview .nav-item a:hover {
   color: #cf00a3;
-  font-size: 1.05rem;
+  font-size: 1.0rem;
 }
 
 /* Input box styles */
diff --git a/src/Components/footer_section/Pricing/pricing.js b/src/Components/footer_section/Pricing/pricing.js
index 9d24436e..aea9f975 100644
--- a/src/Components/footer_section/Pricing/pricing.js
+++ b/src/Components/footer_section/Pricing/pricing.js
@@ -9,7 +9,7 @@ function Pricing() {
         <div className="pricing">
             <div className="header">
             <Link to="/" className="home-link">
-              <img src={homeIcon} alt="Home" className="home-icon" />
+              <img src={homeIcon} alt="Home" className="home-icon" style={{ height: '60px', width: '60px' }} />
             </Link>
                 <div className="headingHeader">Start your 7 day free trial today</div>
                 <div className="description">Unlock Advanced Features and Maximize Your Potential with UniCollab Pro.</div>