Pagina principal y cambio de logo

Author: Nicolas Orieta

package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +35,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.6"
   }
 }

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -1,23 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { Hero } from "./components/Hero";
+import { Navbar } from "./components/Navbar";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Navbar/>
+      <Hero/>
     </div>
   );
 }

src/App.css

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const Hero = () => {
+  return (
+    <div>
+        <h1 className='text-white'>hola</h1>
+    </div>
+  )
+}
+

src/App.js

@@ -0,0 +1,39 @@
+import React, {useState} from 'react';
+import {AiOutlineMenu , AiOutlineClose } from 'react-icons/ai';
+
+export const Navbar = () => {
+
+    const [nav, setNav] = useState(false)
+
+    const handleNav = () => {
+        setNav(!nav)
+    }
+
+  return (
+    <div className='flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white'>
+        <h1 className='w-full text-3xl font-bold text-[#00df9a]'>REACT.</h1>
+        <ul className='hidden md:flex font-semibold'>
+            <li className='p-4'>Home</li>
+            <li className='p-4'>Compania</li>
+            <li className='p-4'>Recursos</li>
+            <li className='p-4'>Nosotros</li>
+            <li className='p-4'>Contacto</li>
+        </ul>
+        <div onClick={handleNav} className='block md:hidden'>
+            {!nav ? <AiOutlineClose size={20}/> : <AiOutlineMenu size={20}/>}
+        </div>
+        <div className={!nav ? 'fixed left-0 top-0 w-[60%] h-full backdrop-blur-xl border-r border-r-gray-600 duration-500' : 'fixed left-[-100%] top-0 h-full w-[60%] duration-500'}>
+
+            <h1 className='w-full text-3xl font-bold text-[#00df9a] mx-4 my-[30px]'>REACT.</h1>
+
+            <ul className='p-4 font-semibold'>
+                <li className='p-4 border-b border-gray-600'>Home</li>
+                <li className='p-4 border-b border-gray-600'>Compania</li>
+                <li className='p-4 border-b border-gray-600'>Recursos</li>
+                <li className='p-4 border-b border-gray-600'>Nosotros</li>
+                <li className='p-4'>Contacto</li>
+            </ul>
+        </div>
+    </div>
+  )
+}

src/App.test.js

@@ -1,13 +1,7 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+body {
+  background-color: #000300;
 }

src/components/Hero.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -11,7 +11,3 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();