[Feat] Add dashboard page

frontend/gostarkme-web/animations/StardustAnimation.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-export const StardustAnimation = () => {
+export const StardustAnimation = ({height, width}: {height: number, width: number}) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
     useEffect(() => {
@@ -11,8 +11,8 @@ export const StardustAnimation = () => {
       let animationFrameId: number;
 
       // Set canvas size
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
+      canvas.width = width;
+      canvas.height = height;
 
       // Create stars
       const stars: { x: number; y: number; size: number; speed: number; }[] = [];
@@ -54,7 +54,7 @@ export const StardustAnimation = () => {
       return () => {
         cancelAnimationFrame(animationFrameId);
       };
-    }, []);
+    }, [height, width]);
 
-    return <canvas ref={canvasRef} className="relative top-0 left-0 w-full h-full" style={{position: 'absolute'}} />;
+    return <canvas ref={canvasRef} className="top-0 left-0" style={{position: 'absolute', inset: 0}} />;
   };

frontend/gostarkme-web/app/dashboard/page.tsx

@@ -0,0 +1,53 @@
+import FundCards from "@/components/dashboard/fundCard";
+import React from "react";
+
+const Dashboard = () => {
+  const funds = [
+    {
+      type: "Project",
+      title: "Adrian's fund",
+      description: "I need help with my project",
+    },
+    {
+      type: "Charity",
+      title: "Adrian's fund",
+      description: "I need help with my project",
+    },
+    {
+      type: "Charity",
+      title: "Adrian's fund",
+      description: "I need help with my project",
+    },
+    {
+      type: "Project",
+      title: "Adrian's fund",
+      description: "I need help with my project",
+    },
+
+    {
+      type: "Charity",
+      title: "Adrian's fund",
+      description: "I need help with my project",
+    },
+    {
+      type: "Project",
+      title: "Adrian's fund",
+      description: "I need help with my project",
+    },
+  ];
+  return (
+    <div className="container mx-auto p-6 min-h-screen">
+      <h1 className="text-4xl font-bold mb-6 flex items-center">
+        Latest Funds
+        <span className="ml-2 text-yellow-400">&#x2728;</span>
+      </h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-6 md:gap-x-[138px] md:gap-y-[84px]">
+        {funds.map((fund, index) => (
+          <FundCards key={index} fund={fund} index={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

frontend/gostarkme-web/app/page.tsx

@@ -5,22 +5,25 @@ import { WelcomeItems } from "@/components/welcomepage/WelcomeItems";
 import Footer from "@/components/ui/Footer";
 import Image from "next/image";
 import { StardustAnimation } from "@/animations/StardustAnimation";
+import useComponentSize from "@/hooks/useComponentSize.hook";
 
 export default function Home() {
   const ROOT = process.env.NEXT_PUBLIC_APP_ROOT;
-
+
+  const [ref, width, height] = useComponentSize();
+
   return (
-    <main className="flex min-h-screen w-full flex-col items-center">
+    <main className="flex min-h-screen w-full flex-col items-center" >
       <WelcomeBar />
+      <div className="w-full max-w-screen-2xl relative" ref={ref}>
       <section className="w-full max-w-screen-2xl grid grid-cols-1 md:grid-cols-2 p-10">
         <div className="justify-self-center flex flex-col  justify-center items-center md:items-start gap-4 p-4">
           <h1 className="text-4xl font-bold">Upload your cause</h1>
           <WelcomeItems text="Give it a name." src={ROOT + "icons/user.png"} />
           <WelcomeItems text="Give a good purpose." src={ROOT + "icons/target.png"} />
           <WelcomeItems text="Recollect Stars." src={ROOT + "icons/star.png"} />
           <WelcomeItems text="Receive donations." src={ROOT + "icons/starklogo.png"} />
-        </div>
-        <StardustAnimation />
+        </div>       
         <Image
           src={ROOT + "images/starcard.png"}
           alt="stark logo"
@@ -29,7 +32,8 @@ export default function Home() {
           className="self-center justify-self-center w-2/3 max-w-80 rounded-2xl"
         />
       </section>
-
+      <StardustAnimation height={height} width={width} />
+      </div>
       <section className="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-1.5 p-4 m-10">
         {/* <!-- Card 1 --> */}
         <div className="flex flex-col gap-y-6 p-8 md:p-12 shadow-md bg-gray-100 grow-0 shrink-0 md:basis-1/2">

frontend/gostarkme-web/components/dashboard/fundCard.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { StardustAnimation } from "@/animations/StardustAnimation";
+import useComponentSize from "@/hooks/useComponentSize.hook";
+import React from "react";
+
+interface FundCardProps {
+  fund: {
+    type: string;
+    title: string;
+    description: string;
+  };
+  index: number;
+}
+
+const FundCards = ({ fund, index }: FundCardProps) => {
+  const [ref, width, height] = useComponentSize();
+  return (
+    <div className="relative" ref={ref}>
+      <div
+        key={index}
+        className="bg-gray-950 shadow-[0px_4px_4px_0px_#00000040] text-white rounded-[10px] py-[32px] px-[24px] md:py-[48px] md:px-[48px] lg:py-[64px] lg:px-[72px] gap-8 md:gap-10 lg:gap-14 flex flex-col items-start justify-between"
+      >
+        <div className="flex flex-col items-start justify-between gap-4 md:gap-6">
+          <p className=" text-sm md:text-base lg:text-lg text-white font-light leading-[22px] md:leading-[25px] lg:leading-[27.6px]">
+            {fund.type} {fund.type === "Project" ? <span>&#x1f680;</span> : <span>&#x1FAC0;</span>}
+          </p>
+          <h1 className="text-xl md:text-2xl lg:text-[40px] font-bold">
+            {fund.title}
+          </h1>
+        </div>
+        <div>
+          <p className="text-lg md:text-2xl lg:text-4xl text-white">
+            {fund.description}
+          </p>
+        </div>
+        <StardustAnimation height={height} width={width} />
+      </div>
+    </div>
+  );
+};
+
+export default FundCards;

frontend/gostarkme-web/hooks/useComponentSize.hook.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect, useRef, RefObject } from "react";
+
+/**
+ * Hook to get the size of a component
+ * @description This hook is used to get the size of a specific component.
+ * @param initialWidth - The initial width of the component
+ * @param initialHeight - The initial height of the component
+ * @returns The size of the component
+ */
+
+const useComponentSize = (
+  initialWidth: number = 1200,
+  initialHeight: number = 500
+): [RefObject<HTMLDivElement>, number, number] => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState<number>(initialWidth);
+  const [height, setHeight] = useState<number>(initialHeight);
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      setWidth(entries[0].contentRect.width);
+      setHeight(entries[0].contentRect.height);
+    });
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ref.current && observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return [ref, width, height] as const;
+};
+
+export default useComponentSize;