Add new components into Home

- Imported all new components in home.tsx file
- Add isotype and logotype in the navbar e Layout-Home
- New component of Button Outline
- Each function was placed in the components folder
- Two images were added referring to the visual identity of the Linx project (Isotype and Logo)
- The width size of the two previous images was changed to ensure good accessibility, behavior and coherence

client/src/components/Button-Outline.tsx

@@ -0,0 +1,29 @@
+import cn from 'classnames';
+import type { ReactNode } from 'react';
+
+export default function Button({
+  children,
+  type = 'button',
+  className,
+  onClick,
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className={cn(
+        'mt-4 px-4 py-2 border border-blue-500 text-blue-500 rounded hover:bg-blue-500 hover:text-white transition-colors',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface ButtonProps {
+  children: ReactNode;
+  type?: 'submit' | 'button';
+  className?: string;
+  onClick?: () => void;
+}

client/src/components/Layout-Home.tsx

@@ -0,0 +1,30 @@
+import ButtonOutline from "./Button-Outline";
+
+export default function Layout() {
+    return (
+      <section className="pb-12 pt-12">
+        <div className="flex flex-col md:flex-row items-center md:items-start">
+          <div className="p-2 md:w-1/2 mb-4 md:mb-0">
+            <img
+              className="w-full md:w-[500px] object-contain"
+              src="../../public/isotypeLinx.png"
+              alt="Isotype Linx"
+            />
+          </div>
+          <div className="p-2 md:pl-8">
+            <h1 className="text-slate-950 text-2xl font-bold mb-4">Linx</h1>
+            <p className="pb-2">
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat
+              error corrupti vitae incidunt totam blanditiis, voluptatem ratione
+              eius consequuntur qui. Quae laborum quasi assumenda ea autem beatae,
+              sed corrupti atque!
+            </p>
+            <ButtonOutline type="button">
+                Button
+            </ButtonOutline>
+          </div>
+        </div>
+      </section>
+    );
+  }
+

client/src/components/Navbar.tsx

@@ -0,0 +1,31 @@
+export default function Navbar() {
+    return (
+      <>
+        <nav className="p-4 border-b-2 border-blue-500">
+          <div className="container mx-auto flex justify-between items-center">
+            <div className="text-slate-950 text-2xl font-bold">
+            <img className="w-20" src="/logotypeLinx.png" alt="Logotype Linx" />
+            </div>
+            <ul className="flex space-x-4">
+              <li>
+                <a href="#product" className="text-slate-950 hover:text-blue-700">
+                  Product
+                </a>
+              </li>
+              <li>
+                <a href="#login" className="text-slate-950 hover:text-blue-700">
+                  Login
+                </a>
+              </li>
+              <li>
+                <a href="#signup" className="text-slate-950 hover:text-blue-700">
+                  Sign Up
+                </a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </>
+    );
+  }
+

client/src/pages/home.tsx

@@ -1,34 +1,10 @@
+import Navbar from '../components/Navbar'
+import Layout from '../components/Layout-Home'
 export default function Home() {
-  return (
-    <Navbar />
-  )
-}
-
-function Navbar() {
   return (
     <>
-      <nav className="p-4 border-b-2 border-blue-500">
-        <div className="container mx-auto flex justify-between items-center">
-          <div className="text-slate-950 text-2xl font-bold">Linx</div>
-          <ul className="flex space-x-4">
-            <li>
-              <a href="#product" className="text-slate-950 hover:text-blue-700">
-                Product
-              </a>
-            </li>
-            <li>
-              <a href="#login" className="text-slate-950 hover:text-blue-700">
-                Login
-              </a>
-            </li>
-            <li>
-              <a href="#signup" className="text-slate-950 hover:text-blue-700">
-                Sign Up
-              </a>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      <Navbar />
+      <Layout />
     </>
-  );
+  )
 }