feat: modify in the navbar and the others pages

Author: gustavo-lola

frontend/src/components/landing/HeroSection.tsx

@@ -71,7 +71,7 @@ export function HeroSection() {
             to="/app"
             className="group inline-flex items-center gap-2 bg-[#0c6b35] dark:bg-emerald-600 hover:bg-[#0a5a2d] dark:hover:bg-emerald-500 text-white font-semibold text-base py-3.5 px-8 rounded-full transition-all duration-300 shadow-lg shadow-emerald-500/20 hover:scale-[1.02]"
           >
-            Começar grátis
+            Comece Agora
             <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
           </Link>
           <a

frontend/src/components/landing/HowItWorks.tsx

@@ -3,19 +3,19 @@ import { motion } from "framer-motion";
 
 const steps = [
   {
-    number: "01",
+    number: "PASSO 01",
     title: "Configure seus filtros",
     description: "Defina suas tecnologias preferidas, nível de senioridade, modelo de trabalho e localização desejada.",
     icon: Settings,
   },
   {
-    number: "02",
+    number: "PASSO 02",
     title: "O robô busca por você",
     description: "Nosso scraper varre dezenas de plataformas automaticamente e coleta as vagas que combinam com seu perfil.",
     icon: Bot,
   },
   {
-    number: "03",
+    number: "PASSO 03",
     title: "Receba e candidate-se",
     description: "Visualize as vagas filtradas no dashboard, exporte relatórios e candidate-se com confiança.",
     icon: Rocket,
@@ -24,17 +24,18 @@ const steps = [
 
 export function HowItWorks() {
   return (
-    <section id="how-it-works" className="py-24 relative overflow-hidden bg-transparent">
+    <section id="how-it-works" className="py-24 relative overflow-hidden bg-transparent font-sans">
       <div className="max-w-6xl mx-auto px-6">
-        <div className="text-center mb-20">
+
+        <div className="text-center mb-24">
           <motion.h2
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: "-50px" }}
             transition={{ duration: 0.5 }}
-            className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4"
+            className="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 tracking-tight"
           >
-            Como funciona
+            Como funciona ?
           </motion.h2>
           <motion.p
             initial={{ opacity: 0, y: 20 }}
@@ -43,13 +44,13 @@ export function HowItWorks() {
             transition={{ duration: 0.5, delay: 0.1 }}
             className="text-gray-500 dark:text-gray-400 text-lg max-w-2xl mx-auto"
           >
-            Em apenas 3 passos, você está pronto para receber as melhores vagas
+            Em apenas 3 passos, você está pronto para receber as melhores vagas automaticamente.
           </motion.p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-0 relative">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-4 relative">
 
-          <div className="hidden md:block absolute top-[72px] left-[calc(16.66%+40px)] right-[calc(16.66%+40px)] h-px border-t-2 border-dashed border-emerald-200 dark:border-emerald-900/40" />
+          <div className="hidden md:block absolute top-[112px] left-[10%] right-[10%] h-[2px] bg-emerald-200 dark:bg-emerald-800/40" />
 
           {steps.map((step, idx) => (
             <motion.div
@@ -58,25 +59,27 @@ export function HowItWorks() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-50px" }}
               transition={{ duration: 0.5, delay: idx * 0.15, ease: "easeOut" }}
-              className="flex flex-col items-center text-center relative"
+              className="flex flex-col items-center text-center relative group"
             >
 
-              <span className="text-5xl font-bold dark:text-white text-black mb-4 select-none">
+              <div className="w-16 h-16 bg-white dark:bg-neutral-800 rounded-2xl flex items-center justify-center mb-8 shadow-md border border-gray-100 dark:border-neutral-700 relative z-10 transition-transform duration-300 group-hover:-translate-y-1">
+                <step.icon className="text-[#0c6b35] dark:text-emerald-400 w-6 h-6" />
+              </div>
+
+              <div className="hidden md:block w-3 h-3 bg-white dark:bg-neutral-900 border-2 border-emerald-500 rounded-full mb-6 relative z-10" />
+
+              <span className="text-xs font-bold tracking-widest text-emerald-600 dark:text-emerald-400 uppercase mb-3">
                 {step.number}
               </span>
 
-              <div className="w-16 h-16 bg-emerald-50 dark:bg-emerald-950/50 rounded-2xl flex items-center justify-center mb-6 relative z-10 ring-4 ring-white dark:ring-neutral-900">
-                <step.icon className="text-[#0c6b35] dark:text-emerald-400 w-7 h-7" />
-              </div>
-
-              {/* Title */}
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                 {step.title}
               </h3>
 
-              <p className="text-gray-500 dark:text-gray-400 leading-relaxed max-w-xs">
+              <p className="text-gray-500 dark:text-gray-400 text-sm leading-relaxed max-w-xs px-2">
                 {step.description}
               </p>
+
             </motion.div>
           ))}
         </div>

frontend/src/components/landing/Navbar.tsx

@@ -3,18 +3,36 @@ import { Link } from "react-router-dom";
 import {
   Menu, X, MessageSquare,
   Sparkles, Workflow, BadgeDollarSign, RadioTower, Sun, Moon,
+  User,
+  Users2,
 } from "lucide-react";
 import { useTheme } from "@/hooks/useTheme";
 
 const navLinks = [
   {
-    name: "Funcionalidades", href: "#features", sectionId: "features", icon: Sparkles
+    name: "Funcionalidades",
+    href: "/#features",
+    sectionId: "features",
+    icon: Sparkles
   },
   {
-    name: "Como Funciona", href: "#how-it-works", sectionId: "how-it-works", icon: Workflow
+    name: "Como Funciona",
+    href: "/#how-it-works",
+    sectionId: "how-it-works",
+    icon: Workflow
   },
   {
-    name: "Status", href: "#status", sectionId: "status", icon: RadioTower      },
+    name: "Pronto?",
+    href: "/#status",
+    sectionId: "pronto",
+    icon: RadioTower
+  },
+  {
+    name: "Time",
+    href: "/#time",
+    sectionId: "time",
+    icon: Users2,
+  }
 ];
 
 export function Navbar() {
@@ -75,13 +93,16 @@ export function Navbar() {
           : "opacity-0 -translate-y-full pointer-events-none"
       }`}
     >
-      <div className="flex items-center justify-between w-full h-11 px-3">
+      {/* Removeu o justify-between para os itens não se repelirem */}
+      <div className="flex items-center w-full h-11 px-4">
 
-        <Link to="/" className="flex font-bold items-center gap-2 shrink-0 dark:text-white text-black ">
+        {/* LOGO (Fica na esquerda) */}
+        <Link to="/" className="flex font-bold text-sm items-center gap-2 shrink-0 dark:text-white text-black">
           Painel de vagas
         </Link>
 
-        <div className="hidden md:flex items-center gap-1">
+        {/* LINKS CENTRALIZADOS (O mx-auto empurra o logo pra esquerda e as ações pra direita, mantendo o miolo junto) */}
+        <div className="hidden md:flex items-center gap-2 mx-auto bg-gray-50/50 dark:bg-neutral-900/30 px-2 py-1 rounded-full border border-gray-100 dark:border-neutral-800/50">
           {navLinks.map((link) => {
             const Icon     = link.icon;
             const isActive = activeSection === link.name;
@@ -90,7 +111,7 @@ export function Navbar() {
                 key={link.name}
                 href={link.href}
                 onClick={() => setActiveSection(link.name)}
-                className={`flex items-center gap-1.5 text-xs font-medium px-2.5 py-1.5 rounded-full transition-all duration-200 ${
+                className={`flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-full transition-all duration-200 ${
                   isActive
                     ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-300 ring-1 ring-emerald-500/30"
                     : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200 hover:bg-black/5 dark:hover:bg-white/5"
@@ -106,25 +127,16 @@ export function Navbar() {
           })}
         </div>
 
-        <div className="hidden md:flex items-center gap-2">
-          <a
-            href="#contact"
-            className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200 font-medium text-xs px-3 py-1.5 rounded-full transition-all hover:bg-black/5 dark:hover:bg-white/5"
-          >
-            Contato
-          </a>
-
-          <div className="w-[1px] h-4 bg-gray-200 dark:bg-neutral-800" />
-
+        <div className="hidden md:flex items-center gap-2 shrink-0">
           <Link
             to="/app"
             className="flex items-center gap-1.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white font-semibold text-xs px-4 py-1.5 h-8 rounded-full transition-all shadow-md whitespace-nowrap"
           >
-            <MessageSquare size={13} />
+            <User size={13} />
             Acessar App
           </Link>
 
-          <div className="w-[1px] h-4 bg-gray-200 dark:bg-neutral-800" />
+          <div className="w-[1px] h-4 bg-gray-200 dark:bg-neutral-800 mx-1" />
 
           <button
             onClick={toggleTheme}
@@ -136,8 +148,7 @@ export function Navbar() {
           </button>
         </div>
 
-
-        <div className="md:hidden flex items-center gap-1">
+        <div className="md:hidden flex items-center gap-1 ml-auto">
           <button
             onClick={toggleTheme}
             type="button"
@@ -155,7 +166,6 @@ export function Navbar() {
         </div>
       </div>
 
-      {/* Menu mobile */}
       {isMobileMenuOpen && (
         <div className="md:hidden absolute top-[calc(100%+0.5rem)] left-0 w-full bg-white/95 dark:bg-[#0d1a14]/95 backdrop-blur-xl border border-gray-200 dark:border-emerald-900/30 rounded-2xl shadow-2xl p-3 flex flex-col gap-1">
           {navLinks.map((link) => {