Merge from main to out-of-date branch

package.json

@@ -55,6 +55,7 @@
     "embla-carousel-react": "8.2.0",
     "firebase": "^10.13.0",
     "framer-motion": "^12.4.2",
+    "gsap": "^3.13.0",
     "i18next": "23.14.0",
     "mapbox-gl": "3.6.0",
     "next": "14.2.5",

src/app/(marketing)/page.js

@@ -4,8 +4,8 @@ import { config } from "@/config";
 import { Faqs } from "@/components/marketing/home/faqs";
 import { Hero } from "@/components/marketing/home/hero";
 import { Included } from "@/components/marketing/home/included";
-
 import { StartBuilding } from "@/components/marketing/home/start-building";
+import { Box } from "@mui/system";
 
 export const metadata = {
   title: config.site.name,
@@ -18,6 +18,15 @@ export default function Page() {
   return (
     <div>
       <Hero />
+      <Box
+        sx={{
+          position: "relative",
+          height: "16px",
+          width: "100vw",
+          bgcolor: "white",
+          zIndex: 99999,
+        }}
+      />
       <Included />
       <Faqs />
       <StartBuilding />

src/app/layout.js

@@ -1,26 +1,30 @@
-import * as React from 'react';
+import * as React from "react";
 
-import '@/styles/global.css';
+import "@/styles/global.css";
 
-import { config } from '@/config';
-import { applyDefaultSettings } from '@/lib/settings/apply-default-settings';
-import { getSettings as getPersistedSettings } from '@/lib/settings/get-settings';
-import { UserProvider } from '@/contexts/auth/user-context';
-import { SettingsProvider } from '@/contexts/settings';
-import { Analytics } from '@/components/core/analytics';
-import { I18nProvider } from '@/components/core/i18n-provider';
-import { LocalizationProvider } from '@/components/core/localization-provider';
-import { SettingsButton } from '@/components/core/settings/settings-button';
-import { ThemeProvider } from '@/components/core/theme-provider/theme-provider';
+import { config } from "@/config";
+import { applyDefaultSettings } from "@/lib/settings/apply-default-settings";
+import { getSettings as getPersistedSettings } from "@/lib/settings/get-settings";
+import { UserProvider } from "@/contexts/auth/user-context";
+import { SettingsProvider } from "@/contexts/settings";
+import { Analytics } from "@/components/core/analytics";
+import { I18nProvider } from "@/components/core/i18n-provider";
+import { LocalizationProvider } from "@/components/core/localization-provider";
+import { SettingsButton } from "@/components/core/settings/settings-button";
+import { ThemeProvider } from "@/components/core/theme-provider/theme-provider";
 import { Query, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Toaster } from '@/components/core/toaster';
-import QueryProvider from './query-provider';
-
-export const metadata = { title: config.site.name };
+import { Toaster } from "@/components/core/toaster";
+import QueryProvider from "./query-provider";
 
+export const metadata = {
+  title: config.site.name,
+  icons: {
+    icon: "/favicon.svg",
+  },
+};
 
 export const viewport = {
-  width: 'device-width',
+  width: "device-width",
   initialScale: 1,
   themeColor: config.site.themeColor,
 };
@@ -35,15 +39,15 @@ export default async function Layout({ children }) {
           <LocalizationProvider>
             <QueryProvider>
               <UserProvider>
-                  <SettingsProvider settings={settings}>
-                    <I18nProvider lng={settings.language}>
-                      <ThemeProvider>
-                        {children}
-                        {/*<SettingsButton />*/}
-                        <Toaster position="bottom-right" />
-                      </ThemeProvider>
-                    </I18nProvider>
-                  </SettingsProvider>
+                <SettingsProvider settings={settings}>
+                  <I18nProvider lng={settings.language}>
+                    <ThemeProvider>
+                      {children}
+                      {/* <SettingsButton /> */}
+                      <Toaster position="bottom-right" />
+                    </ThemeProvider>
+                  </I18nProvider>
+                </SettingsProvider>
               </UserProvider>
             </QueryProvider>
           </LocalizationProvider>

src/components/core/logo.js

@@ -1,32 +1,56 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { useColorScheme } from '@mui/material/styles';
+import * as React from "react";
+import Box from "@mui/material/Box";
+import { useColorScheme } from "@mui/material/styles";
 
-import { NoSsr } from '@/components/core/no-ssr';
+import { NoSsr } from "@/components/core/no-ssr";
 
 const HEIGHT = 60;
 const WIDTH = 60;
 
-export function Logo({ color = 'dark', emblem, height = HEIGHT, width = WIDTH }) {
+export function Logo({
+  color = "dark",
+  emblem,
+  height = HEIGHT,
+  width = WIDTH,
+}) {
   let url;
 
   if (emblem) {
-    url = color === 'light' ? '/assets/logo-emblem.svg' : '/assets/logo-emblem--dark.svg';
+    url =
+      color === "light"
+        ? "/assets/logo-emblem.svg"
+        : "/assets/logo-emblem--dark.svg";
   } else {
-    url = color === 'light' ? '/assets/logo.svg' : '/assets/logo--dark.svg';
+    url = color === "light" ? "/assets/logo.svg" : "/assets/logo--dark.svg";
   }
 
-  return <Box alt="logo" component="img" height={undefined} src={url} width={200} />;
+  return (
+    <Box
+      alt="logo"
+      component="img"
+      height={undefined}
+      src={url}
+      width={width}
+    />
+  );
 }
 
-export function DynamicLogo({ colorDark = 'light', colorLight = 'dark', height = HEIGHT, width = WIDTH, ...props }) {
+export function DynamicLogo({
+  colorDark = "light",
+  colorLight = "dark",
+  height = HEIGHT,
+  width = WIDTH,
+  ...props
+}) {
   const { colorScheme } = useColorScheme();
-  const color = colorScheme === 'dark' ? colorDark : colorLight;
+  const color = colorScheme === "dark" ? colorDark : colorLight;
 
   return (
-    <NoSsr fallback={<Box sx={{ height: `${height}px`, width: `${width}px` }} />}>
+    <NoSsr
+      fallback={<Box sx={{ height: `${height}px`, width: `${width}px` }} />}
+    >
       <Logo color={color} height={height} width={width} {...props} />
     </NoSsr>
   );