changed components from react to astro

.envrc

@@ -3,4 +3,6 @@ use flake
 watch_file **/*.nix *.lock package.json
 
 yarn install
-yarn astro sync
+yarn astro sync
+
+export MODE=development

.vscode/extensions.json

@@ -1,4 +1,15 @@
 {
-  "recommendations": ["astro-build.astro-vscode", "kamadorueda.alejandra"],
+  "recommendations": [
+    "arrterian.nix-env-selector",
+    "astro-build.astro-vscode",
+    "bradlc.vscode-tailwindcss",
+    "csstools.postcss",
+    "ecmel.vscode-html-css",
+    "formulahendry.auto-complete-tag",
+    "jnoortheen.nix-ide",
+    "kamadorueda.alejandra",
+    "mikestead.dotenv",
+    "stylelint.vscode-stylelint",
+  ],
   "unwantedRecommendations": []
-}
+}

.vscode/settings.json

@@ -1,8 +1,20 @@
 {
+  "editor.linkedEditing": true,
   "editor.formatOnSave": true,
+  "files.associations": {
+    "*.mdx": "markdown",
+    "*.css": "tailwindcss",
+    "flake.lock": "json"
+  },
   "[nix]": {
     "editor.defaultFormatter": "kamadorueda.alejandra"
   },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  },
   "[json]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
@@ -18,7 +30,14 @@
   "[javascript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
+  "[tailwindcss]": {
+    "editor.defaultFormatter": "bradlc.vscode-tailwindcss"
+  },
   "[astro]": {
     "editor.defaultFormatter": "astro-build.astro-vscode"
-  }
+  },
+  "nix.serverPath": "nil",
+  "nix.enableLanguageServer": true,
+  "alejandra.program": "alejandra",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

nix/package.nix

@@ -30,6 +30,7 @@ in {
 
       packageJSON = ../package.json;
       yarnLock = ../yarn.lock;
+      yarnFlags = ["--offline" "--production=true"];
 
       pkgConfig.sharp = {
         nativeBuildInputs = with pkgs; [

package.json

@@ -19,8 +19,8 @@
     "url": "https://code.srx.digital/srx/srx.astro.nix/issues"
   },
   "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
+    "dev": "TAILWIND_MODE=watch astro dev",
+    "start": "TAILWIND_MODE=watch astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro"
@@ -32,6 +32,8 @@
     "@fontsource-variable/literata": "^5.0.20",
     "@fontsource-variable/manrope": "^5.0.19",
     "@fontsource-variable/martian-mono": "^5.0.12",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "astro": "^4.4.9",
@@ -45,4 +47,4 @@
   "devDependencies": {
     "vite-plugin-svgr": "^4.2.0"
   }
-}
+}

src/assets/srx-digital-logo.svg

@@ -1,11 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 160 80" enable-background="new 0 0 160 80">
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 160 80" enable-background="new 0 0 160 80" class="logo">
     <title>Das Logo formt aus den Buchstaben "s", "r", und "x" ein gleichschenkliges Dreieck mit ergänzenden Kreisen, symbolisiert die Einheit von "You, me, technology" und steht für Dynamik, Zusammenarbeit und Harmonie.</title>
-    <path class="wordmark" d="m14.699 0c-4.6 0-8.0988 0.89961-10.799 2.5996-2.5 1.9-3.8008 4.5008-3.8008 7.8008 0 2.8 0.90117 5 2.7012 6.5 1.8 1.6 4.6996 2.5996 8.5996 3.0996l4.9004 0.69922c2.4 0.4 4.0992 0.90156 5.1992 1.6016 1.1 0.7 1.6992 1.6988 1.6992 2.7988 0 1.8-0.79922 3.1-2.1992 4s-3.5008 1.4004-6.3008 1.4004c-2.7 0-4.8-0.49961-6.5-1.5996-1.6-1.1-2.6992-2.6-3.1992-4.5v0.19922h-5c0.2 3.5 1.5992 6.2012 4.1992 8.2012 2.5 1.9 6 2.8984 10.5 2.8984 3 0 5.5-0.39922 7.5-1.1992 2.1-0.9 3.7008-2.0996 4.8008-3.5996 1.1-1.6 1.6992-3.5012 1.6992-5.7012 0-2.8-0.89922-5-2.6992-6.5-1.7-1.5-4.6-2.4996-8.5-3.0996l-4.9004-0.69922c-2.4-0.3-4.0992-0.8-5.1992-1.5-1.1-0.7-1.7012-1.7008-1.7012-2.8008-1e-7 -1.8 0.80078-3.1 2.3008-4 1.6-0.9 3.7992-1.4004 6.6992-1.4004 2.8-1e-7 5.0012 0.60078 6.7012 1.8008 1.7 1.1 2.7988 2.8 3.2988 5h5c-0.2-3.8-1.5992-6.7008-4.1992-8.8008-2.6-2.1-6.2008-3.1992-10.801-3.1992zm49.801 0c-1.7 0-3.2 0.4-4.5 1s-2.3996 1.4996-3.0996 2.5996h-1.5996v-2.7988h-13.602v5.1992h8.5v23.699h-7.2988v5.1016h24.9v-5.1016h-12.201v-13.1c0-3.8 0.60078-6.6 1.8008-8.5 1.2-1.9 2.9988-2.9004 5.2988-2.9004 3.9 0 5.8008 2.2016 5.8008 6.6016v3.6992h5.6992v-4.5996c0-3.4-0.89961-6.1-2.5996-8-1.7-1.9-4.0996-2.9004-7.0996-2.9004zm-45.199 46.1 11.898 17.701-11.199 16.199h6.1992l8.6016-12.4 0.5-1.4004h0.5l0.5 1.4004 8.5 12.4h6.6992l-11.301-16.6 12-17.201h-6.1992l-9.5 13.5-0.5 1.4004h-0.5l-0.5-1.4004-9.0996-13.6h-6.5996z"/>
-    <path class="picturemark" d="m117 0c-3 0-6.0008 0.7-8.8008 2-2.7 1.3-5.1996 3.2-7.0996 5.5-1.9 2.3-3.2996 5.1-4.0996 8s-0.90078 6-0.30078 9l6.7012-11.5c1.4-2.4 3.2992-4.4008 5.6992-5.8008 2.4-1.4 5.1004-2.0996 7.9004-2.0996s5.5004 0.69961 7.9004 2.0996c2.4 1.4 4.3992 3.4008 5.6992 5.8008l6.5996 11.4c0.6-3 0.50117-6-0.29883-9-0.8-2.9-2.0996-5.7-4.0996-8-1.9-2.3-4.4016-4.2-7.1016-5.5-2.7-1.2-5.6992-1.9004-8.6992-1.9004zm-0.09961 10.4c-2.7 0-5.3008 1.1-7.3008 3-1.8 1.9-2.9004 4.4992-2.9004 7.1992 0 2 0.60117 4.0012 1.7012 5.7012 1.1 1.7 2.6996 2.9988 4.5996 3.7988 1.9 0.8 3.9004 0.99961 5.9004 0.59961 2-0.4 3.7988-1.3988 5.2988-2.7988 1.4-1.4 2.4008-3.3008 2.8008-5.3008s0.20039-4.1004-0.59961-5.9004c-0.8-1.9-2.1008-3.4996-3.8008-4.5996s-3.6992-1.6992-5.6992-1.6992zm0.19922 5.2988c1.3 0 2.6 0.5 3.5 1.5 0.9 0.8 1.4004 2.1004 1.4004 3.4004 0 1-0.30078 1.9008-0.80078 2.8008-0.5 0.8-1.2992 1.4988-2.1992 1.7988-0.9 0.4-1.9004 0.50078-2.9004 0.30078s-1.9-0.70039-2.5-1.4004c-0.7-0.7-1.2004-1.6-1.4004-2.5-0.2-1-0.09922-2.0004 0.30078-2.9004s1.0008-1.6992 1.8008-2.1992 1.7988-0.80078 2.7988-0.80078zm-14.6 9.6016-3.3008 5.5996c1.8 3.1 4.4 5.7996 7.5 7.5996s6.7008 2.8008 10.301 2.8008 7.2008-1.0008 10.301-2.8008c3.1-1.9 5.7-4.4996 7.5-7.5996l-3.3008-5.5996c-1 3.1-2.9 5.7992-5.5 7.6992s-5.8 3-9 3-6.4-1-9-3c-2.6-1.9-4.6-4.5992-5.5-7.6992zm36.9 13.5c-3.6 0-7.2008 0.89883-10.301 2.7988-3.1 1.8-5.7 4.4-7.5 7.5s-2.7988 6.7008-2.7988 10.301c0 3.6 0.99883 7.1988 2.7988 10.299h6.5c-2.5-2.8-4-6.4988-4-10.299 0-2.3 0.5-4.4996 1.5-6.5996s2.4012-3.9008 4.2012-5.3008 3.8996-2.4 6.0996-3c2.2-0.5 4.4988-0.5 6.7988 0l-3.2988-5.6992zm-44.125 0.09375c-0.22485-0.002295-0.45078-3.9e-4 -0.67578 0.00586l-3.2988 5.6992c3.2-0.7 6.4984-0.39961 9.3984 0.90039 3 1.3 5.4016 3.5008 7.1016 6.3008 1.6 2.8 2.3 6.0988 2 9.2988-0.3 3.2-1.7004 6.3012-3.9004 8.7012h6.5c1.8-3.1 2.7988-6.7008 2.7988-10.301s-0.89883-7.2008-2.7988-10.301c-1.8-3.1-4.3996-5.7-7.5996-7.5-2.8125-1.7812-6.1526-2.7703-9.5254-2.8047zm-7.4746 1.1055c-2.9 1-5.5016 2.5992-7.6016 4.6992-2.2 2.1-3.7984 4.7-4.8984 7.5s-1.5012 5.9004-1.2012 8.9004c0.3 3 1.2012 5.8996 2.7012 8.5996 1.5 2.6 3.5996 4.9016 6.0996 6.6016 2.5 1.7 5.2988 2.8984 8.2988 3.3984 3 0.5 6 0.4 9-0.5 2.9-0.8 5.6004-2.2992 7.9004-4.1992h-13.299c-2.8 0-5.5004-0.69961-7.9004-2.0996-2.4-1.3-4.3012-3.3012-5.7012-5.7012-1.4-2.4-2.0996-5.0984-2.0996-7.8984s0.69961-5.5004 2.0996-7.9004l6.6016-11.4zm58.398 0 6.6016 11.4c1.4 2.4 2.0996 5.1004 2.0996 7.9004s-0.69961 5.4984-2.0996 7.8984c-1.4 2.4-3.4008 4.4008-5.8008 5.8008s-5.1004 2.0996-7.9004 2.0996h-13.1c2.3 2 5.0004 3.4012 7.9004 4.2012s6 1 9 0.5c3-0.5 5.7988-1.7004 8.2988-3.4004 2.5-1.7 4.6016-3.9996 6.1016-6.5996 1.5-2.6 2.3992-5.5016 2.6992-8.6016 0.3-3-0.19922-5.9984-1.1992-8.8984-1-2.8-2.7004-5.4-4.9004-7.5-2.2-2.2-4.8012-3.8008-7.7012-4.8008zm-6.7988 9.1992c-2.7 0-5.3008 1.1-7.3008 3-1.9 1.9-2.9004 4.5012-2.9004 7.2012 0 2 0.60117 3.9992 1.7012 5.6992 1.1 1.7 2.6996 3.0008 4.5996 3.8008 1.9 0.8 3.9004 0.99961 5.9004 0.59961s3.7988-1.4008 5.2988-2.8008c1.4-1.4 2.4008-3.2988 2.8008-5.2988s0.20039-4.1004-0.59961-5.9004c-0.8-1.9-2.1008-3.4996-3.8008-4.5996s-3.6992-1.7012-5.6992-1.7012zm-45.072 0.003906c-1.2617 0.03125-2.5039 0.29688-3.6289 0.79688-1.9 0.8-3.4996 2.1008-4.5996 3.8008-1.1 1.7-1.6992 3.6992-1.6992 5.6992 0 2.7 1.1 5.3008 3 7.3008s4.4992 2.8984 7.1992 2.8984c2 0 4.0012-0.59922 5.7012-1.6992 1.7-1.1 2.9988-2.6996 3.7988-4.5996s0.99961-3.9004 0.59961-5.9004-1.3988-3.8008-2.7988-5.3008c-1.4-1.4-3.3008-2.3988-5.3008-2.7988-0.75-0.15-1.5145-0.21602-2.2715-0.19727zm0.27148 5.2969c1 0 2.0008 0.30078 2.8008 0.80078 0.8 0.5 1.4988 1.2992 1.7988 2.1992 0.4 0.9 0.50078 1.9004 0.30078 2.9004s-0.70039 1.8996-1.4004 2.5996c-0.7 0.7-1.5996 1.2004-2.5996 1.4004-1 0.2-2.0004 0.099218-2.9004-0.30078-0.9-0.4-1.6992-0.99883-2.1992-1.7988-0.5-0.8-0.80078-1.8008-0.80078-2.8008 0-1.3 0.5-2.6 1.5-3.5 0.9-1 2.2-1.5 3.5-1.5zm44.9 0c1.3 0 2.6 0.5 3.5 1.5 0.9 0.8 1.4004 2.1004 1.4004 3.4004 0 1-0.30078 1.8988-0.80078 2.7988-0.5 0.8-1.2992 1.5008-2.1992 1.8008-0.9 0.4-1.9004 0.50078-2.9004 0.30078s-1.9-0.70039-2.5-1.4004c-0.7-0.7-1.2004-1.6-1.4004-2.5-0.2-1-0.09922-2.0004 0.30078-2.9004s0.99883-1.6992 1.7988-2.1992c0.8-0.5 1.8008-0.80078 2.8008-0.80078z"/>
-    <style>
-        path {
-            fill: #28d27d;
-        }
-    </style>
+    <path id="wordmark" d="m14.699 0c-4.6 0-8.0988 0.89961-10.799 2.5996-2.5 1.9-3.8008 4.5008-3.8008 7.8008 0 2.8 0.90117 5 2.7012 6.5 1.8 1.6 4.6996 2.5996 8.5996 3.0996l4.9004 0.69922c2.4 0.4 4.0992 0.90156 5.1992 1.6016 1.1 0.7 1.6992 1.6988 1.6992 2.7988 0 1.8-0.79922 3.1-2.1992 4s-3.5008 1.4004-6.3008 1.4004c-2.7 0-4.8-0.49961-6.5-1.5996-1.6-1.1-2.6992-2.6-3.1992-4.5v0.19922h-5c0.2 3.5 1.5992 6.2012 4.1992 8.2012 2.5 1.9 6 2.8984 10.5 2.8984 3 0 5.5-0.39922 7.5-1.1992 2.1-0.9 3.7008-2.0996 4.8008-3.5996 1.1-1.6 1.6992-3.5012 1.6992-5.7012 0-2.8-0.89922-5-2.6992-6.5-1.7-1.5-4.6-2.4996-8.5-3.0996l-4.9004-0.69922c-2.4-0.3-4.0992-0.8-5.1992-1.5-1.1-0.7-1.7012-1.7008-1.7012-2.8008-1e-7 -1.8 0.80078-3.1 2.3008-4 1.6-0.9 3.7992-1.4004 6.6992-1.4004 2.8-1e-7 5.0012 0.60078 6.7012 1.8008 1.7 1.1 2.7988 2.8 3.2988 5h5c-0.2-3.8-1.5992-6.7008-4.1992-8.8008-2.6-2.1-6.2008-3.1992-10.801-3.1992zm49.801 0c-1.7 0-3.2 0.4-4.5 1s-2.3996 1.4996-3.0996 2.5996h-1.5996v-2.7988h-13.602v5.1992h8.5v23.699h-7.2988v5.1016h24.9v-5.1016h-12.201v-13.1c0-3.8 0.60078-6.6 1.8008-8.5 1.2-1.9 2.9988-2.9004 5.2988-2.9004 3.9 0 5.8008 2.2016 5.8008 6.6016v3.6992h5.6992v-4.5996c0-3.4-0.89961-6.1-2.5996-8-1.7-1.9-4.0996-2.9004-7.0996-2.9004zm-45.199 46.1 11.898 17.701-11.199 16.199h6.1992l8.6016-12.4 0.5-1.4004h0.5l0.5 1.4004 8.5 12.4h6.6992l-11.301-16.6 12-17.201h-6.1992l-9.5 13.5-0.5 1.4004h-0.5l-0.5-1.4004-9.0996-13.6h-6.5996z"/>
+    <path id="picturemark" d="m117 0c-3 0-6.0008 0.7-8.8008 2-2.7 1.3-5.1996 3.2-7.0996 5.5-1.9 2.3-3.2996 5.1-4.0996 8s-0.90078 6-0.30078 9l6.7012-11.5c1.4-2.4 3.2992-4.4008 5.6992-5.8008 2.4-1.4 5.1004-2.0996 7.9004-2.0996s5.5004 0.69961 7.9004 2.0996c2.4 1.4 4.3992 3.4008 5.6992 5.8008l6.5996 11.4c0.6-3 0.50117-6-0.29883-9-0.8-2.9-2.0996-5.7-4.0996-8-1.9-2.3-4.4016-4.2-7.1016-5.5-2.7-1.2-5.6992-1.9004-8.6992-1.9004zm-0.09961 10.4c-2.7 0-5.3008 1.1-7.3008 3-1.8 1.9-2.9004 4.4992-2.9004 7.1992 0 2 0.60117 4.0012 1.7012 5.7012 1.1 1.7 2.6996 2.9988 4.5996 3.7988 1.9 0.8 3.9004 0.99961 5.9004 0.59961 2-0.4 3.7988-1.3988 5.2988-2.7988 1.4-1.4 2.4008-3.3008 2.8008-5.3008s0.20039-4.1004-0.59961-5.9004c-0.8-1.9-2.1008-3.4996-3.8008-4.5996s-3.6992-1.6992-5.6992-1.6992zm0.19922 5.2988c1.3 0 2.6 0.5 3.5 1.5 0.9 0.8 1.4004 2.1004 1.4004 3.4004 0 1-0.30078 1.9008-0.80078 2.8008-0.5 0.8-1.2992 1.4988-2.1992 1.7988-0.9 0.4-1.9004 0.50078-2.9004 0.30078s-1.9-0.70039-2.5-1.4004c-0.7-0.7-1.2004-1.6-1.4004-2.5-0.2-1-0.09922-2.0004 0.30078-2.9004s1.0008-1.6992 1.8008-2.1992 1.7988-0.80078 2.7988-0.80078zm-14.6 9.6016-3.3008 5.5996c1.8 3.1 4.4 5.7996 7.5 7.5996s6.7008 2.8008 10.301 2.8008 7.2008-1.0008 10.301-2.8008c3.1-1.9 5.7-4.4996 7.5-7.5996l-3.3008-5.5996c-1 3.1-2.9 5.7992-5.5 7.6992s-5.8 3-9 3-6.4-1-9-3c-2.6-1.9-4.6-4.5992-5.5-7.6992zm36.9 13.5c-3.6 0-7.2008 0.89883-10.301 2.7988-3.1 1.8-5.7 4.4-7.5 7.5s-2.7988 6.7008-2.7988 10.301c0 3.6 0.99883 7.1988 2.7988 10.299h6.5c-2.5-2.8-4-6.4988-4-10.299 0-2.3 0.5-4.4996 1.5-6.5996s2.4012-3.9008 4.2012-5.3008 3.8996-2.4 6.0996-3c2.2-0.5 4.4988-0.5 6.7988 0l-3.2988-5.6992zm-44.125 0.09375c-0.22485-0.002295-0.45078-3.9e-4 -0.67578 0.00586l-3.2988 5.6992c3.2-0.7 6.4984-0.39961 9.3984 0.90039 3 1.3 5.4016 3.5008 7.1016 6.3008 1.6 2.8 2.3 6.0988 2 9.2988-0.3 3.2-1.7004 6.3012-3.9004 8.7012h6.5c1.8-3.1 2.7988-6.7008 2.7988-10.301s-0.89883-7.2008-2.7988-10.301c-1.8-3.1-4.3996-5.7-7.5996-7.5-2.8125-1.7812-6.1526-2.7703-9.5254-2.8047zm-7.4746 1.1055c-2.9 1-5.5016 2.5992-7.6016 4.6992-2.2 2.1-3.7984 4.7-4.8984 7.5s-1.5012 5.9004-1.2012 8.9004c0.3 3 1.2012 5.8996 2.7012 8.5996 1.5 2.6 3.5996 4.9016 6.0996 6.6016 2.5 1.7 5.2988 2.8984 8.2988 3.3984 3 0.5 6 0.4 9-0.5 2.9-0.8 5.6004-2.2992 7.9004-4.1992h-13.299c-2.8 0-5.5004-0.69961-7.9004-2.0996-2.4-1.3-4.3012-3.3012-5.7012-5.7012-1.4-2.4-2.0996-5.0984-2.0996-7.8984s0.69961-5.5004 2.0996-7.9004l6.6016-11.4zm58.398 0 6.6016 11.4c1.4 2.4 2.0996 5.1004 2.0996 7.9004s-0.69961 5.4984-2.0996 7.8984c-1.4 2.4-3.4008 4.4008-5.8008 5.8008s-5.1004 2.0996-7.9004 2.0996h-13.1c2.3 2 5.0004 3.4012 7.9004 4.2012s6 1 9 0.5c3-0.5 5.7988-1.7004 8.2988-3.4004 2.5-1.7 4.6016-3.9996 6.1016-6.5996 1.5-2.6 2.3992-5.5016 2.6992-8.6016 0.3-3-0.19922-5.9984-1.1992-8.8984-1-2.8-2.7004-5.4-4.9004-7.5-2.2-2.2-4.8012-3.8008-7.7012-4.8008zm-6.7988 9.1992c-2.7 0-5.3008 1.1-7.3008 3-1.9 1.9-2.9004 4.5012-2.9004 7.2012 0 2 0.60117 3.9992 1.7012 5.6992 1.1 1.7 2.6996 3.0008 4.5996 3.8008 1.9 0.8 3.9004 0.99961 5.9004 0.59961s3.7988-1.4008 5.2988-2.8008c1.4-1.4 2.4008-3.2988 2.8008-5.2988s0.20039-4.1004-0.59961-5.9004c-0.8-1.9-2.1008-3.4996-3.8008-4.5996s-3.6992-1.7012-5.6992-1.7012zm-45.072 0.003906c-1.2617 0.03125-2.5039 0.29688-3.6289 0.79688-1.9 0.8-3.4996 2.1008-4.5996 3.8008-1.1 1.7-1.6992 3.6992-1.6992 5.6992 0 2.7 1.1 5.3008 3 7.3008s4.4992 2.8984 7.1992 2.8984c2 0 4.0012-0.59922 5.7012-1.6992 1.7-1.1 2.9988-2.6996 3.7988-4.5996s0.99961-3.9004 0.59961-5.9004-1.3988-3.8008-2.7988-5.3008c-1.4-1.4-3.3008-2.3988-5.3008-2.7988-0.75-0.15-1.5145-0.21602-2.2715-0.19727zm0.27148 5.2969c1 0 2.0008 0.30078 2.8008 0.80078 0.8 0.5 1.4988 1.2992 1.7988 2.1992 0.4 0.9 0.50078 1.9004 0.30078 2.9004s-0.70039 1.8996-1.4004 2.5996c-0.7 0.7-1.5996 1.2004-2.5996 1.4004-1 0.2-2.0004 0.099218-2.9004-0.30078-0.9-0.4-1.6992-0.99883-2.1992-1.7988-0.5-0.8-0.80078-1.8008-0.80078-2.8008 0-1.3 0.5-2.6 1.5-3.5 0.9-1 2.2-1.5 3.5-1.5zm44.9 0c1.3 0 2.6 0.5 3.5 1.5 0.9 0.8 1.4004 2.1004 1.4004 3.4004 0 1-0.30078 1.8988-0.80078 2.7988-0.5 0.8-1.2992 1.5008-2.1992 1.8008-0.9 0.4-1.9004 0.50078-2.9004 0.30078s-1.9-0.70039-2.5-1.4004c-0.7-0.7-1.2004-1.6-1.4004-2.5-0.2-1-0.09922-2.0004 0.30078-2.9004s0.99883-1.6992 1.7988-2.1992c0.8-0.5 1.8008-0.80078 2.8008-0.80078z"/>
 </svg>

src/authors/swendel.json

@@ -1,15 +0,0 @@
-{
-    "firstName": "Sebastian",
-    "lastName": "Wendel",
-    "bio": "His focus is on software development as well as platform and cloud engineering.",
-    "image": {
-        "default": "/images/sebastian_wendel.jpg",
-        "alt": "Portrait of Sebastian Wendel"
-    },
-    "social": {
-        "mastodon": "@swendel@srx.digital",
-        "linkedin": "https://www.linkedin.com/in/sebastian-wendel-935b8a9a/"
-    },
-    "chat": "swendel@srx.digital",
-    "homepage": "https://srx.digital/"
-}

src/components/Footer.astro

@@ -0,0 +1,79 @@
+---
+import SRXLogo from "@srx/assets/srx-digital-logo.svg";
+import SrxLogoR from "@srx/assets/srx-digital-logo.svg?react";
+
+import { Image } from "astro:assets";
+import {
+	GitFork,
+	AtSign,
+	GithubIcon,
+	Linkedin,
+	MessagesSquare,
+	MessageSquareQuote,
+} from "lucide-react";
+---
+
+<footer>
+	<div class="contact">
+		<h3>
+			Du möchtest mit mir zusammenarbeiten? Ich freue mich auf deine
+			Nachricht.
+		</h3>
+		<br />
+		<p class="socials">
+			<a href="mailto:latigid.xrs@srx.digital"><AtSign /></a>
+			<a href="https://matrix.to/#/@swendel:curious.bio"
+				><MessagesSquare /></a
+			>
+			<a href="https://social.curious.bio/@swendel"
+				><MessageSquareQuote /></a
+			>
+			<a href="https://code.srx.digital/explore/repos"><GitFork /></a>
+			<a href="https://github.com/SebastianWendel"><GithubIcon /></a>
+			<a href="https://www.linkedin.com/in/sebastian-wendel-935b8a9a/"
+				><Linkedin /></a
+			>
+		</p>
+	</div>
+
+	<div class="address">
+		<div>
+			srx digital<br />
+			Development & Operations<br />
+		</div>
+		<br />
+		<address>
+			Sebastian Wendel<br />
+			Wohlwillstraße 2<br />
+			D-20359 Hamburg<br />
+		</address>
+	</div>
+
+	<SrxLogoR />
+</footer>
+
+<style>
+	footer {
+		@apply flex flex-col md:flex-row items-start bg-default text-white;
+	}
+
+	address {
+		@apply not-italic mt-8 md:mt-0;
+	}
+
+	.address {
+		@apply flex flex-col lg:flex-grow;
+	}
+
+	.contact {
+		@apply flex flex-col lg:flex-grow;
+	}
+
+	.socials {
+		@apply flex items-stretch gap-5;
+	}
+
+	.logo {
+		@apply fill-primary h-10;
+	}
+</style>

src/components/Footer.tsx

@@ -1,43 +0,0 @@
-import type React from 'react'
-import SRXLogo from '@srx/assets/srx-digital-logo.svg?react'
-
-interface Props {
-  children?: React.ReactNode
-}
-
-const Footer: React.FC<Props> = ({ children }: Props) => {
-  return (
-    <>
-      <div className={'flex gap-8 flex-col justify-between md:pt-0.5 z-10 lg:col-start-2 lg:col-span-5 col-span-1'}>
-        <div>
-          <SRXLogo className={'h-8 md:h-10'} />
-        </div>
-
-        <div className='flex flex-col gap-6 items-start'>
-          {children}
-        </div>
-      </div>
-
-      <div className={'z-10 col-span-1 lg:col-span-6'}>
-        <h3 className={'text-xl md:text-bb-3xl font-grotesk'}>
-          Du möchtest mit uns zusammenarbeiten? Wir freuen uns auf deine E-Mail.
-        </h3>
-
-        <div className={'flex flex-col md:flex-row justify-between text-base md:text-lg leading-[1.4] mt-[11.5rem] md:mt-[17.875rem]'}>
-          <div>
-            srx digital<br />
-            Development & Operations<br />
-          </div>
-
-          <address className={'not-italic mt-8 md:mt-0'}>
-            Sebastian Wendel<br />
-            Wohlwillstraße 2<br />
-            20359 Hamburg<br />
-          </address>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default Footer

src/components/Hero.astro

@@ -0,0 +1,54 @@
+---
+import { Picture } from "astro:assets";
+import { LinkButton } from "@srx/components";
+import SwendelPortrait from "@srx/assets/swendel_portrait.webp";
+---
+
+<header>
+    <div class="hero">
+        <h1>You, me, technology.</h1>
+        <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
+            className={"h-10"}
+            caption="Schreib mir"
+            href={"mailto:latigid.xrs@srx.digital?subject=Kontakt%20%C3%BCber%20die%20Website"}
+        />
+        <slot />
+    </div>
+
+    <Picture
+        src={SwendelPortrait}
+        formats={["jpeg", "webp"]}
+        widths={[240, 540, 720, SwendelPortrait.width]}
+        sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${SwendelPortrait.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/HeroSection.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-
-interface Props {
-  title: string
-  subtitle?: string
-  buttonCaption?: string
-}
-
-const HeroSection: React.FC<Props> = ({ title, subtitle, buttonCaption }: Props) => {
-  return (
-    <>
-      <div className='flex flex-col items-start pt-[18.625rem] pb-24 lg:pt-36 lg:pb-32 bg-bb-grey-200 px-5 lg:px-0 col-span-1 lg:col-span-5 lg:col-start-2'>
-        <h1 className='text-black font-grotesk font-medium text-[1.75rem] lg:text-5xl mt-7 leading-tight'>
-          {title}
-        </h1>
-        {subtitle && <p className='text-base lg:text-xl mt-6 text-bb-grey-500'>{subtitle}</p>}
-        {buttonCaption}
-      </div>
-
-      <div className='relative lg:pt-28 w-full overflow-visible bg-bb-grey-200 col-span-1 lg:col-start-8 lg:col-span-6'>
-        <div className={'lg:absolute h-[64vw] lg:h-[46rem] w-full overflow-hidden'}>
-          <picture>
-            <source srcSet='/images/swendel_portrait.webp' type='image/webp' />
-            <source srcSet='/images/swendel_portrait.jpg' type='image/jpeg' />
-            <img
-              src='/images/swendel_portrait.webp'
-              alt={
-                ''
-              }
-              width={671}
-              height={736}
-              className='relative lg:top-0 -top-[18vw] w-full lg:h-full object-cover'
-            />
-          </picture>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default HeroSection

src/components/LinkButton.tsx

@@ -4,7 +4,6 @@ interface Props {
   caption: string
   className?: string
   href?: string
-  dark?: boolean
   newTab?: boolean
   small?: boolean
 }
@@ -12,13 +11,12 @@ interface Props {
 const LinkButton: React.FC<Props> = ({
   caption,
   className,
-  dark = false,
   href,
   newTab,
   small,
 }: Props) => {
   return (
-    <a href={href} className={`flex w-fit gap-2 py-4 px-5 rounded-full items-center font-medium hover:bg-opacity-75 ${dark ? 'bg-black text-white' : 'bg-white text-bb-grey-500'
+    <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}

src/components/Navbar.astro

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

src/components/Navbar.tsx

@@ -1,25 +0,0 @@
-import type { Props } from 'astro'
-import type React from 'react'
-import { useState } from 'react'
-import { SectionGridContainer } from '@srx/components'
-import SrxLogo from '@srx/assets/srx-digital-logo.svg?react'
-
-const Navbar: React.FC<Props> = ({ }) => {
-  const [navListOpen] = useState(false)
-
-  return (
-    <SectionGridContainer className='fixed top-0 bg-white w-full z-20 border border-b-bb-grey-200'>
-      <div className={`${navListOpen ? 'flex-col h-dvh' : 'flex-row'} flex justify-between lg:items-center lg:col-start-2 col-span-1 lg:col-span-11`}>
-        <nav className={`flex ${navListOpen ? 'flex-col h-full' : 'flex-row'} w-full justify-between items-start lg:items-center px-5 lg:px-0`}>
-          <div className='flex justify-between items-center w-full h-20'>
-            <a href={'/'}>
-              <SrxLogo className={'h-8'} />
-            </a>
-          </div>
-        </nav>
-      </div>
-    </SectionGridContainer>
-  )
-}
-
-export default Navbar

src/components/SectionGridContainer.tsx

@@ -1,37 +0,0 @@
-import type React from 'react'
-import type { ElementType } from 'react'
-
-interface SectionGridContainerProps {
-  children: React.ReactNode
-  className?: string
-  innerClassName?: string
-  breakpoint?: 'lg' | 'xl' | '2xl'
-  as?: ElementType
-}
-
-const SectionGridContainer: React.FC<SectionGridContainerProps> = ({
-  children,
-  className,
-  innerClassName,
-  breakpoint = 'lg',
-  as: Tag = 'section',
-}) => {
-  const innerGridBreakpointClasses = {
-    lg: 'lg:grid-cols-inner lg:gap-4',
-    xl: 'xl:grid-cols-inner xl:gap-4',
-    '2xl': '2xl:grid-cols-inner 2xl:gap-4',
-  }
-
-  return (
-    <div className={`2xl:grid 2xl:grid-cols-outer 2xl:grid-wrapper ${className ?? ''}`}>
-      <Tag
-        className={`grid grid-cols-1 relative ${innerGridBreakpointClasses[breakpoint] ?? ''} ${
-          innerClassName || ''
-        }`}
-      >
-        {children}
-      </Tag>
-    </div>
-  )
-}
-export default SectionGridContainer

src/components/index.ts

@@ -1,13 +1,5 @@
-import Navbar from "@srx/components/Navbar";
-import HeroSection from "@srx/components/HeroSection";
-import Footer from  "@srx/components/Footer";
-import SectionGridContainer from "@srx/components/SectionGridContainer";
 import LinkButton from "@srx/components/LinkButton";
 
 export {
-  Navbar,
-  HeroSection,
-  Footer,
-  SectionGridContainer,
   LinkButton,
 }

src/content/config.ts

@@ -1,22 +0,0 @@
-import { z, defineCollection } from 'astro:content'
-
-const authorCollection = defineCollection({
-    type: 'data',
-    schema: z.object({
-      firstName: z.string(),
-      lastName: z.string(),
-      image: z.object({
-        default: z.string(),
-        webp: z.string().optional(),
-        alt: z.string(),
-      }),
-      chat: z.string().optional(),
-      social: z.string().optional(),
-      homepage: z.string().optional(),
-    }),
-  })
-
-  export const collections = {
-    authors: authorCollection,
-  }
-  

src/layouts/BaseLayout.astro

@@ -1,9 +1,10 @@
 ---
+import "@srx/styles/base.css";
 import "@fontsource-variable/literata";
 import "@fontsource-variable/manrope";
 import "@fontsource-variable/martian-mono";
-import "@srx/styles/base.css";
-import { Footer, Navbar, SectionGridContainer } from "@srx/components";
+import Navbar from "@srx/components/Navbar.astro";
+import Footer from "@srx/components/Footer.astro";
 
 interface Props {
     metaTitle?: string;
@@ -26,9 +27,11 @@ const {
     metaDate,
     metaSchema,
 } = Astro.props;
+
+const isProduction = import.meta.env.MODE === "production";
 ---
 
-<html lang="en" class="overflow-x-hidden scroll-smooth">
+<html lang="de" class="overflow-x-hidden scroll-smooth">
     <head>
         <meta charset="utf-8" />
         <title>{`${metaTitle} - ${metaSubtitle}`}</title>
@@ -76,17 +79,19 @@ const {
                 />
             )
         }
+        {
+            isProduction && (
+                <script
+                    src="https://analytics.srx.digital/script.js"
+                    data-website-id="herimee8win2thiZibohnaichei8uoDo"
+                    async
+                />
+            )
+        }
     </head>
+    <Navbar />
+    <slot />
+    <Footer />
+
 
-    <body class="flex flex-col overflow-x-hidden pt-20">
-        <Navbar buttonCaption="Schreib mir!" client:only="react" />
-        <slot />
-        <SectionGridContainer
-            as="footer"
-            className="bg-bb-grey-200 overflow-y-hidden"
-            innerClassName="pt-20 pb-14 relative px-5 2xl:px-0 gap-y-12"
-        >
-            <Footer />
-        </SectionGridContainer>
-    </body>
 </html>

src/pages/index.astro

@@ -1,5 +1,8 @@
 ---
 import BaseLayout from "@srx/layouts/BaseLayout.astro";
+import Hero from "@srx/components/Hero.astro";
 ---
 
-<BaseLayout />
+<BaseLayout>
+    <Hero />
+</BaseLayout>

src/styles/base.css

@@ -1,3 +1,55 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
 :root {
-  color: #000;
+	--font-sans: "Manrope";
+	--font-serif: "Literata";
+	--font-mono: "Martian";
+
+	--color-black: #282828;
+	--color-grey-dark: #515151;
+	--color-grey-light: #cccccc;
+	--color-green: #26d07c;
+	--color-red: #f0506e;
+	--color-pumpkin: #f57855;
+	--color-gold: #ffdc50;
+	--color-forest: #28aa68;
+	--color-teal: #008791;
+	--color-arctic: #0cc0df;
+	--color-aqua: #5082d2;
+
+	--color-default: var(--color-black);
+	--color-primary: var(--color-green);
+	--color-secondary: var(--color-red);
+	--color-muted: var(--color-grey-light);
+	--color-accent: var(--color-teal);
 }
+
+::selection {
+	@apply bg-accent text-white;
+}
+
+nav,
+header,
+footer {
+	@apply px-20 py-10 gap-10;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@apply font-serif italic font-medium;
+}
+
+h1 {
+	@apply text-6xl;
+}
+
+h3 {
+	@apply text-xl md:text-2xl;
+}
+

tailwind.config.mjs

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

tailwind.config.ts

@@ -0,0 +1,29 @@
+import type { Config } from 'tailwindcss'
+import forms from '@tailwindcss/forms';
+import typography from '@tailwindcss/typography';
+import { fontFamily } from "tailwindcss/defaultTheme";
+
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        serif: ["var(--font-serif)", ...fontFamily.serif],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
+      },
+      colors: {
+        default: "var(--color-default)",
+        primary: "var(--color-primary)",
+        secondary: "var(--color-secondary)",
+        muted: "var(--color-muted)",
+        accent: "var(--color-accent)",
+      }
+    },
+  },
+  plugins: [
+    typography,
+    forms,
+  ],
+} satisfies Config
+

tsconfig.json

@@ -7,6 +7,10 @@
   ],
   "compilerOptions": {
     "baseUrl": ".",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "paths": {
       "@srx/assets": [
         "src/assets"
@@ -44,8 +48,6 @@
       "@srx/styles/*": [
         "src/styles/*"
       ]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   }
 }

yarn.lock

@@ -719,6 +719,23 @@
     "@svgr/hast-util-to-babel-ast" "8.0.0"
     svg-parser "^2.0.4"
 
+"@tailwindcss/forms@^0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.7.tgz#db5421f062a757b5f828bc9286ba626c6685e821"
+  integrity sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
+"@tailwindcss/typography@^0.5.10":
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.10.tgz#2abde4c6d5c797ab49cf47610830a301de4c1e0a"
+  integrity sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@types/babel__core@^7.20.4", "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
@@ -2217,6 +2234,21 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 log-symbols@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-5.1.0.tgz#a20e3b9a5f53fac6aeb8e2bb22c07cf2c8f16d93"
@@ -2756,6 +2788,11 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^9.0.1:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
@@ -3094,6 +3131,14 @@ postcss-nested@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.11"
 
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.11:
   version "6.0.15"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"