site fixes

Author: YousefED

packages/editor/src/app/App.tsx

@@ -10,7 +10,6 @@ import { SessionStore } from "../store/local/SessionStore";
 
 import { navigateRef, setNavigateRef } from "./GlobalNavigateRef";
 import Main from "./main/Main";
-import { AILanding } from "./main/components/startscreen/AILanding";
 import { StartScreen } from "./main/components/startscreen/StartScreen";
 import { DocumentRoute } from "./routes/document";
 import { SupabaseSessionStore } from "./supabase-auth/SupabaseSessionStore";
@@ -54,10 +53,7 @@ export const App = observer(
                 element={
                   <StartScreen sessionStore={sessionStore}></StartScreen>
                 }></Route>
-              <Route
-                path="/ai"
-                element={<AILanding sessionStore={sessionStore} />}
-              />
+
               <Route
                 path="*"
                 element={<DocumentRoute sessionStore={sessionStore} />}
@@ -66,24 +62,24 @@ export const App = observer(
             <Route
               path="/register"
               element={props.authProvider.routes.register(
-                sessionStore as SupabaseSessionStore
+                sessionStore as SupabaseSessionStore,
               )}
             />
             <Route path="/recover" element={<div>Not implemented yet</div>} />
             <Route
               path="/login"
               element={props.authProvider.routes.login(
-                sessionStore as SupabaseSessionStore
+                sessionStore as SupabaseSessionStore,
               )}
             />
             {props.authProvider.routes.additionalRoutes(
-              sessionStore as SupabaseSessionStore
+              sessionStore as SupabaseSessionStore,
             )}
             {/* todo: notfound?  */}
           </Route>
         </Routes>
       </BrowserRouter>
     );
-  }
+  },
 );
 export default App;

packages/editor/src/app/main/Main.tsx

@@ -42,9 +42,7 @@ const Main = observer((props: { sessionStore: SessionStore }) => {
         className={classNames(
           styles.main,
           top && styles.top,
-          (location.pathname === "/" || location.pathname === "/ai") &&
-            styles.homepage,
-          location.pathname === "/ai" && styles.ai
+          location.pathname === "/" && styles.homepage,
         )}>
         <Navigation sessionStore={props.sessionStore} />
         <Outlet />

packages/editor/src/app/main/components/startscreen/AILanding.tsx

@@ -1,5 +1,4 @@
 .page {
-  padding: 0 1em;
   font-size: 18px;
 }
 
@@ -75,8 +74,6 @@
 
 .perks {
   font-size: 16px;
-  max-width: calc(var(--content-max-width) - 104px);
-  margin: 0 auto;
   /* padding: 4em 0; */
   /* position: relative; */
   /* top: -8em; */
@@ -86,7 +83,7 @@
   flex: 0 0 auto;
   gap: 20px;
   grid-auto-rows: min-content;
-  grid-template-columns: repeat(4, minmax(200px, 1fr));
+  grid-template-columns: repeat(3, minmax(200px, 1fr));
   grid-template-rows: repeat(2, min-content);
   justify-content: center;
 }
@@ -190,7 +187,7 @@
 
 .build {
   padding: 4em 0;
-  justify-content: center;
+  /* justify-content: center; */
 }
 
 form {
@@ -267,7 +264,61 @@ button {
   padding: 0 0 0.5em 0;
 }
 
-@media only screen and (max-width: 768px) {
+:root {
+  --vp-layout-max-width: 1440px;
+  --content-max-width: 1480px;
+}
+
+.header {
+  position: relative;
+  display: flex;
+  gap: 84px;
+  width: var(--content-max-width);
+  max-width: 100%;
+  margin: 0 auto 52px;
+  padding-top: 226px;
+}
+
+.content {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+}
+.header,
+.content {
+  padding-left: 52px;
+  padding-right: 52px;
+}
+
+@media (max-width: 1280px) {
+  .header {
+    gap: 64px;
+  }
+
+  .header,
+  .content {
+    padding-right: 32px;
+  }
+}
+@media (max-width: 1024px) {
+  .header {
+    flex-direction: column;
+    align-items: center;
+    padding-top: 150px;
+  }
+
+  .perks {
+    grid-template-columns: repeat(1, minmax(200px, 1fr));
+  }
+}
+@media (max-width: 500px) {
+  .header,
+  .content {
+    padding-left: 0;
+    padding-right: 12px;
+  }
+}
+
+@media (max-width: 768px) {
   .introduction {
     padding-left: 1em;
     padding-right: 1em;
@@ -286,10 +337,6 @@ button {
     width: 100%;
   }
 
-  .perks {
-    grid-template-columns: repeat(1, minmax(200px, 1fr));
-  }
-
   .notebooks {
     padding: 2em 0 0 0;
   }
@@ -327,41 +374,6 @@ button {
   }
 }
 
-:root {
-  --vp-layout-max-width: 1440px;
-  --content-max-width: 1480px;
-}
-
-.header {
-  position: relative;
-  display: flex;
-  gap: 84px;
-  width: var(--content-max-width);
-  max-width: 100%;
-  margin: 0 auto 52px;
-  padding: 0 52px;
-  padding-top: 226px;
-}
-
-@media (max-width: 1280px) {
-  .header {
-    gap: 64px;
-    padding-right: 32px;
-  }
-}
-@media (max-width: 1024px) {
-  .header {
-    flex-direction: column;
-    align-items: center;
-    padding-top: 150px;
-  }
-}
-@media (max-width: 500px) {
-  .header {
-    padding: 0 12px;
-  }
-}
-
 .headerContent {
   flex: 1.2;
   position: relative;