diff --git a/webapp/src/components/landing/PartnerSectionWithPhysics.tsx b/webapp/src/components/landing/PartnerSectionWithPhysics.tsx index d1823407..1abce3ae 100644 --- a/webapp/src/components/landing/PartnerSectionWithPhysics.tsx +++ b/webapp/src/components/landing/PartnerSectionWithPhysics.tsx @@ -17,6 +17,7 @@ import { IChamferableBodyDefinition, Mouse, MouseConstraint, + Query, Render, Runner, World, @@ -29,7 +30,7 @@ const partnersList = [ name: "Deezer", img: "/images/landing/partners/deezer.png", promo_label: "-50%", - imgHeight: 28, + imgHeight: { base: 20, lg: 28 }, }, { name: "AXA", @@ -185,6 +186,24 @@ const PartnerSectionWithPhysics = () => { }); World.add(engine.world, mouseConstraint); + // Handle cursor change on mouse over body + let mouseDown = false; + const isMouseOverBody = () => + Query.point( + partnerBodies.map(({ body }) => body), + mouse.position + ).length > 0; + + Events.on(engine, "beforeUpdate", () => { + if (isMouseOverBody()) { + canvas.style.cursor = mouseDown ? "grabbing" : "grab"; + } else { + canvas.style.cursor = "default"; + } + }); + Events.on(mouseConstraint, "mousedown", () => (mouseDown = true)); + Events.on(mouseConstraint, "mouseup", () => (mouseDown = false)); + // Update function for DOM position synced with matter-js bodies const update = () => { partnerBodies.forEach(({ body, element }) => { @@ -219,23 +238,25 @@ const PartnerSectionWithPhysics = () => { rounded="5xl" color={"white"} mt={isDesktop ? 0 : 20} + p={{ base: 8, lg: 44 }} > e.stopPropagation()} + pointerEvents={isDesktop ? "auto" : "none"} /> - - + + Une appli utile avec des réductions de grandes marques { passHref w={"fit-content"} zIndex={10} + userSelect={"none"} > Voir toutes les entreprises engagées → @@ -257,9 +279,9 @@ const PartnerSectionWithPhysics = () => { flex={1} flexDir="column" justify={"center"} - p={{ base: 8, lg: 44 }} - px={{ lg: 8 }} - pt={0} + align={{ base: "center", lg: "end" }} + p={8} + px={0} overflow="hidden" > {partnersList.map((partner, index) => ( @@ -268,17 +290,17 @@ const PartnerSectionWithPhysics = () => { flexDir={index % 2 === 0 ? "row" : "row-reverse"} align={"center"} justifyContent={{ base: "start", lg: "center" }} - mb={6} + mb={index < partnersList.length - 1 ? 8 : undefined} gap={4} - h={{ base: 14, lg: 14 }} + h={14} > { pointerEvents={"none"} userSelect={"none"} > - {partner.promo_label} + + {partner.promo_label} + ))}