feat: music room page

Closes #93

app/music-room/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Music room",
+  description: "Book the Music room in Innopolis.",
+  alternates: { canonical: "/music-room" },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

app/music-room/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+import Calendar from "@/components/common/calendar/Calendar";
+import { NavbarTemplate } from "@/components/layout/Navbar";
+import { EVENTS_API_URL } from "@/lib/events";
+import React from "react";
+
+export default function Page() {
+  return (
+    <main className="flex flex-col p-4 lg:p-12">
+      <NavbarTemplate
+        title="Music room"
+        description="Book the Music room in Sports center freely."
+      />
+      <div className="my-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <div className="flex flex-col gap-4">
+          <a
+            href="https://t.me/InnoMusicRoomBot"
+            className="group flex flex-row gap-4 rounded-2xl bg-primary-main px-4 py-6 hover:bg-secondary-main"
+          >
+            <div className="w-12">
+              <span className="icon-[mdi--robot-excited-outline] text-5xl text-[#9747FF]" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="text-2xl font-semibold text-text-main underline-offset-4 group-hover:underline">
+                Telegram bot
+              </p>
+              <p className="text-lg text-text-secondary/75">
+                Register in Telegram bot to book timeslots.
+              </p>
+            </div>
+          </a>
+          <a
+            href="https://bit.ly/inno-music-room"
+            className="group flex flex-row gap-4 rounded-2xl bg-primary-main px-4 py-6 hover:bg-secondary-main"
+          >
+            <div className="w-12">
+              <span className="icon-[material-symbols--quick-reference-outline-rounded] text-5xl text-[#9747FF]" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="text-2xl font-semibold text-text-main underline-offset-4 group-hover:underline">
+                Instructions
+              </p>
+              <p className="text-lg text-text-secondary/75">
+                Read rules and guides on how to access the Music room. Every
+                visitor should accept these conditions.
+              </p>
+            </div>
+          </a>
+          <a
+            href="https://t.me/InnoMusicRoomBot"
+            className="group flex flex-row gap-4 rounded-2xl bg-primary-main px-4 py-6 hover:bg-secondary-main"
+          >
+            <div className="w-12">
+              <span className="icon-[ic--baseline-telegram] text-5xl text-[#9747FF]" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="text-2xl font-semibold text-text-main underline-offset-4 group-hover:underline">
+                Telegram chat
+              </p>
+              <p className="text-lg text-text-secondary/75">
+                Join telegram chat to receive latest news about Music room and
+                ask questions.
+              </p>
+            </div>
+          </a>
+        </div>
+        <div className="flex w-full flex-row items-center justify-center rounded-2xl bg-primary-main p-4">
+          <iframe
+            width="704"
+            height="396"
+            src="https://www.youtube-nocookie.com/embed/mGfdun8ah3g?si=ObZXOHLvwFbIWUBw"
+            title="How to get to the Innopolis Music room?"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+            style={{
+              maxWidth: "100%",
+              maxHeight: "100%",
+              borderRadius: "1rem",
+              width: "100%",
+              height: "100%",
+              aspectRatio: "16/9",
+            }}
+          ></iframe>
+        </div>
+      </div>
+      <h2 className="my-4 text-3xl font-medium">Booking calendar</h2>
+      <div className="lg:-mx-8">
+        <Calendar
+          urls={[`${EVENTS_API_URL}/music-room.ics`]}
+          initialView="timeGridWeek"
+          viewId="music-room"
+        />
+      </div>
+    </main>
+  );
+}

components/layout/Sidebar.tsx

@@ -38,6 +38,11 @@ const items: Item[] = [
       <span className="icon-[material-symbols--credit-card-outline] text-4xl" />
     ),
   },
+  {
+    title: "Music room",
+    path: "/music-room",
+    icon: <span className="icon-[material-symbols--piano] text-4xl" />,
+  },
 ];
 
 const externalItems: Item[] = [