init

2024-03-18 13:38:16 +05:00
parent c9399c9408
commit 58df0badf7
114 changed files with 11334 additions and 0 deletions
@@ -0,0 +1,92 @@
+import { motion } from "framer-motion";
+import ProgressPie from "./ProgressPie";
+import TouchScreenIcon from "./icons/TouchScreenIcon";
+import VRIcon from "./icons/VRIcon";
+import MobileIcon from "./icons/MobileIcon";
+import { IProject } from "../types/IProject";
+import { format } from "date-fns";
+
+function ProjectCard({
+  name,
+  company,
+  city,
+  image,
+  stage = 6,
+  releaseDate = format(new Date(), "yyyy-MM-dd"),
+  devices = [],
+}: IProject) {
+  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="group relative aspect-[4/3] p-4 flex items-end overflow-hidden"
+    >
+      <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(${process.env.VITE_API_URL}/upload/${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="2xl:text-2xl text-xl font-gilroy font-medium">{name}</p>
+          <p className="2xl:text-sm text-xs">
+            {company !== "-" && `${company},`} {city}
+          </p>
+        </div>
+
+        <div className="flex gap-2">
+          {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">
+                {stagePercentage}%
+              </p>
+              <ProgressPie value={stagePercentage} />
+            </div>
+          ) : (
+            <div className="bg-gradient py-2.5 px-4 rounded-full">
+              <p className="font-gilroy font-medium leading-none">
+                {new Date(releaseDate).getFullYear()}
+              </p>
+            </div>
+          )}
+
+          {devices.length > 0 && (
+            <>
+              {devices.includes("stream") && (
+                <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
+                  </p>
+                </div>
+              )}
+              {devices.includes("touch") && (
+                <div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
+                  <TouchScreenIcon />
+                </div>
+              )}
+              {devices.includes("mobile") && (
+                <div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
+                  <MobileIcon />
+                </div>
+              )}
+              {devices.includes("vr") && (
+                <div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
+                  <VRIcon />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default ProjectCard;