File reorganization / CSS improvements

www/app/(aboutAndPrivacy)/about.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState } from "react";
+import FullscreenModal from "../transcripts/fullsreenModal";
+import AboutContent from "./aboutContent";
+
+type AboutProps = {
+  buttonText: string;
+};
+
+export default function About({ buttonText }: AboutProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
+        onClick={() => setModalOpen(true)}
+      >
+        {buttonText}
+      </button>
+      {modalOpen && (
+        <FullscreenModal close={() => setModalOpen(false)}>
+          <AboutContent />
+        </FullscreenModal>
+      )}
+    </>
+  );
+}

www/app/(aboutAndPrivacy)/aboutContent.tsx

@@ -0,0 +1,53 @@
+import { Paragraph, Subtitle, Title } from "../lib/textComponents";
+
+export default () => (
+  <div className="max-w-xl">
+    <Title>About us</Title>
+    <Paragraph>
+      Reflector is a transcription and summarization pipeline that transforms
+      audio into knowledge. The output is meeting minutes and topic summaries
+      enabling topic-specific analyses stored in your systems of record. This is
+      accomplished on your infrastructure - without 3rd parties - keeping your
+      data private, secure, and organized.
+    </Paragraph>
+    <Title>FAQs</Title>
+    <Subtitle>1. How does it work?</Subtitle>
+    <Paragraph>
+      Reflector simplifies tasks, turning spoken words into organized
+      information. Just press "record" to start and "stop" to finish. You'll get
+      notes divided by topic, a meeting summary, and the option to download
+      recordings.
+    </Paragraph>
+    <Subtitle>2. What makes Reflector different?</Subtitle>
+    <Paragraph>
+      Monadical prioritizes safeguarding your data. Reflector operates
+      exclusively on your infrastructure, ensuring guaranteed security.
+    </Paragraph>
+    <Subtitle>3. Any industry-specific use cases?</Subtitle>
+    <p>Absolutely! We have two custom deployments pre-built:</p>
+    <ul className="mb-2 md:mb-4">
+      <li>
+        · Reflector Media: Ideal for meetings, providing real-time notes and
+        topic summaries.
+      </li>
+      <li>
+        · Projector Reflector: Suited for larger events, offering live topic
+        summaries, translations, and agenda tracking.
+      </li>
+    </ul>
+    <Subtitle>4. Who’s behind Reflector?</Subtitle>
+    <Paragraph>
+      Monadical is a cohesive and effective team that can connect seamlessly
+      into your workflows, and we are ready to integrate Reflector’s building
+      blocks into your custom tools. We’re committed to building software that
+      outlasts us 🐙.
+    </Paragraph>
+
+    <Paragraph>
+      Contact us at{" "}
+      <a href="mailto:hello@monadical.com" className="underline">
+        hello@monadical.com
+      </a>
+    </Paragraph>
+  </div>
+);

www/app/(aboutAndPrivacy)/privacy.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState } from "react";
+import FullscreenModal from "../transcripts/fullsreenModal";
+import PrivacyContent from "./privacyContent";
+
+type PrivacyProps = {
+  buttonText: string;
+};
+
+export default function Privacy({ buttonText }: PrivacyProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
+        onClick={() => setModalOpen(true)}
+      >
+        {buttonText}
+      </button>
+      {modalOpen && (
+        <FullscreenModal close={() => setModalOpen(false)}>
+          <PrivacyContent />
+        </FullscreenModal>
+      )}
+    </>
+  );
+}

www/app/(aboutAndPrivacy)/privacyContent.tsx

@@ -0,0 +1,32 @@
+import { Paragraph, Title } from "../lib/textComponents";
+
+export default () => (
+  <div className="max-w-xl">
+    <Title>Privacy Policy</Title>
+    <Paragraph className="italic">Last updated on September 22, 2023</Paragraph>
+    <ul className="mb-2 md:mb-4">
+      <li className="mb-2">
+        · Recording Consent: By using Reflector, you grant us permission to
+        record your interactions for the purpose of showcasing Reflector's
+        capabilities during the All In AI conference.
+      </li>
+      <li className="mb-2">
+        · Data Access: You will have convenient access to your recorded sessions
+        and transcriptions via a unique URL, which remains active for a period
+        of seven days. After this time, your recordings and transcripts will be
+        deleted.
+      </li>
+      <li className="mb-2">
+        · Data Confidentiality: Rest assured that none of your audio data will
+        be shared with third parties.
+      </li>
+    </ul>
+    <Paragraph>
+      Questions or Concerns: If you have any questions or concerns regarding
+      your data, please feel free to reach out to us at{" "}
+      <a href="mailto:reflector@monadical.com" className="underline">
+        reflector@monadical.com
+      </a>
+    </Paragraph>
+  </div>
+);