125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|