Free trial CTA (#3060)

* free trial

* pricing page link

* make link inline

* fix text components

---------

Co-authored-by: Trevor Shim <trevorshim@Trevors-MacBook-Air.local>
Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air.local>

dashboard/src/components/ProvisionerFlow.tsx

@@ -17,6 +17,7 @@ import Checkbox from "./porter/Checkbox";
 import Button from "./porter/Button";
 import ExpandableSection from "./porter/ExpandableSection";
 import Input from "./porter/Input";
+import Link from "./porter/Link";
 
 const providers = ["aws", "gcp", "azure"];
 
@@ -127,10 +128,12 @@ const ProvisionerFlow: React.FC<Props> = ({
             />
             <Spacer y={1} />
             <Text color="helper">
-              Separate from the AWS cost, Porter charges based on the amount of resources that are being used. Porter pricing is as follows, prorated to the minute:
+              Separate from the AWS cost, Porter charges based on the amount of resources that are being used.
             </Text>
-            <Spacer y={1} />
-            <Cost>$0.019/hr/vCPU + $0.009/hr/GB RAM</Cost>
+            <Spacer inline width="5px" />
+            <Link hasunderline to="https://porter.run/pricing">
+              Learn more about our pricing
+            </Link>.
             <Spacer y={1} />
             <Text color="helper">
               All AWS resources will be automatically deleted when you delete your Porter project. Please enter the AWS base cost ("315.94") below to proceed:

dashboard/src/components/porter/Link.tsx

@@ -45,13 +45,13 @@ const Div = styled.span<{ hasunderline?: boolean }>`
   color: #ffffff;
   cursor: pointer;
   font-size: 13px;
-  display: inline;
+  display: inline-flex;
   border-bottom: ${props => props.hasunderline ? "1px solid #fff" : ""};
 `;
 
 const StyledLink = styled(DynamicLink)<{ hasunderline?: boolean }>`
   color: #ffffff;
-  display: inline;
+  display: inline-flex;
   font-size: 13px;
   cursor: pointer;
   text-decoration: ;

dashboard/src/components/porter/Text.tsx

@@ -45,6 +45,6 @@ const StyledText = styled.div<{
   font-weight: ${props => props.weight || 400};
   color: ${props => props.color || props.theme.text.primary};
   font-size: ${props => props.size || 13}px;
-  display: inline-flex;
+  display: inline;
   align-items: center;
 `;

dashboard/src/main/auth/Register.tsx

@@ -184,15 +184,15 @@ const Register: React.FC<Props> = ({
           </Jumbotron>
           <Spacer y={2} />
           <CheckRow>
-            <i className="material-icons">done</i>  Generous startup program for seed-stage companies
+            <i className="material-icons">done</i> 14 day free trial (no credit card required)
           </CheckRow>
           <Spacer y={0.5} />
           <CheckRow>
-            <i className="material-icons">done</i> Bring your own cloud (and cloud credits)
+            <i className="material-icons">done</i>  Generous startup program for seed-stage companies
           </CheckRow>
           <Spacer y={0.5} />
           <CheckRow>
-            <i className="material-icons">done</i> Fully automated setup and deployment
+            <i className="material-icons">done</i> Use your AWS credits
           </CheckRow>
         </Wrapper>
       )}

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -185,15 +185,17 @@ const AppDashboard: React.FC<Props> = ({
           {(filteredAddOns ?? []).map((app: any, i: number) => {
             return (
               <Block to={getExpandedChartLinkURL(app)} key={i}>
-                <Text size={14}>
+                <Container row>
                   <Icon 
                     src={
                       hardcodedIcons[app.chart.metadata.name] ||
                       app.chart.metadata.icon
                     }
                   />
-                  {app.name}
-                </Text>
+                  <Text size={14}>
+                    {app.name}
+                  </Text>
+                </Container>
                 <StatusIcon src={healthy} />
                 <Text size={13} color="#ffffff44">
                   <SmallIcon opacity="0.4" src={time} />
@@ -208,17 +210,19 @@ const AppDashboard: React.FC<Props> = ({
           {(filteredAddOns ?? []).map((app: any, i: number) => {
             return (
               <Row to={getExpandedChartLinkURL(app)} key={i}>
-                <Text size={14}>
+                <Container row>
                   <MidIcon
                     src={
                       hardcodedIcons[app.chart.metadata.name] ||
                       app.chart.metadata.icon
                     }
                   />
-                  {app.name}
+                  <Text size={14}>
+                    {app.name}
+                  </Text>
                   <Spacer inline x={1} />
                   <MidIcon src={healthy} height="16px" />
-                </Text>
+                </Container>
                 <Spacer height="15px" />
                 <Text size={13} color="#ffffff44">
                   <SmallIcon opacity="0.4" src={time} />

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -242,8 +242,8 @@ const AppDashboard: React.FC<Props> = ({ }) => {
                 <Link to={`/apps/${app.name}`} key={i}>
                   <Block>
                     <Container row>
+                      {renderIcon(app["build_packs"])}
                       <Text size={14}>
-                        {renderIcon(app["build_packs"])}
                         {app.name}
                       </Text>
                       <Spacer inline x={2} />
@@ -269,12 +269,14 @@ const AppDashboard: React.FC<Props> = ({ }) => {
               return (
                 <Link to={`/apps/${app.name}`} key={i}>
                   <Row>
-                    <Text size={14}>
+                    <Container row>
                       {renderIcon(app["build_packs"], "larger")}
-                      {app.name}
+                      <Text size={14}>
+                        {app.name}
+                      </Text>
                       <Spacer inline x={1} />
                       <MidIcon src={healthy} />
-                    </Text>
+                    </Container>
                     <Spacer height="15px" />
                     <Text size={13} color="#ffffff44">
                       {renderSource(app)}

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -715,15 +715,17 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             {appData.app.repo_name && (
               <>
                 <Spacer inline x={1} />
-                <Text size={13} color="helper">
+                <Container row>
                   <SmallIcon src={github} />
-                  <Link
-                    target="_blank"
-                    to={`https://github.com/${appData.app.repo_name}`}
-                  >
-                    {appData.app.repo_name}
-                  </Link>
-                </Text>
+                  <Text size={13} color="helper">
+                    <Link
+                      target="_blank"
+                      to={`https://github.com/${appData.app.repo_name}`}
+                    >
+                      {appData.app.repo_name}
+                    </Link>
+                  </Text>
+                </Container>
               </>
             )}
             {appData.app.git_branch && (

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -17,7 +17,7 @@ import Input from "components/porter/Input";
 import VerticalSteps from "components/porter/VerticalSteps";
 import Button from "components/porter/Button";
 import SourceSelector, { SourceType } from "./SourceSelector";
-import DynamicLink from "components/DynamicLink";
+import Container from "components/porter/Container";
 
 import SourceSettings from "./SourceSettings";
 import Services from "./Services";
@@ -31,10 +31,9 @@ import {
   RepoType,
 } from "shared/types";
 import Error from "components/porter/Error";
-import { z } from "zod";
+import { string, z } from "zod";
 import { PorterJson, PorterYamlSchema, createFinalPorterYaml } from "./schema";
 import { ReleaseService, Service } from "./serviceTypes";
-import { Helper } from "components/form-components/Helper";
 import GithubConnectModal from "./GithubConnectModal";
 
 type Props = RouteComponentProps & {};
@@ -514,21 +513,23 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                 />
               </>,
               <>
-                <Text size={16}>
-                  Application services{" "}
+                <Container row>
+                  <Text size={16}>
+                    Application services{" "}
+                  </Text>
                   {detected && formState.serviceList.length > 0 && (
-                    <AppearingDiv>
+                    <AppearingDiv color={detected.detected ? "#8590ff" : "#fcba03"}>
+                      {detected.detected ? (
+                        <I className="material-icons">check</I>
+                      ) : (
+                        <I className="material-icons">error</I>
+                      )}
                       <Text color={detected.detected ? "#8590ff" : "#fcba03"}>
-                        {detected.detected ? (
-                          <I className="material-icons">check</I>
-                        ) : (
-                          <I className="material-icons">error</I>
-                        )}
                         {detected.message}
                       </Text>
                     </AppearingDiv>
                   )}
-                </Text>
+                </Container>
                 <Spacer y={0.5} />
                 <Services
                   setServices={(services: Service[]) => {
@@ -674,11 +675,12 @@ const Icon = styled.img`
   }
 `;
 
-const AppearingDiv = styled.div`
+const AppearingDiv = styled.div<{ color?: string }>`
   animation: floatIn 0.5s;
   animation-fill-mode: forwards;
   display: flex;
   align-items: center;
+  color: ${(props) => props.color || "#ffffff44"};
   margin-left: 10px;
   @keyframes floatIn {
     from {