rework homepage demos

packages/apps/src/index.ts

@@ -7,6 +7,7 @@ export type AppManifest<Id extends string> = {
   iconPath: string;
   size?: number;
   devOriginOverride: string;
+  demoVideoSrc: string;
 };
 
 export const apps = [
@@ -16,9 +17,10 @@ export const apps = [
     name: 'Gnocchi',
     description: 'Organize your weekly cooking and groceries',
     mainImageUrl: 'https://gnocchi.club/og-image.png',
-    iconPath: 'icon.png',
+    iconPath: 'android-chrome-512x512.png',
     size: 4,
     devOriginOverride: 'http://localhost:6220',
+    demoVideoSrc: '/videos/gnocchi.mp4',
   } satisfies AppManifest<'gnocchi'>,
   {
     id: 'trip-tick',
@@ -28,6 +30,7 @@ export const apps = [
     iconPath: 'icon.png',
     size: 2,
     devOriginOverride: 'http://localhost:6221',
+    demoVideoSrc: '',
   } satisfies AppManifest<'trip-tick'>,
 ] as const;
 

web/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.DS_Store

web/src/components/paws/Paws.tsx

@@ -4,18 +4,17 @@ export interface PawsProps {}
 
 export function Paws({}: PawsProps) {
   return (
-    <div
-      className="absolute left-0 top-0 w-full aspect-ratio-16/9 drift"
-      aria-hidden
-    >
-      <img
-        src="/animations/paws1.001.png"
-        className="absolute right-0 top-0 w-full frame-1"
-      />
-      <img
-        src="/animations/paws1.002.png"
-        className="absolute right-0 top-0 w-full frame-2"
-      />
+    <div className="absolute left-0 top-0 w-full aspect-ratio-16/9 overflow-hidden">
+      <div className="absolute left-0 top-0 w-full h-full drift" aria-hidden>
+        <img
+          src="/animations/paws1.001.png"
+          className="absolute right-0 top-0 w-full frame-1"
+        />
+        <img
+          src="/animations/paws1.002.png"
+          className="absolute right-0 top-0 w-full frame-2"
+        />
+      </div>
     </div>
   );
 }

web/src/components/promo/AppDemo.tsx

@@ -0,0 +1,43 @@
+import './phone.css';
+import { AppId, appsById, getAppUrl } from '@biscuits/apps';
+import PhoneDemo from './PhoneDemo.jsx';
+import { Button } from '@a-type/ui/components/button';
+import classNames from 'classnames';
+
+export interface AppDemoProps {
+  appId: AppId;
+  index: number;
+}
+
+export function AppDemo({ appId, index }: AppDemoProps) {
+  const app = appsById[appId];
+
+  const url = getAppUrl(app);
+
+  return (
+    <div className="flex flex-row gap-8 items-center even:(flex-row-reverse)">
+      <div
+        className={classNames(
+          'flex-shrink-0 w-1/2 flex flex-col',
+          index % 2 === 1 ? 'items-start' : 'items-end text-end',
+        )}
+      >
+        <img
+          src={`${url}/${app.iconPath}`}
+          alt={app.name}
+          className="h-auto rounded-lg w-[120px] h-[120px] object-contain object-center"
+        />
+        <h3 className="text-2xl font-bold">{app.name}</h3>
+        <p className="text-lg">{app.description}</p>
+        <Button asChild>
+          <a href={url} target="_blank" rel="noopener noreferrer">
+            Open app
+          </a>
+        </Button>
+      </div>
+      <div className="flex flex-col gap-2">
+        <PhoneDemo src={app.demoVideoSrc} />
+      </div>
+    </div>
+  );
+}

web/src/components/promo/PhoneDemo.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+export interface PhoneDemoProps {
+  src: string;
+}
+
+export function PhoneDemo({ src }: PhoneDemoProps) {
+  const animationDelay = useMemo(() => {
+    return `${(Math.random() * 3).toFixed(2)}s`;
+  }, []);
+
+  return (
+    <div className="phone-wrapper">
+      <div
+        className="phone border-4 border-black border-solid rounded-lg aspect-ratio-11/24 bg-black"
+        style={{
+          animationDelay,
+        }}
+      >
+        <div className="absolute z--1 left-0 w-full h-full flex items-center justify-center text-gray-5 font-fancy text-lg p-6 text-center">
+          Video Coming Soon
+        </div>
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          src={src}
+          className="w-full h-full object-center object-cover rounded-lg"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default PhoneDemo;

web/src/components/promo/phone.css

@@ -0,0 +1,49 @@
+.phone-wrapper {
+  perspective-origin: 50% 50%;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+
+@keyframes drift-3d {
+  0% {
+    transform: rotateY(-10deg) rotateX(-3deg);
+  }
+  10% {
+    transform: rotateY(-12deg) rotateX(2deg);
+  }
+  20% {
+    transform: rotateY(-8deg) rotateX(0deg);
+  }
+  30% {
+    transform: rotateY(-14deg) rotateX(-3deg);
+  }
+  40% {
+    transform: rotateY(-6deg) rotateX(2deg);
+  }
+  50% {
+    transform: rotateY(-10deg) rotateX(0deg);
+  }
+  60% {
+    transform: rotateY(-12deg) rotateX(-3deg);
+  }
+  70% {
+    transform: rotateY(-18deg) rotateX(2deg);
+  }
+  80% {
+    transform: rotateY(-14deg) rotateX(0deg);
+  }
+  90% {
+    transform: rotateY(-6deg) rotateX(-5deg);
+  }
+  100% {
+    transform: rotateY(-10deg) rotateX(-3deg);
+  }
+}
+
+.phone {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: rotateY(-10deg) rotateX(-3deg);
+  animation: drift-3d 30s infinite;
+}

web/src/pages/HomePage.tsx

@@ -1,11 +1,13 @@
 import { AppsGrid } from '@/components/AppsGrid.jsx';
 import { UserMenu } from '@/components/auth/UserMenu.js';
+import { AppDemo } from '@/components/promo/AppDemo.jsx';
 import {
   PageContent,
   PageFixedArea,
   PageRoot,
 } from '@a-type/ui/components/layouts';
 import { P } from '@a-type/ui/components/typography';
+import { apps } from '@biscuits/apps';
 import { Link } from '@verdant-web/react-router';
 import classNames from 'classnames';
 import { Suspense, lazy } from 'react';
@@ -40,7 +42,7 @@ export default function HomePage() {
         <div className="flex flex-col gap-2 min-h-[30vh] mb-10 mt-5 text-primary-dark font-semibold">
           <h2
             className={classNames(
-              '!text-8xl text-[#004933] mt-0 block mb-10 font-bold leading-none',
+              '!text-8xl text-black mt-0 block mb-10 font-bold leading-none',
             )}
           >
             Scratch-made apps
@@ -53,7 +55,10 @@ export default function HomePage() {
             forever; no ads, no tracking. <Link to="/about">Learn how</Link>.
           </P>
         </div>
-        <AppsGrid />
+        {/* <AppsGrid /> */}
+        {apps.map((app, index) => (
+          <AppDemo appId={app.id} key={app.id} index={index} />
+        ))}
       </PageContent>
     </PageRoot>
   );