feat: create the fund page, with donate and vote components

frontend/gostarkme-web/components/modules/Fund/Fund.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import FundDonate from "./FundDonate";
+import starknetlogo from "@/public/icons/starklogo.png";
+import { FundVote } from "./FundVote";
+import { useState } from "react";
+
+interface FundProps {
+  message: string;
+}
+
+const Fund = ({ message }: FundProps) => {
+  const [type, setType] = useState<string>("donate");
+
+  return (
+    <section>
+      <p className="mb-40">{message}</p>
+
+      {type === "donate" ? <FundDonate icon={starknetlogo} /> : <FundVote />}
+      {/* For Vote, there is no logo, but when you already have it, just pass it through the prop */}
+    </section>
+  );
+};
+
+export default Fund;

frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { LinkButton } from "@/components/ui/LinkButton";
+import ProgressBar from "@/components/ui/ProgressBar";
+import Image, { StaticImageData } from "next/image";
+import { useState } from "react";
+
+interface FundDonateProps {
+  icon?: StaticImageData;
+}
+
+const FundDonate = ({ icon }: FundDonateProps) => {
+  const [amount, setAmount] = useState<number>();
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = Number(e.target.value);
+    setAmount(value);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <ProgressBar progress={34} />
+      <div className="flex justify-center my-2">
+        <p className="text-center mx-2">200 / 300 </p>
+        <Image src={icon || ""} alt="icon" width={24} height={24} />
+      </div>
+      <div className="flex justify-center">
+        <input
+          className="border border-gray-400 p-2 my-5 rounded w-1/4"
+          type="number"
+          placeholder="Enter the amount of STRK"
+          onChange={handleAmountChange}
+          value={amount}
+        />
+      </div>
+      <LinkButton label="Donate" href="/" />
+    </div>
+  );
+};
+
+export default FundDonate;

frontend/gostarkme-web/components/modules/Fund/FundVote.tsx

@@ -0,0 +1,20 @@
+import { LinkButton } from "@/components/ui/LinkButton";
+import ProgressBar from "@/components/ui/ProgressBar";
+import Image, { StaticImageData } from "next/image";
+
+interface FundVoteProps {
+  icon?: StaticImageData;
+}
+
+export const FundVote = ({ icon }: FundVoteProps) => {
+  return (
+    <div className="flex flex-col">
+      <ProgressBar progress={34} />
+      <div className="flex justify-center my-2">
+        <p className="text-center mx-2">200 / 300 </p>
+        <Image src={icon || ""} alt="icon" width={24} height={24} />
+      </div>
+      <LinkButton label="Vote" href="/" />
+    </div>
+  );
+};