From 63b4d6dacb859caa285056b3dfdee21075acf18e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20Ara=C3=BAjo?= <1201804@isep.ipp.pt>
Date: Wed, 9 Oct 2024 15:10:30 +0300
Subject: [PATCH] Update Organization Card

---
 src/components/OrganizationCard.jsx | 14 ++++++--------
 src/components/ProjectCard.jsx      | 11 ++++++++---
 src/constants/index.js              |  2 +-
 src/pages/Organization.jsx          |  7 +++++--
 src/pages/Projects.jsx              |  2 +-
 tailwind.config.js                  |  2 +-
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/OrganizationCard.jsx b/src/components/OrganizationCard.jsx
index 7c80c6d..1d9b816 100644
--- a/src/components/OrganizationCard.jsx
+++ b/src/components/OrganizationCard.jsx
@@ -2,17 +2,15 @@ import React from 'react';
 
 const OrganizationCard = ({ name, logo }) => {
     return (
-        <div className="bg-content-light dark:bg-gray-400 p-8 rounded-xl inline-block shadow-md transition-colors duration-300 mx-auto">
-            <div className="flex flex-col items-center">
-                <div className="w-60 h-60 relative group perspective-3d">
-                    <div className="absolute w-full h-full bg-gray-200 rounded-full shadow-lg transition-transform duration-500 transform group-hover:rotate-y-180 group-hover:rotate-x-12 hover:animate-spin3D">
-                        <img className="object-cover w-full h-full rounded-full shadow-xl" src={logo} alt={`Logo of ${name}`} />
-                    </div>
+        <div className="bg-content-light dark:bg-gray-400 p-4 sm:p-8 rounded-xl inline-block shadow-md transition-colors duration-300">
+            <div className="w-48 h-48 sm:w-60 sm:h-60 relative group perspective-3d mx-auto">
+                <div className="absolute w-full h-full bg-gray-200 rounded-full shadow-lg transition-transform duration-500 transform group-hover:rotate-y-180 group-hover:rotate-x-12 hover:animate-spin3D">
+                    <img className="object-cover w-full h-full rounded-full shadow-xl" src={logo} alt={`Logo of ${name}`} />
                 </div>
-                <h1 className="mt-4 text-2xl font-semibold capitalize text-center text-accent1-light">{name}</h1>
             </div>
+            <h1 className="mt-4 text-lg font-semibold capitalize text-center text-accent1-light">{name}</h1>
         </div>
     );
 }
 
-export default OrganizationCard;
+export default OrganizationCard;
\ No newline at end of file
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
index 1eff45b..6733551 100644
--- a/src/components/ProjectCard.jsx
+++ b/src/components/ProjectCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FaGithubAlt } from 'react-icons/fa';
 import { CodeBracketIcon, EyeIcon } from "@heroicons/react/24/outline";
-import pureNimble from '../assets/pureNimbleLogo.png'; // Adjust the import path as needed
+import pureNimble from '../assets/pureNimbleLogo.png';
 
 const ProjectCard = ({ title, description, source, live, date, logo }) => {
     return (
@@ -49,8 +49,12 @@ const ProjectCard = ({ title, description, source, live, date, logo }) => {
             </div>
             <div className="pb-6 pr-6 pl-6 bg-transparent flex justify-between items-center">
                 <div className="flex items-center">
-                    <img src={pureNimble} alt="Avatar" className="w-8 h-8 rounded-full mr-2 object-cover transition-transform duration-300" />
-                    <span className="text-accent1-light dark:text-accent1-dark font-semibold transition-colors duration-300 group-hover:text-content-dark dark:group-hover:text-content-light">
+                    <img
+                        src={pureNimble}
+                        alt="Avatar"
+                        className="w-8 h-8 rounded-full mr-2 object-cover transition-transform duration-300"
+                    />
+                    <span className="text-accent1-light dark:text-accent1-dark font-semibold transition-colors duration-300 group-hover:text-content-dark dark:group-hover:text-content-light truncate">
                         PureNimble
                     </span>
                 </div>
@@ -58,6 +62,7 @@ const ProjectCard = ({ title, description, source, live, date, logo }) => {
                     {date}
                 </span>
             </div>
+
         </div>
     );
 };
diff --git a/src/constants/index.js b/src/constants/index.js
index 239e81e..8d4f87c 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -74,5 +74,5 @@ export const projects = [
 export const organization = {
     name: 'PureNimble',
     logo: pureNimble,
-    description: 'PureNimble is a space where we share school projects and personal work that could be useful to others. Our team consists of students, and we aim to provide simple, practical resources based on what we’ve learned. We’re not trying to stand out, just offering what we’ve created in case it helps someone else.'
+    description: 'PureNimble is a space where we share university projects and personal work that could be useful to others. Our team consists of students, and we aim to provide simple, practical resources based on what we’ve learned. We’re not trying to stand out, just offering what we’ve created in case it helps someone else.'
 };
\ No newline at end of file
diff --git a/src/pages/Organization.jsx b/src/pages/Organization.jsx
index 61b5a57..c33d325 100644
--- a/src/pages/Organization.jsx
+++ b/src/pages/Organization.jsx
@@ -15,8 +15,11 @@ function Organization() {
                             {organization.description}
                         </p>
                     </header>
-                    <div className="flex mt-8">
-                        <OrganizationCard name={organization.name} logo={organization.logo} />
+                    <div className="flex justify-center mt-8 lg:px-4 w-full">
+                        <OrganizationCard
+                            name={organization.name}
+                            logo={organization.logo}
+                        />
                     </div>
                 </section>
             </main >
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index 53d4c96..5c0cba6 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -12,7 +12,7 @@ function Projects() {
                             Our Projects
                         </h1>
                         <p className="max-w-2xl mt-4 mx-auto text-accent2-light dark:text-accent2-dark transition-colors duration-300">
-                            This page showcases our organization's key projects, including school initiatives and more. It serves as a record of our efforts and is shared to inspire and inform others. Explore to learn about our work and impact!
+                            This page showcases our organization's key projects, including university initiatives and more. It serves as a record of our efforts and is shared to inspire and inform others. Explore to learn about our work and impact!
                         </p>
                     </header>
                     <div className="grid gap-8 gap-x-8 mt-8 lg:grid-cols-3 lg:px-4">
diff --git a/tailwind.config.js b/tailwind.config.js
index 4675a25..b09850d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,5 +38,5 @@ export default {
       },
     },
   },
-  plugins: [require('@tailwindcss/line-clamp')],
+  plugins: [],
 }
\ No newline at end of file