initial commit

This commit is contained in:
Gerhard Scheikl
2026-08-24 21:41:12 +02:00
commit 5c952a25b1
367 changed files with 134961 additions and 0 deletions
+593
View File
@@ -0,0 +1,593 @@
{%- comment -%}
LinumIQ Starter Kits Comparison Section
Features: Fluid Typography, Shopify Color Schemes, Product Integration, 3 Kits
{%- endcomment -%}
{%- style -%}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
.linumiq-section-{{ section.id }} {
--font-main: 'Inter', sans-serif;
--font-heading: 'Roboto', sans-serif;
--text-sm: 1rem;
--text-base: clamp(1.125rem, 2vw + 0.5rem, 1.25rem);
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 1.5rem);
--text-xl: clamp(1.5rem, 4vw + 1rem, 2rem);
--text-2xl: clamp(2rem, 5vw + 1rem, 2.5rem);
--text-4xl: clamp(2.5rem, 6vw + 1rem, 3rem);
--text-5xl: clamp(3rem, 7vw + 1.5rem, 4rem);
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
font-family: var(--font-main);
}
.linumiq-section-{{ section.id }} .lq-container {
max-width: 1600px;
margin: 0 auto;
padding: 0 1.5rem;
}
.linumiq-section-{{ section.id }} .lq-text-center { text-align: center; }
.linumiq-section-{{ section.id }} .lq-mb-16 { margin-bottom: 4rem; }
.linumiq-section-{{ section.id }} .lq-mb-8 { margin-bottom: 2rem; }
.linumiq-section-{{ section.id }} .lq-mb-6 { margin-bottom: 1.5rem; }
.linumiq-section-{{ section.id }} .lq-mb-2 { margin-bottom: 0.5rem; }
.linumiq-section-{{ section.id }} .lq-h2 {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 700;
color: rgb(var(--color-foreground));
margin-top: 0;
}
.linumiq-section-{{ section.id }} .lq-subtitle {
font-size: var(--text-lg);
color: rgba(var(--color-foreground), 0.75);
max-width: 42rem;
margin: 0 auto;
line-height: 1.5;
}
.linumiq-section-{{ section.id }} .lq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: stretch;
max-width: 100rem;
margin: 0 auto;
}
@media (min-width: 768px) {
.linumiq-section-{{ section.id }} .lq-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
.linumiq-section-{{ section.id }} .lq-card {
border: 2px solid rgba(var(--color-foreground), 0.15);
border-radius: 1.5rem;
padding: 2rem;
display: flex;
flex-direction: column;
position: relative;
height: 100%;
transition: box-shadow 0.3s ease;
}
@media (min-width: 768px) {
.linumiq-section-{{ section.id }} .lq-card { padding: 2.5rem; }
}
.linumiq-section-{{ section.id }} .lq-card:hover {
box-shadow: 0 10px 25px rgba(var(--color-foreground), 0.08);
}
.linumiq-section-{{ section.id }} .lq-card-premium {
border: 3px solid rgb(var(--color-button));
box-shadow: 0 20px 25px -5px rgba(var(--color-foreground), 0.12), 0 10px 10px -5px rgba(var(--color-foreground), 0.05);
}
.linumiq-section-{{ section.id }} .lq-card-title {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 600;
color: rgb(var(--color-foreground));
margin-top: 0;
}
.linumiq-section-{{ section.id }} .lq-card-desc {
color: rgba(var(--color-foreground), 0.75);
font-size: var(--text-lg);
min-height: 3rem;
}
.linumiq-section-{{ section.id }} .lq-price-block {
padding-bottom: 2rem;
border-bottom: 1px solid rgba(var(--color-foreground), 0.15);
margin-bottom: 2rem;
}
.linumiq-section-{{ section.id }} .lq-price-flex {
display: flex;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.linumiq-section-{{ section.id }} .lq-price {
font-family: var(--font-heading);
font-size: var(--text-5xl);
font-weight: 700;
color: #FFFFFF;
line-height: 1;
}
.linumiq-section-{{ section.id }} .lq-compare-price {
font-size: var(--text-lg);
color: rgba(var(--color-foreground), 0.6);
text-decoration: line-through;
margin-bottom: 0.25rem;
}
.linumiq-section-{{ section.id }} .lq-badge {
display: inline-block;
background-color: rgba(var(--color-button), 0.1);
color: #FFB54E;
font-size: var(--text-base);
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-top: 0.5rem;
}
.linumiq-section-{{ section.id }} .lq-premium-flag {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background-color: rgb(var(--color-button));
color: rgb(var(--color-button-text));
padding: 0.5rem 1.5rem;
border-radius: 9999px;
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 4px 6px -1px rgba(var(--color-foreground), 0.15);
white-space: nowrap;
}
.linumiq-section-{{ section.id }} .lq-feature-list {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
flex-grow: 1;
}
.linumiq-section-{{ section.id }} .lq-feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
}
.linumiq-section-{{ section.id }} .lq-feature-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: rgb(var(--color-button));
}
.linumiq-section-{{ section.id }} .lq-feature-text {
font-size: var(--text-lg);
color: rgb(var(--color-foreground));
line-height: 1.5;
}
.linumiq-section-{{ section.id }} .lq-feature-text strong {
font-weight: 600;
}
.linumiq-section-{{ section.id }} .lq-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 1rem;
font-family: var(--font-main);
font-size: var(--text-lg);
font-weight: 600;
border-radius: 0.5rem;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
margin-top: auto;
}
.linumiq-section-{{ section.id }} .lq-btn-outline {
background-color: transparent;
color: #FFFFFF;
border: 2px solid rgb(var(--color-foreground));
}
.linumiq-section-{{ section.id }} .lq-btn-outline:hover {
background-color: #FFFFFF;
color: rgb(var(--color-background));
}
.linumiq-section-{{ section.id }} .lq-btn-accent {
background-color: rgb(var(--color-button));
color: rgb(var(--color-button-text));
border: none;
box-shadow: 0 10px 15px -3px rgba(var(--color-button), 0.3);
}
.linumiq-section-{{ section.id }} .lq-btn-accent:hover {
opacity: 0.92;
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(var(--color-button), 0.5);
}
{%- endstyle -%}
<div
class="linumiq-section-{{ section.id }} color-{{ section.settings.color_scheme }} gradient"
id="{{ section.id }}"
>
<div class="lq-container">
<div class="lq-text-center lq-mb-16">
<h2 class="lq-h2 lq-mb-2">{{ section.settings.heading }}</h2>
<p class="lq-subtitle">{{ section.settings.subtitle }}</p>
</div>
<div class="lq-grid">
{%- comment -%} KIT 1: LITE (LEFT) {%- endcomment -%}
{%- assign product_1 = all_products[section.settings.kit1_product] -%}
<div class="lq-card">
<div class="lq-mb-6">
<h3 class="lq-card-title lq-mb-2">{{ section.settings.kit1_title }}</h3>
<p class="lq-card-desc">{{ section.settings.kit1_desc }}</p>
</div>
<div class="lq-price-block">
<div class="lq-price-flex">
<span class="lq-price">
{%- if product_1 != blank -%}
{{ product_1.price | money_without_trailing_zeros }}
{%- else -%}
€199
{%- endif -%}
</span>
{%- if product_1 != blank and product_1.compare_at_price > product_1.price -%}
<span class="lq-compare-price">{{ product_1.compare_at_price | money_without_trailing_zeros }}</span>
{%- elsif section.settings.kit1_compare_price != blank -%}
<span class="lq-compare-price">{{ section.settings.kit1_compare_price }}</span>
{%- endif -%}
</div>
{%- if product_1 != blank and product_1.compare_at_price > product_1.price -%}
{%- assign savings_1 = product_1.compare_at_price | minus: product_1.price -%}
<span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_1 | money_without_trailing_zeros }}</span>
{%- elsif section.settings.kit1_badge != blank -%}
<span class="lq-badge">{{ section.settings.kit1_badge }}</span>
{%- endif -%}
</div>
<ul class="lq-feature-list">
{%- assign features_1 = section.settings.kit1_features | newline_to_br | split: '<br />' -%}
{%- for feature in features_1 -%}
{%- if feature != blank -%}
<li class="lq-feature-item">
<svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span class="lq-feature-text">{{ feature | strip }}</span>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
<a href="{% if product_1 != blank %}{{ product_1.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-outline">
{{ section.settings.btn_text }}
</a>
</div>
{%- comment -%} KIT 2: ALL-IN-ONE PREMIUM (CENTER) {%- endcomment -%}
{%- assign product_2 = all_products[section.settings.kit2_product] -%}
<div class="lq-card lq-card-premium">
{%- if section.settings.kit2_flag != blank -%}
<div class="lq-premium-flag">{{ section.settings.kit2_flag }}</div>
{%- endif -%}
<div class="lq-mb-6">
<h3 class="lq-card-title lq-mb-2">{{ section.settings.kit2_title }}</h3>
<p class="lq-card-desc">{{ section.settings.kit2_desc }}</p>
</div>
<div class="lq-price-block">
<div class="lq-price-flex">
<span class="lq-price">
{%- if product_2 != blank -%}
{{ product_2.price | money_without_trailing_zeros }}
{%- else -%}
€449
{%- endif -%}
</span>
{%- if product_2 != blank and product_2.compare_at_price > product_2.price -%}
<span class="lq-compare-price">{{ product_2.compare_at_price | money_without_trailing_zeros }}</span>
{%- elsif section.settings.kit2_compare_price != blank -%}
<span class="lq-compare-price">{{ section.settings.kit2_compare_price }}</span>
{%- endif -%}
</div>
{%- if product_2 != blank and product_2.compare_at_price > product_2.price -%}
{%- assign savings_2 = product_2.compare_at_price | minus: product_2.price -%}
<span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_2 | money_without_trailing_zeros }}</span>
{%- elsif section.settings.kit2_badge != blank -%}
<span class="lq-badge">{{ section.settings.kit2_badge }}</span>
{%- endif -%}
</div>
<ul class="lq-feature-list">
{%- assign features_2 = section.settings.kit2_features | newline_to_br | split: '<br />' -%}
{%- for feature in features_2 -%}
{%- if feature != blank -%}
<li class="lq-feature-item">
<svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span class="lq-feature-text">{{ feature | strip }}</span>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
<a href="{% if product_2 != blank %}{{ product_2.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-accent">
{{ section.settings.btn_text }}
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
</a>
</div>
{%- comment -%} KIT 3: PRO (RIGHT) {%- endcomment -%}
{%- assign product_3 = all_products[section.settings.kit3_product] -%}
<div class="lq-card">
<div class="lq-mb-6">
<h3 class="lq-card-title lq-mb-2">{{ section.settings.kit3_title }}</h3>
<p class="lq-card-desc">{{ section.settings.kit3_desc }}</p>
</div>
<div class="lq-price-block">
<div class="lq-price-flex">
<span class="lq-price">
{%- if product_3 != blank -%}
{{ product_3.price | money_without_trailing_zeros }}
{%- else -%}
€699
{%- endif -%}
</span>
{%- if product_3 != blank and product_3.compare_at_price > product_3.price -%}
<span class="lq-compare-price">{{ product_3.compare_at_price | money_without_trailing_zeros }}</span>
{%- elsif section.settings.kit3_compare_price != blank -%}
<span class="lq-compare-price">{{ section.settings.kit3_compare_price }}</span>
{%- endif -%}
</div>
{%- if product_3 != blank and product_3.compare_at_price > product_3.price -%}
{%- assign savings_3 = product_3.compare_at_price | minus: product_3.price -%}
<span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_3 | money_without_trailing_zeros }}</span>
{%- elsif section.settings.kit3_badge != blank -%}
<span class="lq-badge">{{ section.settings.kit3_badge }}</span>
{%- endif -%}
</div>
<ul class="lq-feature-list">
{%- assign features_3 = section.settings.kit3_features | newline_to_br | split: '<br />' -%}
{%- for feature in features_3 -%}
{%- if feature != blank -%}
<li class="lq-feature-item">
<svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span class="lq-feature-text">{{ feature | strip }}</span>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
<a href="{% if product_3 != blank %}{{ product_3.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-outline">
{{ section.settings.btn_text }}
</a>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "LinumIQ Starter Kits",
"settings": [
{
"type": "header",
"content": "Section Layout"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "background-1"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"label": "Padding Top",
"default": 80
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"label": "Padding Bottom",
"default": 80
},
{
"type": "text",
"id": "heading",
"label": "t:sections.linumiq_landing.heading.label",
"default": "Wähle dein perfektes Setup"
},
{
"type": "textarea",
"id": "subtitle",
"label": "Subtitle",
"default": "Egal ob du klein anfangen oder gleich das volle Potenzial nutzen möchtest - unsere vorkonfigurierten Kits machen den Einstieg kinderleicht."
},
{
"type": "text",
"id": "btn_text",
"label": "Button Text",
"default": "In den Warenkorb"
},
{
"type": "header",
"content": "Kit 1: Lite (Left)"
},
{
"type": "product",
"id": "kit1_product",
"label": "Link to Product (Auto-fetches price & URL)"
},
{
"type": "text",
"id": "kit1_title",
"label": "Title",
"default": "Starter Kit Lite"
},
{
"type": "textarea",
"id": "kit1_desc",
"label": "Description",
"default": "Die kostengünstige Variante für den perfekten Einstieg ins smarte Wohnen."
},
{
"type": "text",
"id": "kit1_compare_price",
"label": "Compare Price Fallback",
"info": "Only used if no product is selected above.",
"default": "€209,85"
},
{
"type": "text",
"id": "kit1_badge",
"label": "Highlight Badge (Fallback)",
"info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
"default": "Angebot - Du sparst €10,85"
},
{
"type": "textarea",
"id": "kit1_features",
"label": "Features (One per line)",
"default": "Home Assistant Green (Zentrale)\n1x Zigbee Tür-/Fenster-Sensor\n1x ZigBee Smart Plug 20A\nBasis Vorkonfiguration\n100% Offline-fähig & Privat"
},
{
"type": "header",
"content": "Kit 2: All-in-One Premium (Center)"
},
{
"type": "product",
"id": "kit2_product",
"label": "Link to Product (Auto-fetches price & URL)"
},
{
"type": "text",
"id": "kit2_flag",
"label": "Top Flag Text",
"default": "Premium Wahl"
},
{
"type": "text",
"id": "kit2_title",
"label": "Title",
"default": "All-in-One Kit"
},
{
"type": "textarea",
"id": "kit2_desc",
"label": "Description",
"default": "Das Rundum-Sorglos-Paket. Inklusive smartem Türschloss und Premium-Sensoren."
},
{
"type": "text",
"id": "kit2_compare_price",
"label": "Compare Price Fallback",
"info": "Only used if no product is selected above.",
"default": "€478,00"
},
{
"type": "text",
"id": "kit2_badge",
"label": "Highlight Badge (Fallback)",
"info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
"default": "Bestseller - Du sparst €29,00"
},
{
"type": "textarea",
"id": "kit2_features",
"label": "Features (One per line. Use <strong>...</strong> for bold)",
"default": "<strong>Home Assistant Green</strong> (Zentrale)\n<strong>Nuki Smart Lock Pro</strong> (5. Gen.)\nZigbee Präsenzmelder (PIR + RADAR)\nMehrere Zigbee Sensoren & Buttons\nPremium Vorkonfiguration\nPriority Support & Updates"
},
{
"type": "header",
"content": "Kit 3: Pro (Right)"
},
{
"type": "product",
"id": "kit3_product",
"label": "Link to Product (Auto-fetches price & URL)"
},
{
"type": "text",
"id": "kit3_title",
"label": "Title",
"default": "Pro Kit"
},
{
"type": "textarea",
"id": "kit3_desc",
"label": "Description",
"default": "Maximale Ausstattung für anspruchsvolle Smart Homes mit erweiterter Automatisierung."
},
{
"type": "text",
"id": "kit3_compare_price",
"label": "Compare Price Fallback",
"info": "Only used if no product is selected above.",
"default": "€749,00"
},
{
"type": "text",
"id": "kit3_badge",
"label": "Highlight Badge (Fallback)",
"info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
"default": "Du sparst €50,00"
},
{
"type": "textarea",
"id": "kit3_features",
"label": "Features (One per line. Use <strong>...</strong> for bold)",
"default": "<strong>Home Assistant Yellow</strong> (Zentrale)\n<strong>Nuki Smart Lock Pro</strong> (5. Gen.)\nZigbee Präsenzmelder (PIR + RADAR)\nErweitertes Sensoren-Set\nMulti-Room Audio Vorbereitung\nIndividuelle Vorkonfiguration\nDedicated Support & Updates"
}
],
"presets": [
{
"name": "LinumIQ Starter Kits",
"category": "Custom Elements"
}
]
}
{% endschema %}