navbar y Cards

FarmaStack-Grupo05 · Apr 25, 2023 · fb8081b · fb8081b
1 parent 0d51d46
commit fb8081b
Show file tree

Hide file tree

Showing 3 changed files with 262 additions and 8 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,16 +2,18 @@ import React from "react";
 import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import Footer from "./Components/Footer/Footer";
+import NavBar from "./Components/NavBar/NavBar";
+import Cards from "./Components/Cards/Cards";
 
 function App() {
-
-
-	return (
-		<>
-			<h1>Estoy en App.js</h1>
-			<Footer/>
-		</>
-	);
+  return (
+    <>
+      <NavBar />
+	  <Cards/>
+      <h1>Estoy en App.js</h1>
+      <Footer />
+    </>
+  );
 }
 
 export default App;
diff --git a/src/Components/Cards/Cards.jsx b/src/Components/Cards/Cards.jsx
@@ -0,0 +1,104 @@
+import React from "react";
+
+const Cards = () => {
+  return (
+    <>
+      <a href="#" className="block rounded-lg p-4 shadow-sm shadow-indigo-100">
+        <img
+          alt="Home"
+          src="https://images.unsplash.com/photo-1613545325278-f24b0cae1224?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
+          className="h-56 w-full rounded-md object-cover"
+        />
+
+        <div className="mt-2">
+          <dl>
+            <div>
+              <dt className="sr-only">Price</dt>
+
+              <dd className="text-sm text-gray-500">$240,000</dd>
+            </div>
+
+            <div>
+              <dt className="sr-only">Address</dt>
+
+              <dd className="font-medium">123 Wallaby Avenue, Park Road</dd>
+            </div>
+          </dl>
+
+          <div className="mt-6 flex items-center gap-8 text-xs">
+            <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
+              <svg
+                className="h-4 w-4 text-indigo-700"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"
+                />
+              </svg>
+
+              <div className="mt-1.5 sm:mt-0">
+                <p className="text-gray-500">Parking</p>
+
+                <p className="font-medium">2 spaces</p>
+              </div>
+            </div>
+
+            <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
+              <svg
+                className="h-4 w-4 text-indigo-700"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+                />
+              </svg>
+
+              <div className="mt-1.5 sm:mt-0">
+                <p className="text-gray-500">Bathroom</p>
+
+                <p className="font-medium">2 rooms</p>
+              </div>
+            </div>
+
+            <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
+              <svg
+                className="h-4 w-4 text-indigo-700"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                />
+              </svg>
+
+              <div className="mt-1.5 sm:mt-0">
+                <p className="text-gray-500">Bedroom</p>
+
+                <p className="font-medium">4 rooms</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a>
+    </>
+  );
+};
+
+export default Cards;
diff --git a/src/Components/NavBar/NavBar.jsx b/src/Components/NavBar/NavBar.jsx
@@ -0,0 +1,148 @@
+import React from "react";
+
+const NavBar = () => {
+  return (
+    <>
+      <header aria-label="Site Header" class="border-b border-gray-100">
+        <div class="mx-auto flex h-16 max-w-screen-2xl items-center justify-between sm:px-6 lg:px-8">
+          <div class="flex items-center gap-4">
+            <button type="button" class="p-2 lg:hidden">
+              <svg
+                class="h-6 w-6"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+
+            <a href="#" class="flex">
+              <span class="sr-only">Logo</span>
+              <span class="inline-block h-10 w-32 rounded-lg bg-gray-200"></span>
+            </a>
+          </div>
+
+          <div class="flex flex-1 items-center justify-end gap-8">
+            <nav
+              aria-label="Site Nav"
+              class="hidden lg:flex lg:gap-4 lg:text-xs lg:font-bold lg:uppercase lg:tracking-wide lg:text-gray-500"
+            >
+              <a
+                href="/about"
+                class="block h-16 border-b-4 border-transparent leading-[4rem] hover:border-current hover:text-red-700"
+              >
+                About
+              </a>
+
+              <a
+                href="/news"
+                class="block h-16 border-b-4 border-transparent leading-[4rem] hover:border-current hover:text-red-700"
+              >
+                News
+              </a>
+
+              <a
+                href="/products"
+                class="block h-16 border-b-4 border-transparent leading-[4rem] hover:border-current hover:text-red-700"
+              >
+                Products
+              </a>
+
+              <a
+                href="/contact"
+                class="block h-16 border-b-4 border-transparent leading-[4rem] hover:border-current hover:text-red-700"
+              >
+                Contact
+              </a>
+            </nav>
+
+            <div class="flex items-center">
+              <div class="flex items-center border-x border-gray-100">
+                <span class="border-e border-e-gray-100">
+                  <a
+                    href="/cart"
+                    class="grid h-16 w-16 place-content-center border-b-4 border-transparent hover:border-red-700"
+                  >
+                    <svg
+                      class="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+                      />
+                    </svg>
+
+                    <span class="sr-only">Cart</span>
+                  </a>
+                </span>
+
+                <span class="border-e border-e-gray-100">
+                  <a
+                    href="/account"
+                    class="grid h-16 w-16 place-content-center border-b-4 border-transparent hover:border-red-700"
+                  >
+                    <svg
+                      class="h-4 w-4"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                      />
+                    </svg>
+
+                    <span class="sr-only"> Account </span>
+                  </a>
+                </span>
+
+                <span class="hidden sm:block">
+                  <a
+                    href="/search"
+                    class="grid h-16 w-16 place-content-center border-b-4 border-transparent hover:border-red-700"
+                  >
+                    <svg
+                      class="h-4 w-4"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                      />
+                    </svg>
+
+                    <span class="sr-only"> Search </span>
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+    </>
+  );
+};
+
+export default NavBar;