@codesinger0/shared-components 1.1.19 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -17,7 +17,7 @@ const AdvantagesList = ({
|
|
|
17
17
|
<section className={`py-16 px-4 ${className}`} {...props} dir="rtl">
|
|
18
18
|
<div className="max-w-6xl mx-auto text-center">
|
|
19
19
|
{title && <h2 className={titleClass + " mb-4"}>{title}</h2>}
|
|
20
|
-
{subtitle && <h3 className={subtitleClass + " mb-8"}>{subtitle}</h3>}
|
|
20
|
+
{subtitle && <h3 className={subtitleClass + " mb-8 whitespace-pre-line"}>{subtitle}</h3>}
|
|
21
21
|
<p className={contentClass}>אין נקודות להצגה</p>
|
|
22
22
|
</div>
|
|
23
23
|
</section>
|
|
@@ -79,7 +79,7 @@ const TextListCards = ({
|
|
|
79
79
|
<ul className="space-y-3 text-right leading-relaxed" dir="rtl">
|
|
80
80
|
{item.points.map((point, i) => (
|
|
81
81
|
<li key={i} className="flex items-start">
|
|
82
|
-
<Check className="w-5 h-5 text-primary mt-1
|
|
82
|
+
<Check className="w-5 h-5 text-primary mt-1 ml-2 flex-shrink-0" />
|
|
83
83
|
<span className="content-text">{point}</span>
|
|
84
84
|
</li>
|
|
85
85
|
))}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
2
|
+
import { Play, RotateCcw } from 'lucide-react';
|
|
3
|
+
import { motion } from 'framer-motion';
|
|
4
|
+
|
|
5
|
+
export default function VideoCard({ videoUrl, title, description, index }) {
|
|
6
|
+
const videoRef = useRef(null);
|
|
7
|
+
const [isPlaying, setIsPlaying] = useState(false);
|
|
8
|
+
const [showControls, setShowControls] = useState(false);
|
|
9
|
+
|
|
10
|
+
const handleVideoClick = () => {
|
|
11
|
+
if (videoRef.current) {
|
|
12
|
+
videoRef.current.currentTime = 0;
|
|
13
|
+
videoRef.current.muted = false;
|
|
14
|
+
videoRef.current.play();
|
|
15
|
+
setIsPlaying(true);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const handleVideoEnd = () => {
|
|
20
|
+
setIsPlaying(false);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<motion.div
|
|
25
|
+
initial={{ opacity: 0, y: 30 }}
|
|
26
|
+
animate={{ opacity: 1, y: 0 }}
|
|
27
|
+
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
28
|
+
className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 border border-purple-100 rounded-lg"
|
|
29
|
+
onMouseEnter={() => setShowControls(true)}
|
|
30
|
+
onMouseLeave={() => setShowControls(false)}
|
|
31
|
+
>
|
|
32
|
+
{/* Video Container */}
|
|
33
|
+
<div className="max-h-20 overflow-hidden">
|
|
34
|
+
<video
|
|
35
|
+
ref={videoRef}
|
|
36
|
+
autoPlay
|
|
37
|
+
muted
|
|
38
|
+
loop
|
|
39
|
+
playsInline
|
|
40
|
+
onEnded={handleVideoEnd}
|
|
41
|
+
className="w-full h-full object-cover cursor-pointer transition-transform duration-300 group-hover:scale-105"
|
|
42
|
+
onClick={handleVideoClick}
|
|
43
|
+
>
|
|
44
|
+
<source src={videoUrl} type="video/mp4" />
|
|
45
|
+
<div className="absolute inset-0 bg-gradient-to-br from-purple-500 to-green-500 flex items-center justify-center">
|
|
46
|
+
<Play className="w-16 h-16 text-white opacity-70" />
|
|
47
|
+
</div>
|
|
48
|
+
</video>
|
|
49
|
+
|
|
50
|
+
{/* Overlay Controls */}
|
|
51
|
+
<motion.div
|
|
52
|
+
initial={{ opacity: 0 }}
|
|
53
|
+
animate={{ opacity: showControls ? 1 : 0 }}
|
|
54
|
+
className="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center transition-all duration-300"
|
|
55
|
+
>
|
|
56
|
+
<motion.button
|
|
57
|
+
whileHover={{ scale: 1.1 }}
|
|
58
|
+
whileTap={{ scale: 0.95 }}
|
|
59
|
+
onClick={handleVideoClick}
|
|
60
|
+
className="bg-white bg-opacity-90 backdrop-blur-sm rounded-full p-4 shadow-lg hover:bg-white transition-all duration-300"
|
|
61
|
+
>
|
|
62
|
+
<RotateCcw className="w-6 h-6 text-purple-700" />
|
|
63
|
+
</motion.button>
|
|
64
|
+
</motion.div>
|
|
65
|
+
|
|
66
|
+
{/* Playing Indicator */}
|
|
67
|
+
{isPlaying && (
|
|
68
|
+
<div className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium shadow-lg">
|
|
69
|
+
Playing
|
|
70
|
+
</div>
|
|
71
|
+
)}
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
{/* Content */}
|
|
75
|
+
<div className="p-6">
|
|
76
|
+
<h3 className="text-xl font-bold text-gray-900 mb-3 leading-tight">
|
|
77
|
+
{title}
|
|
78
|
+
</h3>
|
|
79
|
+
<p className="text-gray-600 leading-relaxed text-sm">
|
|
80
|
+
{description}
|
|
81
|
+
</p>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
{/* Gradient Border Effect */}
|
|
85
|
+
<div className="absolute inset-0 rounded-3xl bg-gradient-to-r from-purple-500 to-green-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 pointer-events-none" />
|
|
86
|
+
</motion.div>
|
|
87
|
+
);
|
|
88
|
+
}
|