ui changes

components/header.tsx

@@ -1,20 +1,26 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Menu, X, Globe, Phone } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { useLanguage } from "@/contexts/language-context"
+import { useState } from "react";
+import { Menu, X, Globe, Phone } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useLanguage } from "@/contexts/language-context";
+import Link from "next/link";
 
 export default function Header() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const { language, setLanguage, t } = useLanguage()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const { language, setLanguage, t } = useLanguage();
 
   const languages = [
     { code: "en" as const, name: "English" },
     { code: "uz" as const, name: "O'zbekcha" },
     { code: "ru" as const, name: "Русский" },
-  ]
+  ];
 
   return (
     <header className="sticky top-0 z-50 bg-background border-b border-border">
@@ -31,7 +37,10 @@ export default function Header() {
                 {language.toUpperCase()}
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="bg-slate-800 border-slate-700">
+            <DropdownMenuContent
+              align="end"
+              className="bg-slate-800 border-slate-700"
+            >
               {languages.map((lang) => (
                 <DropdownMenuItem
                   key={lang.code}
@@ -55,25 +64,43 @@ export default function Header() {
         </div>
 
         <div className="hidden md:flex items-center gap-8">
-          <a href="#features" className="text-foreground hover:text-primary transition-colors">
+          <a
+            href="#features"
+            className="text-foreground hover:text-primary transition-colors"
+          >
             {t.nav.features}
           </a>
-          <a href="#pricing" className="text-foreground hover:text-primary transition-colors">
+          <a
+            href="#pricing"
+            className="text-foreground hover:text-primary transition-colors"
+          >
             {t.nav.pricing}
           </a>
-          <a href="#faq" className="text-foreground hover:text-primary transition-colors">
+          <a
+            href="#faq"
+            className="text-foreground hover:text-primary transition-colors"
+          >
             {t.nav.faq}
           </a>
         </div>
 
         <div className="hidden md:flex items-center gap-4">
-          <Button variant="outline" className="border-border bg-transparent">
-            {t.nav.login}
-          </Button>
-          <Button className="bg-primary hover:bg-primary/90">{t.nav.signup}</Button>
+          <Link href="https://demo.dwatt.uz/">
+            <Button variant="outline" className="border-border bg-transparent">
+              {t.nav.login}
+            </Button>
+          </Link>
+          <a href="#contact">
+            <Button className="bg-primary hover:bg-primary/90">
+              {t.nav.signup}
+            </Button>
+          </a>
         </div>
 
-        <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden">
+        <button
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          className="md:hidden"
+        >
           {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
         </button>
       </nav>
@@ -81,10 +108,16 @@ export default function Header() {
       {mobileMenuOpen && (
         <div className="md:hidden border-t border-border bg-background">
           <div className="px-4 py-4 space-y-4">
-            <a href="#features" className="block text-foreground hover:text-primary">
+            <a
+              href="#features"
+              className="block text-foreground hover:text-primary"
+            >
               {t.nav.features}
             </a>
-            <a href="#pricing" className="block text-foreground hover:text-primary">
+            <a
+              href="#pricing"
+              className="block text-foreground hover:text-primary"
+            >
               {t.nav.pricing}
             </a>
             <a href="#faq" className="block text-foreground hover:text-primary">
@@ -94,11 +127,13 @@ export default function Header() {
               <Button variant="outline" className="flex-1 bg-transparent">
                 {t.nav.login}
               </Button>
-              <Button className="flex-1 bg-primary hover:bg-primary/90">{t.nav.signup}</Button>
+              <Button className="flex-1 bg-primary hover:bg-primary/90">
+                {t.nav.signup}
+              </Button>
             </div>
           </div>
         </div>
       )}
     </header>
-  )
+  );
 }