+ );
+}
diff --git a/app/(main)/header/themeToggle.tsx b/app/(main)/header/themeToggle.tsx
new file mode 100644
index 0000000..ed517dc
--- /dev/null
+++ b/app/(main)/header/themeToggle.tsx
@@ -0,0 +1,22 @@
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/chadcdn/button';
+import { Moon, Sun } from 'lucide-react';
+
+export function ThemeToggle() {
+ const { setTheme, theme } = useTheme();
+ const onToggle = () => setTheme(theme === 'light' ? 'dark' : 'light');
+
+ return (
+
+ );
+}
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
new file mode 100644
index 0000000..74b87b9
--- /dev/null
+++ b/app/(main)/page.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { Header } from './header/header';
+import { Configurator } from '@/app/(main)/sections/configurator/configurator';
+import { WebApi } from '@/app/(main)/sections/webApi';
+import { RequestAnimationFrame } from '@/app/(main)/sections/requestAnimaitionFrame';
+import { Callstack } from '@/app/(main)/sections/callstack';
+import { Console } from '@/app/(main)/sections/console';
+import { TasksQueue } from '@/app/(main)/sections/tasksQueue';
+import { MicrotasksQueue } from '@/app/(main)/sections/microtasksQueue';
+import { EventLoop } from '@/app/(main)/sections/eventLoop/eventLoop';
+
+export default function Home() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/(main)/sections/callstack.tsx b/app/(main)/sections/callstack.tsx
new file mode 100644
index 0000000..238b0fd
--- /dev/null
+++ b/app/(main)/sections/callstack.tsx
@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { InfoContainer } from '@/components/infoContainer';
+import { List } from '@/components/list';
+import { Card } from '@/components/card';
+import { useQueueManagerStore } from '@/store/store';
+
+const description = (
+ <>
+
+ A call stack is a mechanism for an interpreter to keep track of its place
+ in a script that calls multiple functions — what function is currently
+ being run and what functions are called from within that function, etc.
+
+
+ When a script calls a function, the interpreter adds it to the call stack
+ and then starts carrying out the function.
+
+
+ When the current function is finished, the interpreter takes it off the
+ stack and resumes execution where it left off in the last code listing.
+
+
+ If the stack takes up more space than it was assigned, a "stack
+ overflow" error is thrown.
+
+ The browser console is a built-in tool within web browsers that allows
+ developers and users to view and interact with a web page's internal
+ state.
+
+
+ It provides a way to examine error messages, debug JavaScript code, and
+ monitor network activity, ultimately helping with troubleshooting and
+ development.
+
+ A microtask is a short function which is executed after the function or
+ program which created it exits and only if the JavaScript execution stack
+ is empty, but before returning control to the event loop being used by the
+ user agent to drive the script's execution environment.
+
+
+);
+
+export const MicrotasksQueue: FC = () => {
+ const microtasks = useQueueManagerStore((state) => state.microtask);
+
+ return (
+
+
+ {(el) => }
+
+
+ );
+};
diff --git a/app/(main)/sections/requestAnimaitionFrame.tsx b/app/(main)/sections/requestAnimaitionFrame.tsx
new file mode 100644
index 0000000..e4c0709
--- /dev/null
+++ b/app/(main)/sections/requestAnimaitionFrame.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { InfoContainer } from '@/components/infoContainer';
+import { List } from '@/components/list';
+import { Card } from '@/components/card';
+import { useQueueManagerStore } from '@/store/store';
+
+const description = (
+ <>
+
+ The window.requestAnimationFrame() method tells the browser you wish to
+ perform an animation. It requests the browser to call a user-supplied
+ callback function before the next repaint.
+
+
+ The frequency of calls to the callback function will generally match the
+ display refresh rate. The most common refresh rate is 60hz, (60
+ cycles/frames per second), though 75hz, 120hz, and 144hz are also widely
+ used.
+
+
+ requestAnimationFrame() calls are paused in most browsers when running in
+ background tabs or hidden iframes, in order to improve performance and
+ battery life.
+
+
+);
+
+export const RequestAnimationFrame: FC = () => {
+ const rafCallback = useQueueManagerStore((state) => state.rafCallback);
+
+ return (
+
+
+ {(el) => }
+
+
+ );
+};
diff --git a/app/(main)/sections/tasksQueue.tsx b/app/(main)/sections/tasksQueue.tsx
new file mode 100644
index 0000000..cbbba42
--- /dev/null
+++ b/app/(main)/sections/tasksQueue.tsx
@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { InfoContainer } from '@/components/infoContainer';
+import { Card } from '@/components/card';
+import { List } from '@/components/list';
+import { useQueueManagerStore } from '@/store/store';
+
+const description = (
+ <>
+
+ A task is anything which is scheduled to be run by the standard mechanisms
+ such as initially starting to run a program, an event being dispatched
+ asynchronously, or an interval or timeout being fired. These all get
+ scheduled on the task queue.
+
+
For example, tasks get added to the task queue when:
+
+
+ - a new JavaScript program or subprogram is executed (such as from a
+ console, or by running the code in a {'
-