Initial commit

components/navbar.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Menu, X } from "lucide-react"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { motion } from "framer-motion"
+import { Logo } from "@/components/logo"
+
+export function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const navItems = [
+    { name: "Servizi", href: "/#services" },
+    { name: "Progetti", href: "/portfolio" },
+    { name: "Storia", href: "/#about" },
+    { name: "Blog", href: "/blog" },
+    { name: "Testimonianze", href: "/#testimonials" },
+  ]
+
+  return (
+    <motion.header
+      className="sticky top-0 z-50 w-full border-b bg-white dark:bg-gray-950 dark:border-gray-800"
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+    >
+      <div className="container flex h-16 items-center px-4 md:px-6">
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 0.2 }}>
+          <Logo showText={true} className="hidden md:block" />
+          <Logo showText={false} className="block md:hidden" />
+        </motion.div>
+        <nav className="hidden md:flex ml-auto gap-6">
+          {navItems.map((item, index) => (
+            <motion.div
+              key={item.name}
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: 0.1 * (index + 1) }}
+            >
+              <Link
+                href={item.href}
+                className="text-sm font-medium hover:text-primary-900 dark:hover:text-primary-300 transition-colors"
+              >
+                {item.name}
+              </Link>
+            </motion.div>
+          ))}
+        </nav>
+        <div className="ml-auto flex items-center gap-2">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.6 }}
+          >
+            <ThemeToggle />
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.7 }}
+          >
+            <Button asChild className="bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600 dark:text-primary-50">
+              <Link href="/#contact">Contattaci</Link>
+            </Button>
+          </motion.div>
+        </div>
+        <Button variant="ghost" size="icon" className="ml-2 md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+          {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          <span className="sr-only">Apri o chiudi il menu</span>
+        </Button>
+      </div>
+      {isMenuOpen && (
+        <motion.div
+          className="container md:hidden"
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: "auto" }}
+          exit={{ opacity: 0, height: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <nav className="flex flex-col gap-4 p-4">
+            {navItems.map((item, index) => (
+              <motion.div
+                key={item.name}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.3, delay: 0.05 * (index + 1) }}
+              >
+                <Link
+                  href={item.href}
+                  className="text-sm font-medium hover:text-primary-900 dark:hover:text-primary-300 transition-colors"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  {item.name}
+                </Link>
+              </motion.div>
+            ))}
+          </nav>
+        </motion.div>
+      )}
+    </motion.header>
+  )
+}