@codesinger0/shared-components 1.1.63 → 1.1.65
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.
|
@@ -50,7 +50,7 @@ const AdvantagesList = ({
|
|
|
50
50
|
{point.subs && point.subs.length > 0 && (
|
|
51
51
|
<ul className="mt-3 space-y-2 list-disc list-inside">
|
|
52
52
|
{point.subs.map((sub, subIndex) => (
|
|
53
|
-
<li key={subIndex} className="subtitle leading-relaxed text-
|
|
53
|
+
<li key={subIndex} className="subtitle leading-relaxed text-base">
|
|
54
54
|
{sub}
|
|
55
55
|
</li>
|
|
56
56
|
))}
|
|
@@ -20,15 +20,7 @@ const IntroSection = ({
|
|
|
20
20
|
{introImage ? (
|
|
21
21
|
/* Layout with image */
|
|
22
22
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
|
|
23
|
-
|
|
24
|
-
<div className="text-center lg:text-right order-2 lg:order-1">
|
|
25
|
-
<h2 className={introTitleClass + " mb-6"}>
|
|
26
|
-
{introTitle}
|
|
27
|
-
</h2>
|
|
28
|
-
<p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
|
|
29
|
-
{introContent}
|
|
30
|
-
</p>
|
|
31
|
-
</div>
|
|
23
|
+
|
|
32
24
|
|
|
33
25
|
{/* Image */}
|
|
34
26
|
<motion.div
|
|
@@ -37,22 +29,30 @@ const IntroSection = ({
|
|
|
37
29
|
whileInView={{ opacity: 1, x: 0 }}
|
|
38
30
|
viewport={{ once: true }}
|
|
39
31
|
transition={{ delay: 1 * 0.5 }}
|
|
40
|
-
className="
|
|
32
|
+
className="flex items-center justify-center lg:justify-end"
|
|
41
33
|
>
|
|
42
|
-
<div className="
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
/>
|
|
53
|
-
</div>
|
|
34
|
+
<div className="w-full max-w-md lg:max-w-lg">
|
|
35
|
+
<img
|
|
36
|
+
src={introImage}
|
|
37
|
+
alt={introTitle || "Introduction image"}
|
|
38
|
+
className="w-full h-auto rounded-lg shadow-lg object-cover"
|
|
39
|
+
onError={(e) => {
|
|
40
|
+
e.target.style.display = 'none';
|
|
41
|
+
console.warn('Failed to load intro image:', introImage);
|
|
42
|
+
}}
|
|
43
|
+
/>
|
|
54
44
|
</div>
|
|
55
45
|
</motion.div>
|
|
46
|
+
|
|
47
|
+
{/* Text Content */}
|
|
48
|
+
<div className="text-center lg:text-right">
|
|
49
|
+
<h2 className={introTitleClass + " mb-6"}>
|
|
50
|
+
{introTitle}
|
|
51
|
+
</h2>
|
|
52
|
+
<p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
|
|
53
|
+
{introContent}
|
|
54
|
+
</p>
|
|
55
|
+
</div>
|
|
56
56
|
</div>
|
|
57
57
|
) : (
|
|
58
58
|
/* Text only layout (original) */
|
|
@@ -7,7 +7,11 @@ const QAAccordion = ({
|
|
|
7
7
|
qaItems = [],
|
|
8
8
|
onClickCta = () => { },
|
|
9
9
|
showCTA = true,
|
|
10
|
-
className = ""
|
|
10
|
+
className = "",
|
|
11
|
+
backgroundColor = "bg-main",
|
|
12
|
+
cardBackgroundColor = "bg-white",
|
|
13
|
+
textColor = "text-gray-800",
|
|
14
|
+
answerTextColor = "text-gray-700"
|
|
11
15
|
}) => {
|
|
12
16
|
const [openIndex, setOpenIndex] = useState(null);
|
|
13
17
|
|
|
@@ -70,7 +74,7 @@ const QAAccordion = ({
|
|
|
70
74
|
const items = qaItems.length > 0 ? qaItems : defaultQAItems;
|
|
71
75
|
|
|
72
76
|
return (
|
|
73
|
-
<section className={`py-16 px-4
|
|
77
|
+
<section className={`py-16 px-4 ${backgroundColor} ${className}`} dir="rtl">
|
|
74
78
|
<div className="max-w-4xl mx-auto">
|
|
75
79
|
{/* Header */}
|
|
76
80
|
<div className="text-center mb-12">
|
|
@@ -83,14 +87,19 @@ const QAAccordion = ({
|
|
|
83
87
|
{items.map((item, index) => (
|
|
84
88
|
<div
|
|
85
89
|
key={index}
|
|
86
|
-
className=
|
|
90
|
+
className={`${cardBackgroundColor} rounded-xl shadow-sm border border-gray-100 overflow-hidden`}
|
|
87
91
|
>
|
|
88
92
|
{/* Question Header */}
|
|
89
93
|
<button
|
|
90
94
|
onClick={() => toggleAccordion(index)}
|
|
91
|
-
className="w-full px-6 py-5 text-right flex items-center justify-between hover:bg-gray-50 transition-colors duration-200 focus:outline-none
|
|
95
|
+
className="w-full px-6 py-5 text-right flex items-center justify-between hover:bg-gray-50 transition-colors duration-200 focus:outline-none"
|
|
96
|
+
style={{
|
|
97
|
+
'--tw-ring-color': 'color-mix(in srgb, var(--primary) 20%, transparent)'
|
|
98
|
+
}}
|
|
99
|
+
onFocus={(e) => e.currentTarget.style.boxShadow = '0 0 0 2px var(--tw-ring-color)'}
|
|
100
|
+
onBlur={(e) => e.currentTarget.style.boxShadow = ''}
|
|
92
101
|
>
|
|
93
|
-
<span className=
|
|
102
|
+
<span className={`subtitle font-semibold ${textColor} flex-1`}>
|
|
94
103
|
{item.question}
|
|
95
104
|
</span>
|
|
96
105
|
|
|
@@ -171,7 +180,8 @@ const QAAccordion = ({
|
|
|
171
180
|
delay: 0.1
|
|
172
181
|
}
|
|
173
182
|
}}
|
|
174
|
-
className=
|
|
183
|
+
className={`content-text ${answerTextColor} leading-relaxed pt-4`}
|
|
184
|
+
style={{ whiteSpace: 'pre-line' }}
|
|
175
185
|
>
|
|
176
186
|
{item.answer}
|
|
177
187
|
</motion.p>
|