add maps to contact page catalog_page added , email addres updated , remove page drop down
This commit is contained in:
@@ -6,12 +6,7 @@ export default function ContactHeader() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mb-4 flex items-center justify-center gap-2">
|
||||
<DotAnimatsiya />
|
||||
<span className="font-almarai text-sm font-semibold tracking-wider text-white">
|
||||
{t("contact.banner.title")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
className="uppercase font-unbounded bg-linear-to-br from-white via-white to-black
|
||||
text-transparent bg-clip-text text-4xl font-bold tracking-wide md:text-5xl"
|
||||
|
||||
@@ -3,13 +3,15 @@ import { Mail, MapPin, Phone } from "lucide-react";
|
||||
import ContactHeader from "./contactHeader";
|
||||
import Form from "./form";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Maps from "./maps";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
|
||||
export function Contact() {
|
||||
const t = useTranslations();
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: Mail,
|
||||
title:t("contact.form.email"),
|
||||
title: t("contact.form.email"),
|
||||
detail: t("contact.form.emailAddress"),
|
||||
},
|
||||
{
|
||||
@@ -46,27 +48,40 @@ export function Contact() {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
|
||||
<ContactHeader />
|
||||
<div className="relative z-10 ">
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<div className="mb-4 flex items-center justify-center gap-2">
|
||||
<DotAnimatsiya />
|
||||
<span className="font-almarai text-sm font-semibold tracking-wider text-white">
|
||||
{t("contact.banner.title")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Maps />
|
||||
<div className="relative z-10 mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 space-y-5">
|
||||
<ContactHeader />
|
||||
|
||||
<Form />
|
||||
<Form />
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{contactInfo.map((info) => (
|
||||
<div
|
||||
key={info.title}
|
||||
className="flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="mb-3 flex h-14 w-14 items-center justify-center rounded-xl bg-[#2c2b2a]">
|
||||
<info.icon className="h-6 w-6 text-red-600" />
|
||||
{/* Contact Info */}
|
||||
<div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{contactInfo.map((info) => (
|
||||
<div
|
||||
key={info.title}
|
||||
className="flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="mb-3 flex h-14 w-14 items-center justify-center rounded-xl bg-[#2c2b2a]">
|
||||
<info.icon className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<h3 className="font-almarai text-sm font-bold tracking-wider text-white">
|
||||
{info.title}
|
||||
</h3>
|
||||
<p className="font-almarai mt-1 text-sm text-gray-400">
|
||||
{info.detail}
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="font-almarai text-sm font-bold tracking-wider text-white">
|
||||
{info.title}
|
||||
</h3>
|
||||
<p className="font-almarai mt-1 text-sm text-gray-400">{info.detail}</p>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
31
components/pages/contact/maps.tsx
Normal file
31
components/pages/contact/maps.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
export default function Maps() {
|
||||
return (
|
||||
<section className="w-full px-4 py-10">
|
||||
<div className="mx-auto max-w-7xl grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
|
||||
{/* Yandex Map */}
|
||||
<div className="h-[300px] sm:h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-lg border hover:shadow-xl transition">
|
||||
<iframe
|
||||
src="https://yandex.uz/map-widget/v1/?ll=69.288118%2C41.323186&mode=search&oid=56350803620&ol=biz&z=16.97"
|
||||
className="w-full h-full"
|
||||
frameBorder="0"
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Google Map */}
|
||||
<div className="h-[300px] sm:h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-lg border hover:shadow-xl transition">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2996.342450769356!2d69.28561627695484!3d41.323166199974985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38aef56f76215ce7%3A0xfd64c6a930fb1bbb!2sIGNUM!5e0!3m2!1sru!2s!4v1770203090924"
|
||||
className="w-full h-full"
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -59,10 +59,10 @@ export function Banner() {
|
||||
{/* Left side - Firefighters Image */}
|
||||
<div className="flex items-end justify-center ">
|
||||
<img
|
||||
src="/images/homeBanner.png"
|
||||
src="/images/homeBanner3.png"
|
||||
alt="Firefighters"
|
||||
loading="lazy"
|
||||
className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-cover object-right rounded-xl drop-shadow-2xl"
|
||||
className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-contain object-right rounded-xl drop-shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import EmptyData from "@/components/EmptyData";
|
||||
import { getRouteLang } from "@/request/getLang";
|
||||
import { CategoryType } from "@/lib/types";
|
||||
|
||||
export default function Catalog() {
|
||||
export default function Catalog() {
|
||||
const language = getRouteLang();
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["category", language],
|
||||
|
||||
Reference in New Issue
Block a user