easyorders 0.1.15 → 0.1.17

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.
Files changed (46) hide show
  1. package/README.md +2 -2
  2. package/dist/bin/cli.js +22 -8
  3. package/dist/server/index.js +10 -7
  4. package/dist/template/theme/config.json +19 -3
  5. package/dist/template/theme/home-sections/Tilted-Scrolling-Marque/config.json +107 -0
  6. package/dist/template/theme/home-sections/Tilted-Scrolling-Marque/template.liquid +171 -0
  7. package/dist/template/theme/home-sections/category-mosaic/config.json +89 -4
  8. package/dist/template/theme/home-sections/category-mosaic/template.liquid +84 -69
  9. package/dist/template/theme/home-sections/different-hero/config.json +199 -0
  10. package/dist/template/theme/home-sections/different-hero/template.liquid +219 -0
  11. package/dist/template/theme/home-sections/editorial-feature/config.json +27 -1
  12. package/dist/template/theme/home-sections/editorial-feature/template.liquid +11 -10
  13. package/dist/template/theme/home-sections/newsletter-luxe/config.json +28 -2
  14. package/dist/template/theme/home-sections/newsletter-luxe/template.liquid +19 -13
  15. package/dist/template/theme/home-sections/runway-hero/config.json +87 -30
  16. package/dist/template/theme/home-sections/runway-hero/template.liquid +59 -29
  17. package/dist/template/theme/home-sections/shop-the-look/config.json +93 -1
  18. package/dist/template/theme/home-sections/shop-the-look/template.liquid +41 -19
  19. package/dist/template/theme/home-sections/slider-before-after/config.json +213 -0
  20. package/dist/template/theme/home-sections/slider-before-after/template.liquid +336 -0
  21. package/dist/template/theme/home-sections/test-hero-allbird/config.json +130 -0
  22. package/dist/template/theme/home-sections/test-hero-allbird/template.liquid +149 -0
  23. package/dist/template/theme/home-sections/trust-promise/config.json +76 -2
  24. package/dist/template/theme/home-sections/trust-promise/template.liquid +34 -11
  25. package/dist/template/theme/home-sections/zoom-parallax/config.json +48 -0
  26. package/dist/template/theme/home-sections/zoom-parallax/template.liquid +135 -0
  27. package/dist/template/theme/product-data-schema.json +27 -0
  28. package/dist/template/theme/schema.json +114 -129
  29. package/dist/template/theme/script.js +694 -185
  30. package/dist/template/theme/sections/categories.liquid +20 -4
  31. package/dist/template/theme/sections/featured-products.liquid +65 -32
  32. package/dist/template/theme/sections/fixed-buy-button.liquid +6 -1
  33. package/dist/template/theme/sections/footer.liquid +90 -91
  34. package/dist/template/theme/sections/gallery.liquid +37 -33
  35. package/dist/template/theme/sections/header.liquid +105 -25
  36. package/dist/template/theme/sections/home-products-grid.liquid +68 -10
  37. package/dist/template/theme/sections/list-products.liquid +73 -30
  38. package/dist/template/theme/sections/order-invoice.liquid +39 -91
  39. package/dist/template/theme/sections/product-description.liquid +18 -8
  40. package/dist/template/theme/sections/product-details.liquid +9 -24
  41. package/dist/template/theme/sections/products-grid.liquid +102 -54
  42. package/dist/template/theme/sections/related-products.liquid +124 -60
  43. package/dist/template/theme/sections/reviews.liquid +43 -28
  44. package/dist/template/theme/style.css +2283 -589
  45. package/dist/template/theme/theme-data.json +25 -8
  46. package/package.json +2 -2
