refactored folders structures and nomenclature standarsization, also …

…iniciated build in login component

package.json

@@ -14,6 +14,7 @@
     "postcss": "^8.4.37",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,11 +1,16 @@
-import { Cadastro } from "./components/Cadastro";
-import { Login } from "./components/Login";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Home from "./pages/Home";
+import Registration from "./pages/Registration";
+import Login from "./pages/Login";
 
 export default function App() {
   return (
-    <>
-      <Login />
-      <Cadastro />
-    </>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/signin" element={<Login />} />
+        <Route path="/sign-up" element={<Registration />} />
+      </Routes>
+    </BrowserRouter>
   );
 }

src/pages/Home/index.tsx

@@ -0,0 +1,7 @@
+const Home = () => {
+    return (
+        <h1>Home do site!</h1>
+    )
+}
+
+export default Home;

src/pages/Login/index.tsx

@@ -0,0 +1,89 @@
+const Login = () => {
+  return (
+    <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+        <img
+          className="mx-auto h-10 w-auto"
+          src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+          alt="Your Company"
+        />
+        <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+          Sign in to your account
+        </h2>
+      </div>
+
+      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+        <form className="space-y-6" action="#" method="POST">
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium leading-6 text-gray-900"
+            >
+              Email address
+            </label>
+            <div className="mt-2">
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between">
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium leading-6 text-gray-900"
+              >
+                Password
+              </label>
+              <div className="text-sm">
+                <a
+                  href="#"
+                  className="font-semibold text-indigo-600 hover:text-indigo-500"
+                >
+                  Forgot password?
+                </a>
+              </div>
+            </div>
+            <div className="mt-2">
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Sign in
+            </button>
+          </div>
+        </form>
+
+        <p className="mt-10 text-center text-sm text-gray-500">
+          Not a member?
+          <a
+            href="#"
+            className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+          >
+            Start a 14 day free trial
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/components/Cadastro/index.tsx → src/pages/Registration/index.tsx

@@ -1,4 +1,4 @@
-export const Cadastro = () => {
+const Registration = () => {
   return (
     <>
       <div className="flex bg-grey m-12 p-4 box-content h-[789px] w-[1017px] rounded-xl">
@@ -67,3 +67,5 @@ export const Cadastro = () => {
     </>
   );
 };
+
+export default Registration;

tailwind.config.js

@@ -1,7 +1,7 @@
 export default {
     content: [
       "./index.html",
-      "./src/**/*.tsx",
+      "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {
@@ -15,5 +15,5 @@ export default {
         }
       },
     },
-    plugins: [],
+    plugins: [('@tailwindcss/forms')],
   }