Merge pull request #78 from acm-ucr/menthy/project

Menthy/project
acm-ucr · Nov 12, 2023 · d0d981a · d0d981a
2 parents 2d1048a + 69725bd
commit d0d981a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/src/components/ArrowLink.jsx b/src/components/ArrowLink.jsx
@@ -4,7 +4,7 @@ const ArrowLink = ({ text, link }) => {
   return (
     <Link
       href={link}
-      className="no-underline text-ewb-blue-200 hover:text-ewb-blue-200 flex items-center hover:-translate-y-0.5 duration-300"
+      className="no-underline text-ewb-blue-200 hover:text-ewb-blue-200 flex items-center hover:-translate-y-0.5 duration-300 text-lg"
     >
       {text} <BiRightArrowAlt />
     </Link>

diff --git a/src/components/home/Project.jsx b/src/components/home/Project.jsx
@@ -2,14 +2,14 @@ import ArrowLink from "../ArrowLink.jsx";
 
 const Project = ({ name, description, link }) => {
   return (
-    <div className="bg-ewb-blue-100 w-1/3">
-      <div className="text-ewb-blue-200 text-4xl font-bold underline underline-offset-8 decoration-ewb-green text-center pt-4">
+    <div className="bg-ewb-blue-100 w-full h-full md:last:translate-x-1/2 flex flex-col justify-between p-4 items-center">
+      <div className="text-ewb-blue-200 text-lg md:text-2xl font-bold underline underline-offset-8 decoration-ewb-green text-center">
         {name}
       </div>
-      <div className="pt-6 pb-6 px-14 text-center text-base">{description}</div>
-      <div className="flex items-center justify-center text-blue-800 font-bold pb-2 text-xl">
-        <ArrowLink text="learn more" link="{link}" />
+      <div className="py-6 px-4 text-center text-xs md:text-base">
+        {description}
       </div>
+      <ArrowLink text="learn more" link={link} />
     </div>
   );
 };

diff --git a/src/components/home/Projects.jsx b/src/components/home/Projects.jsx
@@ -4,10 +4,9 @@ import Project from "@/components/home/Project";
 
 const Projects = () => {
   return (
-    <div>
+    <div className="flex flex-col w-11/12 md:w-7/12">
       <Title subTitle="LEARN FROM EXPERIENCE" title="OUR PROJECTS" />
-      <br />
-      <div className="flex flex-wrap items-center justify-center gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-10">
         {PROJECTS.map((project, index) => (
           <Project
             key={index}
@@ -17,7 +16,6 @@ const Projects = () => {
           />
         ))}
       </div>
-      <br />
     </div>
   );
 };