306 lines
11 KiB
HTML
306 lines
11 KiB
HTML
<main class="home-page">
|
||
<section class="hero">
|
||
<div
|
||
class="container hero-grid ui-content-grid ui-content-grid--spacious ui-content-grid--split"
|
||
>
|
||
<div class="hero-copy">
|
||
<p class="eyebrow ui-eyebrow">{{ "HOME.HERO_EYEBROW" | translate }}</p>
|
||
<h1
|
||
class="hero-title ui-hero-display"
|
||
[innerHTML]="'HOME.HERO_TITLE' | translate"
|
||
></h1>
|
||
<p class="hero-lead ui-copy-lead">
|
||
{{ "HOME.HERO_LEAD" | translate }}
|
||
</p>
|
||
<p class="hero-subtitle ui-copy-subtitle">
|
||
{{ "HOME.HERO_SUBTITLE" | translate }}
|
||
</p>
|
||
<div class="hero-actions ui-inline-actions ui-inline-actions--wide">
|
||
<app-button
|
||
variant="primary"
|
||
[routerLink]="languageService.localizedPath('/calculator/basic')"
|
||
>{{ "HOME.BTN_CALCULATE" | translate }}</app-button
|
||
>
|
||
<app-button
|
||
variant="outline"
|
||
[routerLink]="languageService.localizedPath('/shop')"
|
||
>{{ "HOME.BTN_SHOP" | translate }}</app-button
|
||
>
|
||
<app-button
|
||
variant="text"
|
||
[routerLink]="languageService.localizedPath('/contact')"
|
||
>{{ "HOME.BTN_CONTACT" | translate }}</app-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<aside class="hero-swiss-card">
|
||
<div class="hero-swiss-head">
|
||
<span class="hero-swiss-emblem" aria-hidden="true">
|
||
<span class="hero-swiss-cross"></span>
|
||
</span>
|
||
<p class="hero-swiss-kicker ui-eyebrow ui-eyebrow--compact">
|
||
{{ "HOME.HERO_SWISS_TITLE" | translate }}
|
||
</p>
|
||
</div>
|
||
<p class="hero-swiss-copy">
|
||
{{ "HOME.HERO_SWISS_COPY" | translate }}
|
||
</p>
|
||
<div class="hero-swiss-locations">
|
||
<span class="hero-swiss-chip">{{
|
||
"HOME.HERO_SWISS_LOCATION_1" | translate
|
||
}}</span>
|
||
<span class="hero-swiss-chip">{{
|
||
"HOME.HERO_SWISS_LOCATION_2" | translate
|
||
}}</span>
|
||
<span class="hero-swiss-chip">{{
|
||
"HOME.HERO_SWISS_LOCATION_3" | translate
|
||
}}</span>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section capabilities ui-section-block">
|
||
<div class="capabilities-bg"></div>
|
||
<div class="container">
|
||
<div class="section-head ui-section-head">
|
||
<h2 class="section-title ui-section-display-title">
|
||
{{ "HOME.SEC_CAP_TITLE" | translate }}
|
||
</h2>
|
||
<p class="section-subtitle ui-section-display-subtitle">
|
||
{{ "HOME.SEC_CAP_SUBTITLE" | translate }}
|
||
</p>
|
||
</div>
|
||
<div class="cap-cards">
|
||
<app-card
|
||
*ngFor="let card of capabilityCards(); trackBy: trackCapability"
|
||
>
|
||
<div class="card-image-placeholder ui-bleed-media">
|
||
@if (card.image; as image) {
|
||
<picture>
|
||
@if (image.source.avifUrl) {
|
||
<source [srcset]="image.source.avifUrl" type="image/avif" />
|
||
}
|
||
@if (image.source.webpUrl) {
|
||
<source [srcset]="image.source.webpUrl" type="image/webp" />
|
||
}
|
||
<img
|
||
[src]="image.source.fallbackUrl"
|
||
[attr.alt]="image.altText || (card.titleKey | translate)"
|
||
width="640"
|
||
height="400"
|
||
/>
|
||
</picture>
|
||
} @else {
|
||
<div class="card-image-fallback ui-bleed-media__fallback">
|
||
<span>{{ card.titleKey | translate }}</span>
|
||
</div>
|
||
}
|
||
</div>
|
||
<h3>{{ card.titleKey | translate }}</h3>
|
||
<p class="text-muted ui-text-muted">{{ card.textKey | translate }}</p>
|
||
</app-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section calculator ui-section-block">
|
||
<div
|
||
class="container calculator-grid ui-content-grid ui-content-grid--start ui-content-grid--split"
|
||
>
|
||
<div class="calculator-copy">
|
||
<h2 class="section-title ui-section-display-title">
|
||
{{ "HOME.SEC_CALC_TITLE" | translate }}
|
||
</h2>
|
||
<p class="section-subtitle ui-section-display-subtitle">
|
||
{{ "HOME.SEC_CALC_SUBTITLE" | translate }}
|
||
</p>
|
||
<ul class="calculator-list">
|
||
<li>{{ "HOME.SEC_CALC_LIST_1" | translate }}</li>
|
||
</ul>
|
||
</div>
|
||
<app-card class="quote-card">
|
||
<div class="quote-header ui-row ui-row--between">
|
||
<div>
|
||
<p class="quote-eyebrow ui-eyebrow ui-eyebrow--compact">
|
||
{{ "HOME.CARD_CALC_EYEBROW" | translate }}
|
||
</p>
|
||
<h3 class="quote-title">
|
||
{{ "HOME.CARD_CALC_TITLE" | translate }}
|
||
</h3>
|
||
</div>
|
||
<span class="quote-tag ui-pill ui-pill--accent">{{
|
||
"HOME.CARD_CALC_TAG" | translate
|
||
}}</span>
|
||
</div>
|
||
<ul class="quote-steps ui-feature-list ui-feature-list--bullets">
|
||
<li>{{ "HOME.CARD_CALC_STEP_1" | translate }}</li>
|
||
<li>{{ "HOME.CARD_CALC_STEP_2" | translate }}</li>
|
||
<li>{{ "HOME.CARD_CALC_STEP_3" | translate }}</li>
|
||
</ul>
|
||
<div class="quote-actions ui-actions ui-actions--stack">
|
||
<app-button
|
||
variant="primary"
|
||
[fullWidth]="true"
|
||
[routerLink]="languageService.localizedPath('/calculator/basic')"
|
||
>{{ "HOME.BTN_OPEN_CALC" | translate }}</app-button
|
||
>
|
||
<app-button
|
||
variant="outline"
|
||
[fullWidth]="true"
|
||
[routerLink]="languageService.localizedPath('/contact')"
|
||
>{{ "HOME.BTN_CONTACT" | translate }}</app-button
|
||
>
|
||
</div>
|
||
</app-card>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section shop ui-section-block">
|
||
<div
|
||
class="container split ui-content-grid ui-content-grid--start ui-content-grid--split"
|
||
>
|
||
<div class="shop-copy">
|
||
<h2 class="section-title ui-section-display-title">
|
||
{{ "HOME.SEC_SHOP_TITLE" | translate }}
|
||
</h2>
|
||
<p>
|
||
{{ "HOME.SEC_SHOP_TEXT" | translate }}
|
||
</p>
|
||
<ul class="shop-list">
|
||
<li>{{ "HOME.SEC_SHOP_LIST_1" | translate }}</li>
|
||
<li>{{ "HOME.SEC_SHOP_LIST_2" | translate }}</li>
|
||
<li>{{ "HOME.SEC_SHOP_LIST_3" | translate }}</li>
|
||
</ul>
|
||
<div class="shop-actions ui-inline-actions">
|
||
<app-button
|
||
variant="primary"
|
||
[routerLink]="languageService.localizedPath('/shop')"
|
||
>{{ "HOME.BTN_DISCOVER" | translate }}</app-button
|
||
>
|
||
<app-button
|
||
variant="outline"
|
||
[routerLink]="languageService.localizedPath('/contact')"
|
||
>{{ "HOME.BTN_REQ_SOLUTION" | translate }}</app-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="shop-gallery ui-gallery-strip"
|
||
tabindex="0"
|
||
[attr.aria-label]="'HOME.SHOP_GALLERY_ARIA' | translate"
|
||
>
|
||
<figure
|
||
class="shop-gallery-item ui-gallery-card"
|
||
*ngFor="let image of shopGalleryImages(); trackBy: trackMediaAsset"
|
||
>
|
||
<picture>
|
||
<source
|
||
*ngIf="image.source.avifUrl"
|
||
[srcset]="image.source.avifUrl"
|
||
type="image/avif"
|
||
/>
|
||
<source
|
||
*ngIf="image.source.webpUrl"
|
||
[srcset]="image.source.webpUrl"
|
||
type="image/webp"
|
||
/>
|
||
<img
|
||
[src]="image.source.fallbackUrl"
|
||
[attr.alt]="image.altText || ('HOME.SEC_SHOP_TITLE' | translate)"
|
||
/>
|
||
</picture>
|
||
</figure>
|
||
</div>
|
||
<div class="shop-cards">
|
||
<app-card>
|
||
<h3>{{ "HOME.CARD_SHOP_1_TITLE" | translate }}</h3>
|
||
<p class="text-muted ui-text-muted">
|
||
{{ "HOME.CARD_SHOP_1_TEXT" | translate }}
|
||
</p>
|
||
</app-card>
|
||
<app-card>
|
||
<h3>{{ "HOME.CARD_SHOP_2_TITLE" | translate }}</h3>
|
||
<p class="text-muted ui-text-muted">
|
||
{{ "HOME.CARD_SHOP_2_TEXT" | translate }}
|
||
</p>
|
||
</app-card>
|
||
<app-card>
|
||
<h3>{{ "HOME.CARD_SHOP_3_TITLE" | translate }}</h3>
|
||
<p class="text-muted ui-text-muted">
|
||
{{ "HOME.CARD_SHOP_3_TEXT" | translate }}
|
||
</p>
|
||
</app-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section about ui-section-block">
|
||
<div
|
||
class="container about-grid ui-content-grid ui-content-grid--start ui-content-grid--split"
|
||
>
|
||
<div class="about-copy">
|
||
<h2 class="section-title ui-section-display-title">
|
||
{{ "HOME.SEC_ABOUT_TITLE" | translate }}
|
||
</h2>
|
||
<p>
|
||
{{ "HOME.SEC_ABOUT_TEXT" | translate }}
|
||
</p>
|
||
<div class="about-actions ui-inline-actions">
|
||
<app-button
|
||
variant="primary"
|
||
[routerLink]="languageService.localizedPath('/about')"
|
||
>{{ "HOME.SEC_ABOUT_TITLE" | translate }}</app-button
|
||
>
|
||
<app-button
|
||
variant="outline"
|
||
[routerLink]="languageService.localizedPath('/contact')"
|
||
>{{ "HOME.BTN_CONTACT" | translate }}</app-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="about-media">
|
||
<div class="about-feature-image ui-media-frame ui-media-frame--wide">
|
||
@if (currentFounderImage(); as image) {
|
||
<picture>
|
||
@if (image.source.avifUrl) {
|
||
<source [srcset]="image.source.avifUrl" type="image/avif" />
|
||
}
|
||
@if (image.source.webpUrl) {
|
||
<source [srcset]="image.source.webpUrl" type="image/webp" />
|
||
}
|
||
<img
|
||
class="about-feature-photo"
|
||
[src]="image.source.fallbackUrl"
|
||
[attr.alt]="
|
||
image.altText || ('HOME.SEC_ABOUT_TITLE' | translate)
|
||
"
|
||
width="1200"
|
||
height="900"
|
||
/>
|
||
</picture>
|
||
}
|
||
@if (founderImages().length > 1) {
|
||
<button
|
||
type="button"
|
||
class="founder-nav founder-nav-prev ui-nav-button"
|
||
(click)="prevFounderImage()"
|
||
[attr.aria-label]="'HOME.FOUNDER_PREV_ARIA' | translate"
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="founder-nav founder-nav-next ui-nav-button"
|
||
(click)="nextFounderImage()"
|
||
[attr.aria-label]="'HOME.FOUNDER_NEXT_ARIA' | translate"
|
||
>
|
||
›
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|