changes to landingpage

gommehdnet · Feb 17, 2025 · f378907 · f378907
1 parent e92fa05
commit f378907
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 7 deletions.
diff --git a/src/components/LandingPage/index.tsx b/src/components/LandingPage/index.tsx
@@ -6,17 +6,51 @@ export default function HomepageMinimal(): JSX.Element {
   return (
     <div className={clsx("container", styles.centerContent)}>
       <div className="text--center">
+        <h1>Willkommen auf der Citybuild Wiki</h1>
         <img
           src={require("./gommeskin.png").default}
           alt="Citybuld Wiki Gomme"
-          className={styles.image}
+          className={styles.imageSmall}
           onClick={() => (window.location.href = "/docs/category/lobby")}
           style={{ cursor: "pointer" }}
         />
       </div>
       <div className="text--center">
-        <h1>CityBuild Wiki</h1>
-        <p>Deine Guide für CityBuild.</p>
+        <h1>Erste Schritte</h1>
+      </div>
+      <div className={styles.buttonGrid}>
+        <button
+          className={styles.button}
+          onClick={() => (window.location.href = "/docs/placeholder")}
+        >
+          Neu hier?
+        </button>
+        <button
+          className={styles.button}
+          onClick={() =>
+            (window.location.href =
+              "/docs/category/informtionen-zur-seitenerstellung")
+          }
+        >
+          Seiten Erstellen
+        </button>
+      </div>
+      <div className="text--center">
+        <h1>Wichtige Guides</h1>
+        <div className={styles.buttonGrid}>
+          <button
+            className={styles.button}
+            onClick={() => (window.location.href = "/docs/placeholder")}
+          >
+            Artikel 1
+          </button>
+          <button
+            className={styles.button}
+            onClick={() => (window.location.href = "/docs/placeholder")}
+          >
+            Artikel 2
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/LandingPage/styles.module.css b/src/components/LandingPage/styles.module.css
@@ -2,11 +2,35 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  height: 100vh;
 }
 
-.image {
-  max-width: 100%;
+.imageSmall {
+  width: 75%;
   height: auto;
+}
+
+.buttonGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin: 20px 0;
+}
+
+.button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  background-color: #7eb53c;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
+h1 {
+  margin-top: 2vh;
 }