feat: add the news for the Team Section and the Cta refactor for the sistem and the footer

gustavo-lola · gustavo-lola · commit c68c5e5c50dc · 2026-05-27T19:34:35.000-03:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,21 +5,37 @@
     <!--C:\Users\benev\projetos\Node\vagas-full\frontend\src\assets\logo-painel-vagas.svg-->
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     <script>
       (function () {
-        const storageKey = "jobs-theme-preference";
         const root = document.documentElement;
+
+
+        const storedPreference =
+          localStorage.getItem("jobs-theme-preference") ||
+          localStorage.getItem("theme") ||
+          localStorage.getItem("vite-ui-theme");
+
         const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        const storedPreference = localStorage.getItem(storageKey);
+
         const themePreference = storedPreference === "light" || storedPreference === "dark" || storedPreference === "system"
           ? storedPreference
           : "system";
-        const resolvedTheme = themePreference === "system" ? (prefersDark ? "dark" : "light") : themePreference;
 
-        root.classList.toggle("dark", resolvedTheme === "dark");
+        const resolvedTheme = themePreference === "system"
+          ? (prefersDark ? "dark" : "light")
+          : themePreference;
+
+        if (resolvedTheme === "dark") {
+          root.classList.add("dark");
+        } else {
+          root.classList.remove("dark");
+        }
+
         root.setAttribute("data-theme", resolvedTheme);
       })();
     </script>
+
     <title>Painel de Vagas</title>
   </head>
   <body>
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,9 +13,11 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.19.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.40.0",
+    "lottie-react": "^2.4.1",
     "lucide-react": "^0.577.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,12 +1,30 @@
