refactored code and added some css transitions

src/app/excalidraw/[slug]/page.tsx

@@ -4,7 +4,8 @@ import { notFound } from 'next/navigation';
 import ExcalidrawMain from '@/app/ui/components/excaliCore/ExcalidrawMain';
 import { forkDrawingAction, saveDrawingAction, updateDrawingInfoAction } from '@/lib/actions';
 import { Metadata } from 'next';
-import { MAIN_URL } from '@/app/ui/components/other/Constants';
+
+const MAIN_URL = process.env.MAIN_URL;
 
 export async function generateMetadata(
   { params }: { params: { slug: string } }

src/app/excalidraw/page.tsx

@@ -1,6 +1,6 @@
 import ExcalidrawMain from '@/app/ui/components/excaliCore/ExcalidrawMain';
 import { forkWelcomeDrawingAction, saveDrawingAction, updateDrawingInfoAction } from '@/lib/actions';
-import { WELCOME_EXCALI_DATA } from '../ui/components/other/Constants';
+import { WELCOME_EXCALI_DATA } from '@/lib/constants';
 import { currentUser } from '@clerk/nextjs/server';
 
 export default async function Page() {

src/app/landing/page.module.css

@@ -0,0 +1,19 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.drawing footer [class*="App-toolbar"] {
+  border: 5px solid red;
+  display: none;
+}
+
+.drawing {
+  pointer-events: none;
+  animation: fadeIn 0.25s ease-in-out;
+}

src/app/landing/page.tsx

@@ -1,4 +1,114 @@
-import LandingPageComponent from "../ui/components/pages/LandingPageComponent";
+"use client";
+
+import { Button, Container, Text, Timeline } from '@mantine/core';
+import { FaQuestionCircle } from 'react-icons/fa';
+import CoolButton from '@/app/ui/components/buttons/CoolButton';
+import { RiLinkM } from 'react-icons/ri';
+import { useMediaQuery } from '@mantine/hooks';
+import { Skeleton, useComputedColorScheme } from "@mantine/core";
+import dynamic from "next/dynamic";
+import CenterContainer from '@/app/ui/components/other/CenterContainer';
+import classes from './page.module.css';
+import { WELCOME_EXCALI_DATA } from '@/lib/constants';
+import cx from 'clsx';
+
+const Excalidraw = dynamic(
+  async () => (await import("@excalidraw/excalidraw")).Excalidraw,
+  {
+    ssr: false,
+    loading: () => <Skeleton height="100%" width="100%" />
+  },
+);
+
+function LandingExcalidraw({ isPhone }: { isPhone: boolean | undefined }) {
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
+
+  return (
+    <div
+    className={classes.drawing}
+      style={{ width: "100%", height: "35vh", borderRadius: "12px", overflow: "hidden", marginTop: "25px" }}>
+      <Excalidraw theme={computedColorScheme}
+        UIOptions={{ tools: { image: false } }}
+        initialData={{
+          elements: WELCOME_EXCALI_DATA.elements as any,
+          scrollToContent: true,
+          appState: { zoom: { value: (isPhone ? .5 : 1) as any } }
+        }} zenModeEnabled viewModeEnabled />
+    </div>
+  );
+}
+
+const myWebsiteLink = <Button
+  component='a'
+  href='https://nabilmansour.com'
+  target='_blank'
+  size='xs' p={1}
+  variant='light'
+  leftSection={<RiLinkM size={28} />}>
+  <Text fw={900} span size='1.5rem'>Website</Text>
+</Button>
+
+const LandingPageComponent = () => {
+  const isPhone = useMediaQuery('(max-width: 650px)');
+
+  return (
+    <CenterContainer size="md">
+      <LandingExcalidraw isPhone={isPhone} />
+      <CoolButton href='/excalidraw' text='Try the Demo' style={{
+        backgroundImage: "linear-gradient(180deg, #ffd034, #b6871d)",
+        fontSize: "1.5rem", fontWeight: "900",
+      }} />
+      <Container size="sm">
+        <Timeline active={100} lineWidth={3} bulletSize={40}>
+          <Timeline.Item bullet={<FaQuestionCircle size={28} />} title={<h2>What is Excalihub?</h2>}>
+            <p>Excalihub is a platform for creating and sharing Excalidraw drawings. You can create, save, and share multiple drawings for free.</p>
+            <p>To start, you just need to:</p>
+            <CoolButton href='/sign-up' text='Sign up'
+              style={{ backgroundImage: "linear-gradient(180deg, #6965DB, #908cff)", fontSize: "1.5rem", fontWeight: "900" }} />
+            <p>Or if you already have an account:</p>
+            <CoolButton href='/sign-in' text='Sign in'
+              style={{ backgroundImage: "linear-gradient(180deg, #6965DB, #908cff)", fontSize: "1rem", fontWeight: "900" }} />
+          </Timeline.Item>
+          <Timeline.Item bullet={<div style={{ scale: "2.5" }}>🤔</div>} title={<h2>Why?</h2>}>
+            <p>I find Excalidraw useful but the free version doesn&apos;t let you have multiple saved drawings. So I thought I could make that myself.</p>
+          </Timeline.Item>
+          <Timeline.Item bullet={<div style={{ scale: "2.5" }}>😮</div>} title={<h2>Oh so you are part of the Excali team?</h2>}>
+            <Text size='1.75rem' fw={900} c="#ff0000" span>Nope :D </Text>
+            <span>But I would like to be...</span>
+          </Timeline.Item>
+          <Timeline.Item bullet={<div style={{ scale: "2.5" }}>👨‍💻</div>} title={<h2>So who are you?</h2>}>
+            <p>Just a guy. You can know more about me on my <span>
+              {myWebsiteLink}
+            </span></p>
+            <p>One thing to note is that I am self-hosting this site. So if you find it useful consider to</p>
+            <CoolButton
+              href="https://buymeacoffee.com/nabilmansour"
+              text="☕️ Buy me coffee ツ"
+              target='_blank'
+              style={{
+                borderRadius: "100px",
+                backgroundColor: "var(--mantine-color-main-filled)",
+                textAlign: "center",
+                fontSize: isPhone ? "1.25rem" : "2.5rem",
+                fontWeight: 900,
+              }}
+            />
+          </Timeline.Item>
+          <Timeline.Item bullet={<div style={{ scale: "2.5" }}>🧐</div>} title={<h2>Are you trying to replace Excalidraw?</h2>}>
+            <p>Of course not. I am making this for myself but would probably use Excalidraw if I want all the fancy features.
+              This is just to have multiple drawings saved in one place.
+              I recommend using the <a target='_blank' href='https://plus.excalidraw.com/'>
+                original Excalidraw platform if you want the other features</a>.</p>
+          </Timeline.Item>
+          <Timeline.Item bullet={<div style={{ scale: "3.5" }}>🥼</div>} title={<h2>Feedback</h2>}>
+            <p>If you have any feedback or suggestions, feel free to reach out to me on my {myWebsiteLink}
+            </p>
+          </Timeline.Item>
+        </Timeline>
+      </Container>
+    </CenterContainer>
+  );
+};
 
 const Page = () => {
   return <LandingPageComponent />;

src/app/layout.tsx

@@ -10,7 +10,7 @@ import { theme } from "@/theme";
 import { ClerkProvider } from "@clerk/nextjs";
 import { Notifications } from "@mantine/notifications";
 import { Metadata } from "next";
-import { APP_DESCRIPTION } from "./ui/components/other/Constants";
+import { APP_DESCRIPTION } from "@/lib/constants";
 
 const CaviarDreams = localFont({ src: '../../public/CaviarDreams.ttf' });
 

src/app/page.module.css

@@ -0,0 +1,15 @@
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slideUp {
+  animation: slideUp 0.25s ease-in-out;
+}

src/app/page.tsx

@@ -1,7 +1,70 @@
 import { currentUser } from "@clerk/nextjs/server";
-import LandingPageComponent from "./ui/components/pages/LandingPageComponent";
-import HomePageComponent from "./ui/components/pages/HomePageComponent";
 import { redirect } from "next/navigation";
+import { Box, Card, Flex, Group, Text } from "@mantine/core";
+import { getUserDrawings, getUserDrawingsCount, getUserIdByClerkId } from "@/db/queries";
+import { createDrawingAction, deleteDrawingAction, togglePublicDrawingAction } from "@/lib/actions";
+import CenterContainer from "./ui/components/other/CenterContainer";
+import SearchDrawings from "./ui/components/excaliCore/components/SearchDrawings";
+import NewDrawingButton from "./ui/components/buttons/NewDrawingButton";
+import DrawingCard from "./ui/components/cards/DrawingCard";
+import PaginationControls from "./ui/components/other/PaginationControls";
+import UserBeingProcessed from "./ui/components/other/UserBeingProcessed";
+import classes from "./page.module.css";
+
+async function HomePageComponent({ searchParams, name, clerkId }: { searchParams: SearchParams, name: string | null, clerkId: string | null }) {
+  if (!name || !clerkId) throw new Error("User not found");
+
+  const userIdQuery = await getUserIdByClerkId(clerkId);
+  if (userIdQuery.length > 0) {
+    const page = searchParams["page"] ?? "1";
+    const searchTerm = searchParams["search"] ?? "";
+    const userId = userIdQuery[0].id;
+    const limit = 6
+    const drawings = await getUserDrawings(userId, String(searchTerm), Number(page), limit);
+
+    const numberOfDrawings = await getUserDrawingsCount(userId, String(searchTerm));
+    const numberOfPages = Math.ceil(numberOfDrawings[0].count / limit);
+
+    return (
+      <CenterContainer size="xl">
+        <Flex direction="column" align="center" h="100%" w="100%" >
+          <Text p={25}>Hi {name}! 👋</Text>
+
+          <Card className={classes.slideUp} shadow="xs" padding="md" radius="md" w="100%" maw={1108}>
+            <Flex direction="column" gap={10} w="100%">
+
+              {/*=============Search and new drawing=============*/}
+              <Flex w="100%" gap={10} align="center">
+                <Box flex={4}><SearchDrawings /></Box>
+                <NewDrawingButton clerkId={clerkId} createDrawingAction={createDrawingAction} />
+              </Flex>
+
+              {/*=============The drawings=============*/}
+              <Group justify="center" gap={10}>
+                {drawings.length > 0 ? drawings.map((drawing, i) => <DrawingCard drawing={drawing}
+                  key={drawing.name + drawing.isPublic + drawing.slug + i}
+                  deleteAction={deleteDrawingAction}
+                  toggleAction={togglePublicDrawingAction}
+                  clerkId={clerkId} />) :
+                  <Text size='xl' fw={900}>
+                    Time to make some drawings... ᕕ(ᐛ)ᕗ
+                  </Text>
+                }
+              </Group>
+
+              {/*=============Pagination=============*/}
+              <PaginationControls currentPage={Number(page)} numberOfPages={numberOfPages} />
+
+            </Flex>
+          </Card>
+
+        </Flex>
+      </CenterContainer>
+    );
+  } else { // if a clerkId exists but a userId does not. Then the webhook is potentially still processing the user creation.
+    return <UserBeingProcessed />; // will reload the page after 1 second
+  }
+};
 
 export default async function HomePage({ searchParams }: { searchParams: SearchParams }) {
   const user = await currentUser();

src/app/profile/[username]/page.tsx

@@ -1,7 +1,6 @@
 import DrawingPublicCard from '@/app/ui/components/cards/DrawingPublicCard';
 import SearchDrawings from '@/app/ui/components/excaliCore/components/SearchDrawings';
 import CenterContainer from '@/app/ui/components/other/CenterContainer';
-import { MAIN_URL } from '@/app/ui/components/other/Constants';
 import PaginationControls from '@/app/ui/components/other/PaginationControls';
 import { getUserPublicDrawings, getUserPublicDrawingsCount, getUserIdByClerkId } from '@/db/queries';
 import { clerkClient } from '@clerk/nextjs/server';
@@ -10,6 +9,8 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import React from 'react';
 
+const MAIN_URL = process.env.MAIN_URL;
+
 export async function generateMetadata(
   { params }: { params: { username: string } }
 ): Promise<Metadata> {