move particlemap to hero; lazy load it

Author: alechdev

apps/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "private": true,
   "type": "module",
   "scripts": {

apps/frontend/src/components/homepage/landing-hero.tsx

@@ -1,9 +1,12 @@
 import { ArrowUpRightIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import { motion } from "motion/react";
-import { useId } from "react";
+import { Suspense, lazy, useId } from "react";
 
 import { buttonVariants } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const ParticlesMap = lazy(() => import("@/components/homepage/particles-map"));
 
 export function LandingHero() {
   const patternId = useId();
@@ -89,6 +92,23 @@ export function LandingHero() {
             </Link>
           </motion.div>
         </motion.div>
+
+        <div className="relative hidden min-h-[360px] overflow-visible pt-14 lg:block">
+          <div className="absolute inset-0">
+            <Suspense
+              fallback={
+                <div className="flex h-full items-center justify-center px-6 py-2">
+                  <Skeleton className="aspect-square w-full max-w-[520px] rounded-3xl" />
+                </div>
+              }>
+              <ParticlesMap
+                interactive
+                className="h-full items-end justify-end p-0 pt-10"
+                canvasClassName="h-auto w-full max-w-[520px] opacity-65 lg:translate-y-8 xl:translate-y-16 [mask-image:radial-gradient(circle_at_45%_50%,black_45%,transparent_82%)]"
+              />
+            </Suspense>
+          </div>
+        </div>
       </div>
     </section>
   );

apps/frontend/src/components/homepage/particles-map.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback, useEffect, useRef } from "react";
 
 import mapData from "@/data/costa_rica.json";
+import { cn } from "@/lib/utils";
 
 import type React from "react";
 
@@ -16,7 +17,13 @@ interface ParticleOrigin {
   y: number;
 }
 
-function ParticlesMap() {
+interface ParticlesMapProps {
+  className?: string;
+  canvasClassName?: string;
+  interactive?: boolean;
+}
+
+function ParticlesMap({ className, canvasClassName, interactive = true }: ParticlesMapProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const animationRef = useRef<number | undefined>(undefined);
   const mouseRef = useRef({ x: -1000, y: -1000 });
@@ -220,23 +227,39 @@ function ParticlesMap() {
   };
 
   return (
-    <div className="flex w-full items-center justify-center p-8">
+    <div className={cn("flex w-full items-center justify-center p-8", className)}>
       <canvas
         ref={canvasRef}
-        onMouseMove={handleMouseMove}
-        onMouseDown={() => {
-          isMouseDownRef.current = true;
-        }}
-        onMouseUp={() => {
-          isMouseDownRef.current = false;
-        }}
-        onMouseLeave={() => {
-          isMouseDownRef.current = false;
-        }}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-        className="w-full max-w-[600px]"
+        onMouseMove={interactive ? handleMouseMove : undefined}
+        onMouseDown={
+          interactive
+            ? () => {
+                isMouseDownRef.current = true;
+              }
+            : undefined
+        }
+        onMouseUp={
+          interactive
+            ? () => {
+                isMouseDownRef.current = false;
+              }
+            : undefined
+        }
+        onMouseLeave={
+          interactive
+            ? () => {
+                isMouseDownRef.current = false;
+              }
+            : undefined
+        }
+        onTouchStart={interactive ? handleTouchStart : undefined}
+        onTouchMove={interactive ? handleTouchMove : undefined}
+        onTouchEnd={interactive ? handleTouchEnd : undefined}
+        className={cn(
+          "w-full max-w-[600px]",
+          !interactive && "pointer-events-none",
+          canvasClassName
+        )}
         style={{ aspectRatio: "600/600", touchAction: "none" }}
       />
     </div>

apps/frontend/src/routes/_dashboard/index.tsx

@@ -1,5 +1,4 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Suspense, lazy } from "react";
 import { z } from "zod";
 
 import { AnnualRecapSection } from "@/components/homepage/annual-recap-section";
@@ -8,11 +7,8 @@ import { HighlightedIncidents } from "@/components/homepage/highlighted-incident
 import { IncidentTypesChart } from "@/components/homepage/incident-types-chart";
 import { LandingHero } from "@/components/homepage/landing-hero";
 import { LatestIncidents } from "@/components/homepage/latest-incidents";
-// import { MapCTA } from "@/components/homepage/map-cta";
 import { Separator } from "@/components/homepage/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-
-const ParticlesMap = lazy(() => import("@/components/homepage/particles-map"));
+// import { MapCTA } from "@/components/homepage/map-cta";
 
 const title = "Emergencias CR - Incidentes de Bomberos en Tiempo Real";
 const description =
@@ -66,14 +62,6 @@ function HomePage() {
       {/* <MapCTA /> */}
       <Separator />
       <IncidentTypesChart />
-      <Suspense
-        fallback={
-          <div className="flex w-full items-center justify-center p-8">
-            <Skeleton className="aspect-square w-full max-w-[600px]" />
-          </div>
-        }>
-        <ParticlesMap />
-      </Suspense>
     </div>
   );
 }