+import { useState, useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
 import LandingPage from "./pages/LandingPage";
 import Dashboard from "./pages/Dashboard";
+import NotFound from "./not_found";
+import Loading from "./Loading";
 
 function App() {
+  const [appCarregando, setAppCarregando] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAppCarregando(false);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (appCarregando) {
+    return <Loading />;
+  }
+
   return (
     <Routes>
       <Route path="/" element={<LandingPage />} />
       <Route path="/app" element={<Dashboard />} />
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 }
diff --git a/frontend/src/Loading.tsx b/frontend/src/Loading.tsx
@@ -0,0 +1,20 @@
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import loadingAnimation from "./assets/teste.json";
+
+export default function Loading() {
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-background px-6">
+      <div className="w-64 h-64 flex items-center justify-center select-none pointer-events-none">
+        <DotLottieReact
+          data={loadingAnimation}
+          loop
+          autoplay
+          className="w-full h-full object-contain"
+        />
+      </div>
+      <p className="mt-4 text-lg font-medium text-muted-foreground animate-pulse">
+        Carregando...
+      </p>
+    </div>
+  );
+}
diff --git a/frontend/src/assets/black.svg b/frontend/src/assets/black.svg
diff --git a/frontend/src/assets/loading.lottie b/frontend/src/assets/loading.lottie
diff --git a/frontend/src/assets/lottie.json b/frontend/src/assets/lottie.json
diff --git a/frontend/src/assets/teste.json b/frontend/src/assets/teste.json
diff --git a/frontend/src/components/landing/CTASection.tsx b/frontend/src/components/landing/CTASection.tsx
@@ -4,7 +4,7 @@ import { ArrowRight, Sparkles } from "lucide-react";
 
 export function CTASection() {
   return (
-    <section className="relative py-24 md:py-32 åoverflow-hidden">
+    <section id="status" className="relative py-24 md:py-32 åoverflow-hidden">
       <div className="absolute inset-0 pointer-events-none">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-emerald-500/10 blur-[150px] rounded-full" />
         <div className="absolute top-0 left-0 w-[400px] h-[400px] bg-emerald-900/20 blur-[120px] rounded-full" />
@@ -21,16 +21,6 @@ export function CTASection() {
       />
 
       <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.7 }}
-          className="inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium px-4 py-2 rounded-full mb-8"
-        >
-          <Sparkles className="w-4 h-4" />
-          Comece agora, é gratuito
-        </motion.div>
 
         <motion.h2
           initial={{ opacity: 0, y: 30 }}
@@ -67,14 +57,14 @@ export function CTASection() {
         >
           <Link
             to="/app"
-            className="group inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-gray-950 font-semibold text-base py-4 px-10 rounded-full transition-all duration-300 shadow-lg shadow-emerald-500/25 hover:shadow-xl hover:shadow-emerald-400/30 hover:scale-[1.02]"
+            className="group inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-gray-950 font-semibold text-base py-4 px-10 rounded-full transition-all duration-300  hover:scale-[1.02]"
           >
             Acessar o Dashboard
             <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
           </Link>
           <a
             href="#features"
-            className="inline-flex items-center gap-2 text-gray-400 hover:text-black dark:hover:text-white font-medium text-base py-4 px-8 rounded-full border border-gray-800 hover:border-gray-600 transition-all duration-300"
+            className="inline-flex items-center gap-2 text-gray-400 hover:text-black dark:hover:text-white font-medium text-base py-4 px-8 rounded-full border border-gray-800 hover:border-gray-600 dark:border-gray-400 transition-all duration-300"
           >
             Explorar funcionalidades
           </a>
diff --git a/frontend/src/components/landing/Footer.tsx b/frontend/src/components/landing/Footer.tsx
@@ -1,31 +1,35 @@
-import { Github, Twitter, Linkedin } from "lucide-react";
+import { Github } from "lucide-react";
+import LogoWhite from "../../assets/logo-painel-vagas.svg";
+import LogoBlack from "../../assets/black.svg";
 
 export function Footer() {
   return (
     <footer className="bg-neutral-50 dark:bg-transparent text-neutral-900 dark:text-white pt-16 pb-8 border-t border-gray-200 dark:border-white/10">
       <div className="max-w-7xl mx-auto px-6 md:px-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
-          {/* Brand Column */}
           <div className="md:col-span-2">
+
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-8 h-8 rounded-full bg-[#0c6b35] flex items-center justify-center">
-                <span className="text-white font-bold text-lg leading-none mt-0.5">J</span>
-              </div>
-              <span className="text-gray-900 dark:text-white font-bold text-xl" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
-                Jobs Scraper
-              </span>
+              <img
+                src={LogoBlack}
+                alt="Painel de Vagas"
+                className="h-16 w-auto block dark:hidden"
+              />
+              <img
+                src={LogoWhite}
+                alt="Painel de Vagas"
+                className="h-16 w-auto hidden dark:block"
+              />
             </div>
+
             <p className="text-gray-500 dark:text-gray-400 max-w-sm mb-8 leading-relaxed">
               Automatizando a busca por vagas de TI para desenvolvedores do mundo inteiro. Encontre o emprego ideal sem perder horas pesquisando.
             </p>
             <div className="flex items-center gap-4 text-gray-400 dark:text-gray-500">
-              <a href="#" className="hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"><Twitter size={20} /></a>
               <a href="#" className="hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"><Github size={20} /></a>
-              <a href="#" className="hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"><Linkedin size={20} /></a>
             </div>
           </div>
 
-          {/* Product Links */}
           <div>
             <h4 className="text-gray-900 dark:text-white font-semibold mb-6">Produto</h4>
             <ul className="space-y-4 text-gray-500 dark:text-gray-400">
@@ -36,7 +40,6 @@ export function Footer() {
             </ul>
           </div>
 
-          {/* Legal Links */}
           <div>
             <h4 className="text-gray-900 dark:text-white font-semibold mb-6">Legal</h4>
             <ul className="space-y-4 text-gray-500 dark:text-gray-400">
@@ -47,14 +50,10 @@ export function Footer() {
           </div>
         </div>
 
-        {/* Bottom Bar */}
         <div className="pt-8 border-t border-gray-200 dark:border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-gray-400 dark:text-gray-500">
-          <p>&copy; {new Date().getFullYear()} Jobs Scraper. Todos os direitos reservados.</p>
+          <p>&copy; {new Date().getFullYear()} Painel de Vagas. Todos os direitos reservados.</p>
           <div className="flex gap-6">
-            <span className="flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-emerald-500" />
-              Sistemas Operacionais
-            </span>
+
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/landing/HeroSection.tsx b/frontend/src/components/landing/HeroSection.tsx
@@ -58,7 +58,7 @@ export function HeroSection() {
           transition={{ duration: 0.7, delay: 0.25 }}
           className="text-lg md:text-xl text-gray-500 dark:text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed font-medium"
         >
-          O Jobs Scraper varre dezenas de plataformas automaticamente, transforma candidatos em profissionais preparados e entrega as melhores oportunidades filtradas para você.
+          O Painel de Vagas varre dezenas de plataformas automaticamente, transforma candidatos em profissionais preparados e entrega as melhores oportunidades filtradas para você.
         </motion.p>
 
         <motion.div
@@ -69,7 +69,7 @@ export function HeroSection() {
         >
           <Link
             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]"
+            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  hover:scale-[1.02]"
           >
             Comece Agora
             <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
diff --git a/frontend/src/components/landing/Navbar.tsx b/frontend/src/components/landing/Navbar.tsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import {
-  Menu, X, MessageSquare,
-  Sparkles, Workflow, BadgeDollarSign, RadioTower, Sun, Moon,
+  Menu, X,
+  Sparkles, Workflow, RadioTower, Sun, Moon,
   User,
   Users2,
 } from "lucide-react";
@@ -89,19 +89,16 @@ export function Navbar() {
     <nav
       className={`fixed top-4 left-1/2 -translate-x-1/2 z-50 transition-all duration-500 w-[95%] max-w-4xl ${
         isScrolledPastHero
-          ? "opacity-100 translate-y-0 pointer-events-auto bg-white/80 dark:bg-[#0d1a14]/80 backdrop-blur-md border border-gray-200 dark:border-emerald-900/40 rounded-full p-1.5 shadow-xl"
+          ? "opacity-100 translate-y-0 pointer-events-auto bg-white/80 dark:bg-background/80 backdrop-blur-md border border-gray-200 dark:border-border/40 rounded-full p-1.5 shadow-xl"
           : "opacity-0 -translate-y-full pointer-events-none"
       }`}
     >
-      {/* Removeu o justify-between para os itens não se repelirem */}
       <div className="flex items-center w-full h-11 px-4">
 
-        {/* LOGO (Fica na esquerda) */}
-        <Link to="/" className="flex font-bold text-sm items-center gap-2 shrink-0 dark:text-white text-black">
+        <Link to="/" className="flex font-bold text-sm items-center gap-2 shrink-0 dark:text-foreground text-black">
           Painel de vagas
         </Link>
 
-        {/* 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;
@@ -167,7 +164,7 @@ export function Navbar() {
       </div>
 
       {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">
+        <div className="md:hidden absolute top-[calc(100%+0.5rem)] left-0 w-full bg-white/95 dark:bg-background/95 backdrop-blur-xl border border-gray-200 dark:border-border/30 rounded-2xl shadow-2xl p-3 flex flex-col gap-1">
           {navLinks.map((link) => {
             const Icon     = link.icon;
             const isActive = activeSection === link.name;
diff --git a/frontend/src/components/landing/TeamSection.tsx b/frontend/src/components/landing/TeamSection.tsx
@@ -0,0 +1,9 @@
+
+
+export default function TeamSection() {
+  return (
+    <section id="time" className="text-center justify-center items-center">
+      <div></div>
+    </section>
+  )
+}
diff --git a/frontend/src/not_found.tsx b/frontend/src/not_found.tsx
@@ -0,0 +1,62 @@
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+
+import lottieAnimation from "./assets/lottie.json";
+
+export default function NotFound() {
+  return (
+    <section className="min-h-screen flex flex-col items-center justify-center relative bg-white dark:bg-[#0d1a14] font-sans px-6">
+
+      <div className="absolute w-[500px] h-[500px] bg-emerald-100/20 dark:bg-emerald-950/10 blur-[100px] rounded-full pointer-events-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+
+      <div className="relative z-10 text-center max-w-md mx-auto flex flex-col items-center">
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.4 }}
+          className="w-80 h-80 md:w-96 md:h-96 flex items-center justify-center select-none pointer-events-none -mb-2"
+        >
+          <DotLottieReact
+            data={lottieAnimation}
+            loop
+            autoplay
+          />
+        </motion.div>
+
+        <motion.h2
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.05 }}
+          className="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight mb-2"
+        >
+          Ops! Página não encontrada
+        </motion.h2>
+
+
+        <motion.p
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.1 }}
+          className="text-gray-400 dark:text-neutral-400 text-sm md:text-base mb-6 font-normal"
+        >
+          Parece que o panda se perdeu no caminho.
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.15 }}
+        >
+          <Link
+            to="/"
+            className="inline-flex items-center justify-center bg-white dark:bg-white text-black dark:text-black font-semibold text-sm px-6 py-2.5 rounded-xl transition-all shadow-sm hover:bg-gray-100"
+          >
+            Voltar para o Início
+          </Link>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
