finish up trip tick page

biscuits.code-workspace

@@ -1,52 +1,52 @@
 {
   "folders": [
     {
-      "path": "server",
       "name": "💽 Server",
+      "path": "server",
     },
     {
-      "path": "web",
       "name": "🌐 Web",
+      "path": "web",
     },
     {
-      "path": "packages",
       "name": "📦 Packages",
+      "path": "packages",
     },
     {
-      "path": "apps/gnocchi",
       "name": "🍝 Gnocchi",
+      "path": "apps/gnocchi",
     },
     {
-      "path": "apps/trip-tick",
       "name": "🏖️ Trip Tick",
+      "path": "apps/trip-tick",
     },
     {
-      "path": "apps/shopping",
       "name": "🛒 Shopping",
+      "path": "apps/shopping",
     },
     {
-      "path": "apps/marginalia",
       "name": "📚 Marginalia",
+      "path": "apps/marginalia",
     },
     {
-      "path": "apps/star-chart",
       "name": "🌟 Star Chart",
+      "path": "apps/star-chart",
     },
     {
-      "path": "scripts",
       "name": "📃 Scripts",
+      "path": "scripts",
     },
     {
-      "path": "cdk",
       "name": "🛠️ CDK",
+      "path": "cdk",
     },
     {
-      "path": "blog",
       "name": "📝 Blog",
+      "path": "blog",
     },
     {
-      "path": ".github/workflows",
       "name": "🔧 Workflows",
+      "path": ".github/workflows",
     },
   ],
 }

packages/client/src/components/UserMenu.tsx

