Home page, new session page (#350)

First cut.
Updated media to follow.
Projects will likely be disabled for the beta.

We'll invest more design effort post-beta.

Author: microbit-matt-hillsdon

index.html

@@ -16,11 +16,11 @@
     <meta name="twitter:site" content="@microbit_edu" />
     <meta
       name="description"
-      content="Create AI by training a machine learning model with your own movement data, testing it to see if it works, then writing your own code to use it on a BBC micro:bit"
+      content="Create AI by training a machine learning model with your movement data, testing it to see if it works, then writing your own code to use it on a BBC micro:bit"
     />
     <meta
       property="og:description"
-      content="Use your own movement data to train a computer model"
+      content="Create AI on your BBC micro:bit using movement and machine learning"
     />
     <meta property="og:image" content="%VITE_FULL_URL%social.jpg" />
 

lang/ui.en.json

@@ -63,6 +63,10 @@
     "defaultMessage": "Close",
     "description": "Close button text or label"
   },
+  "coming-soon": {
+    "defaultMessage": "Coming soon",
+    "description": "Placeholder text for future projects"
+  },
   "confirm-action": {
     "defaultMessage": "Confirm",
     "description": "Confirm button text"
@@ -683,13 +687,9 @@
     "defaultMessage": "Live graph",
     "description": ""
   },
