Update Organization page

PureNimble · Oct 2, 2024 · 1cff82c · 1cff82c
1 parent 8265061
commit 1cff82c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 19 deletions.
diff --git a/src/components/OrganizationCard.jsx b/src/components/OrganizationCard.jsx
@@ -1,21 +1,16 @@
 import React from 'react';
 
-const OrganizationCard = ({ name, logo, description }) => {
+const OrganizationCard = ({ name, logo }) => {
     return (
-        <div className="bg-content-light dark:bg-content-dark p-8 rounded-xl shadow-md transition-colors duration-300 flex">
-            <div className="bg-bkg-light dark:bg-gray-300 p-8 rounded-xl shadow-md transition-colors duration-300 size-min">
-                <div className="flex justify-center">
-                    <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>
-                        <h1 className="mt-4 text-2xl font-semibold capitalize text-center text-accent1-light">{name}</h1>
+        <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>
+                <h1 className="mt-4 text-2xl font-semibold capitalize text-center text-accent1-light">{name}</h1>
             </div>
-            <p className="flex items-center ml-8 text-accent1-light dark:text-accent1-dark transition-colors duration-300">{description}</p>
         </div>
     );
 }

diff --git a/src/pages/Organization.jsx b/src/pages/Organization.jsx
@@ -6,17 +6,17 @@ function Organization() {
     return (
         <>
             <main>
-                <section className="container px-60 py-10 mx-auto">
+                <section className="container px-16 py-10 mx-auto">
                     <header className="text-center">
                         <h1 className="text-2xl font-semibold text-accent1-light capitalize lg:text-3xl dark:text-accent1-dark transition-colors duration-300">
                             Our Organization
                         </h1>
                         <p className="max-w-2xl mt-4 mx-auto text-accent2-light dark:text-accent2-dark transition-colors duration-300">
-                            Meet our organization.
+                            {organization.description}
                         </p>
                     </header>
-                    <div className="mt-16">
-                        <OrganizationCard name={organization.name} logo={organization.logo} description={organization.description}/>
+                    <div className="flex mt-8">
+                        <OrganizationCard name={organization.name} logo={organization.logo} />
                     </div>
                 </section>
             </main >

diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
@@ -6,7 +6,7 @@ function Projects() {
     return (
         <>
             <main>
-                <section className="container px-4 py-10 mx-auto max-w-7xl">
+                <section className="container px-16 py-10 mx-auto max-w-7xl">
                     <header className="text-center">
                         <h1 className="text-2xl font-semibold text-accent1-light capitalize lg:text-3xl dark:text-accent1-dark transition-colors duration-300">
                             Our Projects

diff --git a/src/pages/Team.jsx b/src/pages/Team.jsx
@@ -3,11 +3,11 @@ import { teamMembers } from '../constants';
 import { ProfileCard } from '../components';
 import "@theme-toggles/react/css/Classic.css";
 
-const Team = () => {
+function Team() {
     return (
         <>
             <main>
-                <section className="container px-6 py-10 mx-auto">
+                <section className="container px-16 py-10 mx-auto">
                     <header className="text-center">
                         <h1 className="text-2xl font-semibold text-accent1-light capitalize lg:text-3xl dark:text-accent1-dark transition-colors duration-300">
                             Our Team