@@ -120,7 +120,7 @@ export function UserMenu({
           </DropdownMenuItem>
         ) : (
           <DropdownMenuItem asChild>
-            <a href={`${CONFIG.HOME_ORIGIN}/apps`} target="_blank">
+            <a href={`${CONFIG.HOME_ORIGIN}`} target="_blank">
               More apps
               <DropdownMenuItemRightSlot>
                 <Icon name="new_window" />
@@ -148,7 +148,7 @@ export function UserMenu({
         </DropdownMenuItem>
         {!!isLoggedIn && (
           <DropdownMenuItem asChild>
-            <LogoutButton color="unstyled">
+            <LogoutButton className="border-none transition-none shadow-none">
               Log out
               <DropdownMenuItemRightSlot>
                 <Icon name="arrowRight" />

web/src/components/promo/layout.tsx

@@ -6,6 +6,7 @@ import { H2 } from '@a-type/ui/components/typography';
 import { Link } from '@verdant-web/react-router';
 import { Button } from '@a-type/ui/components/button';
 import { AppId, appsById } from '@biscuits/apps';
+import { Icon } from '@a-type/ui/components/icon';
 
 export const DemoGrid = withClassName(
   'div',
@@ -20,9 +21,13 @@ export const Highlight = withClassName(
   'flex-1 [grid-row-end:span_2] min-w-0 w-full object-contain rounded-lg border-default',
 );
 export const TitleWrap = withClassName('div', 'md:[grid-column-end:span_2]');
-export const Item = withClassName('p', 'flex items-start gap-2');
-export const Emoji = withClassName('span', 'block');
-export const ItemText = withClassName('span', 'block relative');
+const Emoji = withClassName('span', 'block');
+const ItemText = withClassName('span', 'block relative');
+
+export const Description = withClassName(
+  'p',
+  'font-light text-xl my-6 text-white',
+);
 
 export const Section = forwardRef<
   HTMLDivElement,
@@ -80,16 +85,26 @@ export const FeatureSection = ({
   items,
 }: {
   title: string;
-  items: { emoji: string; text: string }[];
+  items: { emoji: string; text: string; premium?: boolean }[];
 }) => {
   return (
     <Section>
       <H2 className="gutter-bottom">{title}</H2>
       {items.map((item, index) => (
-        <Item key={index}>
-          <Emoji>{item.emoji}</Emoji>
-          <ItemText>{item.text}</ItemText>
-        </Item>
+        <div className="col gap-0" key={index}>
+          <div className="row items-start my-2">
+            <Emoji>{item.emoji}</Emoji>
+            <ItemText>{item.text}</ItemText>
+          </div>
+          {item.premium && (
+            <Link
+              to="/join"
+              className="ml-auto relative -top-2 text-xs bg-primary-dark text-white px-3 py-1 rounded-full font-bold"
+            >
+              Premium feature
+            </Link>
+          )}
+        </div>
       ))}
     </Section>
   );
@@ -111,7 +126,13 @@ export const Footer = ({ className }: { className?: string }) => (
   </Content>
 );
 
-export const CallToAction = ({ className }: { className?: string }) => (
+export const CallToAction = ({
+  className,
+  appId,
+}: {
+  className?: string;
+  appId: AppId;
+}) => (
   <div
     className={clsx(
       'flex flex-col fixed bottom-0 bg-primary-light border-0 border-t border-solid border-t-primary-dark m-0 w-full p-6 items-center gap-3 z-2 transition-colors',
@@ -120,16 +141,22 @@ export const CallToAction = ({ className }: { className?: string }) => (
   >
     <Button asChild>
       <Link
-        to="/"
+        to={appsById[appId].url}
         data-test="get-started"
-        className="justify-center self-center"
+        className="justify-center self-center text-xl"
         color="default"
       >
         Get Started
       </Link>
     </Button>
+    <Button asChild color="ghost">
+      <Link to="/">
+        More Biscuits apps
+        <Icon name="arrowRight" />
+      </Link>
+    </Button>
 
-    <span className="text-sm">
+    <span className="text-xs">
       Free, no signup required. By continuing you agree to{' '}
       <Link to="/tos" newTab>
         the terms and conditions of usage.
@@ -145,7 +172,7 @@ export const Root = withClassName(
 
 export const Background = withClassName(
   'div',
-  'fixed top-0 left-0 w-full h-80% pointer-events-none',
+  'layer-components:(fixed top-0 left-0 w-full h-80% pointer-events-none)',
 );
 
 const AppNameText = withClassName(

web/src/pages/promos/GnocchiPage.tsx

@@ -163,6 +163,7 @@ export function GnocchiPage() {
       </Content>
       <Footer className="theme-leek" />
       <CallToAction
+        appId="gnocchi"
         className={staticSectionAccent ? 'theme-leek' : undefined}
       />
     </Root>

web/src/pages/promos/TripTickPage.tsx

@@ -1,8 +1,11 @@
 import {
   AppName,
+  Background,
   CallToAction,
   Content,
+  Demo,
   DemoGrid,
+  Description,
   FeatureSection,
   Footer,
   HeroTitle,
@@ -15,10 +18,14 @@ export interface TripTickPageProps {}
 export function TripTickPage({}: TripTickPageProps) {
   return (
     <Root className="theme-eggplant">
+      <Background className="h-70% absolute">
+        <img src="/images/trip-tick/hero1.svg" className="w-full h-full" />
+      </Background>
       <Content className="bg-wash">
         <TitleWrap>
           <AppName appId="trip-tick" />
           <HeroTitle>Never forget your socks again.</HeroTitle>
+          <Description>Trip Tick is a smarter packing list.</Description>
         </TitleWrap>
         <FeatureSection
           title="The power of a spreadsheet; the simplicity of your notes app"
@@ -33,9 +40,30 @@ export function TripTickPage({}: TripTickPageProps) {
             },
           ]}
         />
+        <Demo src="/images/trip-tick/list.png" type="image" />
+        <Demo src="/images/trip-tick/trip.png" type="image" direction="right" />
+        <FeatureSection
+          title="Check off as you go"
+          items={[
+            {
+              emoji: '😌',
+              text: "Ever go through a packed bag again to make sure you packed your charger? Enjoy the peace of mind knowing, yup, it's checked off.",
+            },
+            {
+              emoji: '🌧️',
+              text: 'See the weather forecast for your destination during your trip. You can even configure items based on weather!',
+              premium: true,
+            },
+            {
+              emoji: '👨‍👩‍👧',
+              text: 'Subscribers share lists and trip progress with other members of their plan.',
+              premium: true,
+            },
+          ]}
+        />
       </Content>
       <Footer />
-      <CallToAction />
+      <CallToAction appId="trip-tick" />
     </Root>
   );
 }