Update Organization Card

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;

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,15 +49,20 @@ 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>
                 <span className="text-accent1-light dark:text-accent1-dark transition-colors duration-300 group-hover:text-content-dark dark:group-hover:text-content-light">
                     {date}
                 </span>
             </div>
+
         </div>
     );
 };

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.'
 };

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 >

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">

tailwind.config.js

@@ -38,5 +38,5 @@ export default {
       },
     },
   },
-  plugins: [require('@tailwindcss/line-clamp')],
+  plugins: [],
 }