upd

client/src/components/ProjectCard.tsx

@@ -1,53 +1,62 @@
-import { isAfter, parse } from "date-fns";
 import { motion } from "framer-motion";
+import ProgressPie from "./ProgressPie";
 
 interface ProjectCardProps {
   title: string;
   company: string;
   image: string;
-  releaseDate: string;
   stream?: boolean;
+  stage?: number;
 }
 
 function ProjectCard({
   title,
   company,
   image,
-  releaseDate,
+  stage = 6,
   stream,
 }: ProjectCardProps) {
+  const stagePercentage = Math.round((100 / 6) * stage);
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
       whileInView={{ opacity: 1 }}
       viewport={{ once: true, margin: "-100px" }}
       transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
-      className="aspect-[4/3] p-6 bg-cover bg-center bg-no-repeat flex items-end"
-      style={{
-        background: `linear-gradient(180deg, rgba(20, 22, 31, 0.00) 0%, rgba(20, 22, 31, 0.60) 100%), url('${image}'), lightgray 50% / cover no-repeat`,
-      }}
+      className="group relative aspect-[4/3] p-4 flex items-end overflow-hidden"
     >
-      <div className="flex flex-col gap-4">
+      <div
+        className="group-hover:scale-110 transition-transform duration-500 absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url(${image})`,
+        }}
+      ></div>
+      <div className="absolute top-0 left-0 w-full h-full bg-gradient-card"></div>
+      <div className="relative flex flex-col gap-4">
         <div>
-          <p className="text-2xl font-gilroy font-medium">{title}</p>
-          <p className="text-sm">{company}</p>
+          <p className="2xl:text-2xl text-xl font-gilroy font-medium">
+            {title}
+          </p>
+          <p className="2xl:text-sm text-xs">{company}</p>
         </div>
 
-        <div className="flex gap-2">
-          {isAfter(parse(releaseDate, "dd.MM.yyyy", new Date()), new Date()) ? (
-            <div className="bg-[#14161F] px-4 py-2.5 rounded-full w-fit">
+        <div className="flex gap-1">
+          {stage < 6 ? (
+            <div className="bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-1">
               <p className="font-gilroy font-medium leading-none">
-                Релиз {releaseDate}
+                {stagePercentage}%
               </p>
+              <ProgressPie value={stagePercentage} />
             </div>
           ) : (
-            <div className="bg-gradient px-4 py-2.5 rounded-full w-fit">
+            <div className="bg-gradient px-3 py-2 rounded-full w-fit">
               <p className="font-gilroy font-medium leading-none">Сдан</p>
             </div>
           )}
 
           {stream && (
-            <div className="bg-[#14161F] px-4 py-2.5 rounded-full w-fit flex items-center gap-2">
+            <div className="bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-2">
               <div className="w-2 h-2 bg-gradient rounded-full"></div>
               <p className="font-gilroy font-semibold leading-none text-gradient">
                 Stream