@@ -0,0 +1,130 @@
1
+ {
2
+ "icon": "https://files.easy-orders.net/1778108081162402225.png",
3
+ "label": "Promo Banner",
4
+ "section_schema": [
5
+ {
6
+ "name": "image_desktop",
7
+ "type": "image",
8
+ "default": "",
9
+ "description": "صورة الخلفية (ديسكتوب)"
10
+ },
11
+ {
12
+ "name": "image_mobile",
13
+ "type": "image",
14
+ "default": "",
15
+ "description": "صورة الخلفية (موبايل - لو فاضية هتستخدم صورة الديسكتوب)"
16
+ },
17
+ {
18
+ "name": "headline_text",
19
+ "type": "string",
20
+ "default": "30% Off Your Order When You Spend $140+",
21
+ "description": "النص الرئيسي (العنوان)"
22
+ },
23
+ {
24
+ "name": "headline_color",
25
+ "type": "color",
26
+ "default": "#FFFFFF",
27
+ "description": "لون العنوان"
28
+ },
29
+ {
30
+ "name": "headline_size",
31
+ "type": "number",
32
+ "default": 40,
33
+ "description": "حجم العنوان في الديسكتوب (px)"
34
+ },
35
+ {
36
+ "name": "desc_text",
37
+ "type": "string",
38
+ "default": "Discount Automatically Applied at Checkout.",
39
+ "description": "النص الفرعي (الوصف)"
40
+ },
41
+ {
42
+ "name": "desc_color",
43
+ "type": "color",
44
+ "default": "#FFFFFF",
45
+ "description": "لون الوصف"
46
+ },
47
+ {
48
+ "name": "desc_size",
49
+ "type": "number",
50
+ "default": 14,
51
+ "description": "حجم الوصف في الديسكتوب (px)"
52
+ },
53
+ {
54
+ "name": "btn_label",
55
+ "type": "string",
56
+ "default": "Shop Now",
57
+ "description": "نص الزرار (اتركه فارغاً لإخفائه)"
58
+ },
59
+ {
60
+ "name": "btn_link_type",
61
+ "type": "select",
62
+ "default": "category",
63
+ "description": "نوع رابط الزرار",
64
+ "options": [
65
+ { "label": "قسم (Category)", "value": "category" },
66
+ { "label": "منتج (Product)", "value": "product" },
67
+ { "label": "صفحة (Page)", "value": "page" }
68
+ ]
69
+ },
70
+ {
71
+ "name": "btn_category_id",
72
+ "type": "category_single_select",
73
+ "description": "اختيار القسم (لو نوع الرابط = قسم)"
74
+ },
75
+ {
76
+ "name": "btn_product_id",
77
+ "type": "product_single_select",
78
+ "description": "اختيار المنتج (لو نوع الرابط = منتج)"
79
+ },
80
+ {
81
+ "name": "btn_page_id",
82
+ "type": "page_single_select",
83
+ "description": "اختيار الصفحة (لو نوع الرابط = صفحة)"
84
+ },
85
+ {
86
+ "name": "padding_top",
87
+ "type": "number",
88
+ "default": 8,
89
+ "description": "مسافة من الأعلى للديسكتوب (%)"
90
+ },
91
+ {
92
+ "name": "padding_top_mobile",
93
+ "type": "number",
94
+ "default": 30,
95
+ "description": "مسافة من الأعلى للموبايل (%)"
96
+ },
97
+ {
98
+ "name": "btn_bg_color",
99
+ "type": "color",
100
+ "default": "#FFFFFF",
101
+ "description": "لون خلفية الزرار"
102
+ },
103
+ {
104
+ "name": "btn_text_color",
105
+ "type": "color",
106
+ "default": "#7C95A8",
107
+ "description": "لون نص الزرار"
108
+ },
109
+ {
110
+ "name": "enable_animation",
111
+ "type": "boolean",
112
+ "default": true,
113
+ "description": "تشغيل أنيميشن السكشن"
114
+ },
115
+ {
116
+ "name": "animation_style",
117
+ "type": "select",
118
+ "default": "fade-up",
119
+ "description": "شكل الأنيميشن",
120
+ "options": [
121
+ { "label": "Fade Up", "value": "fade-up" },
122
+ { "label": "Zoom In", "value": "zoom-in" },
123
+ { "label": "Blur Reveal", "value": "blur-reveal" },
124
+ { "label": "Slide Cascade", "value": "slide-cascade" },
125
+ { "label": "Fade Right", "value": "fade-right" },
126
+ { "label": "Flip Up", "value": "flip-up" }
127
+ ]
128
+ }
129
+ ]
130
+ }
@@ -0,0 +1,149 @@
1
+ {% assign promo_img_dt = section_data.image_desktop %}
2
+ {% assign promo_img_mb = section_data.image_mobile | default: promo_img_dt %}
3
+
4
+ <section
5
+ class="eo-home-section custom-static-promo"
6
+ {% if section_data.enable_animation != false %}data-section-anim="{{ section_data.animation_style | default: 'fade-up' }}"{% endif %}
7
+ style="
8
+ --promo-bg-image-dt: {% if promo_img_dt != blank %}url('{{ promo_img_dt }}'){% else %}none{% endif %};
9
+ --promo-bg-image-mb: {% if promo_img_mb != blank %}url('{{ promo_img_mb }}'){% else %}none{% endif %};
10
+ --promo-h-color: {{ section_data.headline_color | default: '#FFFFFF' }};
11
+ --promo-h-size: {{ section_data.headline_size | default: 40 }}px;
12
+ --promo-d-color: {{ section_data.desc_color | default: '#FFFFFF' }};
13
+ --promo-d-size: {{ section_data.desc_size | default: 14 }}px;
14
+ --promo-btn-bg: {{ section_data.btn_bg_color | default: '#FFFFFF' }};
15
+ --promo-btn-color: {{ section_data.btn_text_color | default: '#7C95A8' }};
16
+ --promo-pt-mb: {{ section_data.padding_top_mobile | default: 30 }}%;
17
+ --promo-pt-dt: {{ section_data.padding_top | default: 15 }}%;
18
+ "
19
+ >
20
+ <div class="custom-static-promo-inner">
21
+ <div class="custom-static-promo-content">
22
+
23
+ {% if section_data.headline_text != blank %}
24
+ <h2 class="ab-anim-el">{{ section_data.headline_text }}</h2>
25
+ {% endif %}
26
+
27
+ {% if section_data.desc_text != blank %}
28
+ <h3 class="ab-anim-el">{{ section_data.desc_text }}</h3>
29
+ {% endif %}
30
+
31
+ {% if section_data.btn_label != blank %}
32
+ {% assign btn_type = section_data.btn_link_type | default: 'category' %}
33
+ {% if btn_type == 'category' and section_data.btn_category_id != blank %}
34
+ <a class="custom-static-promo-btn ab-anim-el" href="#" data-eo-hs-cta="1" data-eo-hs-cta-entity="categories" data-eo-hs-cta-id="{{ section_data.btn_category_id }}">
35
+ {{ section_data.btn_label }}
36
+ </a>
37
+ {% elsif btn_type == 'product' and section_data.btn_product_id != blank %}
38
+ <a class="custom-static-promo-btn ab-anim-el" href="#" data-eo-hs-cta="1" data-eo-hs-cta-entity="products" data-eo-hs-cta-id="{{ section_data.btn_product_id }}">
39
+ {{ section_data.btn_label }}
40
+ </a>
41
+ {% elsif btn_type == 'page' and section_data.btn_page_id != blank %}
42
+ <a class="custom-static-promo-btn ab-anim-el" href="#" data-eo-hs-cta="1" data-eo-hs-cta-entity="pages" data-eo-hs-cta-id="{{ section_data.btn_page_id }}">
43
+ {{ section_data.btn_label }}
44
+ </a>
45
+ {% else %}
46
+ <a class="custom-static-promo-btn ab-anim-el" href="/products">
47
+ {{ section_data.btn_label }}
48
+ </a>
49
+ {% endif %}
50
+ {% endif %}
51
+
52
+ </div>
53
+ </div>
54
+ </section>
55
+
56
+ <style>
57
+ .custom-static-promo {
58
+ width: 100%; margin-block:0 15px;
59
+ box-sizing: border-box;
60
+ }
61
+
62
+ .custom-static-promo-inner {
63
+ background-color: #7C95A8;
64
+ background-image: var(--promo-bg-image-mb, none);
65
+ background-size: cover;
66
+ background-position: center;
67
+ background-repeat: no-repeat;
68
+ border-radius: 16px;
69
+ width: 100%;
70
+ position: relative;
71
+ overflow: hidden;
72
+ margin-block-end: 20px;
73
+ }
74
+
75
+ .custom-static-promo-content {
76
+ display: flex;
77
+ flex-direction: column;
78
+ align-items: center;
79
+ justify-content: center;
80
+ text-align: center;
81
+ padding: 15px 16px;
82
+ padding-top: var(--promo-pt-mb);
83
+ }
84
+
85
+ .custom-static-promo-content h2 {
86
+ font-size: 24px; /* مقاس الموبايل الافتراضي */
87
+ font-weight: 600;
88
+ line-height: 1.25;
89
+ margin: 0 0 8px 0;
90
+ color: var(--promo-h-color);
91
+ }
92
+
93
+ .custom-static-promo-content h3 {
94
+ font-family: inherit;
95
+ font-size: 12px; /* مقاس الموبايل الافتراضي */
96
+ font-weight: 400;
97
+ letter-spacing: 0.025em;
98
+ line-height: 1.6;
99
+ margin: 0 0 16px 0;
100
+ color: var(--promo-d-color);
101
+ opacity: 0.95;
102
+ }
103
+
104
+ /* تصميم الزرار الجديد */
105
+ .custom-static-promo-btn {
106
+ display: inline-block;
107
+ padding: 12px 32px;
108
+ background-color: var(--promo-btn-bg);
109
+ color: var(--promo-btn-color);
110
+ font-size: 15px;
111
+ font-weight: 600;
112
+ text-decoration: none;
113
+ border-radius: 99px; /* شكل Pill */
114
+ transition: transform 0.3s ease, opacity 0.3s ease;
115
+ margin-top: 8px;
116
+ }
117
+
118
+ .custom-static-promo-btn:hover {
119
+ opacity: 0.9;
120
+ transform: translateY(-2px);
121
+ }
122
+
123
+ /* مقاسات التابلت والديسكتوب المربوطة بتحكم اليوزر */
124
+ @media (min-width: 768px) {
125
+ .custom-static-promo-inner {
126
+ background-image: var(--promo-bg-image-dt, none);
127
+ }
128
+ .custom-static-promo-content {
129
+ padding: 90px 60px 30px;
130
+ }
131
+ .custom-static-promo-content h2 {
132
+ /* التابلت بياخد 75% من حجم الديسكتوب عشان التناسق */
133
+ font-size: calc(var(--promo-h-size) * 0.75);
134
+ }
135
+ .custom-static-promo-content h3 {
136
+ font-size: var(--promo-d-size);
137
+ }
138
+ }
139
+
140
+ @media (min-width: 1024px) {
141
+ .custom-static-promo-content {
142
+ padding: var(--promo-pt-dt) 60px 5% 50px;
143
+ }
144
+ .custom-static-promo-content h2 {
145
+ /* تطبيق الحجم اللي اختاره اليوزر للديسكتوب */
146
+ font-size: var(--promo-h-size);
147
+ }
148
+ }
149
+ </style>
@@ -1,6 +1,6 @@
1
1
  {
2
- "icon": "https://api.iconify.design/lucide:shield-check.svg",
3
- "label": "Trust promise strip",
2
+ "icon": "https://files.easy-orders.net/1778107519506754681.png",
3
+ "label": "Trust promises",
4
4
  "section_schema": [
5
5
  {
6
6
  "name": "style",
@@ -12,12 +12,66 @@
12
12
  { "label": "High contrast", "value": "contrast" }
13
13
  ]
14
14
  },
15
+ {
16
+ "name": "section_background",
17
+ "type": "color",
18
+ "default": "",
19
+ "description": "Section background override (leave empty to use preset)"
20
+ },
15
21
  {
16
22
  "name": "accent_color",
17
23
  "type": "color",
18
24
  "default": "#C9A962",
19
25
  "description": "Icon tint and highlights"
20
26
  },
27
+ {
28
+ "name": "promise_title_color",
29
+ "type": "color",
30
+ "default": "",
31
+ "description": "Promise title color (leave empty for default)"
32
+ },
33
+ {
34
+ "name": "promise_title_size",
35
+ "type": "number",
36
+ "default": 15,
37
+ "description": "Promise title size (px)"
38
+ },
39
+ {
40
+ "name": "promise_title_weight",
41
+ "type": "select",
42
+ "default": "600",
43
+ "description": "Promise title font weight",
44
+ "options": [
45
+ { "label": "Regular 400", "value": "400" },
46
+ { "label": "Medium 500", "value": "500" },
47
+ { "label": "SemiBold 600", "value": "600" },
48
+ { "label": "Bold 700", "value": "700" }
49
+ ]
50
+ },
51
+ {
52
+ "name": "promise_text_color",
53
+ "type": "color",
54
+ "default": "",
55
+ "description": "Promise description color (leave empty for default)"
56
+ },
57
+ {
58
+ "name": "promise_text_size",
59
+ "type": "number",
60
+ "default": 14,
61
+ "description": "Promise description size (px)"
62
+ },
63
+ {
64
+ "name": "promise_text_weight",
65
+ "type": "select",
66
+ "default": "400",
67
+ "description": "Promise description font weight",
68
+ "options": [
69
+ { "label": "Regular 400", "value": "400" },
70
+ { "label": "Medium 500", "value": "500" },
71
+ { "label": "SemiBold 600", "value": "600" },
72
+ { "label": "Bold 700", "value": "700" }
73
+ ]
74
+ },
21
75
  {
22
76
  "name": "promises",
23
77
  "type": "object_array",
@@ -42,6 +96,26 @@
42
96
  "description": "Short supporting copy"
43
97
  }
44
98
  ]
