Merge pull request #66 from adrianvrj/feat-stardust-animation

[feat] adding stardust animation on main page

frontend/gostarkme-web/animations/StardustAnimation.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from 'react';
+
+export const StardustAnimation = () => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (canvas == null) return;
+      const ctx = canvas.getContext('2d');
+      if (ctx == null) return;
+      let animationFrameId: number;
+
+      // Set canvas size
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      // Create stars
+      const stars: { x: number; y: number; size: number; speed: number; }[] = [];
+      for (let i = 0; i < 200; i++) {
+        stars.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          size: Math.random() * 2.5,
+          speed: Math.random() * 0.5 + 0.2,
+        });
+      }
+
+      // Animation function
+      const animate = () => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'gray';
+
+        stars.forEach((star) => {
+          ctx.beginPath();
+          ctx.arc(star.x, star.y, star.size, 0, 2 * Math.PI);
+          ctx.fill();
+
+          // Move star
+          star.y += star.speed;
+
+          // Reset star position if it goes off screen
+          if (star.y > canvas.height) {
+            star.y = 0;
+            star.x = Math.random() * canvas.width;
+          }
+        });
+
+        animationFrameId = requestAnimationFrame(animate);
+      };
+
+      animate();
+
+      // Clean up
+      return () => {
+        cancelAnimationFrame(animationFrameId);
+      };
+    }, []);
+
+    return <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full" />;
+  };

frontend/gostarkme-web/app/page.tsx

@@ -1,25 +1,27 @@
+'use client'
 import { LinkButton } from "@/components/ui/LinkButton";
 import { WelcomeBar } from "@/components/welcomepage/WelcomeBar";
 import { WelcomeItems } from "@/components/welcomepage/WelcomeItems";
 import Image from "next/image";
-import dotenv from 'dotenv';
+import { StardustAnimation } from "@/animations/StardustAnimation";
+
 export default function Home() {
-  dotenv.config();
-  const ROOT = process.env.ROOT;
+  const ROOT = process.env.NEXT_PUBLIC_APP_ROOT;
+
   return (
     <main className="flex min-h-screen w-full flex-col items-center">
       <WelcomeBar />
       <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"} />
+          <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 />
         <Image
-          src={ROOT + "/images/starcard.png"}
+          src={ROOT + "images/starcard.png"}
           alt="stark logo"
           height={771}
           width={450}

frontend/gostarkme-web/components/welcomepage/WelcomeBar.tsx

@@ -1,17 +1,15 @@
 import Image from "next/image";
 import { LinkButton } from "../ui/LinkButton";
-import dotenv from 'dotenv'; 
 
 export const WelcomeBar = () => {
-  dotenv.config();
-  const ROOT = process.env.ROOT; 
+  const ROOT = process.env.NEXT_PUBLIC_APP_ROOT; 
   return (
     <nav className="sticky bg-white top-0 w-full z-20 border-b-[1px] border-darkblue m-2">
       <div className="max-w-screen-2xl mx-auto w-full p-4 flex flex-col md:flex-row items-center justify-between">
         <span className="w-20 md:w-28" />
         <div className="flex flex-col md:flex-row items-center gap-2 md:gap-4">
           <Image
-            src={ROOT +"/icons/starklogo.png"}
+            src={ROOT +"icons/starklogo.png"}
             alt="stark logo"
             width={24}
             height={24}