Add CommunityNews component

.gitignore

@@ -47,4 +47,7 @@ yarn-error.log*
 *.tsbuildinfo
 
 # idea files
-.idea
+.idea
+
+# codex
+.codex

src/app/page.tsx

@@ -3,6 +3,7 @@ import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
 import discord from "@/assets/icons/discord.svg"
 import telegram from "@/assets/icons/telegram.svg"
 import { CardMultipleIcons } from "@/components/card-multiple-icons"
+import { CardSplit } from "@/components/card-split"
 import { AboutUs } from "@/components/home/about-us"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
@@ -13,7 +14,7 @@ export default function Home() {
       <Hero />
       <Materials />
       <AboutUs />
-      <div className="mx-auto w-fit py-12">
+      <div className="mx-auto flex w-fit flex-col items-center gap-5 py-12">
         <CardMultipleIcons
           icons={[
             <Image key="telegram" src={telegram} alt="Telegram" />,
@@ -24,6 +25,7 @@ export default function Home() {
             <FiGithub key="github" />,
           ]}
         />
+        <CardSplit textPrimary="5x1000" textSecondary="Sostienici!" textSecondarySmall="CF: 97927490157" />
       </div>
     </main>
   )

src/app/projects/page.tsx

@@ -0,0 +1,9 @@
+import { CommunityNews } from "@/components/projects/community-news"
+
+export default function Home() {
+  return (
+    <main className="w-full">
+      <CommunityNews />
+    </main>
+  )
+}

src/components/gradient-icon.tsx

@@ -1,6 +1,6 @@
 import { type FunctionComponent, type SVGProps, useId } from "react"
 
-export type GradientIconType = FunctionComponent<SVGProps<SVGSVGElement>>
+export type GradientIconType = FunctionComponent<SVGProps<SVGSVGElement> & { size?: string }>
 
 type GradientIconProps = {
   icon: GradientIconType
@@ -20,7 +20,7 @@ export function GradientIcon({ icon: Icon, className }: GradientIconProps) {
           <stop offset="100%" stopColor="var(--color-blue-primary)" />
         </linearGradient>
         <mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-          <Icon className={className} stroke="white" fill="none" />
+          <Icon stroke="white" fill="none" size="16" />
         </mask>
       </defs>
       <rect x="0" y="0" width="16" height="16" fill={`url(#${gradientId})`} mask={`url(#${maskId})`} />

src/components/projects/community-news.tsx

@@ -0,0 +1,60 @@
+import { FiCrop } from "react-icons/fi"
+import { CardCaption } from "../card-caption"
+
+const communityCards = [
+  {
+    title: "Title 1",
+    caption:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiCrop,
+    iconPosition: "right",
+  },
+  {
+    title: "Title 2",
+    caption:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiCrop,
+    iconPosition: "right",
+  },
+  {
+    title: "Title 3",
+    caption:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiCrop,
+    iconPosition: "right",
+  },
+  {
+    title: "Title 4",
+    caption:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiCrop,
+    iconPosition: "right",
+  },
+] as const
+
+export function CommunityNews() {
+  return (
+    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-24">
+      <div className="flex flex-col items-center gap-6">
+        <h2 className="typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-14 text-transparent">
+          Projects
+        </h2>
+        <p className="typo-headline-small max-w-xl text-center">Esplora e contribuisci ai progetti degli studenti</p>
+      </div>
+
+      <div className="flex flex-col gap-14">
+        <div className="flex flex-col items-center gap-2 md:items-start">
+          <h3 className="typo-display-medium text-center md:text-left">Le novità della community</h3>
+          <p className="typo-body-large text-center md:text-left">
+            Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {communityCards.map((card) => (
+            <CardCaption key={card.title} {...card} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/ui/card.tsx

@@ -1,8 +1,9 @@
-import * as React from "react"
+import type * as React from "react"
 import type { IconType } from "react-icons"
 import { cn } from "@/lib/utils"
 import { CardHoverBackground } from "../card-icon/hover-background"
 import { Glass } from "../glass"
+import { GradientIcon } from "../gradient-icon"
 import { Button } from "./button"
 
 function Card({
@@ -65,28 +66,14 @@ function CardAction({
   gradient = true,
   ...props
 }: React.ComponentProps<"div"> & { icon: IconType; iconSize?: "small" | "normal" | "large"; gradient?: boolean }) {
-  const gradientId = React.useId()
-
   return (
     <div
       data-slot="card-action"
       className={cn("col-start-2 row-span-2 row-start-1 self-auto justify-self-end", className)}
       {...props}
     >
-      {gradient && (
-        <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false">
-          <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
-            <stop offset="0%" className="text-blue-secondary" stopColor="currentColor" />
-            <stop offset="100%" className="text-blue-primary" stopColor="currentColor" />
-          </linearGradient>
-        </svg>
-      )}
 
-      <Icon
-        size={iconSize === "small" ? "1.125rem" : iconSize === "normal" ? "2rem" : "3.5rem"}
-        fill={gradient ? `url(#${gradientId})` : "currentColor"}
-        stroke={gradient ? `url(#${gradientId})` : "currentColor"}
-      />
+      <GradientIcon icon={Icon} className={cn(iconSize === "small" ? "h-4.5 w-4.5" : iconSize === "normal" ? "h-8 w-8" : "h-14 w-14")} />
     </div>
   )
 }