Merge branch 'dev' into release

Author: sethjuarez

web/app/routes/app.tsx

@@ -1,4 +1,4 @@
-import type { Route } from "./+types/home";
+import type { Route } from "./+types/app";
 import Settings from "components/settings";
 import Setting from "components/setting";
 import {
@@ -102,7 +102,7 @@ export function meta({ data }: Route.MetaArgs) {
   return [{ title: title }, { name: "description", content: description }];
 }
 
-export default function Home({ loaderData }: Route.ComponentProps) {
+export default function App({ loaderData }: Route.ComponentProps) {
   const { background, logo, title, sub_title, description } = loaderData as unknown as Design;
 
 

web/app/routes/home.module.scss

@@ -5,6 +5,12 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
+  background-image: url('/images/background.jpg');
+  background-color: $color-background-overlay;
+  background-position: top left;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-blend-mode: darken;
 }
 
 .root {
@@ -23,12 +29,6 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-image: url('/images/background.jpg');
-    background-color: $color-background-overlay;
-    background-position: top left;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-blend-mode: darken;
     z-index: -1;
   }
 }

web/app/routes/home.tsx

@@ -1,17 +1,67 @@
-import MicIcon from '../../components/micicon';
-import styles from './home.module.scss';
+import { DesignConfiguration, type Design } from "store/design";
+import MicIcon from "../../components/micicon";
+import styles from "./home.module.scss";
+import type { Route } from "../+types/root";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const designConfig = new DesignConfiguration();
+  try {
+    const defaultDesign = await designConfig.fetchDefaultDesign();
+    return defaultDesign;
+  } catch (error) {
+    console.error("Error fetching default design:", error);
+  }
+  // You can perform any data fetching or initialization here
+  // For example, you might want to fetch user data or initial settings
+  const design: Design = {
+    id: "default",
+    background: "/images/background.jpg",
+    default: true,
+    logo: "",
+    title: "BuildEvents",
+    sub_title: "by Contoso",
+    description: "Making Things Happen since 1935",
+  };
+
+  return design;
+}
+
+export function meta({ data }: Route.MetaArgs) {
+  if (!data) {
+    return [
+      { title: "BuildEvents by Contoso" },
+      { name: "description", content: "Making Things Happen since 1935" },
+    ];
+  }
+  const title = `${data["title"] || "BuildEvents"} ${
+    data["sub_title"] || "by Contoso"
+  }`;
+  const description = data["description"] || "Making Things Happen since 1935";
+  return [{ title: title }, { name: "description", content: description }];
+}
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+  const { background, logo, title, sub_title, description } =
+    loaderData as unknown as Design;
+
 
-export default function Landing() {
   return (
-    <div className={styles.landing}>
+    <div
+      className={styles.landing}
+      style={{ backgroundImage: `url('${background}')` }}
+    >
       <div className={styles.root}>
         <div className={styles.container}>
-          <h1>What can we<br />start working on?</h1>
+          <h1>
+            What can we
+            <br />
+            start working on?
+          </h1>
           <p>Talk through your ideas and let's make them reality.</p>
         </div>
         <a href="/app">
           <div className={styles.micContainer}>
-            <MicIcon 
+            <MicIcon
               className={styles.micIcon}
               role="button"
               aria-label="Start recording"