Origin/feat/card project

src/components/cards/index.tsx

@@ -0,0 +1,2 @@
+export * from "./project.card";
+export * from "./new.project.button";

src/components/cards/new.project.button.tsx

@@ -0,0 +1,11 @@
+import { FaPlus } from "react-icons/fa";
+import { Card } from "@/components/ui/card";
+
+export function NewProjectButton() {
+  return (
+    <Card className="w-48 h-64 bg-primary rounded-xl border border-dashed border-gray-300 hover:border-white hover:opacity-80 transition-colors flex flex-col items-center justify-center text-white shadow-md cursor-pointer">
+      <FaPlus  size={48} className="mb-4" />
+      <span className="text-xl font-semibold">New project</span>
+    </Card>
+  );
+}

src/components/cards/project.card.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { GripVertical, MoreVertical } from "lucide-react";
+import React from "react";
+
+interface ProjectCardProps {
+  nome: string;
+  icone: React.ReactNode;
+}
+
+export function ProjectCard({ nome, icone }: ProjectCardProps) {
+  return (
+    <Card className="relative w-48 h-64 p-6 text-white rounded-xl shadow-md flex flex-col items-center justify-between overflow-hidden">
+      <div className="absolute top-2 left-2 text-gray-400">
+        <GripVertical size={16} />
+      </div>
+      <div className="absolute top-2 right-2 text-gray-400">
+        <MoreVertical size={16} />
+      </div>
+
+      <CardContent className="flex flex-col flex-grow items-center justify-center pt-6">
+        <div className="text-8xl ">{icone}</div>
+      </CardContent>
+      <CardFooter>
+        {" "}
+        <span className="text-lg font-semibold text-center">{nome}</span>
+      </CardFooter>
+    </Card>
+  );
+}

src/components/index.ts

@@ -3,3 +3,4 @@ export * from "./header";
 export * from "./setings&preferrences";
 export * from "./docs";
 export * from "./statusbadge";
+export * from "./cards";