Add new components into Home (#14)

* Add function Navbar

* 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

* chore: format code

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,27 @@
+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,30 @@
+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,7 +1,10 @@
+import Layout from '../components/Layout-Home';
+import Navbar from '../components/Navbar';
 export default function Home() {
   return (
     <>
-      <h1 className="text-black text-4xl">Home</h1>
+      <Navbar />
+      <Layout />
     </>
   );
 }