From 962997214a1b4052f089e0abeaa6812fa0389224 Mon Sep 17 00:00:00 2001 From: Sara Date: Mon, 25 Sep 2023 18:15:40 +0200 Subject: [PATCH] adds about and privacy pages --- www/app/about.tsx | 28 ++++++++ www/app/aboutContent.tsx | 53 +++++++++++++++ www/app/layout.tsx | 12 +++- www/app/lib/textComponents.tsx | 16 +++++ www/app/privacy.tsx | 28 ++++++++ www/app/privacyContent.tsx | 32 +++++++++ www/app/transcripts/fullsreenModal.tsx | 36 +++++++++++ www/app/transcripts/new/page.tsx | 90 ++++++++++++++------------ 8 files changed, 251 insertions(+), 44 deletions(-) create mode 100644 www/app/about.tsx create mode 100644 www/app/aboutContent.tsx create mode 100644 www/app/lib/textComponents.tsx create mode 100644 www/app/privacy.tsx create mode 100644 www/app/privacyContent.tsx create mode 100644 www/app/transcripts/fullsreenModal.tsx diff --git a/www/app/about.tsx b/www/app/about.tsx new file mode 100644 index 00000000..1f7969cd --- /dev/null +++ b/www/app/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 ( + <> + + {modalOpen && ( + setModalOpen(false)}> + + + )} + + ); +} diff --git a/www/app/aboutContent.tsx b/www/app/aboutContent.tsx new file mode 100644 index 00000000..c19c50dc --- /dev/null +++ b/www/app/aboutContent.tsx @@ -0,0 +1,53 @@ +import { Paragraph, Subtitle, Title } from "./lib/textComponents"; + +export default () => ( +
+ About us + + 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. + + FAQs + 1. How does it work? + + 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. + + 2. What makes Reflector different? + + Monadical prioritizes safeguarding your data. Reflector operates + exclusively on your infrastructure, ensuring guaranteed security. + + 3. Any industry-specific use cases? +

Absolutely! We have two custom deployments pre-built:

+ + 4. Who’s behind Reflector? + + 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 🐙. + + + + Contact us at{" "} + + hello@monadical.com + + +
+); diff --git a/www/app/layout.tsx b/www/app/layout.tsx index 79f1b8e2..cc3749a2 100644 --- a/www/app/layout.tsx +++ b/www/app/layout.tsx @@ -7,6 +7,8 @@ import { ErrorProvider } from "./(errors)/errorContext"; import ErrorMessage from "./(errors)/errorMessage"; import Image from "next/image"; import Link from "next/link"; +import About from "./about"; +import Privacy from "./privacy"; const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] }); @@ -59,7 +61,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }) { return ( - + @@ -89,8 +91,12 @@ export default function RootLayout({ children }) {

- {/* Text link on the right */} - +
+ {/* Text link on the right */} + +  ·  + +
{children} diff --git a/www/app/lib/textComponents.tsx b/www/app/lib/textComponents.tsx new file mode 100644 index 00000000..2c4d534c --- /dev/null +++ b/www/app/lib/textComponents.tsx @@ -0,0 +1,16 @@ +type SimpleProps = { + children: JSX.Element | string | (JSX.Element | string)[]; + className?: string; +}; + +const Title = ({ children, className }: SimpleProps) => ( +

{children}

+); +const Subtitle = ({ children, className }: SimpleProps) => ( +

{children}

+); +const Paragraph = ({ children, className }: SimpleProps) => ( +

{children}

+); + +export { Title, Subtitle, Paragraph }; diff --git a/www/app/privacy.tsx b/www/app/privacy.tsx new file mode 100644 index 00000000..a041827a --- /dev/null +++ b/www/app/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 ( + <> + + {modalOpen && ( + setModalOpen(false)}> + + + )} + + ); +} diff --git a/www/app/privacyContent.tsx b/www/app/privacyContent.tsx new file mode 100644 index 00000000..79ea2c31 --- /dev/null +++ b/www/app/privacyContent.tsx @@ -0,0 +1,32 @@ +import { Paragraph, Title } from "./lib/textComponents"; + +export default () => ( +
+ Privacy Policy + Last updated on September 22, 2023 +
    +
  • + · 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. +
    • +
  • + · 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. +
    • +
  • + · Data Confidentiality: Rest assured that none of your audio data will + be shared with third parties. +
    • +
+ + Questions or Concerns: If you have any questions or concerns regarding + your data, please feel free to reach out to us at{" "} + + reflector@monadical.com + + +
+); diff --git a/www/app/transcripts/fullsreenModal.tsx b/www/app/transcripts/fullsreenModal.tsx new file mode 100644 index 00000000..20ae6e45 --- /dev/null +++ b/www/app/transcripts/fullsreenModal.tsx @@ -0,0 +1,36 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faClose } from "@fortawesome/free-solid-svg-icons"; +import { MouseEventHandler } from "react"; + +type ModalProps = { + children: JSX.Element; + close: () => void; +}; +const cancelClick: MouseEventHandler = (event) => { + event.preventDefault(); + event.stopPropagation(); +}; + +export default function FullscreenModal(props: ModalProps) { + return ( +
+
+ +
+ {props.children} +
+
+
+ ); +} diff --git a/www/app/transcripts/new/page.tsx b/www/app/transcripts/new/page.tsx index c089e679..65eb6ee4 100644 --- a/www/app/transcripts/new/page.tsx +++ b/www/app/transcripts/new/page.tsx @@ -13,6 +13,8 @@ import LiveTrancription from "../liveTranscription"; import DisconnectedIndicator from "../disconnectedIndicator"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGear } from "@fortawesome/free-solid-svg-icons"; +import About from "../../about"; +import Privacy from "../../privacy"; const TranscriptCreate = () => { const [stream, setStream] = useState(null); @@ -99,51 +101,57 @@ const TranscriptCreate = () => { ) : ( <>
-
-
-

Reflector

-

- Meet Monadical's own Reflector, your audio ally for hassle-free - insights. -

-

- With real-time transcriptions, translations, and summaries, - Reflector captures and categorizes the details of your meetings - and events, all while keeping your data locked down tight on - your own infrastructure. Forget the scribbled notes, endless - recordings, or third-party apps. Discover Reflector, a powerful - new way to elevate knowledge management and accessibility for - all. -

-
-
-
-

Audio Permissions

- {loading ? ( -

- Checking permission... +

+
+
+
+

+ Welcome to reflector.media +

+

+ 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.

- ) : ( - <> + +

+ Audio Permissions +

+ {loading ? (

- Reflector needs access to your microphone to work. -
- {permissionDenied - ? "Please reset microphone permissions to continue." - : "Please grant permission to continue."} + Checking permission...

- - - )} + ) : ( + <> +

+ To enable Reflector, we kindly request permission to + access your microphone during meetings and events. +
+ +
+ {permissionDenied + ? "Permission to use your microphone was denied, please change the permission setting in your browser and refresh this page." + : "Please grant permission to continue."} +

+ + + )} +
-
-
+ +
+ )}