Add header and themes

src/widgets/header/header.tsx

@@ -0,0 +1,45 @@
+import { SchemeSwitch } from "@/features/schemeSwitch";
+import { PersonIcon, SearchIcon } from "@/shared/assets/icons";
+
+export const Header = () => {
+  return (
+    <header className="w-full h-20 flex justify-around bg-bg1">
+      <div
+        className="w-full h-full max-w-[var(--app-width)] 
+              flex items-center justify-between"
+      >
+        <h1 className="text-5xl font-bold">.Torrent</h1>
+        <div className="text-3xl">
+          {["Игры", "Фильмы", "Аудиокниги"].map((section) => (
+            <a key={section} className="px-2 cursor-pointer hover:underline">
+              {section}
+            </a>
+          ))}
+        </div>
+        <div className="flex flex-col items-end">
+          <span className="flex items-center mb-1 ">
+            <SchemeSwitch />
+            <span className="cursor-pointer flex items-center">
+              <PersonIcon className="mr-1 h-4 w-4" />
+              Войти
+            </span>
+          </span>
+          <label className="flex flex-col items-start relative w-36">
+            <input
+              className="peer/search w-full rounded-lg bg-bg4 px-2"
+              placeholder=" "
+            />
+            <span
+              className="peer-focus/search:opacity-0 
+          peer-[:not(:placeholder-shown)]/search:opacity-0 
+          transition-all h-0 flex items-center relative bottom-3"
+            >
+              <SearchIcon className="w-4 h-4 mx-2" />
+              Поиск
+            </span>
+          </label>
+        </div>
+      </div>
+    </header>
+  );
+};

src/widgets/header/index.ts

@@ -0,0 +1,3 @@
+import { Header } from "./header";
+
+export { Header };

src/widgets/section/index.ts

@@ -0,0 +1,3 @@
+import { Section } from "./section";
+
+export { Section };

src/widgets/section/section.tsx

@@ -0,0 +1,15 @@
+export const Section = ({
+  name,
+  children,
+}: {
+  name: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    // open section onClick
+    <section className="w-full mt-8 cursor-pointer">
+      <h2 className="text-4xl">{name}</h2>
+      <div>{children}</div>
+    </section>
+  );
+};