Merge branch dev -> homolog - Criado Automatico

src/features/home/pages/home-page.tsx

@@ -131,7 +131,7 @@ const owners = [
   {
     name: 'Júlia Galhardi Cerqueira',
     image: 'https://d1b8zs4rmj3xdl.cloudfront.net/julia.jpeg',
-    role: 'Estagiária',
+    role: 'Estagiária de Implementação e Suporte na Bastos Tecnologia',
     linkedin: 'https://www.linkedin.com/in/j%C3%BAliacerqueira/'
   },
   {
@@ -223,7 +223,7 @@ export function HomePage() {
       <Layout className="space-y-32 md:space-y-0">
         <motion.section
           id="home"
-          className="flex h-screen max-w-4/5 flex-col items-center justify-center gap-8 sm:max-w-none"
+          className="flex h-screen max-w-4/5 flex-col items-center justify-center gap-8 pt-32 sm:max-w-none sm:pt-0"
           initial="hidden"
           whileInView="visible"
           transition={{ staggerChildren: 0.04 }}

src/features/playground/pages/playground.tsx

@@ -161,7 +161,7 @@ export function PlaygroundPage() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
-            className="mx-auto flex h-full max-h-full w-full flex-col pl-24"
+            className="mx-auto flex h-full max-h-full w-full flex-col sm:pl-24"
           >
             {/* Header */}
             <div className="mb-4 flex-shrink-0">

src/features/user-area/pages/create-base-pipeline.tsx

@@ -354,7 +354,7 @@ export function CreateBasePipeline() {
   return (
     <Background className="justify-start">
       <Layout className="h-full w-full pt-28">
-        <main className="flex flex-col p-6 md:p-12">
+        <main className="flex flex-col p-6 pb-24 md:p-12 md:pb-12">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}

src/features/user-area/pages/create-base.tsx

@@ -78,7 +78,7 @@ export function CreateBase() {
   return (
     <Background className="justify-start">
       <Layout className="h-full w-full pt-28">
-        <main className="flex flex-col p-6 md:p-12">
+        <main className="flex flex-col p-6 pb-24 md:p-12 md:pb-12">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}

src/features/user-area/pages/user-info.tsx

@@ -117,7 +117,7 @@ export function UserInfoPage() {
   return (
     <Background>
       <Layout className="h-full w-full">
-        <main className="flex flex-col items-center justify-center p-12">
+        <main className="flex flex-col items-center justify-center p-6 pb-24 md:p-12 md:pb-12">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}

src/shared/components/layout.tsx

@@ -8,7 +8,7 @@ export function Layout({ children, className, ...props }: LayoutProps) {
   return (
     <div
       className={cn(
-        'flex w-5/6 max-w-[1920px] flex-col items-center justify-center',
+        'flex w-5/6 max-w-[1920px] flex-col items-center justify-center pb-20 md:pb-0',
         className
       )}
       {...props}

src/shared/components/page-with-sidebar.tsx

@@ -7,7 +7,11 @@ import { UserProvider } from '@/shared/contexts/user-context'
 export function PageWithSidebar() {
   return (
     <UserProvider>
-      <Toaster position="bottom-right" reverseOrder={false} />
+      <Toaster
+        position="bottom-right"
+        reverseOrder={false}
+        containerClassName="mb-16 md:mb-0"
+      />
       <Navbar />
       <Sidebar />
       <Outlet />

src/shared/components/sidebar.tsx

@@ -12,7 +12,7 @@ export type SidebarItem = {
 
 const items: SidebarItem[] = [
   { label: 'Dados de cadastro', icon: <User />, key: 'user' },
-  { label: 'Minhas bases', icon: <BrainCircuit />, key: 'bases' },
+  { label: 'Bases', icon: <BrainCircuit />, key: 'bases' },
   { label: 'Assinatura', icon: <Wallet />, key: 'subscription' }
 ]
 
@@ -45,58 +45,96 @@ export function Sidebar() {
   }
 
   return (
-    <motion.aside
-      className={`bg-background fixed z-10 flex h-full flex-col justify-between border-r-[1px] border-gray-100/20 px-4 py-8 pt-24 transition-all duration-300 ${
-        isCollapsed ? 'w-20' : 'w-96'
-      }`}
-      initial="hidden"
-      whileInView="visible"
-      transition={{ staggerChildren: 0.04 }}
-    >
-      {/* Botão para toggle da sidebar */}
-      <div className="flex flex-col justify-center gap-4">
-        <motion.div transition={transition} variants={variants}>
-          <Button
-            variant="ghost"
-            className="hover:bg-muted/50 text-foreground self-start"
-            onClick={toggleSidebar}
-          >
-            <Menu />
-          </Button>
-        </motion.div>
-
-        <motion.nav className="flex flex-col gap-2">
-          {items.map((item) => (
-            <motion.button
-              key={item.key}
-              className={`flex items-center gap-3 rounded-lg font-medium transition-colors ${
-                selected === item.key
-                  ? 'bg-primary/10 text-primary'
-                  : 'hover:bg-muted/50 text-foreground/80'
-              } ${isCollapsed ? 'justify-center px-2 py-3' : 'px-4 py-3'}`}
-              onClick={() => handleNavigation(item.key)}
-              title={isCollapsed ? item.label : undefined}
-              transition={transition}
-              variants={variants}
+    <>
+      {/* Desktop Sidebar */}
+      <motion.aside
+        className={`bg-background fixed z-10 hidden h-full flex-col justify-between border-r-[1px] border-gray-100/20 px-4 py-8 pt-24 transition-all duration-300 md:flex ${
+          isCollapsed ? 'w-20' : 'w-96'
+        }`}
+        initial="hidden"
+        whileInView="visible"
+        transition={{ staggerChildren: 0.04 }}
+      >
+        {/* Botão para toggle da sidebar */}
+        <div className="flex flex-col justify-center gap-4">
+          <motion.div transition={transition} variants={variants}>
+            <Button
+              variant="ghost"
+              className="hover:bg-muted/50 text-foreground self-start"
+              onClick={toggleSidebar}
             >
-              {item.icon}
-              {!isCollapsed && item.label}
-            </motion.button>
-          ))}
-        </motion.nav>
-      </div>
+              <Menu />
+            </Button>
+          </motion.div>
 
-      <Button
-        variant="ghost"
-        className={`hover:bg-muted/50 flex items-center text-red-600 ${
-          isCollapsed ? 'justify-center px-2 py-3' : 'gap-2 px-4 py-3'
-        }`}
-        onClick={handleLogout}
-        title={isCollapsed ? 'Sair' : undefined}
+          <motion.nav className="flex flex-col gap-2">
+            {items.map((item) => (
+              <motion.button
+                key={item.key}
+                className={`flex items-center gap-3 rounded-lg font-medium transition-colors ${
+                  selected === item.key
+                    ? 'bg-primary/10 text-primary'
+                    : 'hover:bg-muted/50 text-foreground/80'
+                } ${isCollapsed ? 'justify-center px-2 py-3' : 'px-4 py-3'}`}
+                onClick={() => handleNavigation(item.key)}
+                title={isCollapsed ? item.label : undefined}
+                transition={transition}
+                variants={variants}
+              >
+                {item.icon}
+                {!isCollapsed && item.label}
+              </motion.button>
+            ))}
+          </motion.nav>
+        </div>
+
+        <Button
+          variant="ghost"
+          className={`hover:bg-muted/50 flex items-center text-red-600 ${
+            isCollapsed ? 'justify-center px-2 py-3' : 'gap-2 px-4 py-3'
+          }`}
+          onClick={handleLogout}
+          title={isCollapsed ? 'Sair' : undefined}
+        >
+          <LogOut className="h-5 w-5" />
+          {!isCollapsed && 'Sair'}
+        </Button>
+      </motion.aside>
+
+      {/* Mobile Bottom Navigation */}
+      <motion.nav
+        className="bg-background/95 fixed right-0 bottom-0 left-0 z-10 flex items-center justify-around border-t border-gray-100/20 px-4 py-3 backdrop-blur-lg md:hidden"
+        initial="hidden"
+        whileInView="visible"
+        transition={{ staggerChildren: 0.04 }}
       >
-        <LogOut className="h-5 w-5" />
-        {!isCollapsed && 'Sair'}
-      </Button>
-    </motion.aside>
+        {items.map((item) => (
+          <motion.button
+            key={item.key}
+            className={`flex flex-col items-center gap-1 rounded-lg px-4 py-2 font-medium transition-colors ${
+              selected === item.key
+                ? 'text-primary'
+                : 'text-foreground/60 hover:text-foreground'
+            }`}
+            onClick={() => handleNavigation(item.key)}
+            transition={transition}
+            variants={variants}
+          >
+            <span className="text-xl">{item.icon}</span>
+            <span className="text-xs">{item.label.split(' ')[0]}</span>
+          </motion.button>
+        ))}
+
+        <motion.button
+          className="flex flex-col items-center gap-1 rounded-lg px-4 py-2 font-medium text-red-600 transition-colors hover:text-red-700"
+          onClick={handleLogout}
+          transition={transition}
+          variants={variants}
+        >
+          <LogOut className="h-5 w-5" />
+          <span className="text-xs">Sair</span>
+        </motion.button>
+      </motion.nav>
+    </>
   )
 }