diff --git a/components/shared/Partners.tsx b/components/shared/Partners.tsx
index 0c381a0..ca0374c 100644
--- a/components/shared/Partners.tsx
+++ b/components/shared/Partners.tsx
@@ -4,6 +4,7 @@ import { Button } from "../ui/button";
import { ArrowUpRight } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
+import HeroVideoDialog from "../ui/heroVideoAction";
const Partners = () => {
const router = useRouter();
@@ -35,12 +36,18 @@ const Partners = () => {
-
+ {/*
+ > */}
);
diff --git a/components/ui/heroVideoAction.tsx b/components/ui/heroVideoAction.tsx
new file mode 100644
index 0000000..2dff44f
--- /dev/null
+++ b/components/ui/heroVideoAction.tsx
@@ -0,0 +1,156 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Play, XIcon } from "lucide-react";
+
+type AnimationStyle =
+ | "from-bottom"
+ | "from-center"
+ | "from-top"
+ | "from-left"
+ | "from-right"
+ | "fade"
+ | "top-in-bottom-out"
+ | "left-in-right-out";
+
+interface HeroVideoProps {
+ animationStyle?: AnimationStyle;
+ videoSrc: string;
+ thumbnailSrc: string;
+ thumbnailAlt?: string;
+}
+
+const animationVariants = {
+ "from-bottom": {
+ initial: { y: "100%", opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ exit: { y: "100%", opacity: 0 },
+ },
+ "from-center": {
+ initial: { scale: 0.5, opacity: 0 },
+ animate: { scale: 1, opacity: 1 },
+ exit: { scale: 0.5, opacity: 0 },
+ },
+ "from-top": {
+ initial: { y: "-100%", opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ exit: { y: "-100%", opacity: 0 },
+ },
+ "from-left": {
+ initial: { x: "-100%", opacity: 0 },
+ animate: { x: 0, opacity: 1 },
+ exit: { x: "-100%", opacity: 0 },
+ },
+ "from-right": {
+ initial: { x: "100%", opacity: 0 },
+ animate: { x: 0, opacity: 1 },
+ exit: { x: "100%", opacity: 0 },
+ },
+ fade: {
+ initial: { opacity: 0 },
+ animate: { opacity: 1 },
+ exit: { opacity: 0 },
+ },
+ "top-in-bottom-out": {
+ initial: { y: "-100%", opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ exit: { y: "100%", opacity: 0 },
+ },
+ "left-in-right-out": {
+ initial: { x: "-100%", opacity: 0 },
+ animate: { x: 0, opacity: 1 },
+ exit: { x: "100%", opacity: 0 },
+ },
+};
+
+export default function HeroVideoDialog({
+ animationStyle = "from-center",
+ videoSrc,
+ thumbnailSrc,
+ thumbnailAlt = "Video thumbnail",
+}: HeroVideoProps) {
+ const [isVideoOpen, setIsVideoOpen] = useState(false);
+ const [isCloseHovered, setIsCloseHovered] = useState(false);
+ const [isPlayHovered, setIsPlayHovered] = useState(false);
+
+ const openVideo = () => setIsVideoOpen(true);
+ const closeVideo = () => setIsVideoOpen(false);
+
+ const selectedAnimation = animationVariants[animationStyle];
+
+ return (
+
+
+
+
+
setIsPlayHovered(true)}
+ onMouseLeave={() => setIsPlayHovered(false)}
+ >
+
+
+
+
+
+ {isVideoOpen && (
+
+
+ setIsCloseHovered(true)}
+ onHoverEnd={() => setIsCloseHovered(false)}
+ whileHover={{ scale: 1.1 }}
+ whileTap={{ scale: 0.95 }}
+ >
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}