57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
"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>
|
||
);
|
||
}
|