feat: implementation of component for project card

src/app/[lang]/about/page.tsx

@@ -1,3 +1,22 @@
-export default function About() {
-  return <main>About</main>;
-}
+"use client";
+
+import ProjectCard from "@/components/project-card";
+
+const About = () => {
+  return (
+    <>
+      <div className="flex flex-col">
+        <div
+          className="flex flex-col md:flex-row md:gap-4 md:overflow-auto"
+          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+          <ProjectCard type="sei" />
+          <ProjectCard type="bugsbyte" />
+          <ProjectCard type="coderdojo" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default About;

src/components/footer.tsx

@@ -12,7 +12,12 @@ const Footer = () => {
     <footer className=" flex flex-col place-items-center bg-[#EBEBEB] px-5 pb-16 pt-8 sm:flex-row sm:place-items-end sm:px-7 md:px-20">
       <div className="flex w-full max-w-[500px] flex-col place-items-center justify-center space-y-5 sm:w-1/2 sm:max-w-max sm:flex-col-reverse md:place-items-start">
         <div className="w-full space-y-6 pb-2.5 sm:mt-[50px] sm:w-80 sm:pb-0">
-          <Image src="/logo/cesium.svg" alt="CeSIUM Logo Icon" width={32} height={37} />
+          <Image
+            src="/logo/cesium.svg"
+            alt="CeSIUM Logo Icon"
+            width={32}
+            height={37}
+          />
           <p className="text-sm leading-[17px] text-[#94959C]">{dict.cesium}</p>
           <div className="justify-left flex h-[30px] space-x-5">
             {dict.socials.map((social) => {

src/components/project-card.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useDictionary } from "@/contexts/dictionary-provider";
+import Image from "next/image";
+import AppLink from "./link";
+
+interface ProjectProps {
+  type: string;
+}
+
+const ProjectCard = ({ type }: ProjectProps) => {
+  const dict = useDictionary();
+
+  const info = () => {
+    switch (type) {
+      case "sei":
+        return {
+          src: "/logo/sei.svg",
+          alt: "SEI Logo",
+          gradient_color: "rgba(35,11,183,0.10)",
+          ref: "https://seium.org/",
+        };
+      case "bugsbyte":
+        return {
+          src: "/logo/bugsbyte.svg",
+          alt: "BugsByte Logo",
+          gradient_color: "rgba(120,176,69,0.25)",
+          ref: "https://bugsbyte.org/",
+        };
+      case "coderdojo":
+        return {
+          src: "/logo/coderdojo.svg",
+          alt: "CoderDojo Logo",
+          gradient_color: "rgba(50,51,51,0.25)",
+          ref: "https://coderdojobraga.org/",
+        };
+      default:
+        return {
+          src: "/logo/sei.svg",
+          alt: "SEI Logo",
+          gradient_color: "rgba(35,11,183,0.10)",
+          ref: "https://seium.org/",
+        };
+    }
+  };
+
+  const getCardIndex = () => {
+    switch (type) {
+      case "sei":
+        return 0;
+      case "bugsbyte":
+        return 1;
+      case "coderdojo":
+        return 2;
+      default:
+        return 0;
+    }
+  };
+
+  const cardIndex = getCardIndex();
+  const project = dict.about.projects.card[cardIndex];
+
+  if (!project) return null;
+
+  return (
+    <div
+      className={`mt-[30px] border-b border-[#230BB71A] pb-[30px] md:mt-0 md:min-w-[460px] lg:w-1/3 lg:border-none`}
+      style={{
+        background: `radial-gradient(circle at center 130%, ${info().gradient_color ?? "rgba(50,51,51,0.25)"} 10%, rgba(50,51,51,0) 57%)`,
+      }}
+    >
+      <div className="relative w-auto h-[50px] flex">
+          <Image
+            src={info().src}
+            alt={info().alt}
+            fill
+            className="object-contain object-left-top"
+          />
+      </div>
+      <p className="pt-4 md:hidden md:min-w-[460px]">
+        {project.mobile_description}
+      </p>
+      <p className="hidden pt-4 md:block md:min-w-[460px]">
+        {project.desktop_description}
+      </p>
+      <div className="mt-4 flex w-16 justify-between">
+        <AppLink
+          title={dict.about.projects.open}
+          href={info().ref}
+          arrow="outward"
+        ></AppLink>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;