refactored all React components to Astro components

src/components/Button.astro

@@ -0,0 +1,22 @@
+---
+import { ArrowRightIcon } from "lucide-react";
+
+interface Props {
+	className?: string;
+	caption: string;
+	href?: string;
+	tab?: boolean;
+	small?: boolean;
+}
+
+const { className, caption, href, tab, small } = Astro.props;
+---
+
+<a
+	href={href}
+	class={`flex w-fit gap-2 py-4 px-5 rounded-full items-center font-medium bg-secondary text-white hover:bg-opacity-75'} ${small ? "py-[10px] px-4" : "py-4 px-5"} ${className || ""}`}
+	{...tab ? { target: "_blank" } : {}}
+>
+	{caption}
+	<ArrowRightIcon className="h-6 w-6" />
+</a>

src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
-import SRXLogo from "@srx/assets/srx-digital-logo.svg?react";
+import Config from "@srx/config/page.json";
+import Logo from "@srx/components/Logo.astro";
 import { AtSign, GitFork, Linkedin, MessagesSquare } from "lucide-react";
 ---
 
@@ -7,13 +8,13 @@ import { AtSign, GitFork, Linkedin, MessagesSquare } from "lucide-react";
 	class="flex flex-col md:flex-row items-start bg-default text-white py-20"
 >
 	<div class="flex flex-col lg:flex-grow">
-		<h3>
+		<h3>{Config.site.cta}</h3>
-			Du möchtest mit mir zusammenarbeiten? Ich freue mich über deinen
-			Kontakt.
-		</h3>
 		<p class="flex items-stretch gap-5 py-5">
 			<a
-				href={"mailto:latigid.xrs@srx.digital?subject=Kontakt%20%C3%BCber%20die%20Website"}
+				href={"mailto:" +
+					`${Config.contact.email.address}` +
+					"?subject=" +
+					`${encodeURIComponent(Config.contact.email.subject)}`}
 				><AtSign /></a
 			>
 			<a href="https://matrix.to/#/@swendel:curious.bio"
@@ -28,15 +29,17 @@ import { AtSign, GitFork, Linkedin, MessagesSquare } from "lucide-react";
 
 	<div class="flex flex-col lg:flex-grow">
 		<div>
-			srx digital<br />
+			{Config.site.title}<br />
-			Development & Operations<br />
+			{Config.site.subtitle}<br />
 		</div>
 		<address class="not-italic mt-8 md:mt-0 py-5">
-			Sebastian Wendel<br />
+			{Config.company.name}<br />
-			Wohlwillstraße 2<br />
+			{Config.company.street}
-			D-20359 Hamburg<br />
+			{Config.company.building}<br />
+			{Config.company.country}-{Config.company.plz}
+			{Config.company.city}<br />
 		</address>
 	</div>
 
-	<SRXLogo className="fill-primary h-10" />
+	<Logo />
 </footer>

src/components/Hero.astro

@@ -1,54 +1,30 @@
 ---
 import { Picture } from "astro:assets";
-import { LinkButton } from "@srx/components";
+import Portrait from "@srx/assets/swendel_portrait.webp";
-import SwendelPortrait from "@srx/assets/swendel_portrait.webp";
+import Config from "@srx/config/page.json";
+import Button from "@srx/components/Button.astro";
 ---
 
-<header>
+<header class="flex flex-col md:flex-row items-center">
-    <div class="hero">
+    <div class="flex flex-col lg:flex-grow">
-        <h1>You, me, technology.</h1>
+        <h1 class="mb-4">{Config.site.claim}</h1>
-        <p>
+        <p class="mb-8 leading-relaxed text-xl">{Config.site.description}</p>
-            Hallo! Ich bin Sebastian aus Hamburg, spezialisiert auf
-            Softwareentwicklung und Plattformengineering. Meine Welt sind Linux,
-            Container, Cloud und Hardware, besonders wenn's um Open-Source geht.
-            Ich helfe Firmen, ihre Digitalstrategien erfolgreich zu realisieren.
-        </p>
 
-        <LinkButton
+        <Button
-            className={"h-10"}
+            href={"mailto:" +
-            caption="Schreib mir"
+                `${Config.contact.email.address}` +
-            href={"mailto:latigid.xrs@srx.digital?subject=Kontakt%20%C3%BCber%20die%20Website"}
+                "?subject=" +
+                `${encodeURIComponent(Config.contact.email.subject)}`}
+            caption={Config.contact.email.caption}
         />
-        <slot />
     </div>
 
     <Picture
-        src={SwendelPortrait}
+        class="rounded-xl"
+        src={Portrait}
         formats={["jpeg", "webp"]}
-        widths={[240, 540, 720, SwendelPortrait.width]}
+        widths={[240, 540, 720, Portrait.width]}
-        sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${SwendelPortrait.width}px`}
+        sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${Portrait.width}px`}
         alt="Porträt von Sebastian Wendel"
     />
 </header>
-
-<style>
-    header {
-        @apply flex flex-col md:flex-row items-center;
-    }
-
-    h1 {
-        @apply mb-4;
-    }
-
-    p {
-        @apply mb-8 leading-relaxed text-xl;
-    }
-
-    img {
-        @apply rounded-xl;
-    }
-
-    .hero {
-        @apply flex flex-col lg:flex-grow;
-    }
-</style>

src/components/LinkButton.tsx

@@ -1,28 +0,0 @@
-import { ArrowRightIcon } from "lucide-react"
-
-interface Props {
-  caption: string
-  className?: string
-  href?: string
-  newTab?: boolean
-  small?: boolean
-}
-
-const LinkButton: React.FC<Props> = ({
-  caption,
-  className,
-  href,
-  newTab,
-  small,
-}: Props) => {
-  return (
-    <a href={href} className={`flex w-fit gap-2 py-4 px-5 rounded-full items-center font-medium bg-secondary text-white hover:bg-opacity-75'
-      } ${small ? 'py-[10px] px-4' : 'py-4 px-5'} ${className || ''}`}
-      {...(newTab ? { target: '_blank' } : {})}>
-      {caption}
-      <ArrowRightIcon className='h-6 w-6' />
-    </a>
-  )
-}
-
-export default LinkButton

src/components/Navbar.astro

@@ -1,19 +1,7 @@
 ---
-import SrxLogo from "@srx/assets/srx-digital-logo.svg?react";
+import Logo from "@srx/components/Logo.astro";
 ---
 
-<nav class="section">
+<nav class="bg-default h-20 py-5">
-	<a href={"/"}>
+	<Logo />
-		<SrxLogo />
-	</a>
 </nav>
-
-<style>
-	nav {
-		@apply bg-default h-20 py-5;
-	}
-
-	svg {
-		@apply fill-primary h-10;
-	}
-</style>

src/components/index.ts

@@ -1,5 +0,0 @@
-import LinkButton from "@srx/components/LinkButton";
-
-export {
-  LinkButton,
-}