upd

2024-05-13 17:28:13 +05:00
commit 1ff3fb351d
166 changed files with 10288 additions and 0 deletions
@@ -0,0 +1,72 @@
+import Button from "./Button";
+import ArrowIcon from "./icons/ArrowIcon";
+import ArrowRightIcon from "./icons/ArrowRightIcon";
+
+interface StreamButton {
+  icon: string;
+  title: string;
+  location: string;
+  background: string;
+  link: string;
+}
+
+function StreamButton({
+  icon,
+  title,
+  location,
+  background,
+  link,
+}: StreamButton) {
+  return (
+    <>
+      <a
+        href={link}
+        target="_blank"
+        className="group relative xl:grid hidden grid-cols-4 gap-4 h-36 border-b border-[#3D425C] cursor-pointer"
+      >
+        <div className="col-span-2 flex items-center xl:gap-12 gap-6">
+          <img src={icon} alt="" />
+          <p className="xl:text-2xl text-xl font-gilroy font-medium">{title}</p>
+        </div>
+        <div className="flex items-center xl:text-base text-sm">
+          <p>{location}</p>
+        </div>
+        <div className="xl:flex hidden items-center justify-between">
+          <p>Demo version</p>
+          <ArrowIcon />
+        </div>
+        <div
+          className="group-hover:opacity-100 opacity-0 transition-opacity duration-300 absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: `linear-gradient(90deg, #14161F 1.07%, rgba(20, 22, 31, 0.30) 49.98%, #14161F 98.78%), url(${background})`,
+          }}
+        >
+          <div className="w-full h-full flex flex-col gap-2 justify-center items-center">
+            <p className="text-2xl font-gilroy font-medium">Start the demonstration</p>
+            <p>{title}</p>
+          </div>
+        </div>
+      </a>
+
+      <div className="xl:hidden grid sm:grid-cols-2 sm:gap-3 gap-6 border-b border-[#3D425C] py-6">
+        <div className="flex items-center gap-6">
+          <img src={icon} alt="" />
+          <div className="">
+            <p className="xl:text-2xl text-xl font-gilroy font-medium">
+              {title}
+            </p>
+            <p className="text-sm sm:hidden block">{location}</p>
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm sm:block hidden">{location}</p>
+          <Button icon={<ArrowRightIcon />}>
+            <a href={link}>Demo version</a>
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default StreamButton;