Painel inicial

package.json

@@ -11,8 +11,12 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.0.6",
+    "framer-motion": "^12.4.3",
+    "lucide-react": "^0.475.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

src/App.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
+import HomePage from './components/HomePage'
 
 const App: React.FC = () => {
   return (
     <>
-      <h1>Hello</h1>
+      <HomePage />
     </>
   )
 }

src/components/HomePage.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react'
+import { Menu, X } from 'lucide-react'
+import { motion } from 'framer-motion'
+
+const HomePage: React.FC = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true)
+
+  return (
+    <div className="flex h-screen bg-gray-100">    
+      <motion.aside
+        initial={{ x: -250 }}
+        animate={{ x: isSidebarOpen ? 0 : -250 }}
+        transition={{ duration: 0.3, ease: 'easeInOut' }}
+        className="bg-gray-900 text-white w-64 p-4 h-full fixed shadow-lg"
+      >
+        <button
+          onClick={() => setIsSidebarOpen(false)}
+          className="mb-4 p-2 bg-gray-700 rounded-md hover:bg-gray-600 transition"
+        >
+          <X size={24} />
+        </button>
+        <ul>
+          <li className="p-2 hover:bg-gray-800 rounded-md transition">
+            Dashboard
+          </li>
+          <li className="p-2 hover:bg-gray-800 rounded-md transition">
+            Configurações
+          </li>
+          <li className="p-2 hover:bg-gray-800 rounded-md transition">
+            Perfil
+          </li>
+        </ul>
+      </motion.aside>
+
+      {/* Conteúdo Principal */}
+      <div className="flex-1 flex flex-col ml-64 transition-all duration-300">
+     
+        <nav className="bg-blue-600 text-white p-4 flex items-center shadow-md">
+          <button
+            onClick={() => setIsSidebarOpen(true)}
+            className="p-2 bg-blue-500 rounded-md hover:bg-blue-400 transition"
+          >
+            <Menu size={24} />
+          </button>
+          <h1 className="ml-4 text-lg font-bold">Meu App</h1>
+        </nav>
+
+        {/* Conteúdo */}
+        <main className="p-4 flex-1">Conteúdo principal aqui...</main>
+      </div>
+    </div>
+  )
+}
+
+export default HomePage

src/index.css

@@ -1,68 +1,20 @@
+@import 'tailwindcss';
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  background-color: rgb(84, 4, 131);
-  line-height: 1.5;
+  color:azure;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-a {
+*, 
-  font-weight: 500;
+*:after,
-  color: #646cff;
+*:before {
-  text-decoration: inherit;
+    margin: 0;
-}
+    padding: 0;
-a:hover {
+    box-sizing: border-box;
-  color: #535bf2;
+    text-decoration: none;
 }
 
 body{
-  margin: 0;
+    font-size: 100%;
-  display: flex;
+    list-style-type: none;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
 }

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })