hero section done

components/pageParts/hero.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+export default function HeroSection() {
+  return (
+    <section dir="ltr" className="relative w-full md:h-[400px] max-md:py-10 overflow-hidden flex items-center justify-center">
+
+      {/* Asosiy kontent */}
+      <div className="relative z-20 max-w-6xl mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
+        {/* Chap tomondagi matn */}
+        <motion.div
+          className="space-y-6 max-w-xl"
+          initial={{ opacity: 0, x: -60 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          <h1 className="text-2xl lg:text-4xl font-extrabold leading-tight">
+            Ishonchli <span className="text-yellow-400">SpesTexnika</span> —
+            sizning loyihangiz uchun eng yaxshi tanlov!
+          </h1>
+
+          <p className="text-lg text-gray-600">
+            Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish
+            uskunalarini qulay narxda taqdim etamiz.
+          </p>
+        </motion.div>
+
+        {/* O‘ng tomondagi texnika rasmi */}
+        <motion.div
+          className="hidden md:block"
+          initial={{ opacity: 0, x: 80 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
+        >
+          <Image
+            src="/2.jpg" // texnika rasmi (public/truck.png)
+            alt="SpetsTexnika yuk mashinasi"
+            width={420}
+            height={300}
+            className="drop-shadow-2xl rounded-xl"
+          />
+        </motion.div>
+      </div>
+
+      {/* Pastdagi to‘lqinli animatsiya (dekor) */}
+      <motion.div
+        className="absolute bottom-0 left-0 w-full h-[100px]"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1.2 }}
+      />
+    </section>
+  );
+}