Fusion Authentication & Website changes (#141)

* wip: stash login changes * bump packages * feat: client auth (minus local storage) * update copy * feat: site content per persona * feat: change header status based on persona * feat: get build working * feat:one integration at a time
NEUROFUSIONInc · Aug 23, 2023 · 01084d7 · 01084d7
1 parent 09efba1
commit 01084d7
Show file tree

Hide file tree

Showing 25 changed files with 834 additions and 264 deletions.
diff --git a/neurofusion/next-client/.env.example b/neurofusion/next-client/.env.example
@@ -1,3 +1,5 @@
 NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=
 MAGIC_SECRET_KEY=
-NEXT_AUTH_SECRET=
+NEXT_AUTH_SECRET=
+NEXT_PUBLIC_NEUROFUSION_BACKEND_URL=
+NEXT_PUBLIC_FUSION_NOSTR_PUBLIC_KEY=
diff --git a/neurofusion/next-client/package.json b/neurofusion/next-client/package.json
@@ -19,17 +19,21 @@
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^4.29.25",
+    "@types/file-saver": "^2.0.5",
     "axios": "^1.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.9",
+    "dexie": "^3.2.4",
+    "dexie-react-hooks": "^1.1.6",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "lucide-react": "0.261.0",
     "magic-sdk": "^18.4.1",
     "next": "latest",
     "next-auth": "^4.22.3",
     "next-themes": "^0.2.1",
+    "nostr-tools": "^1.14.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.2",

diff --git a/neurofusion/next-client/public/images/avatar.png b/neurofusion/next-client/public/images/avatar.png
diff --git a/neurofusion/next-client/src/components/features/integrations/data.ts b/neurofusion/next-client/src/components/features/integrations/data.ts
@@ -8,14 +8,14 @@ export interface IIntegration {
 }
 
 export const integrations = [
-  {
-    slug: "fusion",
-    title: "Fusion (Health & Behavior)",
-    href: "https://usefusion.app/download",
-    imageUrl: "/images/logo.png",
-    description: "Connect your behavior and health data from Apple Health, Google Fit with the Fusion mobile app.",
-    active: true,
-  },
+  // {
+  //   slug: "fusion",
+  //   title: "Fusion (Health & Behavior)",
+  //   href: "https://usefusion.app/download",
+  //   imageUrl: "/images/logo.png",
+  //   description: "Connect your behavior and health data from Apple Health, Google Fit with the Fusion mobile app.",
+  //   active: true,
+  // },
   {
     slug: "neurosity",
     title: "Neurosity (EEG Brain Data)",
@@ -25,32 +25,32 @@ export const integrations = [
       "Neurosity is a wearable device that measures EEG brain activity. It also predicts how focused & calm you are in a given moment.",
     active: true,
   },
-  {
-    slug: "magicflow",
-    title: "MagicFlow (Productivity)",
-    href: "https://magicflow.com",
-    imageUrl: "/images/integrations/magicflow_icon.webp",
-    description: "MagicFlow is the productivity tracker that helps you focus on what matters most.",
-    active: true,
-  },
-  {
-    slug: "activityWatch",
-    title: "ActivityWatch (Screen Time)",
-    href: "https://activitywatch.net",
-    imageUrl: "/images/integrations/activitywatch_icon.png",
-    description:
-      "ActivityWatch is an open source, privacy first app that automatically tracks how you spend time on your devices.",
-    active: true,
-  },
-  {
-    slug: "spotify",
-    title: "Spotify (Music)",
-    href: "https://spotify.com",
-    imageUrl: "/images/integrations/spotify_icon_green.png",
-    description:
-      "A digital streaming service that gives you access to millions of songs and content from all over the world.",
-    active: false,
-  },
+  // {
+  //   slug: "magicflow",
+  //   title: "MagicFlow (Productivity)",
+  //   href: "https://magicflow.com",
+  //   imageUrl: "/images/integrations/magicflow_icon.webp",
+  //   description: "MagicFlow is the productivity tracker that helps you focus on what matters most.",
+  //   active: true,
+  // },
+  // {
+  //   slug: "activityWatch",
+  //   title: "ActivityWatch (Screen Time)",
+  //   href: "https://activitywatch.net",
+  //   imageUrl: "/images/integrations/activitywatch_icon.png",
+  //   description:
+  //     "ActivityWatch is an open source, privacy first app that automatically tracks how you spend time on your devices.",
+  //   active: true,
+  // },
+  // {
+  //   slug: "spotify",
+  //   title: "Spotify (Music)",
+  //   href: "https://spotify.com",
+  //   imageUrl: "/images/integrations/spotify_icon_green.png",
+  //   description:
+  //     "A digital streaming service that gives you access to millions of songs and content from all over the world.",
+  //   active: false,
+  // },
 ] as const;
 
 export const magicFlowSteps = [

diff --git a/neurofusion/next-client/src/components/features/landing/feature-section/data.tsx b/neurofusion/next-client/src/components/features/landing/feature-section/data.tsx
@@ -5,7 +5,7 @@ import { IFusionFeature } from "./types";
 export const fusionFeatures: IFusionFeature[] = [
   {
     id: 1,
-    title: "individuals",
+    title: "personal well-being",
     description: "Create & respond to personalized prompts to understand changes in your behavior over time",
     featuresList: [
       "Get recommendations from our copilot to guide your daily activities",
@@ -20,18 +20,18 @@ export const fusionFeatures: IFusionFeature[] = [
     featuresList: [
       "Simplify medication management for you and your clients with automated scheduling and adherence tracking",
       "Monitor symptoms/side-effects in real-time to address concerns",
-      "Improve client care with ease by trialing interventions and treatment plans"
+      "Improve client care with ease by trialing interventions and treatment plans",
     ],
   },
   {
     id: 3,
     title: "explorers & researchers",
     description: "Record experiments & design quests (a set of tasks other users can run) and share results",
     featuresList: [
-      "A playground of exercises for recording brain & behavior data",
-      "Run your data with available models & share your results",
-      "Design a set of tasks and their execution flow",
-      "Get analysis reports automatically new data is submitted",
+      "Engaging experiments for recording brain & behavior data",
+      "Instant analysis for recorded data",
+      "Design custom experiments other users can run",
+      "Publish your results & models for other to run with their data",
     ],
   },
 ];
diff --git a/neurofusion/next-client/src/components/features/landing/feature-section/feature-section.tsx b/neurofusion/next-client/src/components/features/landing/feature-section/feature-section.tsx
@@ -6,83 +6,98 @@ import { FusionFeature } from "./fusion-feature/fusion-feature";
 import { PromptExample } from "./prompt-example/prompt-example";
 import { ButtonLink, MobileStoreLink } from "~/components/ui";
 import { CalendarCheck } from "lucide-react";
+import { useSearchParams } from "next/navigation";
 
 export const FeatureSection: FC = () => {
+  const searchParams = useSearchParams();
+
   return (
     <section title="feature-section">
       <div className="container max-w-7xl relative flex flex-col gap-y-12 md:gap-y-32 mx-auto my-12 w-full p-4 lg:my-36">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-y-6">
-          <div>
-            <FusionFeature feature={fusionFeatures[0]} />
-            <div className="mt-10 flex flex-col gap-x-6 gap-y-2 md:flex-row w-full px-2">
-              <MobileStoreLink store="apple" className="w-full md:w-auto" />
-              <MobileStoreLink store="google" className="w-full md:w-auto" />
+        {searchParams.get("persona") == null && (
+          <div className="flex flex-col md:flex-row items-center justify-between gap-y-6">
+            <div>
+              <FusionFeature feature={fusionFeatures[0]} />
+              <div className="mt-10 flex flex-col gap-x-6 gap-y-2 md:flex-row w-full px-2">
+                <MobileStoreLink store="apple" className="w-full md:w-auto" />
+                <MobileStoreLink store="google" className="w-full md:w-auto" />
+              </div>
+            </div>
+            <div className="relative w-auto h-auto">
+              <Image
+                src="/images/features/iphone-mockup.png"
+                alt="User using fusion app"
+                width={609}
+                height={914}
+                className="rounded-2xl"
+              />
+              <PromptExample
+                title="Have you taken a 5 minute walk?"
+                leftSubtitle="Mo, Tu, We, Th, Fr"
+                rightSubtitle="Every 5 hrs"
+                className="hidden md:block absolute top-4 right-1/2 md:transform md:-translate-x-2 lg:-translate-x-1/2"
+              />
+            </div>
+          </div>
+        )}
+        {/* Coaches & Health Professionals */}
+        {searchParams.get("persona") == "coaches_health_professionals" && (
+          <div className="flex flex-col-reverse md:flex-row items-center justify-between gap-y-6">
+            <div className="relative w-auto h-auto">
+              <Image
+                src="/images/features/health-and-fitness.png"
+                alt="User using fusion app"
+                width={607}
+                height={605}
+                className="rounded-2xl"
+              />
+              <PromptExample
+                title="Kate, please record your blood pressure"
+                leftSubtitle="Weekends"
+                rightSubtitle="Every 12 hrs"
+                className="hidden md:block absolute bottom-4 right-20 lg:right-15 md:transform"
+              />
+            </div>
+            <div>
+              <FusionFeature feature={fusionFeatures[1]} />
+              <ButtonLink
+                intent="filled"
+                target="_blank"
+                leftIcon={<CalendarCheck className="w-5 h-5 mr-2" />}
+                href="https://calendly.com/oreogundipe/chat-about-fusion"
+                size="xl"
+                className="mt-4"
+                fullWidth
+              >
+                Schedule a call with us
+              </ButtonLink>
             </div>
           </div>
-          <div className="relative w-auto h-auto">
+        )}
+        {/* Researchers & Explorers */}
+        {searchParams.get("persona") == "explorers_researchers" && (
+          <div className="flex flex-col md:flex-row items-center justify-between gap-y-6">
+            <div>
+              <FusionFeature feature={fusionFeatures[2]} />
+              <ButtonLink
+                intent="outlined"
+                href="https://github.com/neurofusioninc"
+                size="xl"
+                className="mt-4 w-full md:w-11/12"
+              >
+                Visit our Github
+              </ButtonLink>
+            </div>
+
             <Image
-              src="/images/features/iphone-mockup.png"
+              src="/images/features/phone_action.png"
               alt="User using fusion app"
               width={609}
               height={914}
               className="rounded-2xl"
             />
-            <PromptExample
-              title="Have you taken a 5 minute walk?"
-              leftSubtitle="Mo, Tu, We, Th, Fr"
-              rightSubtitle="Every 5 hrs"
-              className="hidden md:block absolute top-4 right-1/2 md:transform md:-translate-x-2 lg:-translate-x-1/2"
-            />
           </div>
-        </div>
-        <div className="flex flex-col-reverse md:flex-row items-center justify-between gap-y-6">
-          <div className="relative w-auto h-auto">
-            <Image
-              src="/images/features/health-and-fitness.png"
-              alt="User using fusion app"
-              width={607}
-              height={605}
-              className="rounded-2xl"
-            />
-            <PromptExample
-              title="Kate, please record your blood pressure"
-              leftSubtitle="Weekends"
-              rightSubtitle="Every 12 hrs"
-              className="hidden md:block absolute bottom-4 right-20 lg:right-15 md:transform"
-            />
-          </div>
-          <div>
-            <FusionFeature feature={fusionFeatures[1]} />
-            <ButtonLink
-              intent="filled"
-              target="_blank"
-              leftIcon={<CalendarCheck className="w-5 h-5 mr-2" />}
-              href="https://calendly.com/oreogundipe/chat-about-fusion"
-              size="xl"
-              className="mt-4"
-              fullWidth
-            >
-              Schedule a call with us
-            </ButtonLink>
-          </div>
-        </div>
-        {/* Researchers & Explorers */}
-        <div className="flex flex-col md:flex-row items-center justify-between gap-y-6">
-          <div>
-            <FusionFeature feature={fusionFeatures[2]} />
-            <ButtonLink intent="outlined" href="https://github.com/neurofusioninc" size="xl" className="mt-4 w-full md:w-11/12">
-              Visit our Github
-            </ButtonLink>
-          </div>
-
-          <Image
-            src="/images/features/phone_action.png"
-            alt="User using fusion app"
-            width={609}
-            height={914}
-            className="rounded-2xl"
-          />
-        </div>
+        )}
       </div>
     </section>
   );

diff --git a/neurofusion/next-client/src/components/features/landing/hero-section/hero-section.tsx b/neurofusion/next-client/src/components/features/landing/hero-section/hero-section.tsx
@@ -10,27 +10,27 @@ export const HeroSection = () => {
     >
       <div className="flex w-full max-w-2xl flex-col space-y-10 text-center md:min-w-[300px]">
         <h1 className="font-body text-3xl font-semibold sm:text-6xl">
-          Improve your{" "}
+          Manage & Improve your{" "}
           <span className="text-primary-gradient">
             <Typist typingDelay={100} cursor={<span className="cursor">|</span>} loop>
-              wellbeing
+              well-being
               <Typist.Delay ms={2000} />
               <Typist.Backspace count={12} />
               <Typist.Delay ms={500} />
               health
               <Typist.Delay ms={2000} />
               <Typist.Backspace count={7} />
               <Typist.Delay ms={500} />
-              self-care
+              productivity
               <Typist.Delay ms={2000} />
               <Typist.Backspace count={10} />
             </Typist>
           </span>{" "}
           with Fusion
         </h1>
-        <p className="block text-base leading-8 text-gray-500 dark:text-gray-400 md:text-xl">
+        {/* <p className="block text-base leading-8 text-gray-500 dark:text-gray-400 md:text-xl">
           Our copilot brings together your daily activities, fitness, and brain data for a better and healthier life.
-        </p>
+        </p> */}
         <div className="mt-10 flex flex-col items-center justify-center gap-x-6 gap-y-2 md:flex-row">
           <MobileStoreLink store="apple" className="w-full md:w-auto" />
           <MobileStoreLink store="google" className="w-full md:w-auto" />
@@ -40,7 +40,7 @@ export const HeroSection = () => {
         <iframe
           title="Neurofusion Demo Video"
           allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          src="https://www.youtube.com/embed/8jmdCFnZklk?controls=0"
+          src="https://www.loom.com/embed/2893c581a8f44e6389b2f7d5b0f9baec?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true&autoplay=0"
           allowFullScreen
           className="absolute top-0 left-0 w-full h-full rounded-3xl"
         />

diff --git a/neurofusion/next-client/src/components/features/landing/offering-section/data.ts b/neurofusion/next-client/src/components/features/landing/offering-section/data.ts
@@ -4,7 +4,7 @@ export const fusionOfferingFeatures = [
   {
     icon: Lock,
     title: "Data privacy",
-    description: "Prompts & responses are stored on your device. We anonymise and encrypt data from other sources.",
+    description: "Prompts & responses are stored only your device. No one can see them unless you chose to share them.",
   },
   {
     icon: Hand,

diff --git a/neurofusion/next-client/src/components/layouts/dashboard-layout/sidebar/account-menu.tsx b/neurofusion/next-client/src/components/layouts/dashboard-layout/sidebar/account-menu.tsx
@@ -32,7 +32,10 @@ export const AccountMenu: FC<IAccountMenuProps> = ({ user }) => {
               <AvatarFallback>{user?.name?.substring(0, 1).toUpperCase()}</AvatarFallback>
             </Avatar>
             <div className="flex-flex-col">
-              <p className="w-[90%] truncate text-[14px] font-medium">{user?.name?.split("@")[0]}</p>
+              <p className="w-[90%] text-[14px] font-medium">
+                {user?.name?.slice(0, 8) + ":" + user?.name?.slice(-8)}
+                {/* {user?.name?.split("@")[0]} */}
+              </p>
               <p className=" lg:max-w-[160px] max-w-[120px] truncate text-[12.5px] text-slate-600 dark:text-slate-400">
                 {user?.email}
               </p>
@@ -61,12 +64,14 @@ export const AccountMenu: FC<IAccountMenuProps> = ({ user }) => {
           </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem disabled>
-          <Github className="mr-2 h-4 w-4" />
-          <span>GitHub</span>
+        <DropdownMenuItem>
+          <Link href="https://github.com/neurofusioninc" className="inline-flex w-full items-center">
+            <Github className="mr-2 h-4 w-4" />
+            <span>GitHub</span>
+          </Link>
         </DropdownMenuItem>
         <DropdownMenuItem>
-          <Link href="mailto:ore@usefusion.app" className="inline-flex w-full items-center">
+          <Link href="mailto:contact@usefusion.app" className="inline-flex w-full items-center">
             <LifeBuoy className="mr-2 h-4 w-4" />
             <span>Support</span>
           </Link>