feat(ui): enhance footer with NutriScan branding and fix database path

- Redesigned Footer.tsx with comprehensive layout including brand section, navigation links, social media icons, and contact info to improve user engagement and brand visibility - Updated DATABASE_URL in .env to correct Prisma database path for proper configuration and connectivity - Updated dependencies to support new UI components and ensure compatibility with enhanced features
2025-10-09 00:14:30 -03:00
1 parent 8d6cbeb0bb
commit 9a4e4c762e
@@ -1,9 +1,144 @@
-export function Header(){
-    return (
-        <div className="flex justify-center">
-            <p className="font-bold text-5xl">
-                RESENHA ITAPOA
-            </p>
+"use client";
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+import { Sun, Moon, Menu, X, ScanLine, Info } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <header className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-green-600 rounded-xl flex items-center justify-center">
+              <ScanLine className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+                NutriScan
+              </h1>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                Informações nutricionais
+              </p>
+            </div>
+          </div>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-8">
+            <a
+              href="#como-funciona"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Como funciona
+            </a>
+            <a
+              href="#recursos"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Recursos
+            </a>
+            <a
+              href="/pricing"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Preços
+            </a>
+            <a
+              href="#sobre"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Sobre
+            </a>
+          </nav>
+
+          {/* Actions */}
+          <div className="flex items-center gap-4">
+            {/* Theme Toggle */}
+            {mounted && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={toggleTheme}
+                className="w-10 h-10 p-0"
+                suppressHydrationWarning
+              >
+                {theme === "dark" ? (
+                  <Sun className="w-5 h-5" />
+                ) : (
+                  <Moon className="w-5 h-5" />
+                )}
+              </Button>
+            )}
+
+            {/* Mobile Menu Button */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleMenu}
+              className="md:hidden w-10 h-10 p-0"
+            >
+              {isMenuOpen ? (
+                <X className="w-5 h-5" />
+              ) : (
+                <Menu className="w-5 h-5" />
+              )}
+            </Button>
+          </div>
        </div>
-    )
-}
+
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div className="md:hidden border-t border-gray-200 dark:border-gray-700 py-4">
+            <nav className="flex flex-col gap-4">
+              <a
+                href="#como-funciona"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Como funciona
+              </a>
+              <a
+                href="#recursos"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Recursos
+              </a>
+              <a
+                href="/pricing"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Preços
+              </a>
+              <a
+                href="#sobre"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Sobre
+              </a>
+            </nav>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}