first commit

2026-07-23 16:55:44 +03:00
commit bd543c3bda
61 changed files with 17313 additions and 0 deletions
@@ -0,0 +1,74 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { Code2, BookOpen, Mail, Sparkles } from 'lucide-react';
+
+export function Navbar({ locale }: { locale: string }) {
+  const t = useTranslations('nav');
+  const pathname = usePathname();
+
+  const navItems = [
+    { href: `/${locale}`, label: t('home'), icon: Sparkles },
+    { href: `/${locale}/lessons`, label: t('lessons'), icon: Code2 },
+    { href: `/${locale}/cheatsheets`, label: t('cheatsheets'), icon: BookOpen },
+    { href: `/${locale}/contact`, label: t('contact'), icon: Mail },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-slate-800 bg-slate-950/80 backdrop-blur-xl transition-all">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+        
+        {/* Logo & Brand */}
+        <Link href={`/${locale}`} className="flex items-center gap-3 group">
+          <div className="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center shadow-lg shadow-red-500/20 group-hover:scale-105 transition-transform overflow-hidden">
+            <img src="/logo.jpeg" alt="ayris.tech Logo" className="w-full h-full object-cover" />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-extrabold text-lg text-white tracking-tight flex items-center gap-1.5">
+              ayris.tech <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/20">YouTube</span>
+            </span>
+            <span className="text-[11px] text-slate-400 font-medium">Educational Code & Resource Hub</span>
+          </div>
+        </Link>
+
+        {/* Center Nav Links */}
+        <nav className="hidden md:flex items-center gap-1 bg-slate-900/60 p-1.5 rounded-full border border-slate-800">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href || (item.href !== `/${locale}` && pathname.startsWith(item.href));
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold transition-all ${
+                  isActive
+                    ? 'bg-red-600 text-white shadow-md shadow-red-600/20'
+                    : 'text-slate-300 hover:text-white hover:bg-slate-800/60'
+                }`}
+              >
+                <Icon className="w-3.5 h-3.5" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Right Action: YouTube Subscribe */}
+        <div className="flex items-center gap-3">
+          <a
+            href="https://youtube.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white text-xs font-bold rounded-full shadow-lg shadow-red-600/20 hover:shadow-red-600/30 transition-all hover:scale-105"
+          >
+            <img src="/logo.jpeg" alt="Logo" className="w-4 h-4 rounded-full object-cover" />
+            <span>{t('subscribe')}</span>
+          </a>
+        </div>
+
+      </div>
+    </header>
+  );
+}