Merge pull request #104 from airtai/dev

Add PRs #101 and #102
airtai · Apr 28, 2024 · 4d0f47b · 4d0f47b
2 parents c3032f9 + 2ae9fb9
commit 4d0f47b
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 7 deletions.
diff --git a/app/main.wasp b/app/main.wasp
@@ -20,6 +20,8 @@ app OpenSaaS {
         // google analytics only needs one script and will automatically detect if you are in dev mode
         //"<!-- Google tag (gtag.js) --><script>...</script>"
         "<script type='text/javascript'> (function(l) { if (l.search[1] === '/' ) { var decoded = l.search.slice(1).split('&').map(function(s) { return s.replace(/~and~/g, '&') }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash ); } }(window.location)) </script>",
+        "<script async src='https://www.googletagmanager.com/gtag/js?id=G-E2XNSDG1H1'></script>",
+        "<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-E2XNSDG1H1');</script>"
   ],
   // 🔐 Auth out of the box! https://wasp-lang.dev/docs/auth/overview
   auth: {
@@ -159,6 +161,10 @@ route PrivacyRoute { path: "/privacy", to: PrivacyPage }
 page PrivacyPage {
   component: import PrivacyPage from "@src/client/app/PrivacyPage",
 }
+route ExamplesRoute { path: "/examples", to: ExamplesPage }
+page ExamplesPage {
+  component: import ExamplesPage from "@src/client/app/ExamplesPage",
+}
 
 route AdminRoute { path: "/admin", to: DashboardPage }
 page DashboardPage {

diff --git a/app/src/client/app/ExamplesPage.tsx b/app/src/client/app/ExamplesPage.tsx
@@ -0,0 +1,36 @@
+export default function ExamplesPage() {
+  return (
+    <div>
+      <div className='mx-auto max-w-7xl pl-10 pr-10 text-airt-font-base pt-10 pb-24 sm:pb-32 lg:gap-x-8 lg:py-5 lg:px-8'>
+        <div className='container mx-auto py-8'>
+          <h1 className='text-xl sm:text-3xl font-semibold mb-4 underline hover:opacity-80'>
+            <a href='https://captn.ai' target='_blank' className='flex items-center'>
+              Capt’n.ai
+              <svg
+                fill='#fff'
+                width='16px'
+                height='16px'
+                viewBox='0 0 24 24'
+                xmlns='http://www.w3.org/2000/svg'
+                className='ml-1 sm:mt-2'
+              >
+                <path
+                  fill-rule='evenodd'
+                  d='M5,2 L7,2 C7.55228475,2 8,2.44771525 8,3 C8,3.51283584 7.61395981,3.93550716 7.11662113,3.99327227 L7,4 L5,4 C4.48716416,4 4.06449284,4.38604019 4.00672773,4.88337887 L4,5 L4,19 C4,19.5128358 4.38604019,19.9355072 4.88337887,19.9932723 L5,20 L19,20 C19.5128358,20 19.9355072,19.6139598 19.9932723,19.1166211 L20,19 L20,17 C20,16.4477153 20.4477153,16 21,16 C21.5128358,16 21.9355072,16.3860402 21.9932723,16.8833789 L22,17 L22,19 C22,20.5976809 20.75108,21.9036609 19.1762728,21.9949073 L19,22 L5,22 C3.40231912,22 2.09633912,20.75108 2.00509269,19.1762728 L2,19 L2,5 C2,3.40231912 3.24891996,2.09633912 4.82372721,2.00509269 L5,2 L7,2 L5,2 Z M21,2 L21.081,2.003 L21.2007258,2.02024007 L21.2007258,2.02024007 L21.3121425,2.04973809 L21.3121425,2.04973809 L21.4232215,2.09367336 L21.5207088,2.14599545 L21.5207088,2.14599545 L21.6167501,2.21278596 L21.7071068,2.29289322 L21.7071068,2.29289322 L21.8036654,2.40469339 L21.8036654,2.40469339 L21.8753288,2.5159379 L21.9063462,2.57690085 L21.9063462,2.57690085 L21.9401141,2.65834962 L21.9401141,2.65834962 L21.9641549,2.73400703 L21.9641549,2.73400703 L21.9930928,2.8819045 L21.9930928,2.8819045 L22,3 L22,3 L22,9 C22,9.55228475 21.5522847,10 21,10 C20.4477153,10 20,9.55228475 20,9 L20,5.414 L13.7071068,11.7071068 C13.3466228,12.0675907 12.7793918,12.0953203 12.3871006,11.7902954 L12.2928932,11.7071068 C11.9324093,11.3466228 11.9046797,10.7793918 12.2097046,10.3871006 L12.2928932,10.2928932 L18.584,4 L15,4 C14.4477153,4 14,3.55228475 14,3 C14,2.44771525 14.4477153,2 15,2 L21,2 Z'
+                />
+              </svg>
+            </a>
+          </h1>
+          <div className='video-responsive'>
+            <iframe
+              className='aspect-video w-full rounded-lg shadow-lg shadow-yellow-800/70'
+              src='https://www.youtube.com/embed/O6ehXFjPFLA'
+              allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+              allowFullScreen
+            ></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/client/components/Button.tsx b/app/src/client/components/Button.tsx
@@ -3,12 +3,14 @@ import { MouseEventHandler, ReactNode } from 'react';
 interface ButtonProps {
   onClick: MouseEventHandler<HTMLButtonElement>;
   label?: string;
+  theme?: 'light' | 'dark';
 }
 
-export default function Button({ onClick, label }: ButtonProps) {
+export default function Button({ onClick, label, theme = 'dark' }: ButtonProps) {
+  const buttonBG = theme === 'dark' ? 'bg-airt-primary' : 'bg-airt-secondary';
   return (
     <button
-      className='rounded-md px-3.5 py-2.5 text-sm  bg-airt-primary text-airt-font-base   hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+      className={`rounded-md px-3.5 py-2.5 text-sm  ${buttonBG} text-airt-font-base   hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600`}
       onClick={onClick}
     >
       {label}

diff --git a/app/src/client/components/FreeTrialButton.tsx b/app/src/client/components/FreeTrialButton.tsx
@@ -6,7 +6,11 @@ import { useHistory } from 'react-router-dom';
 import { TierIds } from '../../shared/constants';
 import Button from './Button';
 
-export default function FreeTrialButton() {
+interface FreeTrialButtonProps {
+  theme?: 'light' | 'dark';
+}
+
+export default function FreeTrialButton({ theme = 'dark' }: FreeTrialButtonProps) {
   const history = useHistory();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const { data: user } = useAuth();
@@ -39,6 +43,7 @@ export default function FreeTrialButton() {
         handleClick(TierIds.PRO);
       }}
       label={!isLoading ? 'Free Trial' : 'Loading...'}
+      theme={theme}
     />
   );
 }
diff --git a/app/src/client/components/UserActionButton.tsx b/app/src/client/components/UserActionButton.tsx
@@ -1,14 +1,14 @@
 import { Link } from 'react-router-dom';
 import FreeTrialButton from './FreeTrialButton';
 
+export type Theme = 'dark' | 'light';
+
 interface UserActionButtonProps {
   user: any;
   renderGoToChat: boolean;
-  theme?: string;
+  theme?: Theme;
 }
 
-export type Theme = 'dark' | 'light';
-
 const UserActionButton: React.FC<UserActionButtonProps> = ({ user, renderGoToChat, theme = 'dark' }) => {
   const themeClass = theme === 'dark' ? 'bg-airt-primary text-airt-font-base' : 'bg-airt-secondary text-airt-font-base';
   if (!user) {
@@ -23,7 +23,7 @@ const UserActionButton: React.FC<UserActionButtonProps> = ({ user, renderGoToCha
   }
 
   if (!user.hasPaid) {
-    return <FreeTrialButton />;
+    return <FreeTrialButton theme={theme} />;
   }
 
   return renderGoToChat ? (

diff --git a/app/src/client/landing-page/contentSections.ts b/app/src/client/landing-page/contentSections.ts
@@ -6,6 +6,7 @@ export const navigation = [
   { name: 'Home', href: '/' },
   { name: 'Chat', href: '/chat' },
   { name: 'Pricing', href: '/pricing' },
+  { name: 'Examples', href: '/examples' },
 ];
 export const features = [
   {