add devsoc to resources

Author: chlowoee

frontend/public/assets/devsoc_logo.svg

@@ -3,8 +3,10 @@ import { resourceCards, stage1, stage2, stage3 } from '../../../public/data/reso
 
 const boxStyling =
   'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
-const socialsBoxStyling =
-  'xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
+// const socialsBoxStyling =
+//   'xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
+const logostyle =
+  'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105';
 
 const Resources = () => {
   return (
@@ -16,23 +18,35 @@ const Resources = () => {
             <h2 className="font-bold text-6xl">RESOURCES</h2>
           </div>
 
+          <div className="flex">
+            <span className="text-lg">Made by</span>
+            <Image
+              src="/assets/csesoc_logo.svg"
+              alt="CSESoc Logo"
+              width={100}
+              height={100}
+              className="pl-2"
+            />
+          </div>
+
           <div className="py-8 bg-no-repeat bg-center">
             <div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
-              {stage1.map((item: resourceCards) => {
+              {stage3.map((item: resourceCards) => {
                 return (
                   <a
                     key={item.id}
                     href={item.href}
                     target="_blank"
-                    className={`col-span-4 p-5 ${boxStyling} flex`}
+                    className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
                   >
-                    <div className="flex justify-center align-middle items-center pl-2 pr-10">
+                    <div className="flex align-middle items-center pt-2 pb-4 pr-10">
                       <Image
                         src={item.svg}
                         alt={item.alt}
                         draggable="false"
                         width={item.width}
                         height={item.height}
+                        className="rounded-md"
                       />
                     </div>
                     <div>
@@ -42,16 +56,32 @@ const Resources = () => {
                   </a>
                 );
               })}
+            </div>
+          </div>
 
-              {stage2.map((item: resourceCards) => {
+          <a href="https://devsoc.app/" target="_blank" rel="noopener noreferrer">
+            <div className={`flex ${logostyle}`}>
+              <span className="text-lg">Made by</span>
+              <Image
+                src="/assets/devsoc_logo.svg"
+                alt="DevSoc Logo"
+                width={110}
+                height={110}
+                className="pl-1"
+              />
+            </div>
+          </a>
+          <div className="py-8 bg-no-repeat bg-center">
+            <div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
+              {stage1.map((item: resourceCards) => {
                 return (
                   <a
                     key={item.id}
                     href={item.href}
                     target="_blank"
-                    className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
+                    className={`col-span-4 p-5 ${boxStyling} flex`}
                   >
-                    <div className="flex align-middle items-center pt-2 pb-4">
+                    <div className="flex justify-center align-middle items-center pl-2 pr-10">
                       <Image
                         src={item.svg}
                         alt={item.alt}
@@ -68,22 +98,21 @@ const Resources = () => {
                 );
               })}
 
-              {stage3.map((item: resourceCards) => {
+              {stage2.map((item: resourceCards) => {
                 return (
                   <a
                     key={item.id}
                     href={item.href}
                     target="_blank"
-                    className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
+                    className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
                   >
-                    <div className="flex align-middle items-center pt-2 pb-4 pr-10">
+                    <div className="flex align-middle items-center pt-2 pb-4">
                       <Image
                         src={item.svg}
                         alt={item.alt}
                         draggable="false"
                         width={item.width}
                         height={item.height}
-                        className="rounded-md"
                       />
                     </div>
                     <div>