Tools layout, incluida libreria masonry

app/sass/main.scss

@@ -16,6 +16,22 @@
   @apply border-2 border-primary; // no funciona :( <-- funciona en el globals.scss though
 }
 
+// PRUEBA GRID, BORRAR
+
+.board-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 300px);
+  grid-auto-rows: 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 16px;
+}
+
+.card {
+  grid-row-end: span 10;
+  margin-bottom: 10px;
+}
+
+
 /* ==========================================================================
     VARIABLES
    ========================================================================== */
@@ -672,14 +688,6 @@ main {
  ========================================================================== */
 
 .tools {
-  @apply bg-white;
-
-  main {
-    padding: 5rem 0 0 0;
-    // margin: 8rem 4rem 0 4rem;
-    margin-bottom: $spacing_lg;
-  }
-
   .nav_bar {
     background-color: inherit;
     color: inherit;
@@ -742,8 +750,8 @@ main {
         .tool_logo {
           width: 10%;
           margin: 0.8rem 0 0 0;
-          filter: brightness(0) invert(1);
-          -webkit-filter: brightness(0) invert(1);
+          filter: brightness(0);
+          -webkit-filter: brightness(0) ;
 
           img {
             object-fit: contain;
@@ -1598,12 +1606,7 @@ RESPONSIVE
             }
           }
 
-          .tool_logo {
-            width: 40%;
-            padding-bottom: 2rem;
-            align-self: center;
-          }
-
+
           .tool_description {
             width: 140%;
 

app/sass/partials/_tools.sass

@@ -0,0 +1,9 @@
+@import "../lib/_variables.sass"
+@import "../lib/_mixins.sass"
+
+//media queries
+    .tool_logo {
+            width: 40%;
+            padding-bottom: 2rem;
+            align-self: center;
+          }

app/tools/page.jsx

@@ -0,0 +1,77 @@
+"use client"
+
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import React from "react"
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
+import Link from 'next/link';
+import image from 'next/image';
+import { useState, useEffect } from 'react';
+import { mytools } from "@/constants/tools";
+
+export default function Tools(props) {
+
+  const [tools, setTools] = useState(mytools);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <div className="tools">
+      <Header route="/tools" />
+      <div className="banner">
+        <h1>Tools</h1>
+      </div>
+      <main>
+
+        <section className="our_tools lg:mx-36 md:mx-14 sm:mx-8 mx-4 lg:my-12 md:my-8 sm:my-4">
+
+          <ResponsiveMasonry
+            columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
+          >
+          <Masonry gutter="24px">
+
+            {tools.map(({ title, description, route, logo }) => {
+              return (<div>
+                <div class="w-full">
+                  <div className="tool_logo">
+                    <img alt={"Project Logo"} src={logo} style={{ height: '50px' }} />
+                  </div>
+                </div>
+                <div class="block justify-between">
+                  <div className="tool_title">
+                    <h2>{title}</h2>
+                  </div>
+                  <div className="tool_description">
+                    <p>{description}</p>
+                  </div>
+                </div>
+                <CreateLink route={route}>BOTON LINK</CreateLink>
+
+
+              </div>
+
+              );
+            })}
+          </Masonry>
+          </ResponsiveMasonry>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  )
+
+
+}
+const CreateLink = (props) => {
+  return props.route.match("http") ? (
+    <a target="_blank" href={props.route} rel="noopener noreferrer">
+      {props.children}
+    </a>
+  ) : (
+    <Link to={props.route}>
+      {props.children}
+    </Link>
+  );
+}

package.json

@@ -20,7 +20,8 @@
     "next": "14.1.0",
     "react": "^18",
     "react-bootstrap": "^2.10.0",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-responsive-masonry": "^2.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",