-  "footer.resume": {
-    "defaultMessage": "Resume session",
-    "description": ""
-  },
-  "footer.start": {
-    "defaultMessage": "Start new session",
-    "description": ""
+  "get-started-action": {
+    "defaultMessage": "Get started",
+    "description": "Get started action"
   },
   "help-label": {
     "defaultMessage": "Help",
@@ -703,9 +703,33 @@
     "defaultMessage": "Home",
     "description": "Home button text"
   },
+  "homepage-description": {
+    "defaultMessage": "Train a machine learning model on your own movement data and run it on your micro:bit.",
+    "description": "Home page description"
+  },
+  "homepage-how-it-works": {
+    "defaultMessage": "How it works",
+    "description": "Home page section heading"
+  },
+  "homepage-projects": {
+    "defaultMessage": "Projects",
+    "description": "Home page section heading"
+  },
+  "homepage-step-by-step": {
+    "defaultMessage": "Step by step",
+    "description": "Home page section heading"
+  },
   "homepage-subtitle": {
-    "defaultMessage": "Introduce students to machine learning concepts through physical movement and data",
-    "description": "Subtitle of the home page"
+    "defaultMessage": "Create AI on your BBC micro:bit using movement and machine learning.",
+    "description": "Home page subtitle"
+  },
+  "homepage-video-alt": {
+    "defaultMessage": "Introductory video",
+    "description": "Home page video alt text"
+  },
+  "homepage-video-prompt": {
+    "defaultMessage": "Watch the video to learn how to use {appNameFull}.",
+    "description": "Prompt to watch the video on the home page"
   },
   "homepage.Link": {
     "defaultMessage": "Home page",
@@ -759,6 +783,62 @@
     "defaultMessage": "The name is used when you save a file.",
     "description": "Text under project name field"
   },
+  "newpage-continue-session-instruction": {
+    "defaultMessage": "To continue a saved session from a file please select a file.",
+    "description": "Instruction to users to continue a saved session from a file"
+  },
+  "newpage-continue-session-subtitle": {
+    "defaultMessage": "Use a hex file or data samples file you saved to your computer to continue a session.",
+    "description": "Continue session subtitle"
+  },
+  "newpage-continue-session-title": {
+    "defaultMessage": "Continue a saved session",
+    "description": "Continue session title"
+  },
+  "newpage-heading-subtitle": {
+    "defaultMessage": "Run whole class sessions, easily share code with students and save progress",
+    "description": "Homepage heading subtitle"
+  },
+  "newpage-last-session-date": {
+    "defaultMessage": "<strong>Date:</strong> {date}",
+    "description": "Last session date label"
+  },
+  "newpage-last-session-name": {
+    "defaultMessage": "<strong>Name:</strong> {name}",
+    "description": "Last session name label"
+  },
+  "newpage-last-session-none": {
+    "defaultMessage": "No session found",
+    "description": "Last session not found text"
+  },
+  "newpage-last-session-title": {
+    "defaultMessage": "Open last session",
+    "description": "Open last session title"
+  },
+  "newpage-new-session-subtitle": {
+    "defaultMessage": "Connect your micro:bit and collect movement data to build a machine learning model",
+    "description": "Start new session subtitle"
+  },
+  "newpage-new-session-title": {
+    "defaultMessage": "New session",
+    "description": "Start new session title"
+  },
+  "newpage-section-one-title": {
+    "defaultMessage": "Pick up where you left off",
+    "description": "Homepage section one title"
+  },
+  "newpage-section-two-title": {
+    "defaultMessage": "Start something new",
+    "description": "Homepage section two title"
+  },
+  "newpage-subtitle": {
+    "defaultMessage": "Introduce students to machine learning concepts through physical movement and data",
+    "description": "Subtitle of micro:bit AI creator home page"
+  },
+  "newpage-title": {
+    "defaultMessage": "New session",
+    "description": "New page title"
+  },
   "no-data-samples": {
     "defaultMessage": "No data samples",
     "description": "Empty data samples page status text"
@@ -887,6 +967,26 @@
     "defaultMessage": "Start training",
     "description": "Start training button text"
   },
+  "steps-code": {
+    "defaultMessage": "Code",
+    "description": "Step in home page diagram"
+  },
+  "steps-collect-data": {
+    "defaultMessage": "Collect data",
+    "description": "Step in home page diagram"
+  },
+  "steps-improve": {
+    "defaultMessage": "Improve",
+    "description": "Step in home page diagram"
+  },
+  "steps-test-model": {
+    "defaultMessage": "Test model",
+    "description": "Step in home page diagram"
+  },
+  "steps-train": {
+    "defaultMessage": "Train",
+    "description": "Step in home page diagram"
+  },
   "support-request": {
     "defaultMessage": "Please consider <link>raising a support request</link>.",
     "description": "Support request link text"

src/App.tsx

@@ -21,9 +21,14 @@ import { deployment, useDeployment } from "./deployment";
 import { ProjectProvider } from "./hooks/project-hooks";
 import { LoggingProvider } from "./logging/logging-hooks";
 import TranslationProvider from "./messages/TranslationProvider";
-import HomePage from "./pages/HomePage";
-import { createHomePageUrl, createSessionPageUrl } from "./urls";
 import { sessionPageConfigs } from "./pages-config";
+import HomePage from "./pages/HomePage";
+import NewPage from "./pages/NewPage";
+import {
+  createHomePageUrl,
+  createNewPageUrl,
+  createSessionPageUrl,
+} from "./urls";
 
 export interface ProviderLayoutProps {
   children: ReactNode;
@@ -34,7 +39,6 @@ const logging = deployment.logging;
 const Providers = ({ children }: ProviderLayoutProps) => {
   const deployment = useDeployment();
   const { ConsentProvider } = deployment.compliance;
-  const driverRef = useRef<MakeCodeFrameDriver>(null);
   return (
     <React.StrictMode>
       <ChakraProvider theme={deployment.chakraTheme}>
@@ -45,14 +49,7 @@ const Providers = ({ children }: ProviderLayoutProps) => {
                 <ConnectProvider>
                   <BufferedDataProvider>
                     <ConnectionStageProvider>
-                      <ProjectProvider driverRef={driverRef}>
-                        <ProjectDropTarget>
-                          <ErrorBoundary>
-                            <EditCodeDialog ref={driverRef} />
-                            {children}
-                          </ErrorBoundary>
-                        </ProjectDropTarget>
-                      </ProjectProvider>
+                      {children}
                     </ConnectionStageProvider>
                   </BufferedDataProvider>
                 </ConnectProvider>
@@ -66,11 +63,17 @@ const Providers = ({ children }: ProviderLayoutProps) => {
 };
 
 const Layout = () => {
+  const driverRef = useRef<MakeCodeFrameDriver>(null);
   return (
     // We use this even though we have errorElement as this does logging.
     <ErrorBoundary>
       <ScrollRestoration />
-      <Outlet />
+      <ProjectProvider driverRef={driverRef}>
+        <EditCodeDialog ref={driverRef} />
+        <ProjectDropTarget>
+          <Outlet />
+        </ProjectDropTarget>
+      </ProjectProvider>
     </ErrorBoundary>
   );
 };
@@ -90,6 +93,10 @@ const createRouter = () => {
           path: createHomePageUrl(),
           element: <HomePage />,
         },
+        {
+          path: createNewPageUrl(),
+          element: <NewPage />,
+        },
         ...sessionPageConfigs.map((config) => {
           return {
             path: createSessionPageUrl(config.id),