353 lines
6.8 KiB
Svelte
353 lines
6.8 KiB
Svelte
<script lang="ts">
|
|
import Slideshow from '$lib/Slideshow.svelte';
|
|
import SvgImage from '$lib/SvgImage.svelte';
|
|
import type { PageData } from './$types';
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
|
|
const fmtDate = (iso: string) => new Date(iso).toLocaleDateString('sl-SI');
|
|
const mapSrc = (address: string) =>
|
|
`https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed`;
|
|
</script>
|
|
|
|
{#if data.banner.length > 0}
|
|
<section class="hero">
|
|
<Slideshow images={data.banner} alt="InteliDom" interval={5000} />
|
|
</section>
|
|
{/if}
|
|
|
|
<div class="page">
|
|
{#if data.services.length > 0}
|
|
<section class="services" id="storitve">
|
|
{#each data.services as service, i (service.id)}
|
|
<article class="service">
|
|
<h2 class="service-title">{service.title}</h2>
|
|
<div class="service-content" class:reverse={i % 2 === 1}>
|
|
{#if service.images.length > 0}
|
|
<div class="service-media">
|
|
<Slideshow images={service.images} alt={service.title} hoverZoom />
|
|
</div>
|
|
{/if}
|
|
<div class="service-text">
|
|
{#if service.description}<p class="desc">{service.description}</p>{/if}
|
|
{#if service.bullets.length > 0}
|
|
<ul>
|
|
{#each service.bullets as bullet}<li>{bullet}</li>{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{/each}
|
|
</section>
|
|
{/if}
|
|
|
|
{#if data.gallery.length > 0}
|
|
<section class="gallery-preview" id="galerija">
|
|
<h2 class="section-title">Galerija</h2>
|
|
<a class="gallery-link" href="/gallery" aria-label="Odpri galerijo">
|
|
<div class="gallery-grid">
|
|
{#each data.gallery as url (url)}
|
|
<div class="g-tile"><img src={url} alt="" loading="lazy" /></div>
|
|
{/each}
|
|
</div>
|
|
</a>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if data.posts.length > 0}
|
|
<section class="news" id="novice">
|
|
<h2 class="section-title">Novice</h2>
|
|
<div class="news-grid">
|
|
{#each data.posts as post (post.slug)}
|
|
<a class="post-card" href="/news/{post.slug}">
|
|
{#if post.coverUrl}
|
|
<div class="post-cover"><img src={post.coverUrl} alt="" loading="lazy" /></div>
|
|
{/if}
|
|
<div class="post-body">
|
|
<span class="post-date">{fmtDate(post.date)}</span>
|
|
<h3>{post.title}</h3>
|
|
{#if post.excerpt}<p>{post.excerpt}</p>{/if}
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
<a class="more" href="/news">Vse novice →</a>
|
|
</section>
|
|
{/if}
|
|
|
|
<section class="contact" id="kontakt">
|
|
<h2 class="section-title">Kontakt</h2>
|
|
<div class="contact-card">
|
|
<div class="contact-methods">
|
|
{#if data.contact.email}
|
|
<div class="contact-line">
|
|
<SvgImage image_src="/mail.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
|
|
<a href="mailto:{data.contact.email}">{data.contact.email}</a>
|
|
</div>
|
|
{/if}
|
|
{#if data.contact.phone}
|
|
<div class="contact-line">
|
|
<SvgImage image_src="/phone.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
|
|
<a href="tel:{data.contact.phone.replace(/\s+/g, '')}">{data.contact.phone}</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{#if data.contact.showMap && data.contact.address}
|
|
<div class="map">
|
|
<iframe title="Zemljevid" src={mapSrc(data.contact.address)} loading="lazy"></iframe>
|
|
</div>
|
|
{/if}
|
|
{#if data.contact.address}
|
|
<p class="address">{data.contact.address}</p>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.hero {
|
|
width: 100%;
|
|
height: clamp(220px, 42vw, 460px);
|
|
background: #11161a;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.services {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3.5em;
|
|
}
|
|
|
|
.service {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5em;
|
|
}
|
|
|
|
.service-title {
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
font-size: clamp(1.5em, 4vw, 2em);
|
|
margin: 0;
|
|
}
|
|
|
|
.service-content {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2em;
|
|
}
|
|
|
|
.service-media {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
border-radius: 2em;
|
|
overflow: hidden;
|
|
background: #11161a;
|
|
}
|
|
|
|
.service-text {
|
|
width: 100%;
|
|
font-size: 1.3em;
|
|
color: #bcc0c2;
|
|
}
|
|
|
|
.desc {
|
|
margin: 0 0 0.8em;
|
|
}
|
|
|
|
.service-text ul {
|
|
margin: 0;
|
|
padding-left: 1.2em;
|
|
}
|
|
|
|
.service-text li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin: 0 0 1em;
|
|
font-size: clamp(2em, 5vw, 2.8em);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.gallery-link {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0.6em;
|
|
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
|
|
mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
|
|
}
|
|
|
|
.g-tile {
|
|
aspect-ratio: 1;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #11161a;
|
|
}
|
|
|
|
.g-tile img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.g-tile:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.news-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 1.2em;
|
|
}
|
|
|
|
.post-card {
|
|
background: #11161a;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.post-card:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.post-cover {
|
|
aspect-ratio: 16 / 9;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-cover img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.post-body {
|
|
padding: 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4em;
|
|
}
|
|
|
|
.post-date {
|
|
color: #9aa0a6;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.post-body h3 {
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.post-body p {
|
|
margin: 0;
|
|
color: #c7c9cf;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.more {
|
|
display: inline-block;
|
|
margin-top: 1.2em;
|
|
color: #42af38;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.contact-card {
|
|
background: #11161a;
|
|
border-radius: 1.5em;
|
|
padding: clamp(1.5em, 4vw, 2.5em);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5em;
|
|
text-align: center;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.contact-methods {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2em;
|
|
justify-content: center;
|
|
}
|
|
|
|
.contact-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7em;
|
|
}
|
|
|
|
.contact-card a {
|
|
color: #e5e4ea;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.contact-card a:hover {
|
|
color: #42af38;
|
|
}
|
|
|
|
.address {
|
|
white-space: pre-line;
|
|
color: #9aa0a6;
|
|
margin: 0;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.map {
|
|
width: 100%;
|
|
max-width: 640px;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.service-content {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.service-content.reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.service-media {
|
|
width: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
</style>
|