feat: Project card and Banner Image (#6)

* Banner Image

* iterating

* adding docs

* fixing test

* removing states variant

package.json

@@ -124,9 +124,11 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@tanstack/react-query": "^5.59.15",
     "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.3.0",
+    "graphql-request": "^7.1.0",
     "input-otp": "^1.2.4",
     "next-themes": "^0.3.0",
     "react-day-picker": "8.10.1",

src/features/project/components/ProjectCard.mdx

@@ -0,0 +1,25 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+import * as ProjectCardStories from "./ProjectCard.stories";
+import { ProjectCard } from "./ProjectCard";
+
+# ProjectCard
+
+<Meta of={ProjectCardStories} />
+
+The ProjectCard component renders a Gitcoin Project in a card Format. These can be used to share on social media or to render in a list.
+
+This component provides a Loading and an Error State.
+
+This component natively supports a Tanstack Query for a single Project, and will appropriately display Loading, Error, and Success states.
+
+# Example
+
+<Story of={ProjectCardStories.Default} />
+
+# Controls
+
+<Controls />
+
+# Other variations
+
+<Stories />