Atualização do Frontend para suportar multiplas páginas e correções aplicados do NPM ao projeto

This commit is contained in:
2026-04-10 14:32:04 -03:00
parent 06ebc5adfc
commit f1ab30161f
9 changed files with 307 additions and 176 deletions
+17 -75
View File
@@ -1,77 +1,19 @@
function App() {
return (
<>
<main class="dark:bg-gray-800 bg-white relative overflow-hidden h-screen">
<header class="h-24 sm:h-32 flex items-center z-30 w-full">
<div class="container mx-auto px-6 flex items-center justify-between">
<div class="uppercase text-gray-800 dark:text-white font-black text-3xl">
Watch.ME
</div>
<div class="flex items-center">
<nav class="font-sen text-gray-800 dark:text-white uppercase text-lg lg:flex items-center hidden">
<a href="#" class="py-2 px-6 flex">
Home
</a>
<a href="#" class="py-2 px-6 flex">
Watch
</a>
<a href="#" class="py-2 px-6 flex">
Product
</a>
<a href="#" class="py-2 px-6 flex">
Contact
</a>
<a href="#" class="py-2 px-6 flex">
Carrer
</a>
</nav>
<button class="lg:hidden flex flex-col ml-4">
<span class="w-6 h-1 bg-gray-800 dark:bg-white mb-1"></span>
<span class="w-6 h-1 bg-gray-800 dark:bg-white mb-1"></span>
<span class="w-6 h-1 bg-gray-800 dark:bg-white mb-1"></span>
</button>
</div>
</div>
</header>
<div class="bg-white dark:bg-gray-800 flex relative z-20 items-center overflow-hidden">
<div class="container mx-auto px-6 flex relative py-16">
<div class="sm:w-2/3 lg:w-2/5 flex flex-col relative z-20">
<span class="w-20 h-2 bg-gray-800 dark:bg-white mb-12"></span>
<h1 class="font-bebas-neue uppercase text-6xl sm:text-8xl font-black flex flex-col leading-none dark:text-white text-gray-800">
Be on
<span class="text-5xl sm:text-7xl">Time</span>
</h1>
<p class="text-sm sm:text-base text-gray-700 dark:text-white">
Dimension of reality that makes change possible and
understandable. An indefinite and homogeneous environment in
which natural events and human existence take place.
</p>
<div class="flex mt-8">
<a
href="#"
class="uppercase py-2 px-4 rounded-lg bg-pink-500 border-2 border-transparent text-white text-md mr-4 hover:bg-pink-400"
>
Get started
</a>
<a
href="#"
class="uppercase py-2 px-4 rounded-lg bg-transparent border-2 border-pink-500 text-pink-500 dark:text-white hover:bg-pink-500 hover:text-white text-md"
>
Read more
</a>
</div>
</div>
<div class="hidden sm:block sm:w-1/3 lg:w-3/5 relative">
<img
src="https://www.tailwind-kit.com/images/object/10.png"
class="max-w-xs md:max-w-sm m-auto"
/>
</div>
</div>
</div>
</main>
</>
);
}
import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/home";
import Login from "./pages/login";
import About from "./pages/about";
import Header from "./components/header";
const App = () => (
<div style={{ textAlign: "center" }}>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
);
export default App;