Merge pull request #3238 from garden-co/more-compact-hero

More compact hero

Author: aeplay

homepage/homepage/app/(others)/(home)/page.tsx

@@ -15,9 +15,8 @@ export default function Home() {
     <>
       <HeroSection />
 
-      <ChatDemoSection />
 
-      <SupportedEnvironmentsSection />
+      <ChatDemoSection />
 
       <div className="container grid gap-8 pt-12">
         <ProblemStatementSection />

homepage/homepage/components/home/ChatDemoSection.tsx

@@ -169,7 +169,7 @@ export function ChatDemoSection() {
   };
 
   return (
-    <div className="container grid items-start md:grid-cols-12">
+    <div className="container grid items-start md:grid-cols-12 pt-6">
       <div className="md:col-span-7">
         <div className="grid items-start gap-4 sm:grid-cols-2 sm:gap-0">
           <Iframe

homepage/homepage/components/home/CodeStepAction.mdx

@@ -1,13 +1,26 @@
 ```tsx
-// Use CoValues like reactive local state. Get instant UI updates on every edit — across all devices and users. 🎉
+import { useCoState }
+  from "jazz-tools/react";
 
-import { useCoState } from "jazz-tools/react";
+function MessageList({ id }) {
+  // Load & sync CoValues
+  // Rerenders on local & remote edits!
+  const chat = useCoState(Chat, id, {
+    // Granular load of nested CoValues
+    resolve: { $each: true }
+  });
 
-const ChatScreen = ({ id }) => {
-  const chat = useCoState(Chat, id);
-
-  return chat.messages.map(msg => (
-    <p>{msg.text}</p>
-  ));
+  return chat.$isLoaded ? <div>
+    {chat.map(msg => (   // Looks like
+      <p>{msg.text}</p>  // plain JSON
+    ))}
+    <TextInput onSubmit={(text) => {
+      // Create and edit data anywhere!
+      // Locally stored & synced
+      chat.$jazz.push(Message.create(
+        { text }, chat.$jazz.owner
+      ));
+    }} />
+  </div> : <div>Loading...</div>;
 }
 ```

homepage/homepage/components/home/CodeStepCloud.mdx

@@ -0,0 +1,25 @@
+```tsx
+import { co, z } from "jazz-tools";
+import { JazzReactProvider }
+  from "jazz-tools/react";
+
+// Describe your app with cloud-synced CoValues ("collaborative values")
+const Message = co.map({
+  text: z.string(),
+});
+
+const Chat = co.list(Message);
+
+// Use our global auto-scaling
+// Jazz Cloud or self-host
+const peer =
+  "wss://cloud.jazz.tools/?key=...";
+
+function App() {
+  return (
+    <JazzReactProvider sync={{ peer }}>
+      ...
+    </JazzReactProvider>
+  );
+}
+```

homepage/homepage/components/home/CodeStepRender.mdx

@@ -1,26 +1,16 @@
 "use client";
 
 import { clsx } from "clsx";
-import CodeStepAction from "./CodeStepAction.mdx";
-import CodeStepCloud from "./CodeStepCloud.mdx";
 import CodeStepRender from "./CodeStepRender.mdx";
-import CodeStepSchema from "./CodeStepSchema.mdx";
+import CodeStepSetup from "./CodeStepSetup.mdx";
 
 const codeFiles = [
   {
-    fileName: "schema.ts",
-    component: CodeStepSchema,
+    fileName: "setup.tsx",
+    component: CodeStepSetup,
   },
   {
-    fileName: "main.tsx",
-    component: CodeStepCloud,
-  },
-  {
-    fileName: "sendMessage.ts",
-    component: CodeStepAction,
-  },
-  {
-    fileName: "ChatScreen.tsx",
+    fileName: "Components.tsx",
     component: CodeStepRender,
   },
 ];

homepage/homepage/components/home/CodeStepSchema.mdx

@@ -13,39 +13,31 @@ import { CopyButton } from "@garden-co/design-system/src/components/molecules/Co
 import { Icon } from "@garden-co/design-system/src/components/atoms/Icon";
 import clsx from "clsx";
 import { track } from "@vercel/analytics";
+import { SupportedEnvironmentsSection } from "./SupportedEnvironmentsSection";
 
 export function HeroSection() {
   return (
-    <section className="container grid items-start gap-8 py-12 md:grid-cols-12 md:gap-0 md:py-16">
+    <section className="container grid items-start gap-8 py-12 md:grid-cols-12 md:gap-0 md:py-20">
       <div className="md:col-span-4">
-        <Kicker className="mb-6">Ship Better Apps, Faster.</Kicker>
-        <H1>
-          <JazzSyncs className="max-w-96 md:max-w-full" aria-hidden="true" />
-          <span className="sr-only">{marketingCopy.headline}</span>
+        <Kicker className="mb-2">The database that syncs.</Kicker>
+        <H1 className="text-3xl md:text-4xl lg:text-4xl">
+          Things are easy when data syncs anywhere, instantly.
         </H1>
         <Prose
-          size="md"
+          size="lg"
           className="mt-6 prose-p:leading-normal dark:text-white"
         >
           <p>
-            A new kind of distributed database that runs across your frontend,
-            containers, serverless functions and its own cloud.
+            Jazz is a distributed database that runs across your frontend,
+            containers, functions, and our global auto-scaling storage cloud.
           </p>
           <p>
-            It syncs data, files and LLM streams instantly and feels like
-            reactive local JSON state.
-          </p>
-          <p>
-            Built-in auth, orgs, multiplayer, edit history, permissions,
-            encryption, offline support and more.
-          </p>
-
-          <p className="text-base text-stone-600 dark:text-stone-400">
-            Self-host or use Jazz Cloud for zero-config magic. Open source (MIT)
+            Efficiently sync data, files and LLM streams. Use them like reactive
+             local JSON state.
           </p>
         </Prose>
 
-        <div className="mt-8 grid gap-4">
+        <div className="mb-2 mt-8 grid gap-4">
           <div className="relative col-span-2 w-full flex-1 overflow-hidden rounded-lg border-2 text-sm md:text-base lg:col-span-3">
             <NpxCreateJazzApp />
 
@@ -58,11 +50,13 @@ export function HeroSection() {
               onCopy={() => track("create-jazz-app command copied from hero")}
             />
           </div>
-          <Button intent="primary" size="lg" href={`/docs/`}>
-            <Icon name="docs" className="text-white" />
-            Read the docs
-          </Button>
         </div>
+
+        <p className="text-base text-stone-600 dark:text-stone-400">
+          Open source (MIT) and self-hostable.
+        </p>
+
+        <SupportedEnvironmentsSection />
       </div>
       <div className="md:col-span-7 md:col-start-6">
         <CodeTabs />

homepage/homepage/components/home/CodeStepSetup.mdx

@@ -7,6 +7,7 @@ import { NodejsLogo } from "@/components/icons/NodejsLogo";
 import { ReactLogo } from "@/components/icons/ReactLogo";
 import { ReactNativeLogo } from "@/components/icons/ReactNativeLogo";
 import { SvelteLogo } from "@/components/icons/SvelteLogo";
+import { TauriLogo } from "@/components/icons/TauriLogo";
 import Link from "next/link";
 import React from "react";
 
@@ -21,6 +22,11 @@ const environments = [
     icon: ReactLogo,
     href: "/docs/react",
   },
+  {
+    name: "Svelte",
+    icon: SvelteLogo,
+    href: "/docs/svelte",
+  },
   {
     name: "React Native",
     icon: ReactNativeLogo,
@@ -32,9 +38,8 @@ const environments = [
     href: "/docs/react-native-expo",
   },
   {
-    name: "Svelte",
-    icon: SvelteLogo,
-    href: "/docs/svelte",
+    name: "Tauri",
+    icon: TauriLogo,
   },
   {
     name: "Node.js",
@@ -50,14 +55,14 @@ const environments = [
     icon: VercelLogo,
   },
   {
-    name: "CF Workers",
+    name: "CF DOs",
     icon: CloudflareWorkerLogo,
   },
 ];
 
 export function SupportedEnvironmentsSection() {
   return (
-    <div className="container flex flex-wrap justify-center gap-4 py-12 md:gap-6 lg:pt-24">
+    <div className="flex flex-wrap gap-4 py-12 md:gap-6">
       {environments.map(({ name, icon: Icon, href }) => {
         if (href) {
           return (