changed some color and fix some styles

2026-02-07 16:06:33 +05:00
parent 022c7290b4
commit b27b8436d1
34 changed files with 999 additions and 368 deletions
--- a/app/[locale]/info/page.tsx
+++ b/app/[locale]/info/page.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import {
+  Instagram,
+  Phone,
+  Mail,
+  MessageSquare,
+  ChevronLeft,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import Logo from "@/public/logo.png";
+import { Button } from "@/components/ui/button";
+
+export default function InfoPage() {
+  const t = useTranslations("common");
+  const router = useRouter();
+
+  const contactItems = [
+    {
+      icon: <Phone className="h-6 w-6" />,
+      label: t("phone"),
+      value: "+993 65 123456",
+      href: "tel:+99365123456",
+      color: "bg-blue-50 text-blue-600",
+    },
+    {
+      icon: <Instagram className="h-6 w-6" />,
+      label: t("instagram"),
+      value: "@smartelectronics",
+      href: "https://instagram.com/smartelectronics",
+      color: "bg-pink-50 text-pink-600",
+    },
+    {
+      icon: <Mail className="h-6 w-6" />,
+      label: t("email"),
+      value: "info@smartelectronics.com",
+      href: "mailto:info@smartelectronics.com",
+      color: "bg-gray-50 text-gray-600",
+    },
+    {
+      icon: <MessageSquare className="h-6 w-6" />,
+      label: t("imo"),
+      value: "+993 65 123456",
+      href: null,
+      color: "bg-emerald-50 text-emerald-600",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-50 pb-20">
+      {/* 
+      <div className="bg-white border-b sticky top-0 z-10 px-4 h-16 flex items-center gap-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => router.back()}
+          className="rounded-full"
+        >
+          <ChevronLeft className="h-6 w-6" />
+        </Button>
+        <h1 className="text-xl font-bold">{t("info")}</h1>
+      </div> */}
+
+      <div className="p-4 max-w-md mx-auto space-y-6">
+        {/* Logo Section */}
+        <div className="bg-white rounded-3xl p-8 flex flex-col items-center justify-center shadow-sm border border-gray-100">
+          <div className="relative h-32 w-[220px] mb-4">
+            <Image src={Logo} alt="Logo" fill className="object-contain" />
+          </div>
+          <p className="text-center text-gray-500 text-sm leading-relaxed">
+            SmartElectronics - yerli we daşary ýurt harytlarynyň onlaýn marketi.
+          </p>
+        </div>
+
+        {/* Contact Grid */}
+        <div className="grid gap-4">
+          <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider px-2">
+            {t("contact_us")}
+          </h2>
+
+          {contactItems.map((item, index) => {
+            const Content = (
+              <div className="flex items-center gap-4 p-4 bg-white rounded-2xl border border-gray-100 shadow-sm active:bg-gray-50 transition-colors">
+                <div className={`p-3 rounded-xl ${item.color}`}>
+                  {item.icon}
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-xs text-gray-400 font-medium">
+                    {item.label}
+                  </span>
+                  <span className="text-base font-semibold text-gray-900">
+                    {item.value}
+                  </span>
+                </div>
+              </div>
+            );
+
+            if (item.href) {
+              return (
+                <a
+                  key={index}
+                  href={item.href}
+                  target={item.href.startsWith("http") ? "_blank" : undefined}
+                  rel={
+                    item.href.startsWith("http")
+                      ? "noopener noreferrer"
+                      : undefined
+                  }
+                >
+                  {Content}
+                </a>
+              );
+            }
+
+            return <div key={index}>{Content}</div>;
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}