99
+ },
100
+ {
101
+ "name": "enable_animation",
102
+ "type": "boolean",
103
+ "default": true,
104
+ "description": "Enable section animation"
105
+ },
106
+ {
107
+ "name": "animation_style",
108
+ "type": "select",
109
+ "default": "fade-up",
110
+ "description": "Animation style",
111
+ "options": [
112
+ { "label": "Fade Up", "value": "fade-up" },
113
+ { "label": "Zoom In", "value": "zoom-in" },
114
+ { "label": "Blur Reveal", "value": "blur-reveal" },
115
+ { "label": "Slide Cascade", "value": "slide-cascade" },
116
+ { "label": "Fade Right", "value": "fade-right" },
117
+ { "label": "Flip Up", "value": "flip-up" }
118
+ ]
45
119
  }
46
120
  ]
47
121
  }
@@ -1,11 +1,21 @@
1
1
  <section
2
- class="trust-promise trust-promise--{{ section_data.style | default: 'soft' }}"
3
- style="--tp-accent: {{ section_data.accent_color | default: '#C9A962' }};"
2
+ class="eo-home-section trust-promise trust-promise--{{ section_data.style | default: 'soft' }}"
3
+ {% if section_data.enable_animation != false %}data-section-anim="{{ section_data.animation_style | default: 'fade-up' }}"{% endif %}
4
+ style="
5
+ --tp-accent: {{ section_data.accent_color | default: '#C9A962' }};
6
+ {% if section_data.section_background != blank %}--tp-section-bg: {{ section_data.section_background }};{% endif %}
7
+ {% if section_data.promise_title_color != blank %}--tp-title-color: {{ section_data.promise_title_color }};{% endif %}
8
+ --tp-title-size: {{ section_data.promise_title_size | default: 15 }}px;
9
+ --tp-title-weight: {{ section_data.promise_title_weight | default: '600' }};
10
+ {% if section_data.promise_text_color != blank %}--tp-desc-color: {{ section_data.promise_text_color }};--tp-desc-opacity: 1;{% endif %}
11
+ --tp-desc-size: {{ section_data.promise_text_size | default: 14 }}px;
12
+ --tp-desc-weight: {{ section_data.promise_text_weight | default: '400' }};
13
+ "
4
14
  >
