Updated the side panel copy

apps/webapp/app/components/helpContent/HelpContentText.tsx

@@ -28,17 +28,32 @@ import { Header2 } from "../primitives/Headers";
 import { CodeBlock } from "../code/CodeBlock";
 import { EnvironmentLabel } from "../environments/EnvironmentLabel";
 import { TextLink } from "../primitives/TextLink";
+import FormSegmentedControl from "../primitives/FormSegmentedControl";
+
+// const options = [
+//   { label: "Label 1", value: "developer" },
+//   { label: "Label 2", value: "Users" },
+// ];
 
 export function HowToSetupYourProject() {
   const devEnvironment = useDevEnvironment();
   const appOrigin = useAppOrigin();
   return (
     <>
-      <StepNumber stepNumber="1" title="Run the CLI init command" />
+      {/* <FormSegmentedControl
+        name={"graph"}
+        options={options}
+      ></FormSegmentedControl> */}
+      <Paragraph spacing>
+        Add Trigger.dev to your Project with an example Job which logs 'Hello
+        World' to the console.
+      </Paragraph>
+
+      <StepNumber
+        stepNumber="1"
+        title="Run the CLI 'init' command from a Next.js project"
+      />
       <StepContentContainer>
-        <Paragraph spacing>
-          Run this CLI command in a terminal window from your Next.js project.
-        </Paragraph>
         <ClientTabs defaultValue="npm">
           <ClientTabsList>
             <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
@@ -73,6 +88,10 @@ export function HowToSetupYourProject() {
         <Paragraph spacing variant="small">
           It will ask you for a "unique ID for your endpoint". You can use the
           default by hitting enter.
+        </Paragraph>{" "}
+        <Paragraph spacing>
+          You’ll notice a new folder in your project called 'jobs' . We’ve added
+          a very simple example Job in there to help you get started.
         </Paragraph>
       </StepContentContainer>
       <StepNumber stepNumber="2" title="Run your Next.js app" />
@@ -81,23 +100,13 @@ export function HowToSetupYourProject() {
           Ensure your Next.js app is running locally on port 3000.
         </Paragraph>
       </StepContentContainer>
-      <StepNumber stepNumber="3" title="Run the CLI dev command" />
+      <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
       <StepContentContainer>
-        <Paragraph spacing>
-          The CLI <InlineCode>dev</InlineCode> command allows the Trigger.dev
-          service to send messages to your Next.js site. This is required for
-          registering Jobs, triggering them and running Tasks. To achieve this
-          it creates a tunnel (using{" "}
-          <TextLink href="https://ngrok.com/">ngrok</TextLink>) so Trigger.dev
-          can send messages to your machine.
-        </Paragraph>
-        <Paragraph spacing>
-          You should leave the <InlineCode>dev</InlineCode> command running when
-          you're developing.
-        </Paragraph>
         <Paragraph spacing>
           In a{" "}
-          <strong className="text-bright">new terminal window or tab</strong>{" "}
+          <strong className="text-bright">
+            separate terminal window or tab
+          </strong>{" "}
           run:
         </Paragraph>
         <ClientTabs defaultValue="npm">
@@ -128,6 +137,10 @@ export function HowToSetupYourProject() {
             />
           </ClientTabsContent>
         </ClientTabs>
+        <Paragraph spacing variant="small">
+          You should leave the <InlineCode>dev</InlineCode> command running when
+          you're developing.
+        </Paragraph>
       </StepContentContainer>
       <StepNumber stepNumber="4" title="Check for Jobs" />
       <StepContentContainer>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx

@@ -141,14 +141,20 @@ export default function Page() {
                   <HelpTrigger title="How do I setup my Project?" />
                 </div>
                 {jobs.length === 0 ? (
-                  <div
-                    className={
-                      "flex w-full justify-center gap-x-4 rounded-md border border-dashed border-indigo-800 px-5 py-8"
-                    }
-                  >
-                    <Paragraph variant="small">
-                      Your Jobs will appear here.
-                    </Paragraph>
+                  <div>
+                    <div
+                      className={
+                        "flex w-full flex-col justify-center gap-x-4 rounded-md border border-dashed border-indigo-800 px-5 py-8"
+                      }
+                    >
+                      <Paragraph variant="small">
+                        Your Jobs will appear here.
+                      </Paragraph>
+                      <div> </div>
+                      <Paragraph variant="base">
+                        Browse example jobs:
+                      </Paragraph>{" "}
+                    </div>
                   </div>
                 ) : (
                   <>
@@ -177,7 +183,7 @@ export default function Page() {
                   </>
                 )}
               </div>
-              <HelpContent title="How to setup your Project">
+              <HelpContent title="How to add Trigger.dev to your Next.js app (5 mins)">
                 <HowToSetupYourProject />
               </HelpContent>
             </div>