add back image to show case contact part and product sections

This commit is contained in:
nabijonovdavronbek619@gmail.com
2025-11-27 10:51:48 +05:00
parent e565eb99c4
commit be7b94f15e
15 changed files with 45 additions and 23 deletions

View File

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { sendContactMessage } from "@/lib/api";
import { Phone, MessageSquare, MapPin } from "lucide-react";
import Image from "next/image";
export function ContactForm() {
const t = useTranslations();
@@ -61,10 +62,16 @@ export function ContactForm() {
};
return (
<section
id="contact"
className="py-20 bg-linear-to-br from-blue-50 to-indigo-50"
>
<section id="contact" className="py-20 relative">
<div className="absolute -z-40 top-0 left-0 h-full w-full">
<Image
src="/images/hero4.jpg"
alt="hero image"
fill
className="object-cover"
/>
</div>
<div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40"/>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<motion.div
@@ -72,25 +79,25 @@ export function ContactForm() {
whileInView={{ opacity: 1 }}
transition={{ duration: 0.6 }}
viewport={{ once: true }}
className="text-center mb-16"
className="text-center mb-16 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
>
<h2 className="text-4xl font-bold text-gray-900 mb-4">
<h2 className="text-2xl font-bold text-gray-900 mb-2">
{t("contact.title")}
</h2>
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Contact Info */}
<motion.div
initial={{ opacity: 0, x: -50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
viewport={{ once: true }}
className="space-y-8"
className="space-y-4 flex flex-col items-start justify-center max-h-[350px] h-full bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-4"
>
<div>
<h3 className="text-2xl font-bold text-gray-900 mb-4">
<h3 className="text-2xl font-bold text-gray-900 mb-2">
Get In Touch
</h3>
<p className="text-gray-600 mb-8">