5
15
  {% if section_data.promises and section_data.promises.size > 0 %}
6
16
  <div class="trust-promise__row">
7
17
  {% for item in section_data.promises %}
8
- <div class="trust-promise__item">
18
+ <div class="trust-promise__item ab-anim-el">
9
19
  <div class="trust-promise__icon-wrap" aria-hidden="true">
10
20
  {% if item.icon != blank %}
11
21
  <img class="trust-promise__icon" src="{{ item.icon }}" alt="" width="36" height="36" loading="lazy" />
@@ -33,11 +43,11 @@
33
43
  border-block: 1px solid rgba(20, 18, 24, 0.06);
34
44
  }
35
45
  .trust-promise--soft {
36
- background: #faf8f5;
46
+ background: var(--tp-section-bg, #faf8f5);
37
47
  color: #2a2622;
38
48
  }
39
49
  .trust-promise--contrast {
40
- background: #141218;
50
+ background: var(--tp-section-bg, #141218);
41
51
  color: #f4eee6;
42
52
  border-color: rgba(255, 255, 255, 0.08);
43
53
  }
@@ -52,7 +62,7 @@
52
62
  .trust-promise__item {
53
63
  display: flex;
54
64
  gap: 1rem;
55
- align-items: flex-start;
65
+ align-items: center;
56
66
  }
57
67
  .trust-promise__icon-wrap {
58
68
  flex-shrink: 0;
@@ -82,15 +92,28 @@
82
92
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-accent, #c9a962) 35%, transparent);
83
93
  }
84
94
  .trust-promise__title {
85
- margin: 0 0 0.35rem;
86
- font-size: 0.95rem;
87
- font-weight: 600;
95
+ font-size: var(--tp-title-size, 0.95rem);
96
+ font-weight: var(--tp-title-weight, 600);
88
97
  letter-spacing: 0.02em;
98
+ margin: 0;
99
+ }
100
+ .trust-promise--soft .trust-promise__title {
101
+ color: var(--tp-title-color, #2a2622);
102
+ }
103
+ .trust-promise--contrast .trust-promise__title {
104
+ color: var(--tp-title-color, #f4eee6);
89
105
  }
90
106
  .trust-promise__desc {
91
107
  margin: 0;
92
- font-size: 0.88rem;
108
+ font-size: var(--tp-desc-size, 0.88rem);
109
+ font-weight: var(--tp-desc-weight, 400);
93
110
  line-height: 1.55;
94
- opacity: 0.82;
111
+ opacity: var(--tp-desc-opacity, 0.82);
112
+ }
113
+ .trust-promise--soft .trust-promise__desc {
114
+ color: var(--tp-desc-color, inherit);
115
+ }
116
+ .trust-promise--contrast .trust-promise__desc {
117
+ color: var(--tp-desc-color, inherit);
95
118
  }
96
119
  </style>
@@ -0,0 +1,48 @@
1
+ {
2
+ "icon": "https://files.easy-orders.net/1778106902099515265.png",
3
+ "label": "Zoom Parallax",
4
+ "section_schema": [
5
+ {
6
+ "name": "bg_color",
7
+ "type": "color",
8
+ "default": "#f4f0eb",
9
+ "description": "لون خلفية السيكشن"
10
+ },
11
+ {
12
+ "name": "image_center",
13
+ "type": "image",
14
+ "default": "",
15
+ "description": "الصورة الرئيسية في المنتصف"
16
+ },
17
+ {
18
+ "name": "image_top_left",
19
+ "type": "image",
20
+ "default": "",
21
+ "description": "الصورة أعلى اليسار"
22
+ },
23
+ {
24
+ "name": "image_top_right",
25
+ "type": "image",
26
+ "default": "",
27
+ "description": "الصورة أعلى اليمين"
28
+ },
29
+ {
30
+ "name": "image_bottom_left",
31
+ "type": "image",
32
+ "default": "",
33
+ "description": "الصورة أسفل اليسار"
34
+ },
35
+ {
36
+ "name": "image_bottom_right",
37
+ "type": "image",
38
+ "default": "",
39
+ "description": "الصورة أسفل اليمين"
40
+ },
41
+ {
42
+ "name": "scroll_height",
43
+ "type": "number",
44
+ "default": 300,
45
+ "description": "مسافة السحب بالـ (vh) للتحكم في سرعة الزوم (300 افتراضي)"
46
+ }
47
+ ]
48
+ }
@@ -0,0 +1,135 @@
1
+ <section
2
+ class="eo-home-section zp-section"
3
+ style="
4
+ background-color: {{ section_data.bg_color | default: '#f4f0eb' }};
5
+ height: {{ section_data.scroll_height | default: 300 }}vh;
6
+ "
7
+ >
8
+ <div class="zp-sticky">
9
+ {% if section_data.image_center != blank %}
10
+ <div class="zp-el zp-img-center">
11
+ <div class="zp-img-inner">
12
+ <img src="{{ section_data.image_center }}" alt="" loading="lazy">
13
+ </div>
14
+ </div>
15
+ {% endif %}
16
+ {% if section_data.image_top_left != blank %}
17
+ <div class="zp-el zp-img-tl">
18
+ <div class="zp-img-inner">
19
+ <img src="{{ section_data.image_top_left }}" alt="" loading="lazy">
20
+ </div>
21
+ </div>
22
+ {% endif %}
23
+ {% if section_data.image_top_right != blank %}
24
+ <div class="zp-el zp-img-tr">
25
+ <div class="zp-img-inner">
26
+ <img src="{{ section_data.image_top_right }}" alt="" loading="lazy">
27
+ </div>
28
+ </div>
29
+ {% endif %}
30
+ {% if section_data.image_bottom_left != blank %}
31
+ <div class="zp-el zp-img-bl">
32
+ <div class="zp-img-inner">
33
+ <img src="{{ section_data.image_bottom_left }}" alt="" loading="lazy">
34
+ </div>
35
+ </div>
36
+ {% endif %}
37
+ {% if section_data.image_bottom_right != blank %}
38
+ <div class="zp-el zp-img-br">
39
+ <div class="zp-img-inner">
40
+ <img src="{{ section_data.image_bottom_right }}" alt="" loading="lazy">
41
+ </div>
42
+ </div>
43
+ {% endif %}
44
+ </div>
45
+ </section>
46
+
47
+ <style>
48
+ .zp-section {
49
+ position: relative;
50
+ width: 100%;
51
+ }
52
+
53
+ .zp-sticky {
54
+ position: sticky;
55
+ top: 0;
56
+ height: 100vh;
57
+ overflow: hidden;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ }
62
+
63
+ .zp-el {
64
+ position: absolute;
65
+ top: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 100%;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ will-change: transform;
73
+ }
74
+
75
+ .zp-img-inner {
76
+ position: relative;
77
+ background-color: rgba(0, 0, 0, 0.04);
78
+ }
79
+
80
+ .zp-img-inner img {
81
+ width: 100%;
82
+ height: 100%;
83
+ object-fit: cover;
84
+ display: block;
85
+ }
86
+
87
+ /* Center Image */
88
+ .zp-img-center .zp-img-inner {
89
+ width: 25vw;
90
+ height: 40vh;
91
+ }
92
+
93
+ /* Top Left Image */
94
+ .zp-img-tl .zp-img-inner {
95
+ top: -30vh;
96
+ left: -25vw;
97
+ width: 35vw;
98
+ height: 30vh;
99
+ }
100
+
101
+ /* Top Right Image */
102
+ .zp-img-tr .zp-img-inner {
103
+ top: -25vh;
104
+ left: 25vw;
105
+ width: 20vw;
106
+ height: 45vh;
107
+ }
108
+
109
+ /* Bottom Left Image */
110
+ .zp-img-bl .zp-img-inner {
111
+ top: 25vh;
112
+ left: -25vw;
113
+ width: 20vw;
114
+ height: 25vh;
115
+ }
116
+
117
+ /* Bottom Right Image */
118
+ .zp-img-br .zp-img-inner {
119
+ top: 25vh;
120
+ left: 25vw;
121
+ width: 30vw;
122
+ height: 25vh;
123
+ }
124
+
125
+ /* Mobile Adjustments */
126
+ @media (max-width: 768px) {
127
+ .zp-img-center .zp-img-inner { width: 40vw; height: 30vh; }
128
+ .zp-img-tl .zp-img-inner { top: -25vh; left: -21vw; width: 40vw; height: 20vh; }
129
+ .zp-img-tr .zp-img-inner { top: -22vh; left: 29vw; width: 34vw; height: 28vh; }
130
+ .zp-img-bl .zp-img-inner { top: 25vh; left: -25vw; width: 35vw; height: 20vh; }
131
+ .zp-img-br .zp-img-inner { top: 27vh; left: 22vw; width: 40vw; height: 25vh; }
132
+
133
+
134
+ }
135
+ </style>
@@ -0,0 +1,27 @@
1
+ [
2
+ {
3
+ "name": "custom_badge_title",
4
+ "type": "string",
5
+ "default": "",
6
+ "description": "عنوان البادج "
7
+ },
8
+ {
9
+ "name": "desc",
10
+ "type": "object_array",
11
+ "fields": [
12
+ {
13
+ "name": "title_headline",
14
+ "type": "string",
15
+ "default": "",
16
+ "description": "headline"
17
+ },
18
+ {
19
+ "name": "title_desc",
20
+ "type": "string",
21
+ "default": "",
22
+ "description": "description"
23
+ }
24
+ ],
25
+ "description": "Product Tabs"
26
+ }
27
+ ]