From e94c0b5da123448bbf8f18a51f5bd43416aac53b Mon Sep 17 00:00:00 2001 From: Sara Date: Mon, 25 Sep 2023 18:15:40 +0200 Subject: [PATCH 1/4] 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 de423da8..916737b3 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 ( - + @@ -87,8 +89,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 07a0b8b9..88b8f04c 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); @@ -95,51 +97,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."} +

+ + + )} +
-
-
+ +
+ )} From 327b3748c7bde1e4d69f67b40defea259b31f1c0 Mon Sep 17 00:00:00 2001 From: Sara Date: Mon, 25 Sep 2023 18:18:11 +0200 Subject: [PATCH 2/4] minor - remove empty section --- www/app/transcripts/new/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/www/app/transcripts/new/page.tsx b/www/app/transcripts/new/page.tsx index 88b8f04c..b1deaa9f 100644 --- a/www/app/transcripts/new/page.tsx +++ b/www/app/transcripts/new/page.tsx @@ -146,7 +146,6 @@ const TranscriptCreate = () => { -
)} From edcee20ea83411f9068b5c9fc0b6513266108e21 Mon Sep 17 00:00:00 2001 From: Koper Date: Mon, 25 Sep 2023 18:00:44 +0100 Subject: [PATCH 3/4] File reorganization / CSS improvements --- www/app/{ => (aboutAndPrivacy)}/about.tsx | 2 +- www/app/{ => (aboutAndPrivacy)}/aboutContent.tsx | 2 +- www/app/{ => (aboutAndPrivacy)}/privacy.tsx | 2 +- www/app/{ => (aboutAndPrivacy)}/privacyContent.tsx | 8 ++++---- www/app/layout.tsx | 4 ++-- www/app/lib/textComponents.tsx | 4 ++-- www/app/transcripts/new/page.tsx | 4 ++-- 7 files changed, 13 insertions(+), 13 deletions(-) rename www/app/{ => (aboutAndPrivacy)}/about.tsx (91%) rename www/app/{ => (aboutAndPrivacy)}/aboutContent.tsx (96%) rename www/app/{ => (aboutAndPrivacy)}/privacy.tsx (91%) rename www/app/{ => (aboutAndPrivacy)}/privacyContent.tsx (88%) diff --git a/www/app/about.tsx b/www/app/(aboutAndPrivacy)/about.tsx similarity index 91% rename from www/app/about.tsx rename to www/app/(aboutAndPrivacy)/about.tsx index 1f7969cd..7f09d500 100644 --- a/www/app/about.tsx +++ b/www/app/(aboutAndPrivacy)/about.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState } from "react"; -import FullscreenModal from "./transcripts/fullsreenModal"; +import FullscreenModal from "../transcripts/fullsreenModal"; import AboutContent from "./aboutContent"; type AboutProps = { diff --git a/www/app/aboutContent.tsx b/www/app/(aboutAndPrivacy)/aboutContent.tsx similarity index 96% rename from www/app/aboutContent.tsx rename to www/app/(aboutAndPrivacy)/aboutContent.tsx index c19c50dc..5b2165aa 100644 --- a/www/app/aboutContent.tsx +++ b/www/app/(aboutAndPrivacy)/aboutContent.tsx @@ -1,4 +1,4 @@ -import { Paragraph, Subtitle, Title } from "./lib/textComponents"; +import { Paragraph, Subtitle, Title } from "../lib/textComponents"; export default () => (
diff --git a/www/app/privacy.tsx b/www/app/(aboutAndPrivacy)/privacy.tsx similarity index 91% rename from www/app/privacy.tsx rename to www/app/(aboutAndPrivacy)/privacy.tsx index a041827a..2f0f0bc0 100644 --- a/www/app/privacy.tsx +++ b/www/app/(aboutAndPrivacy)/privacy.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState } from "react"; -import FullscreenModal from "./transcripts/fullsreenModal"; +import FullscreenModal from "../transcripts/fullsreenModal"; import PrivacyContent from "./privacyContent"; type PrivacyProps = { diff --git a/www/app/privacyContent.tsx b/www/app/(aboutAndPrivacy)/privacyContent.tsx similarity index 88% rename from www/app/privacyContent.tsx rename to www/app/(aboutAndPrivacy)/privacyContent.tsx index 79ea2c31..43c6ca97 100644 --- a/www/app/privacyContent.tsx +++ b/www/app/(aboutAndPrivacy)/privacyContent.tsx @@ -1,22 +1,22 @@ -import { Paragraph, Title } from "./lib/textComponents"; +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.
    • diff --git a/www/app/layout.tsx b/www/app/layout.tsx index 916737b3..3436c123 100644 --- a/www/app/layout.tsx +++ b/www/app/layout.tsx @@ -7,8 +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"; +import About from "./(aboutAndPrivacy)/about"; +import Privacy from "./(aboutAndPrivacy)/privacy"; const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] }); diff --git a/www/app/lib/textComponents.tsx b/www/app/lib/textComponents.tsx index 2c4d534c..c7db6e23 100644 --- a/www/app/lib/textComponents.tsx +++ b/www/app/lib/textComponents.tsx @@ -4,13 +4,13 @@ type SimpleProps = { }; const Title = ({ children, className }: SimpleProps) => ( -

    {children}

    +

    {children}

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

    {children}

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

    {children}

    +

    {children}

    ); export { Title, Subtitle, Paragraph }; diff --git a/www/app/transcripts/new/page.tsx b/www/app/transcripts/new/page.tsx index b1deaa9f..9c32bd8a 100644 --- a/www/app/transcripts/new/page.tsx +++ b/www/app/transcripts/new/page.tsx @@ -13,8 +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"; +import About from "../../(aboutAndPrivacy)/about"; +import Privacy from "../../(aboutAndPrivacy)/privacy"; const TranscriptCreate = () => { const [stream, setStream] = useState(null); From e27dd6d304b077ea7f98909bd754ac91a400851e Mon Sep 17 00:00:00 2001 From: Sara Date: Mon, 25 Sep 2023 19:58:41 +0200 Subject: [PATCH 4/4] small styling improvements --- www/app/(aboutAndPrivacy)/about.tsx | 2 +- .../fullsreenModal.tsx | 12 ++++++------ www/app/(aboutAndPrivacy)/privacy.tsx | 2 +- www/app/lib/textComponents.tsx | 8 +++++--- 4 files changed, 13 insertions(+), 11 deletions(-) rename www/app/{transcripts => (aboutAndPrivacy)}/fullsreenModal.tsx (70%) diff --git a/www/app/(aboutAndPrivacy)/about.tsx b/www/app/(aboutAndPrivacy)/about.tsx index 7f09d500..6c6d1577 100644 --- a/www/app/(aboutAndPrivacy)/about.tsx +++ b/www/app/(aboutAndPrivacy)/about.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState } from "react"; -import FullscreenModal from "../transcripts/fullsreenModal"; +import FullscreenModal from "./fullsreenModal"; import AboutContent from "./aboutContent"; type AboutProps = { diff --git a/www/app/transcripts/fullsreenModal.tsx b/www/app/(aboutAndPrivacy)/fullsreenModal.tsx similarity index 70% rename from www/app/transcripts/fullsreenModal.tsx rename to www/app/(aboutAndPrivacy)/fullsreenModal.tsx index 20ae6e45..fa5f3817 100644 --- a/www/app/transcripts/fullsreenModal.tsx +++ b/www/app/(aboutAndPrivacy)/fullsreenModal.tsx @@ -17,17 +17,17 @@ export default function FullscreenModal(props: ModalProps) { className="fixed z-50 cursor-pointer top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/10" onClick={props.close} > -
    +
    -
    +
    {props.children}
    diff --git a/www/app/(aboutAndPrivacy)/privacy.tsx b/www/app/(aboutAndPrivacy)/privacy.tsx index 2f0f0bc0..d352688f 100644 --- a/www/app/(aboutAndPrivacy)/privacy.tsx +++ b/www/app/(aboutAndPrivacy)/privacy.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState } from "react"; -import FullscreenModal from "../transcripts/fullsreenModal"; +import FullscreenModal from "./fullsreenModal"; import PrivacyContent from "./privacyContent"; type PrivacyProps = { diff --git a/www/app/lib/textComponents.tsx b/www/app/lib/textComponents.tsx index c7db6e23..fefd980d 100644 --- a/www/app/lib/textComponents.tsx +++ b/www/app/lib/textComponents.tsx @@ -4,13 +4,15 @@ type SimpleProps = { }; const Title = ({ children, className }: SimpleProps) => ( -

    {children}

    +

    + {children} +

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

    {children}

    +

    {children}

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

    {children}

    +

    {children}

    ); export { Title, Subtitle, Paragraph };