initial commit
This commit is contained in:
Gerhard Scheikl
@@ -0,0 +1,278 @@
|
||||
{%- comment -%}
|
||||
LinumIQ Features Section
|
||||
Displays the main value propositions in a 3-column grid.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- style -%}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
.linumiq-features-{{ section.id }} {
|
||||
/* Typography Scale */
|
||||
--font-main: 'Inter', sans-serif;
|
||||
--font-heading: 'Roboto', sans-serif;
|
||||
|
||||
--text-base: 1rem;
|
||||
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 1.5rem);
|
||||
--text-xl: clamp(1.5rem, 3vw + 0.5rem, 2.0rem);
|
||||
--text-2xl: clamp(2rem, 5vw + 1rem, 2.5rem);
|
||||
--text-3xl: clamp(2.5rem, 5vw + 1rem, 3.0rem);
|
||||
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
font-family: var(--font-main);
|
||||
border-top: 1px solid rgba(var(--color-foreground), 0.08);
|
||||
border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
|
||||
}
|
||||
|
||||
.lq-feat-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.lq-feat-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.lq-feat-h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
.lq-feat-subtitle {
|
||||
font-size: var(--text-lg);
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.lq-feat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lq-feat-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.lq-feat-card {
|
||||
border: 1px solid rgba(var(--color-foreground), 0.1);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.lq-feat-card:hover {
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
.lq-feat-icon-wrapper {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 0.75rem;
|
||||
background-color: rgba(var(--color-foreground), 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid rgba(var(--color-foreground), 0.1);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.lq-icon-orange { color: {{ section.settings.icon_color_accent }}; }
|
||||
.lq-icon-blue { color: rgb(var(--color-button)); }
|
||||
|
||||
.lq-feat-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
.lq-feat-desc {
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
font-size: var(--text-lg);
|
||||
/*line-height: 1.6;*/
|
||||
margin: 0;
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="linumiq-features-{{ section.id }} color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="lq-feat-container">
|
||||
<div class="lq-feat-header">
|
||||
<h2 class="lq-feat-h2">{{ section.settings.heading }}</h2>
|
||||
<p class="lq-feat-subtitle">{{ section.settings.subtitle }}</p>
|
||||
</div>
|
||||
|
||||
<div class="lq-feat-grid">
|
||||
{%- for block in section.blocks -%}
|
||||
<div class="lq-feat-card" {{ block.shopify_attributes }}>
|
||||
<div class="lq-feat-icon-wrapper">
|
||||
{%- case block.settings.icon -%}
|
||||
{%- when 'zap' -%}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-orange"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||||
{%- when 'wifi_off' -%}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-blue">
|
||||
<defs>
|
||||
<mask id="slash-cutout">
|
||||
<rect width="24" height="24" fill="white" />
|
||||
<line x1="2" y1="2" x2="22" y2="22" stroke="black" stroke-width="6" />
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<g mask="url(#slash-cutout)">
|
||||
<path d="M1.42 9a16 16 0 0 1 21.16 0" />
|
||||
<path d="M5 12.55a11 11 0 0 1 14.08 0" />
|
||||
<path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
|
||||
<path d="M12 20h.01" />
|
||||
</g>
|
||||
|
||||
<line x1="2" y1="2" x2="22" y2="22" />
|
||||
</svg>
|
||||
{%- when 'shield' -%}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-blue"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
|
||||
{%- endcase -%}
|
||||
</div>
|
||||
<h3 class="lq-feat-title">{{ block.settings.title }}</h3>
|
||||
<p class="lq-feat-desc">{{ block.settings.text }}</p>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "LinumIQ Features",
|
||||
"settings": [
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "Color scheme",
|
||||
"default": "background-2"
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"id": "icon_color_accent",
|
||||
"label": "Accent icon color",
|
||||
"default": "#FF9D0B"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 120,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "Padding Top",
|
||||
"default": 96
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 120,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "Padding Bottom",
|
||||
"default": 96
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading",
|
||||
"label": "Heading",
|
||||
"default": "Warum LinumIQ die bessere Wahl ist"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "subtitle",
|
||||
"label": "Subtitle",
|
||||
"default": "Wir glauben, dass ein Smart Home dein Leben einfacher machen sollte - nicht komplizierter. Deshalb haben wir das Konzept für dich neu gedacht."
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "feature",
|
||||
"name": "Feature",
|
||||
"limit": 6,
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
"id": "icon",
|
||||
"label": "Icon",
|
||||
"options": [
|
||||
{
|
||||
"value": "zap",
|
||||
"label": "Blitz (Orange)"
|
||||
},
|
||||
{
|
||||
"value": "wifi_off",
|
||||
"label": "Offline/Privacy (Blau)"
|
||||
},
|
||||
{
|
||||
"value": "shield",
|
||||
"label": "Schutzschild (Blau)"
|
||||
}
|
||||
],
|
||||
"default": "zap"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "title",
|
||||
"label": "Title",
|
||||
"default": "Echtes Plug & Play"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "text",
|
||||
"label": "Description",
|
||||
"default": "Kein IT-Studium nötig. Unsere Kits kommen komplett vorkonfiguriert zu dir. Einfach anstecken und die Automationen sofort nutzen."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "LinumIQ Features",
|
||||
"category": "Custom Elements",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "feature",
|
||||
"settings": {
|
||||
"icon": "zap",
|
||||
"title": "Echtes Plug & Play",
|
||||
"text": "Kein IT-Studium nötig. Unsere Kits kommen komplett vorkonfiguriert zu dir. Einfach anstecken und die Automationen sofort nutzen."
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "feature",
|
||||
"settings": {
|
||||
"icon": "wifi_off",
|
||||
"title": "100% Offline-fähig",
|
||||
"text": "Deine Daten bleiben bei dir im Haus. Keine Cloud, keine Abo-Kosten, keine externen Server. Volle Funktion auch ohne Internet."
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "feature",
|
||||
"settings": {
|
||||
"icon": "shield",
|
||||
"title": "Grenzenlos erweiterbar",
|
||||
"text": "Basierend auf Home Assistant und Zigbee. Du bist nicht in unserem Ökosystem gefangen und kannst tausende Geräte integrieren."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
Reference in New Issue
Block a user