refactor: Hero mit Titel und Slogan als eigenes Component

Cubyx-Network · Jul 30, 2023 · fcfa2fa · fcfa2fa
1 parent 79e0953
commit fcfa2fa
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 32 deletions.
diff --git a/src/components/Common/HeroWithTitleAndSlogan.svelte b/src/components/Common/HeroWithTitleAndSlogan.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Hero from "../Hero/Hero.svelte";
+
+  export let img: string;
+</script>
+
+<Hero {img}}>
+  <div class="dshadow text-center leading-[2rem] md:leading-[3rem] lg:leading-[4rem]">
+    <h1 class="uppercase tracking-[.3em]">
+      <slot />
+    </h1>
+    <h3>
+      Quadratisch<span class="text-accent">.</span> Praktisch<span class="text-accent">.</span>
+      Gut<span class="text-accent">.</span>
+    </h3>
+  </div>
+</Hero>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,26 +1,18 @@
 <script>
-	import Hero from '../components/Hero/Hero.svelte';
-	import { generateTitle } from '$lib/titleGenerator';
-	import SectionWithImageAndText from '../components/Common/SectionWithImageAndText.svelte';
-	import SectionSpacer from '../components/Common/SectionSpacer.svelte';
-	import { page } from '$app/stores';
-	import ArticlePreview from '../components/News/ArticlePreview.svelte';
-	import AboutTimeline from '../components/Timeline/AboutTimeline.svelte';
+	import { generateTitle } from "$lib/titleGenerator";
+	import SectionWithImageAndText from "../components/Common/SectionWithImageAndText.svelte";
+	import SectionSpacer from "../components/Common/SectionSpacer.svelte";
+	import { page } from "$app/stores";
+	import ArticlePreview from "../components/News/ArticlePreview.svelte";
+	import AboutTimeline from "../components/Timeline/AboutTimeline.svelte";
+	import HeroWithTitleAndSlogan from "../components/Common/HeroWithTitleAndSlogan.svelte";
 </script>
 
 <svelte:head>
 	<title>{generateTitle('Home')}</title>
 </svelte:head>
 
-<Hero img="/img/home/hero.png">
-	<div class="dshadow text-center leading-[2rem] md:leading-[3rem] lg:leading-[4rem]">
-		<h1 class="tracking-[.3em]">CUBYX NETWORK</h1>
-		<h3>
-			Quadratisch<span class="text-accent">.</span> Praktisch<span class="text-accent">.</span>
-			Gut<span class="text-accent">.</span>
-		</h3>
-	</div>
-</Hero>
+<HeroWithTitleAndSlogan img="/img/home/hero.png">Cubyx Network</HeroWithTitleAndSlogan>
 
 <div class="my-12 text-center leading-tight">
 	<h2>Herzlich Willkommen</h2>

diff --git a/src/routes/news/+page.svelte b/src/routes/news/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import ArticlePreview from '../../components/News/ArticlePreview.svelte';
-	import { page } from '$app/stores';
-	import Hero from '../../components/Hero/Hero.svelte';
-	import { generateTitle } from '$lib/titleGenerator';
-	import { filter } from '$lib/stores/newsStore';
-	import { onMount } from 'svelte';
-	import TagDisplay from '../../components/News/TagDisplay.svelte';
+	import ArticlePreview from "../../components/News/ArticlePreview.svelte";
+	import { page } from "$app/stores";
+	import { generateTitle } from "$lib/titleGenerator";
+	import { filter } from "$lib/stores/newsStore";
+	import { onMount } from "svelte";
+	import TagDisplay from "../../components/News/TagDisplay.svelte";
+	import HeroWithTitleAndSlogan from "../../components/Common/HeroWithTitleAndSlogan.svelte";
 
 	let articles = [];
 
@@ -35,15 +35,7 @@
 	<title>{generateTitle('Neuigkeiten')}</title>
 </svelte:head>
 
-<Hero img="/img/news/hero.jpg">
-	<div class="dshadow text-center leading-[2rem] md:leading-[3rem] lg:leading-[4rem]">
-		<h1 class="uppercase tracking-[.3em]">Aktuelle Neuigkeiten</h1>
-		<h3>
-			Quadratisch<span class="text-accent">.</span> Praktisch<span class="text-accent">.</span>
-			Gut<span class="text-accent">.</span>
-		</h3>
-	</div>
-</Hero>
+<HeroWithTitleAndSlogan img="/img/news/hero.jpg">Aktuelle Neuigkeiten</HeroWithTitleAndSlogan>
 
 <div
 	class="mx-auto my-8 w-full flex-col items-center justify-center gap-4 px-2 md:w-[80%] lg:w-1/2"

diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { generateTitle } from "$lib/titleGenerator";
+  import HeroWithTitleAndSlogan from "../../components/Common/HeroWithTitleAndSlogan.svelte";
+</script>
+
+<svelte:head>
+  <title>{generateTitle("Das Team")}</title>
+</svelte:head>
+
+<HeroWithTitleAndSlogan img="/img/team/hero.jpg">Das Cubyx Team</HeroWithTitleAndSlogan>
diff --git a/static/img/team/hero.jpg b/static/img/team/hero.jpg