Final batch of static pages

front_end/src/app/(main)/components/pagewrapper.tsx

@@ -6,7 +6,7 @@ interface PageWrapper {
 
 const PageWrapper: React.FC<PageWrapper> = ({ children }) => {
   return (
-    <div className="prose container mx-auto my-0 max-w-4xl rounded bg-transparent p-3.5 pt-2 dark:bg-blue-900 dark:bg-transparent md:my-10 md:bg-white md:px-6 md:py-4 dark:md:bg-blue-900 [&_a:hover]:text-blue-800 [&_a:hover]:underline [&_a:hover]:dark:text-blue-200 [&_a]:text-blue-700 [&_a]:dark:text-blue-400 [&_h1]:mb-4 [&_hr]:border-gray-300 [&_hr]:dark:border-blue-700 [&_p]:text-gray-700 [&_p]:dark:text-gray-400">
+    <div className="prose container mx-auto my-0 max-w-4xl rounded bg-transparent p-3.5 pt-2 dark:bg-blue-900 dark:bg-transparent md:my-10 md:bg-white md:px-6 md:py-4 dark:md:bg-blue-900 [&_a:hover]:text-blue-800 [&_a:hover]:underline [&_a:hover]:dark:text-blue-200 [&_a]:text-blue-700 [&_a]:dark:text-blue-400 [&_code]:rounded [&_code]:border [&_code]:border-blue-400 [&_code]:bg-white [&_code]:p-0.5 [&_code]:dark:border-blue-700 [&_code]:dark:bg-blue-900 [&_code]:md:bg-blue-200 [&_code]:dark:md:bg-blue-800 [&_h1]:mb-4 [&_hr]:border-gray-300 [&_hr]:dark:border-blue-700 [&_li]:text-sm [&_li]:md:text-base [&_p]:text-sm [&_p]:text-gray-700 [&_p]:dark:text-gray-400 [&_p]:md:text-base [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:border [&_pre]:border-blue-400 [&_pre]:bg-white [&_pre]:p-3 [&_pre]:dark:border-blue-700 [&_pre]:dark:bg-blue-900 [&_pre]:md:bg-blue-200 [&_pre]:dark:md:bg-blue-800">
       {children}
     </div>
   );

front_end/src/app/(main)/components/styled_disclosure.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Transition,
+} from "@headlessui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+
+interface StyledDisclosureProps {
+  question: string;
+  children: ReactNode;
+}
+
+const StyledDisclosure: React.FC<StyledDisclosureProps> = ({
+  question,
+  children,
+}) => {
+  return (
+    <Disclosure>
+      {({ open }) => (
+        <div className="w-full">
+          <DisclosureButton
+            className={`group flex w-full items-center gap-3 rounded p-3 text-left text-lg transition-all ${
+              open
+                ? "rounded-b-none bg-blue-500 dark:bg-blue-600"
+                : "bg-white dark:bg-blue-900 md:bg-blue-300 md:hover:bg-blue-400 md:dark:bg-blue-800 md:dark:hover:bg-blue-700"
+            }`}
+          >
+            <FontAwesomeIcon
+              icon={faChevronDown}
+              size="sm"
+              className={`text-blue-700 transition-transform ${
+                open
+                  ? "rotate-180 text-blue-800 dark:text-blue-400"
+                  : "dark:text-blue-500"
+              }`}
+            />
+            {question}
+          </DisclosureButton>
+          <Transition
+            enter="transition-all duration-300 ease-in-out"
+            enterFrom="max-h-0 opacity-0 overflow-hidden"
+            enterTo="max-h-[1000px] opacity-100 overflow-hidden"
+            leave="transition-all duration-400 ease-in-out"
+            leaveFrom="max-h-[1000px] opacity-100 overflow-hidden"
+            leaveTo="max-h-0 opacity-0 overflow-hidden"
+          >
+            <DisclosurePanel className="rounded-t-none border border-blue-500 px-3 py-0 text-gray-700 dark:border-blue-600 md:px-5">
+              {children}
+            </DisclosurePanel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
+
+export default StyledDisclosure;