Header Detailpage #64

src/lib/components/atoms/HeaderImage.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let alt = ''
+  export let src = ''
+  export let opacity = ''
+
+  // Define different image sources for different resolutions or viewport widths
+  export let Small = 'header-image-small.webp'
+  export let Medium = 'header-image-medium.webp'
+  export let Large = 'header-image-large.webp'
+</script>
+
+<picture>
+  <!-- Source for small screens -->
+  <source media="(max-width: 375px)" srcset={Small} />
+
+  <!-- Source for medium screens -->
+  <source media="(max-width: 768px)" srcset={Medium} />
+
+  <!-- Source for large screens -->
+  <source media="(max-width: 1024px)" srcset={Large} />
+
+  <img {src} {alt} style={`opacity: ${opacity}`} />
+</picture>
+
+<style>
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/lib/components/atoms/IconLocation.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let height = ''
+  export let width = ''
+  export let color = ''
+</script>
+
+<svg
+  class="svg-location"
+  {width}
+  {height}
+  fill={color}
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+>
+  <path
+    stroke="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 .042a9.992 9.992 0 0 0-9.981 9.98c0 2.57 1.99 6.592 5.915 11.954a5.034 5.034 0 0 0 8.132 0c3.925-5.362 5.915-9.384 5.915-11.954A9.992 9.992 0 0 0 12 .042ZM12 14a4 4 0 1 1 4-4 4 4 0 0 1-4 4Z"
+  />
+</svg>

src/lib/components/molecules/HeaderContent.svelte

@@ -0,0 +1,130 @@
+<script>
+  import IconLocation from '../atoms/IconLocation.svelte'
+
+  // Mockdata voor de header text
+  const mockData = [
+    {
+      title: 'Regular',
+      subtitle: 'cocktail walk',
+      label: 'route 1',
+      location: 'Center, West',
+      price: '€25,95',
+    },
+    {
+      title: 'Premium',
+      subtitle: 'cocktail walk',
+      label: 'route 2',
+      location: 'Center, West',
+      price: '€26,95',
+    },
+    {
+      title: 'Bols',
+      subtitle: 'cocktail walk',
+      label: 'route 3',
+      location: 'Center, West',
+      price: '€29,95',
+    },
+  ]
+</script>
+
+<section class="content-container">
+  <!-- First content row -->
+  <div class="title-label">
+    <h1>{mockData[0].title}</h1>
+    <span class="label" aria-hidden="true">{mockData[0].label}</span>
+  </div>
+
+  <!-- Second content row -->
+  <h1 class="subtitle">{mockData[0].subtitle}</h1>
+
+  <!-- Last content row -->
+  <div class="location-price">
+    <IconLocation width="15" height="15" color="hsl(21.23, 100%, 87.25%)" />
+    <p class="location">{mockData[0].location}</p>
+    <p class="price">{mockData[0].price}</p>
+  </div>
+</section>
+
+<style>
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    margin: 5rem 2rem;
+  }
+
+  /* First content row */
+  h1 {
+    display: flex;
+    align-items: center;
+    font-size: 2rem;
+    text-transform: uppercase;
+    color: white;
+  }
+
+  .title-label {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .label {
+    padding: 0.3rem 0.5rem;
+    border: 1px solid var(--accent2-tertiary);
+    border-radius: 3rem;
+    font-size: 1rem;
+    font-weight: 600;
+    text-align: center;
+    color: var(--accent2-tertiary);
+  }
+
+  /* Second content row */
+  .subtitle {
+    font-size: 2rem;
+    text-transform: uppercase;
+    color: white;
+  }
+
+  /* Last content row */
+  .location-price {
+    display: flex;
+    align-items: center;
+  }
+
+  .location {
+    margin: 0 1rem 0 0.5rem;
+    color: var(--accent2-tertiary);
+  }
+
+  .price {
+    font-weight: 600;
+    color: var(--accent2-primary);
+  }
+
+  /* Large screens */
+  @media screen and (min-width: 768px) {
+    .content-container {
+      margin: 8rem 8rem;
+    }
+
+    h1 {
+      font-size: 3rem;
+    }
+
+    .label {
+      padding: 0.5rem 0.8rem;
+      font-size: 1.3rem;
+    }
+    .subtitle {
+      font-size: 3rem;
+    }
+
+    .location {
+      font-size: 1.3rem;
+    }
+
+    .price {
+      font-size: 1.3rem;
+    }
+  }
+</style>

src/lib/components/organisms/HeaderDetailPage.svelte

@@ -0,0 +1,32 @@
+<script>
+  import HeaderContent from '../molecules/HeaderContent.svelte'
+  import HeaderImage from '../atoms/HeaderImage.svelte'
+</script>
+
+<div class="header-container">
+  <HeaderImage src={'header-image-large.webp'} opacity="0.2" alt="cocktail" />
+  <div class="header-text">
+    <HeaderContent />
+  </div>
+</div>
+
+<style>
+  .header-container {
+    position: relative;
+    width: 100vw;
+    height: calc(100vh - 3rem);
+  }
+
+  .header-text {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  /* Large screens */
+  @media screen and (min-width: 48em) {
+    .header-text {
+      top: 0;
+    }
+  }
+</style>

src/lib/components/pages/TicketInfoPage.svelte

@@ -0,0 +1,5 @@
+<script>
+  import HeaderDetailPage from '../organisms/HeaderDetailPage.svelte'
+</script>
+
+<HeaderDetailPage />

src/lib/index.js

@@ -20,3 +20,6 @@ export { default as Footer } from '$lib/components/organisms/Footer.svelte'
 export { default as TabBar } from '$lib/components/organisms/TabBar.svelte'
 
 // Templates
+
+// Pages
+export { default as TicketInfoPage } from '$lib/components/pages/TicketInfoPage.svelte'

src/routes/+layout.svelte

@@ -1,16 +1,16 @@
 <script>
-  import { Navigation, Footer, TabBar } from '$lib/index'
+  import { Navigation, Footer, TabBar, TicketInfoPage } from '$lib/index'
   export let data
 </script>
 
 <header>
   <Navigation navigationItems={data.navigation} />
 </header>
 
+<TicketInfoPage />
+
 <main id="main">
-
   <slot />
-
 </main>
 
 <Footer footerItems={data.footer} />

src/routes/[slug]/+page.svelte

@@ -9,12 +9,12 @@
   <kruimelpad parentSlug />
 } -->
 
-<div>
+<!-- <div>
 Dit is een slug!!!!
 </div>
 
 <style>
   div {
     color: red;
   }
-</style>
+</style> -->