add image

app/page.tsx

@@ -1,14 +1,11 @@
 import Link from "next/link";
+import Image from "next/image";
 import {
   ArrowRight,
   Camera,
   Fence,
   Smartphone,
   CheckCircle2,
-  ShieldCheck,
-  Server,
-  Building2,
-  CircleDollarSign,
   BarChart3,
 } from "lucide-react";
 
@@ -68,12 +65,17 @@ export default function Home() {
 
             <div className="relative">
               <div className="rounded-[28px] border border-white/10 bg-neutral-900/80 p-4 sm:p-6 shadow-2xl">
-                <img
+                <div className="relative h-[260px] sm:h-[360px] lg:h-[460px] w-full overflow-hidden rounded-[22px]">
-                  src="https://images.unsplash.com/photo-1506521781263-d8422e82f27a?auto=format&fit=crop&w=1400&q=80"
+                  <Image
+                    src="/images/barrier.jpg"
                     alt="Дворовой въезд со шлагбаумом"
-                  className="h-[260px] sm:h-[360px] lg:h-[460px] w-full rounded-[22px] object-cover"
+                    fill
+                    priority
+                    className="object-cover"
+                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 700px"
                   />
                 </div>
+              </div>
 
               <div className="hidden sm:block absolute -left-6 bottom-6 z-20 rounded-2xl border border-white/10 bg-black/85 backdrop-blur px-4 py-4 shadow-xl">
                 <div className="flex items-start gap-3">