Initial import of 1407 block sources under blocks/

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-11 21:21:29 +03:30
commit 85836ef183
1412 changed files with 303567 additions and 0 deletions
@@ -0,0 +1,175 @@
+"use client";
+
+import { AudioLines } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface Projects15bProps {
+  className?: string;
+}
+
+interface VideoSectionProps {
+  videoSrc: string;
+  thumbnailSrc: string;
+  studioName: string;
+  projectTitle: string;
+}
+
+const VideoSection: React.FC<VideoSectionProps> = ({
+  videoSrc,
+  thumbnailSrc,
+  studioName,
+  projectTitle,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isHovered) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }
+  }, [isHovered]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className="group relative h-[50vh] w-full cursor-pointer overflow-hidden md:h-[60vh]"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Thumbnail Image */}
+      <img
+        src={thumbnailSrc}
+        alt={projectTitle}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
+          }`}
+      />
+
+      {/* Video */}
+      <video
+        ref={videoRef}
+        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+      >
+        <source src={videoSrc} type="video/mp4" />
+        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+      </video>
+
+      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />
+
+      <div className="absolute inset-0 bottom-12 flex items-end">
+        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
+            {studioName}
+          </p>
+          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
+            {projectTitle}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Projects15b: React.FC<Projects15bProps> = ({ className }) => {
+  const videoSections = [
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
+      studioName: "مریدیان لبز",
+      projectTitle: "تعامل‌های اثیری",
+    },
+
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
+      studioName: "زنیث دیجیتال",
+      projectTitle: "نکسوس استودیو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
+      studioName: "پریزم لبز",
+      projectTitle: "مرزهای نو",
+    },
+    {
+      thumbnailSrc:
+        "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
+      videoSrc:
+        "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
+      studioName: "سمفونی تعامل",
+      projectTitle: "تعامل‌های روان",
+    },
+  ];
+
+  return (
+    <section dir="rtl" lang="fa" className={cn("min-h-screen bg-background", className)}>
+      {/* All Sections in 2 Column Grid */}
+      <div className="grid w-full grid-cols-1 md:grid-cols-2">
+        {/* Header Section */}
+        <div className="relative h-[50vh] bg-background md:h-[60vh]">
+          <div className="absolute inset-0 bottom-12 flex items-end">
+            <div className="px-6 text-start text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20">
+              <h1 className="mb-4 max-w-1/2 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
+                کاوش در پروژه‌های ما
+              </h1>
+
+              <div className="flex items-center">
+                <p className="me-4 text-sm font-medium tracking-wider opacity-80">
+                  کارهای ما
+                </p>
+                <div className="opacity-60">
+                  <AudioLines className="h-6 w-6" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Video Sections */}
+        {videoSections.map((section, index) => (
+          <VideoSection
+            key={index}
+            videoSrc={section.videoSrc}
+            thumbnailSrc={section.thumbnailSrc}
+            studioName={section.studioName}
+            projectTitle={section.projectTitle}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export { Projects15b };