Layouts update

src/lib/components/products/ServicesLayout.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-    import type { Service } from '$lib/types/service'; 
-
-    export let services: Service[] = [];
-</script>
-
-<div class="grid md:grid-cols-3 gap-4 p-4">
-    {#each services as service}
-        <div class="overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow">
-            <div class="p-6">
-                <h1 class="text-center font-semibold text-xl mb-4">{service.category}</h1>
-                {#each service.items as item}
-                    <div class="flex border-b border-gray-200 last:border-b-0 p-4 hover:bg-gray-100">
-                        <div class="flex-none w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('/images/services/{item.id}');"></div>
-                        <div class="flex-grow p-3">
-                            <h4 class="font-semibold">{item.name}</h4>
-                            <p class="text-gray-600">{item.description}</p>
-                        </div>
-                        <div class="flex-none text-right">
-                            <p class="text-lg font-semibold">
-                                {typeof item.price === 'number' ? `${item.price},-` : item.price}
-                            </p>
-                            <a href="https://app.cal.com/kkosmetickysalon/{item.id}" class="text-indigo-600 hover:text-indigo-800">Objednejte se</a>
-                        </div>
-                    </div>
-                {/each}
-            </div>
-        </div>
-    {/each}
-</div>
-
-<style lang="postcss">
-    service-card {
-    @apply grid gap-4 p-4};
-    @media (max-width: 768px) {
-        @apply grid-cols-1;
-    }
-</style>

src/lib/components/products/Testimonial.svelte

@@ -1,33 +0,0 @@
-<section class="text-gray-600 body-font">
-    <div class="container px-5 py-24 mx-auto">
-      <div class="flex flex-wrap -m-4">
-        <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
-          <div class="h-full text-center">
-            <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/302x302">
-            <p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
-            <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
-            <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
-            <p class="text-gray-500">Senior Product Designer</p>
-          </div>
-        </div>
-        <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
-          <div class="h-full text-center">
-            <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/300x300">
-            <p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
-            <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
-            <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
-            <p class="text-gray-500">UI Develeoper</p>
-          </div>
-        </div>
-        <div class="lg:w-1/3 lg:mb-0 p-4">
-          <div class="h-full text-center">
-            <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/305x305">
-            <p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
-            <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
-            <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
-            <p class="text-gray-500">CTO</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>

src/lib/components/services/ServiceCard.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { getImageLink } from "$lib/images";
+
+    export let item: any = {};
+</script>
+
+<a href="/sluzby/{item.id}" class="w-72 card variant-glass-secondary mx-2 my-4 duration-500 hover:scale-105 hover:shadow-xl shadow-md">
+    <header>
+        <img src={getImageLink({id: item.id, w: 288, h: 320 })} class="bg-black/50 object-cover aspect-[9/10] rounded-t-xl" alt="Post" />
+    </header>
+    <!-- <div class="img" style="background-image: url('/images/services/{item.id}.jpg');"/>                -->
+    <div class="flex flex-col px-4 py-3 w-72 h-full">
+        <div class="flex flex-row justify-between px-2 gap-y-2">
+            <h3 class="h3 font-semibold w-full">{item.name}</h3>
+            
+        </div>
+        <article>
+            <p class="text-gray-800 font-medium hidden md:block mb-4">
+                {item.description}
+            </p>
+            <a 
+                href="/sluzby/{item.id}" 
+                class="text-primary-600 hover:text-primary-800 underline mb-2 md:mb-0">
+                ...Zjistěte více
+                </a>
+        </article>
+
+        <hr class="border-gray-100 mb-4" />
+        <footer class="justify-self-end align-bottom">
+            <div class="flex flex-col md:flex-row md:justify-between items-center">
+                <p class=" text-lg text-surface-900 font-semibold text-right">
+                    {typeof item.price === 'number' ? `${item.price},-` : item.price}{typeof item.duration === 'number' ? `/${item.duration}h` : ''}
+                </p>
+                <a 
+                href="https://app.cal.com/kkosmetickysalon/{item.id}" 
+                class="btn btn-md variant-filled-primary">
+                Rezervace
+                </a>
+            </div>
+        </footer>
+        
+    </div>
+</a>

src/lib/components/services/ServicesLayout.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { Service } from '$lib/types/service'; 
+    import ServiceCard from '$lib/components/services/ServiceCard.svelte';
+    import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+
+    export let services: Service[] = [];
+</script>
+
+
+    <Accordion class="bg-surface-100 w-full md:card p-4 md:max-w-[75%]">
+        {#each services as service}
+            <AccordionItem on>
+                <svelte:fragment slot="lead">
+                    <i class="fa-solid fa-wand-magic-sparkles text-xl w-6 text-center" />
+                </svelte:fragment>
+                <svelte:fragment slot="summary">
+                    <p class="text-lg font-bold">{service.category}</p>
+                </svelte:fragment>
+                <svelte:fragment slot="content">
+                    <div class="w-fit mx-auto flex flex-wrap justify-center justify-items-center gap-y-6 gap-x-8 mt-8 mb-5">
+                        {#each service.items as item} 
+                                <ServiceCard {item} />
+                        {/each}
+                    </div>
+                </svelte:fragment>
+            </AccordionItem>
+        {/each}
+    </Accordion>
+
+    
+
+<style lang="postcss">
+    .services-container {
+        @apply grid md:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 p-4;
+    }
+    @media (max-width: 768px) {
+        .services-container {
+            @apply grid-cols-1;
+        }
+    }
+    
+</style>

src/lib/components/services/ServicesLayout_older.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import type { Service } from '$lib/types/service'; 
+
+    export let services: Service[] = [];
+</script>
+
+<div class="service-container">
+    {#each services as service}
+        <div class="service-card">
+            <h2 class="h2 text-center font-bold  mb-4">{service.category}</h2>
+            {#each service.items as item}
+                <div class="service-item">
+                    <div class="img" style="background-image: url('/images/services/{item.id}.jpg');"/>               
+                    <div class="flex-grow flex flex-col justify-between p-3">
+                        <div class="flex flex-row justify-between">
+                            <h3 class="h3 font-semibold mb-2 max-w-lg">{item.name}</h3>
+                            <p class="text-xl font-semibold">
+                                {typeof item.price === 'number' ? `${item.price},-` : item.price}
+                            </p>
+                        </div>
+                        <p class="text-gray-600 hidden md:block mb-4">
+                            {item.description}
+                            
+                        </p>
+                        <div class="flex flex-col md:flex-row justify-between md:items-center">
+                            <a 
+                            href="/sluzby/{item.id}" 
+                            class="text-indigo-600 hover:text-indigo-800 mb-2 md:mb-0">
+                            ...Zjistěte více
+                            </a>
+                            <a 
+                            href="https://app.cal.com/kkosmetickysalon/{item.id}" 
+                            class="btn btn-md variant-filled-primary">
+                            Objednejte se
+                            </a>
+                            
+                            
+                        </div> 
+                    </div>
+                </div>
+            {/each}
+        </div>
+    {/each}
+</div>
+
+<style lang="postcss">
+    .service-container {
+        @apply grid md:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 p-4;
+    }
+    @media (max-width: 768px) {
+        .service-container {
+            @apply grid-cols-1;
+        }
+    }
+    .img {
+        @apply flex-none w-full h-32 rounded-lg bg-cover bg-center mb-2 ;
+    }
+    .service-item {
+        @apply flex flex-col card variant-glass-secondary card-hover overflow-hidden mx-2 my-4 p-4;
+
+    }
+    .service-card {
+        @apply overflow-hidden rounded-lg p-6;
+    }
+</style>

src/routes/+layout.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
+
+	// Styleshit
 	import '../app.postcss';
+
+	// Font Gruesome
+	import '@fortawesome/fontawesome-free/css/fontawesome.css';
+	import '@fortawesome/fontawesome-free/css/brands.css';
+	import '@fortawesome/fontawesome-free/css/solid.css';
+
+	// Components & Utilities
 	import { AppShell } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
 
@@ -40,7 +49,8 @@
 		if (elemTarget) elemTarget.scrollIntoView({ behavior: 'smooth' });
 	};
 	</script>
-<!-- SEO Meta tags -->
+
+<!-- SEO -->
 <svelte:head>
 	<title>{meta.title}</title>
 	<!-- Meta Tags -->
@@ -68,16 +78,17 @@
 	<meta name="twitter:image" content={meta.twitter.image} />
 </svelte:head>
 
-<!-- <Analytics />
+<!-- <Analytics /> -->
- -->
 <!-- App Shell -->
 <AppShell>
 	<svelte:fragment slot="header">
 		<MainHeader />
 	</svelte:fragment>
 	<!-- Page Route Content -->
+	
 		<slot />
-	<svelte:fragment slot="pageFooter">
+
+	<svelte:fragment slot="footer">
 		<MainFooter />
 	</svelte:fragment>
 </AppShell>