refactor: Redesigned projects built with MACI page

apps/website/src/components/ActionCard/index.tsx

@@ -0,0 +1,30 @@
+import styles from "./styles.module.css";
+
+interface ActionCardProps {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+}
+
+const ActionCard: React.FC<ActionCardProps> = ({ buttonText, buttonUrl, description, title }: ActionCardProps) => (
+  <div className={styles.actionCard}>
+    <div className={styles.actionCardBody}>
+      <div className={styles.actionCardContent}>
+        <div className={styles.actionCardText}>
+          <h2 className={styles.actionCardTitle}>{title}</h2>
+
+          <p className={styles.actionCardDescription}>{description}</p>
+        </div>
+
+        <div className={styles.actionCardButtonContainer}>
+          <a className={styles.actionCardButton} href={buttonUrl} rel="noopener noreferrer" target="_blank">
+            {buttonText}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default ActionCard;

apps/website/src/components/ActionCard/styles.module.css

@@ -0,0 +1,96 @@
+.actionCard {
+  background-color: #1a202c; /* darkBlue */
+  color: white;
+  border-radius: 24px;
+  width: 100%;
+  padding: 64px 32px;
+}
+
+.actionCardBody {
+  padding: 0;
+}
+
+.actionCardContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}
+
+.actionCardText {
+  width: 100%;
+}
+
+.actionCardTitle {
+  font-size: 30px;
+  line-height: 44px;
+  font-weight: normal;
+  color: white;
+}
+
+.actionCardDescription {
+  margin-top: 1rem;
+  font-size: 16px;
+  line-height: 25px;
+  font-weight: normal;
+  color: #a0aec0; /* text.400 */
+}
+
+.actionCardButtonContainer {
+  width: 100%;
+}
+
+.actionCardButton {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: #3182ce; /* primary */
+  color: white;
+  text-decoration: none;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .actionCardContent {
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .actionCardText {
+    width: 522px;
+  }
+
+  .actionCardTitle {
+    font-size: 40px;
+  }
+
+  .actionCardDescription {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .actionCardButtonContainer {
+    width: auto;
+  }
+
+  .actionCardButton {
+    padding: 0.75rem 1.5rem;
+    font-size: 1.125rem;
+    border-radius: 30px;
+  }
+}
+
+@media (min-width: 992px) {
+  .actionCard {
+    padding: 41px 80px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .actionCard {
+    width: 1110px;
+  }
+}

apps/website/src/components/ProjectCard/index.tsx

@@ -0,0 +1,74 @@
+import { useColorMode } from "@docusaurus/theme-common";
+
+import IconDiscord from "../../icons/IconDiscord";
+import IconGithub from "../../icons/IconGithub";
+import IconWebsite from "../../icons/IconWebsite";
+
+import styles from "./styles.module.css";
+
+interface ProjectLinks {
+  website?: string;
+  github?: string;
+  discord?: string;
+}
+
+interface ProjectCardProps {
+  name: string;
+  description: string;
+  hackathon?: string;
+  status?: string;
+  links: ProjectLinks;
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({
+  description,
+  hackathon = "",
+  links,
+  name,
+  status = "",
+}: ProjectCardProps) => {
+  const categories = hackathon ? [hackathon] : [status];
+  const { colorMode } = useColorMode();
+
+  return (
+    <div className={`${styles.card} ${styles[colorMode]}`}>
+      <div className={styles.cardTags}>
+        {categories.map((category) => (
+          <span key={category} className={styles.tag}>
+            {category}
+          </span>
+        ))}
+      </div>
+
+      <div className={styles.cardBody}>
+        <h2 className={styles.cardTitle}>{name}</h2>
+
+        <p className={styles.cardDescription}>{description}</p>
+      </div>
+
+      {(links.website || links.github || links.discord) && (
+        <div className={styles.cardFooter}>
+          {links.github && (
+            <a aria-label="GitHub" href={links.github} rel="noopener noreferrer" target="_blank">
+              <IconGithub />
+            </a>
+          )}
+
+          {links.website && (
+            <a aria-label="Website" href={links.website} rel="noopener noreferrer" target="_blank">
+              <IconWebsite />
+            </a>
+          )}
+
+          {links.discord && (
+            <a aria-label="Discord" href={links.discord} rel="noopener noreferrer" target="_blank">
+              <IconDiscord />
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProjectCard;

apps/website/src/components/ProjectCard/styles.module.css

@@ -0,0 +1,77 @@
+.card {
+  border-radius: 18px;
+  padding: 34px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.3s ease;
+}
+
+.card.light {
+  background-color: var(--ifm-color-gray-100);
+  border: 1px solid var(--ifm-color-gray-300);
+  color: var(--ifm-color-gray-900);
+}
+
+.card.dark {
+  background-color: var(--ifm-color-gray-900);
+  border: 1px solid var(--ifm-color-gray-800);
+  color: var(--ifm-color-gray-100);
+}
+
+.card:hover {
+  border-color: var(--ifm-color-primary);
+}
+
+.cardTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 2rem;
+}
+
+.tag {
+  border: 1px solid var(--ifm-color-gray-600);
+  border-radius: 9999px;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.cardBody {
+  flex-grow: 1;
+}
+
+.cardTitle {
+  font-size: 24px;
+  line-height: 33px;
+  margin-bottom: 1rem;
+}
+
+.cardDescription {
+  font-size: 14px;
+  line-height: 22.4px;
+}
+
+.cardFooter {
+  display: flex;
+  gap: 1rem;
+  padding-top: 1rem;
+}
+
+.cardFooter a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.cardFooter svg {
+  width: 24px;
+  height: 24px;
+}
+
+@media (max-width: 768px) {
+  .cardFooter svg {
+    width: 16px;
+    height: 16px;
+  }
+}