feat: Add Todo page mockup and layout Wrapper components

Key Changes:
- Created Wrapper components (Fullscreen, Column, Container, ListedComponent) to standardize the application's overall layout.
- Refactored the structure of major components like App.tsx and PageContainer.tsx to use the new Wrapper components.
- Added a simple TodoBoard mockup page at the /todos route.
- Adjusted flexbox classes for the TodoBoard component to allow its width to resize flexibly based on screen size.

src/components/ui/Wrappers.tsx

@@ -0,0 +1,27 @@
+interface WrapperProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export const ContainerWrapper = ({ children }: WrapperProps) => {
+  return (
+    <div className="flex flex-1 overflow-x-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-primary/20 scrollbar-track-transparent">
+      {children}
+    </div>
+  );
+};
+
+export const ListedComponentWrapper = ({ children }: WrapperProps) => {
+  return (
+    <div className="flex flex-1 justify-center gap-4 items-baseline p-4">
+      {children}
+    </div>
+  );
+};
+
+export const FullscreenWrapper = ({ children }: WrapperProps) => {
+  return <div className="flex flex-1 h-screen">{children}</div>;
+};
+
+export const ColumnWrapper = ({ children }: WrapperProps) => {
+  return <div className="flex flex-col flex-1 overflow-hidden">{children}</div>;
+};