join page, og image

a-type · Apr 10, 2024 · 5d13591 · 5d13591
1 parent d0aedcf
commit 5d13591
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 41 deletions.
diff --git a/.gitignore b/.gitignore
@@ -134,3 +134,5 @@ dist
 .env.*
 
 backups/
+
+.DS_Store
diff --git a/packages/apps/src/index.ts b/packages/apps/src/index.ts
@@ -8,6 +8,13 @@ export type AppManifest<Id extends string> = {
   size?: number;
   devOriginOverride: string;
   demoVideoSrc: string;
+  paidDescription: string;
+  paidFeatures: PaidFeature[];
+};
+
+export type PaidFeature = {
+  imageUrl: string;
+  description: string;
 };
 
 export const apps = [
@@ -21,6 +28,15 @@ export const apps = [
     size: 4,
     devOriginOverride: 'http://localhost:6220',
     demoVideoSrc: '/videos/gnocchi.mp4',
+    paidFeatures: [
+      {
+        imageUrl: '/images/gnocchi/scanner.png',
+        description:
+          'Scan web recipes to create a personal copy. Add notes, make changes, and collaborate on cooking with other plan members.',
+      },
+    ],
+    paidDescription:
+      'Your personal cooking app becomes a family groceries list and recipe box.',
   } satisfies AppManifest<'gnocchi'>,
   {
     id: 'trip-tick',
@@ -31,6 +47,15 @@ export const apps = [
     size: 2,
     devOriginOverride: 'http://localhost:6221',
     demoVideoSrc: '/videos/trip-tick.mp4',
+    paidFeatures: [
+      {
+        imageUrl: '/images/trip-tick/weather.png',
+        description:
+          'Get weather forecasts for your destination and the duration of your trip.',
+      },
+    ],
+    paidDescription:
+      'Now everyone can be on the same page when packing. Plus, get a weather forecast and more powerful trip planning tools.',
   } satisfies AppManifest<'trip-tick'>,
 ] as const;
 

diff --git a/packages/client/src/components/UserMenu.tsx b/packages/client/src/components/UserMenu.tsx
@@ -46,15 +46,19 @@ export function UserMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button size="icon" color="ghost" className={className}>
-          {children ?? (
+        {children ?? isLoggedIn ? (
+          <Button size="icon" color="ghost" className={className}>
             <ErrorBoundary fallback={<Avatar />}>
               <Suspense fallback={<Avatar />}>
                 <UserAvatar skipFetch={!isLoggedIn} />
               </Suspense>
             </ErrorBoundary>
-          )}
-        </Button>
+          </Button>
+        ) : (
+          <Button size="small" color="accent" className={className}>
+            <Icon name="refresh" /> Sync
+          </Button>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         {isOffline && (

diff --git a/web/index.html b/web/index.html
@@ -6,29 +6,29 @@
       content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
     />
     <title>Biscuits</title>
-    <meta name="description" content="Handmade apps" />
+    <meta name="description" content="Scratch-made apps" />
     <link rel="icon" href="/favicon.ico" />
     <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> -->
     <!-- <link rel="mask-icon" href="/mask-icon.svg" color="#ffffff" /> -->
     <meta name="theme-color" content="#ffffff" />
     <meta charset="utf-8" />
-    <!-- <meta property="og:image" content="/og-image.png" /> -->
-    <!-- <meta property="og:image:type" content="image/png" /> -->
-    <!-- <meta property="og:image:width" content="1200" /> -->
-    <!-- <meta property="og:image:height" content="630" /> -->
-    <!-- <meta
-			property="og:image:alt"
-			content=""
-		/> -->
+    <meta property="og:image" content="/og-image.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1920" />
+    <meta property="og:image:height" content="1080" />
+    <meta
+      property="og:image:alt"
+      content="An image of a phone with a groceries app. A title says 'Biscuits' and a subtitle says 'Scratch-made apps.'"
+    />
     <meta property="og:title" content="Biscuits" />
-    <meta property="og:description" content="Handmade apps" />
+    <meta property="og:description" content="Scratch-made apps" />
     <!-- <meta property="og:url" content="FILL THIS IN" /> -->
     <meta property="og:site_name" content="Biscuits" />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:image:alt" content="" />
     <meta name="twitter:title" content="Biscuits" />
-    <meta name="twitter:description" content="Handmade apps" />
+    <meta name="twitter:description" content="Scratch-made apps" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
 
     <!-- Load font TitanOne from /fonts -->

diff --git a/web/public/images/gnocchi/scanner.png b/web/public/images/gnocchi/scanner.png
diff --git a/web/public/images/trip-tick/weather.png b/web/public/images/trip-tick/weather.png
diff --git a/web/public/og-image.png b/web/public/og-image.png
diff --git a/web/src/pages/HomePage.tsx b/web/src/pages/HomePage.tsx
@@ -1,4 +1,3 @@
-import { AppsGrid } from '@/components/AppsGrid.jsx';
 import { UserMenu } from '@/components/auth/UserMenu.js';
 import { Footer } from '@/components/help/Footer.jsx';
 import { AppDemo } from '@/components/promo/AppDemo.jsx';
@@ -30,7 +29,7 @@ export default function HomePage() {
         <PageFixedArea className="bg-transparent flex flex-row justify-between items-center py-2">
           <h1
             className={classNames(
-              'text-4xl m-0 font-normal text-primary-dark text-shadow',
+              'text-2xl sm:text-4xl m-0 font-normal text-primary-dark text-shadow',
               'bg-primary-wash p-2 rounded-lg leading-none',
             )}
           >
@@ -40,15 +39,19 @@ export default function HomePage() {
             <UserMenu />
           </Suspense>
         </PageFixedArea>
-        <div className="flex flex-col gap-2 min-h-[30vh] mb-4 mt-5 text-primary-dark font-semibold">
+        <div className="flex flex-col gap-2 min-h-[30vh] mb-4 mt-2 sm:mt-5 text-primary-dark font-semibold">
           <h2
             className={classNames(
-              '!text-8xl text-black mt-0 block mb-10 font-bold leading-none',
+              'text-4xl sm:text-8xl text-black mt-0 block sm:mb-5 sm:mb-10 font-bold leading-none',
             )}
           >
             Scratch-made apps
           </h2>
-          <P className={classNames('m-0 mb-6 text-inherit text-xl font-fancy')}>
+          <P
+            className={classNames(
+              'm-0 mb-6 text-inherit text-lg sm:text-xl font-fancy',
+            )}
+          >
             in Raleigh, NC
           </P>
           <P className="text-black text-lg leading-loose font-normal mb-4">

diff --git a/web/src/pages/JoinPage.tsx b/web/src/pages/JoinPage.tsx
@@ -6,9 +6,10 @@ import {
   PageContent,
   PageFixedArea,
   PageRoot,
-  PageSection,
   PageSectionGrid,
 } from '@a-type/ui/components/layouts';
+import { Divider } from '@a-type/ui/components/divider';
+import { PaidFeature, apps, getAppUrl } from '@biscuits/apps';
 import { graphql, useQuery } from '@biscuits/client';
 import { Link } from '@verdant-web/react-router';
 import classNames from 'classnames';
@@ -26,9 +27,9 @@ const startingPriceQuery = graphql(`
 
 export function JoinPage({}: JoinPageProps) {
   return (
-    <PageRoot className="bg-gray-1">
+    <PageRoot className="bg-primary-wash">
       <PageContent>
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 w-full">
           <h1 className={classNames('text-gray-9')}>
             Join Biscuits to unlock features and collaboration in every app
           </h1>
@@ -37,7 +38,7 @@ export function JoinPage({}: JoinPageProps) {
             across devices, use fancy new features, and even share with family
             and friends. Plans start at <StartingPrice />.
           </p>
-          <PageFixedArea className="flex flex-row gap-3 py-4 justify-between">
+          <PageFixedArea className="flex flex-row gap-3 py-4 justify-between bg-transparent">
             <Button asChild color="default">
               <Link to="/">
                 <Icon name="arrowLeft" />
@@ -48,23 +49,25 @@ export function JoinPage({}: JoinPageProps) {
               <Link to="/login?returnTo=/plan">Get started</Link>
             </Button>
           </PageFixedArea>
-          <PageSection>
-            <h2>Gnocchi</h2>
-            <p>
-              Your personal cooking app becomes a family groceries list and
-              recipe box.
-            </p>
-            <PageSectionGrid>
-              <div>TODO: screenshots</div>
-            </PageSectionGrid>
-          </PageSection>
-          <PageSection>
-            <h2>Trip Tick</h2>
-            <p>
-              Now everyone can be on the same page when packing. Plus, get a
-              weather forecast and more powerful trip planning tools.
-            </p>
-          </PageSection>
+          {apps.map((app) => (
+            <div key={app.id} className="w-full max-w-none">
+              <div className="flex flex-row items-center gap-4">
+                <img
+                  src={`${getAppUrl(app)}/${app.iconPath}`}
+                  alt={app.name}
+                  width={48}
+                />
+                <h2>{app.name}</h2>
+              </div>
+              <p>{app.paidDescription}</p>
+              <PageSectionGrid>
+                {app.paidFeatures.map((feature, index) => (
+                  <AppFeature key={index} feature={feature} />
+                ))}
+              </PageSectionGrid>
+              <Divider className="my-8" />
+            </div>
+          ))}
         </div>
         <Footer />
       </PageContent>
@@ -83,4 +86,17 @@ const StartingPrice = () => {
   );
 };
 
+function AppFeature({ feature }: { feature: PaidFeature }) {
+  return (
+    <div className="flex flex-col sm:flex-row gap-4 items-start">
+      <p className="text-md font-bold my-0 flex-1-0-0">{feature.description}</p>
+      <img
+        className="border border-solid border-1 border-black rounded-lg max-w-full flex-1-0-0 min-w-0"
+        src={feature.imageUrl}
+        alt="a visualization of the described feature"
+      />
+    </div>
+  );
+}
+
 export default JoinPage;