refactor: redesigned projects built with MACI page

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

@@ -0,0 +1,28 @@
+import styles from "./styles.module.css";
+
+export type ActionCardProps = {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+};
+
+export default function ActionCard({ title, description, buttonText, buttonUrl }: ActionCardProps) {
+  return (
+    <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 href={buttonUrl} className={styles.actionCardButton} target="_blank" rel="noopener noreferrer">
+              {buttonText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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,57 @@
+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;
+}
+
+export default function ProjectCard({ name, description, hackathon, status, links }: ProjectCardProps) {
+  const categories = hackathon ? [hackathon] : [status];
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardTags}>
+        {categories.map((category) => (
+          <span className={styles.tag} key={category}>
+            {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 href={links.github} target="_blank" rel="noopener noreferrer">
+              <IconGithub />
+            </a>
+          )}
+          {links.website && (
+            <a href={links.website} target="_blank" rel="noopener noreferrer">
+              <IconWebsite />
+            </a>
+          )}
+          {links.discord && (
+            <a href={links.discord} target="_blank" rel="noopener noreferrer">
+              <IconDiscord />
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+.card {
+  background-color: #1a202c;
+  border-radius: 18px;
+  color: white;
+  border: 1px solid #2d3748;
+  padding: 34px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.3s ease;
+}
+
+.card:hover {
+  border-color: #4a5568;
+}
+
+.cardTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 2rem;
+}
+
+.tag {
+  border: 1px solid #4a5568;
+  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: white;
+  text-decoration: none;
+}
+
+.cardFooter svg {
+  width: 24px;
+  height: 24px;
+}
+
+@media (max-width: 768px) {
+  .cardFooter svg {
+    width: 16px;
+    height: 16px;
+  }
+}