Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

last push. animatsiya added

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2025-11-07 22:52:50 +05:00
parent 45f5e2251b
commit 549535b471
8 changed files with 255 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/cards/sliderCard.tsx
View File

@@ -1,30 +1,51 @@
"use client";
import { ProductTypes } from "@/types";
import Image, { StaticImageData } from "next/image";
import Image from "next/image";
import Link from "next/link";
import Text from "../lib_components/text";
import { motion } from "framer-motion";
export default function SliderCard({ data }: { data: ProductTypes }) {
return (
<Link
href={data.path}
id="news_slider_card"
className="group hover:cursor-pointer"
className="group hover:cursor-pointer block"
>
<Image
src={data.image}
alt="slider image"
width={600}
height={600}
className="object-cover max-w-[600px] w-full h-[300px]"
/>
<div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
<div className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
<Text txt={data.truck_name} />
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: "easeOut" }}
whileTap={{ scale: 0.98 }}
className="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all"
>
{/* Rasm qismi */}
<Image
src={data.image}
alt="slider image"
width={600}
height={600}
className="object-cover max-w-[600px] w-full h-[300px]"
/>
{/* Pastki kontent */}
<div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
{/* Yuqoridagi belgi */}
<motion.div
className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid"
whileHover={{ scale: 1.05 }}
transition={{ type: "spring", stiffness: 200 }}
>
<Text txt={data.truck_name} />
</motion.div>
{/* Tavsif matni */}
<div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary transition-colors">
<Text txt={data.desc} />
</div>
</div>
<div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary">
<Text txt={data.desc} />
</div>
</div>
</motion.div>
</Link>
);
}