76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import Image from "next/image";
|
||
import Text from "../lib_components/text";
|
||
|
||
export default function HeroSection() {
|
||
return (
|
||
<section
|
||
dir="ltr"
|
||
className="relative w-full md:h-[500px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-between"
|
||
>
|
||
{/* <Image
|
||
src="/hero2.jpg" // public papkaga rasm joylash (masalan, texnika rasmi)
|
||
alt="SpetsTexnika"
|
||
width={800}
|
||
height={400}
|
||
className="object-contain rounded-3xl"
|
||
/> */}
|
||
|
||
{/* Asosiy kontent */}
|
||
{/* <div className="absolute inset-0 -z-10 mx-auto w-full h-full">
|
||
<Image
|
||
src="/2.jpg"
|
||
alt="SpetsTexnika"
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
</div> */}
|
||
|
||
<div className="relative z-20 max-w-7xl w-full 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-3 max-w-xl backdrop-blur-3xl bg-[#ffffff4a] rounded-xl py-6 px-4"
|
||
initial={{ opacity: 0, x: -60 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||
>
|
||
<div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
|
||
<Text txt="hero_title"/>
|
||
</div>
|
||
|
||
<div className="text-xl font-medium text-secondary">
|
||
<Text txt="hero_desc"/>
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|