intelidomWebsite/src/routes/+page.svelte

<script lang="ts">
	import Slideshow from '$lib/Slideshow.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" class:reverse={i % 2 === 1}>
					{#if service.images.length > 0}
						<div class="service-media">
							<Slideshow images={service.images} alt={service.title} />
						</div>
					{/if}
					<div class="service-text">
						<h2>{service.title}</h2>
						{#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>
				</article>
			{/each}
		</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-grid">
			<div class="contact-info">
				{#if data.contact.address}
					<p class="address">{data.contact.address}</p>
				{/if}
				{#if data.contact.email}
					<p><a href="mailto:{data.contact.email}">{data.contact.email}</a></p>
				{/if}
				{#if data.contact.phone}
					<p><a href="tel:{data.contact.phone.replace(/\s+/g, '')}">{data.contact.phone}</a></p>
				{/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}
		</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: 2.5em;
	}

	.service {
		display: flex;
		flex-direction: column;
		gap: 1.5em;
		align-items: center;
	}

	.service-media {
		width: 100%;
		aspect-ratio: 4 / 3;
		border-radius: 12px;
		overflow: hidden;
		background: #11161a;
	}

	.service-text {
		width: 100%;
	}

	.service-text h2 {
		margin: 0 0 0.4em;
	}

	.desc {
		color: #c7c9cf;
		margin: 0 0 0.8em;
	}

	.service-text ul {
		margin: 0;
		padding-left: 1.2em;
	}

	.service-text li {
		margin-bottom: 0.5em;
		color: #c7c9cf;
	}

	.section-title {
		text-align: center;
		margin: 0 0 1em;
	}

	.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-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5em;
	}

	.contact-info {
		font-size: 1.1em;
		line-height: 1.6;
	}

	.address {
		white-space: pre-line;
		color: #c7c9cf;
	}

	.contact-info a {
		color: #e5e4ea;
		text-decoration: none;
	}

	.contact-info a:hover {
		color: #42af38;
	}

	.map {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 12px;
		overflow: hidden;
	}

	.map iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}

	@media (min-width: 800px) {
		.service {
			flex-direction: row;
		}

		.service.reverse {
			flex-direction: row-reverse;
		}

		.service-media {
			width: 48%;
			flex-shrink: 0;
		}

		.contact-grid {
			grid-template-columns: 1fr 1fr;
			align-items: start;
		}
	}
</style>