From 84a72d5354b3806337f673ac2d71483979376e36 Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Sun, 6 Jul 2025 16:24:41 +0200
Subject: [PATCH] added a combined logo+text for easier styling

---
 src/assets/logotext.svg   | 20 ++++++++++++++++++++
 src/assets/text.svg       |  2 +-
 src/components/TopBar.tsx |  6 ++----
 src/pages/Home.tsx        |  6 ++----
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/logotext.svg

diff --git a/src/assets/logotext.svg b/src/assets/logotext.svg
new file mode 100644
index 0000000..70bf655
--- /dev/null
+++ b/src/assets/logotext.svg
@@ -0,0 +1,20 @@
+<svg width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0" stop-color="darkorchid" />
+            <stop offset="100" stop-color="darkslateblue" />
+        </linearGradient>
+        <mask id="moonMask">
+            <circle cx="60" cy="60" r="50" fill="white" />
+            <circle cx="70" cy="50" r="45" fill="black"/>
+        </mask>
+        <style type="text/css">
+            @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&amp;display=swap');
+        </style>
+    </defs>
+    <circle cx="60" cy="50%" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
+    <text x="250" y="60%" dominant-baseline="middle" text-anchor="middle"
+          font-family="'Raleway', sans-serif" font-size="70" fill="url(#moonGradient)" letter-spacing="2">
+        REMind
+    </text>
+</svg>
diff --git a/src/assets/text.svg b/src/assets/text.svg
index 5041dee..ba9d58e 100644
--- a/src/assets/text.svg
+++ b/src/assets/text.svg
@@ -1,4 +1,4 @@
-<svg width="250" height="100" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+<svg width="200" height="80" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <style type="text/css">
             @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&amp;display=swap');
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 1a26b81..dbf5e0e 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import logo from '../assets/logo.svg';
-import text from '../assets/text.svg';
+import logotext from "../assets/logotext.svg";
 
 export default function TopBar() {
   const [visible, setVisible] = useState(true);
@@ -67,8 +66,7 @@ export default function TopBar() {
     >
       <div className="flex items-center justify-between w-full max-w-6xl mx-auto">
         <div className="flex items-center">
-          <img src={logo} alt="REMind Logo" className="h-12 w-12 md:h-16 md:w-16" />
-          <img src={text} alt="REMind Text" className="h-8 md:h-12 ml-2" />
+          <img src={logotext} alt="REMind Logo and Text" className="h-16"/>
         </div>
 
         <button 
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 88caeea..9941706 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -15,8 +15,7 @@ import {
     FaVrCardboard,
 } from 'react-icons/fa';
 import {HiSparkles} from 'react-icons/hi';
-import logo from "../assets/logo.svg";
-import text from "../assets/text.svg";
+import logotext from "../assets/logotext.svg";
 
 interface HomeProps {
     isLoggedIn: boolean;
@@ -49,8 +48,7 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
         <div className="text-center mb-16 relative z-10">
             <div className="animate-pulse flex flex-col items-center mb-12">
                 <div className="flex items-center justify-around">
-                    <img src={logo} alt="REMind Logo" className="h-32 w-32"/>
-                    <img src={text} alt="REMind Text" className="h-48"/>
+                    <img src={logotext} alt="REMind Logo and Text" className="h-48 mb-4"/>
                 </div>
                 <p className="text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
             </div>