ui changes

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>
 

components/header.tsx

@@ -1,20 +1,26 @@
-"use client"
+"use client";
 
-import { useState } from "react"
+import { useState } from "react";
-import { Menu, X, Globe, Phone } from "lucide-react"
+import { Menu, X, Globe, Phone } from "lucide-react";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import {
-import { useLanguage } from "@/contexts/language-context"
+  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 [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const { language, setLanguage, t } = useLanguage()
+  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">
+          <Link href="https://demo.dwatt.uz/">
-            {t.nav.login}
+            <Button variant="outline" className="border-border bg-transparent">
-          </Button>
+              {t.nav.login}
-          <Button className="bg-primary hover:bg-primary/90">{t.nav.signup}</Button>
+            </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>
-  )
+  );
 }

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">
+              <Link href="https://demo.dwatt.uz/">
-                {t.hero.demo}
+                <Button size="lg" className="bg-primary hover:bg-primary/90">
-              </Button>
+                  {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>
 

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>
                   ))}

lib/translations.ts

@@ -65,7 +65,6 @@ export const translations = {
         },
       },
     },
-
     pricingSection: {
       popular: "Most Popular",
       started: "Get Started",
@@ -87,7 +86,7 @@ export const translations = {
         two: {
           title: "2 Stations",
           desc: "For growing networks",
-          price: "$550/year",
+          price: "$250/year",
           tag: "Most Popular",
           features: [
             "Real-time monitoring",
@@ -114,12 +113,10 @@ export const translations = {
         },
       },
     },
-
     action: {
       title: "See It In Action",
       subtitle: "Watch a quick demo of the Dwatt dashboard.",
     },
-
     faq: {
       title: "Frequently Asked Questions",
       subtitle: "Can't find what you're looking for? Contact our support team.",
@@ -150,10 +147,10 @@ export const translations = {
         },
       ],
     },
-
     contact: {
       title: "Get In Touch",
       subtitle: "Have questions? We're here to help.",
+      open:"Open Telegram",
       fields: {
         name: "Name",
         email: "Email",
@@ -161,19 +158,18 @@ export const translations = {
         send: "Send message",
       },
       whatsapp: {
-        title: "WhatsApp Support",
+        title: "Telegram Support",
         desc: "Chat with our team directly on WhatsApp for quick assistance.",
       },
       email: {
         title: "Email",
-        address: "your@email.com",
+        address: "info@startupinvest.uz",
       },
       response: {
         title: "Response Time",
         desc: "We typically respond within 24 hours.",
       },
     },
-
     footer: {
       brand: "Dwatt",
       description: "Managing EV charging stations made simple.",
@@ -256,7 +252,6 @@ export const translations = {
         },
       },
     },
-
     pricingSection: {
       popular: "Eng Mashhur",
       started: "Boshlash",
@@ -278,7 +273,7 @@ export const translations = {
         two: {
           title: "2 stansiya",
           desc: "O‘sib borayotgan tarmoqlar uchun",
-          price: "$550/yil",
+          price: "$250/yil",
           tag: "Ommabop",
           features: [
             "Real vaqtda monitoring",
@@ -305,12 +300,10 @@ export const translations = {
         },
       },
     },
-
     action: {
       title: "Amalda Ko‘ring",
       subtitle: "Dwatt panelining tezkor videosini tomosha qiling.",
     },
-
     faq: {
       title: "Ko‘p So‘raladigan Savollar",
       subtitle: "Savolingiz topilmadimi? Biz bilan bog‘laning.",
@@ -341,10 +334,10 @@ export const translations = {
         },
       ],
     },
-
     contact: {
       title: "Biz bilan bog‘laning",
       subtitle: "Savollaringiz bormi? Yordam berishga tayyormiz.",
+      open:"Telegramni ochish",
       fields: {
         name: "Ism",
         email: "Email",
@@ -352,19 +345,18 @@ export const translations = {
         send: "Xabar yuborish",
       },
       whatsapp: {
-        title: "WhatsApp Yordam",
+        title: "Telegram Yordam",
         desc: "Tezkor yordam uchun jamoamiz bilan bevosita bog‘laning.",
       },
       email: {
         title: "Email",
-        address: "contact@dwatt.com",
+        address: "info@startupinvest.uz",
       },
       response: {
         title: "Javob vaqti",
         desc: "Odatda 24 soat ichida javob beramiz.",
       },
     },
-
     footer: {
       brand: "Dwatt",
       description: "EV zaryadlash stansiyalarini boshqarishni osonlashtiramiz.",
@@ -447,7 +439,6 @@ export const translations = {
         },
       },
     },
-
     pricingSection: {
       popular: "Самый популярный",
       started: "Начать",
@@ -469,7 +460,7 @@ export const translations = {
         two: {
           title: "2 станции",
           desc: "Для растущих сетей",
-          price: "$550/год",
+          price: "$250/год",
           tag: "Самое популярное",
           features: [
             "Мониторинг в реальном времени",
@@ -496,12 +487,10 @@ export const translations = {
         },
       },
     },
-
     action: {
       title: "Посмотрите в действии",
       subtitle: "Смотрите короткую демонстрацию панели Dwatt.",
     },
-
     faq: {
       title: "Часто задаваемые вопросы",
       subtitle: "Не нашли ответ? Свяжитесь с нашей службой поддержки.",
@@ -532,30 +521,29 @@ export const translations = {
         },
       ],
     },
-
     contact: {
       title: "Свяжитесь с нами",
       subtitle: "Есть вопросы? Мы готовы помочь.",
+      open:"Открыть Telegram",
       fields: {
         name: "Имя",
-        email: "Email",
+        email: "Telefon raqam/Email",
         message: "Сообщение",
         send: "Отправить сообщение",
       },
       whatsapp: {
-        title: "Поддержка WhatsApp",
+        title: "Поддержка Telegram",
         desc: "Свяжитесь напрямую с нашей командой для быстрой помощи.",
       },
       email: {
         title: "Email",
-        address: "contact@dwatt.com",
+        address: "info@startupinvest.uz",
       },
       response: {
         title: "Время ответа",
         desc: "Обычно отвечаем в течение 24 часов.",
       },
     },
-
     footer: {
       brand: "Dwatt",
       description: "Управление зарядными станциями становится проще.",