@codesinger0/shared-components 1.1.52 → 1.1.54
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.
|
@@ -46,7 +46,16 @@ const AdvantagesList = ({
|
|
|
46
46
|
</div>
|
|
47
47
|
<div className="flex-1">
|
|
48
48
|
<span className='content-text leading-relaxed font-semibold'>{point.bold}</span>
|
|
49
|
-
<p className="content-text leading-relaxed">{point.text}</p>
|
|
49
|
+
<p className="content-text leading-relaxed" style={{ whiteSpace: 'pre-line' }}>{point.text}</p>
|
|
50
|
+
{point.subs && point.subs.length > 0 && (
|
|
51
|
+
<ul className="mt-3 space-y-2 list-disc list-inside">
|
|
52
|
+
{point.subs.map((sub, subIndex) => (
|
|
53
|
+
<li key={subIndex} className="subtitle leading-relaxed text-sm">
|
|
54
|
+
{sub}
|
|
55
|
+
</li>
|
|
56
|
+
))}
|
|
57
|
+
</ul>
|
|
58
|
+
)}
|
|
50
59
|
</div>
|
|
51
60
|
</div>
|
|
52
61
|
|
|
@@ -58,7 +67,16 @@ const AdvantagesList = ({
|
|
|
58
67
|
</div>
|
|
59
68
|
</div>
|
|
60
69
|
<span className='content-text leading-relaxed font-semibold'>{point.bold}</span>
|
|
61
|
-
<p className="content-text leading-relaxed">{point.text}</p>
|
|
70
|
+
<p className="content-text leading-relaxed" style={{ whiteSpace: 'pre-line' }}>{point.text}</p>
|
|
71
|
+
{point.subs && point.subs.length > 0 && (
|
|
72
|
+
<ul className="mt-3 space-y-2 list-disc list-inside text-right">
|
|
73
|
+
{point.subs.map((sub, subIndex) => (
|
|
74
|
+
<li key={subIndex} className="subtitle leading-relaxed text-sm">
|
|
75
|
+
{sub}
|
|
76
|
+
</li>
|
|
77
|
+
))}
|
|
78
|
+
</ul>
|
|
79
|
+
)}
|
|
62
80
|
</div>
|
|
63
81
|
</div>
|
|
64
82
|
))}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { motion } from 'framer-motion';
|
|
3
|
+
|
|
4
|
+
const DualTextCard = ({
|
|
5
|
+
// First card props
|
|
6
|
+
title1,
|
|
7
|
+
subtitle1,
|
|
8
|
+
text1,
|
|
9
|
+
|
|
10
|
+
// Second card props
|
|
11
|
+
title2,
|
|
12
|
+
subtitle2,
|
|
13
|
+
text2,
|
|
14
|
+
|
|
15
|
+
// Layout options
|
|
16
|
+
reverse = false,
|
|
17
|
+
|
|
18
|
+
// Custom class names
|
|
19
|
+
classNames = {},
|
|
20
|
+
className = '',
|
|
21
|
+
|
|
22
|
+
...props
|
|
23
|
+
}) => {
|
|
24
|
+
const {
|
|
25
|
+
card: cardClass = 'glass-card',
|
|
26
|
+
title: titleClass = 'title',
|
|
27
|
+
subtitle: subtitleClass = 'subtitle',
|
|
28
|
+
content: contentClass = 'content-text',
|
|
29
|
+
} = classNames;
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<section className={`relative w-full overflow-visible py-16 px-4 ${className}`} {...props}>
|
|
33
|
+
{/* Background Section with Text Content */}
|
|
34
|
+
<div className={cardClass + " relative"} style={{ minHeight: '48vh', overflow: 'visible' }}>
|
|
35
|
+
<div className="max-w-7xl mx-auto px-6 py-16">
|
|
36
|
+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
37
|
+
|
|
38
|
+
{/* First Text Block */}
|
|
39
|
+
<motion.div
|
|
40
|
+
initial={{ opacity: 0, x: reverse ? 50 : -50 }}
|
|
41
|
+
whileInView={{ opacity: 1, x: 0 }}
|
|
42
|
+
viewport={{ once: true }}
|
|
43
|
+
transition={{ delay: 0.2 }}
|
|
44
|
+
className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-2' : 'lg:order-1'}`}
|
|
45
|
+
dir="rtl"
|
|
46
|
+
>
|
|
47
|
+
<h2 className={titleClass}>{title1}</h2>
|
|
48
|
+
<h3 className={subtitleClass}>{subtitle1}</h3>
|
|
49
|
+
<p className={contentClass + " max-w-md mx-auto lg:mx-0"}>{text1}</p>
|
|
50
|
+
</motion.div>
|
|
51
|
+
|
|
52
|
+
{/* Second Text Block */}
|
|
53
|
+
<motion.div
|
|
54
|
+
initial={{ opacity: 0, x: reverse ? -50 : 50 }}
|
|
55
|
+
whileInView={{ opacity: 1, x: 0 }}
|
|
56
|
+
viewport={{ once: true }}
|
|
57
|
+
transition={{ delay: 0.4 }}
|
|
58
|
+
className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-1' : 'lg:order-2'}`}
|
|
59
|
+
dir="rtl"
|
|
60
|
+
>
|
|
61
|
+
<h2 className={titleClass}>{title2}</h2>
|
|
62
|
+
<h3 className={subtitleClass}>{subtitle2}</h3>
|
|
63
|
+
<p className={contentClass + " max-w-md mx-auto lg:mx-0"}>{text2}</p>
|
|
64
|
+
</motion.div>
|
|
65
|
+
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</section>
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export default DualTextCard;
|
|
@@ -44,8 +44,7 @@ const IntroSection = ({
|
|
|
44
44
|
<img
|
|
45
45
|
src={introImage}
|
|
46
46
|
alt={introTitle || "Introduction image"}
|
|
47
|
-
className="w-full h-auto rounded-lg shadow-lg object-
|
|
48
|
-
style={{ maxHeight: introHeight }}
|
|
47
|
+
className="w-full h-auto rounded-lg shadow-lg object-cover"
|
|
49
48
|
onError={(e) => {
|
|
50
49
|
e.target.style.display = 'none';
|
|
51
50
|
console.warn('Failed to load intro image:', introImage);
|
package/dist/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { default as RoundButton } from './components/elements/RoundButton';
|
|
|
2
2
|
export { default as CTAButton } from './components/elements/CTAButton';
|
|
3
3
|
export { default as SmallButton } from './components/elements/SmallButton';
|
|
4
4
|
export { default as LargeItemCard } from './components/LargeItemCard';
|
|
5
|
+
export { default as DualTextCard } from './components/DualTextCard';
|
|
5
6
|
export { default as SmallItemsGrid } from './components/SmallItemsGrid';
|
|
6
7
|
export { default as SmallItemCard } from './components/SmallItemCard';
|
|
7
8
|
export { default as MasonryItemCard } from './components/MasonryItemCard';
|