ui changes

2025-11-10 20:27:51 +05:00
parent 0e8b310558
commit f963aaf2b8
5 changed files with 84 additions and 55 deletions
--- a/components/contact.tsx
+++ b/components/contact.tsx
@@ -32,7 +32,7 @@ export default function Contact() {
  };

  return (
-    <section className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
+    <section id="contact" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
@@ -110,9 +110,9 @@ export default function Contact() {
              </p>
              <Button
                variant="outline"
-                className="w-full border-primary text-primary hover:bg-primary/5 bg-transparent"
+                className="w-full border-primary text-primary hover:bg-primary/90 bg-transparent"
              >
-                Open WhatsApp
+                {t.contact.open}
              </Button>
            </div>

--- a/components/header.tsx
+++ b/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>
-  )
+  );
 }
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -2,6 +2,7 @@

 import { Button } from "@/components/ui/button"
 import { useLanguage } from "@/contexts/language-context"
+import Link from "next/link"

 export default function Hero() {
  const { t } = useLanguage()
@@ -14,9 +15,12 @@ export default function Hero() {
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground leading-tight">{t.hero.title}</h1>
            <p className="text-lg text-muted-foreground">{t.hero.description}</p>
            <div className="flex flex-col sm:flex-row gap-4">
-              <Button size="lg" className="bg-primary hover:bg-primary/90">
-                {t.hero.demo}
-              </Button>
+              <Link href="https://demo.dwatt.uz/">
+                <Button size="lg" className="bg-primary hover:bg-primary/90">
+                  {t.hero.demo}
+                </Button>
+              </Link>
+              <a href="#contact">
              <Button
                size="lg"
                variant="outline"
@@ -24,6 +28,7 @@ export default function Hero() {
              >
                {t.hero.contact}
              </Button>
+              </a>
            </div>
          </div>

--- a/components/pricing.tsx
+++ b/components/pricing.tsx
@@ -23,7 +23,7 @@ export default function Pricing() {
      price: t.pricingSection.plans.two.price,
      period: "/year",
      description: t.pricingSection.plans.two.desc,
-      popular: true,
+      
      features: [
        t.pricingSection.plans.two.features[0],
        t.pricingSection.plans.two.features[1],
@@ -37,6 +37,7 @@ export default function Pricing() {
      name: t.pricingSection.plans.three.title,
      price: t.pricingSection.plans.three.price,
      period: "per station/year",
+      popular: true,
      description: t.pricingSection.plans.three.desc,
      features: [
        t.pricingSection.plans.three.features[0],
@@ -110,7 +111,7 @@ export default function Pricing() {
                <div className="space-y-3">
                  {tier.features.map((feature, featureIndex) => (
                    <div key={featureIndex} className="flex items-center gap-3">
-                      <Check size={20} className="text-primary flex-shrink-0" />
+                      <Check size={20} className="text-primary shrink-0" />
                      <span className="text-foreground text-sm">{feature}</span>
                    </div>
                  ))}