From 9c86e83bc33554f9b6d7a05165b37cffea317cdf Mon Sep 17 00:00:00 2001
From: Olivia Kane <olivia@fiveonefour.com>
Date: Mon, 21 Oct 2024 15:16:41 -0400
Subject: [PATCH] update primitive code

---
 .../sections/home/MooseValuePropSection.tsx   |  81 +++----
 .../app/sections/home/PrimitivesCode.tsx      | 214 +++++++++---------
 .../app/sections/home/WhatIsMooseForV2.tsx    |  76 +++----
 apps/framework-landing/app/shiki.tsx          |  15 +-
 .../components/icon-cards.tsx                 |  45 ++--
 5 files changed, 213 insertions(+), 218 deletions(-)

diff --git a/apps/framework-landing/app/sections/home/MooseValuePropSection.tsx b/apps/framework-landing/app/sections/home/MooseValuePropSection.tsx
index 5007c0ddf..b6285007e 100644
--- a/apps/framework-landing/app/sections/home/MooseValuePropSection.tsx
+++ b/apps/framework-landing/app/sections/home/MooseValuePropSection.tsx
@@ -1,7 +1,6 @@
 import {
   Section,
   Grid,
-  FullWidthContentContainer,
   ThirdWidthContentContainer,
 } from "@514labs/design-system-components/components/containers";
 import {
@@ -9,52 +8,44 @@ import {
   HeadingLevel,
 } from "@514labs/design-system-components/typography";
 import { IconCard } from "@514labs/design-system-components/components";
-import { ServerIcon } from "lucide-react";
+import { Bot, Cloud, Wand2 } from "lucide-react";
 
 export default function MooseValuePropSection() {
   return (
-    <>
-      <Section className="2xl:max-w-6xl mx-auto flex flex-col items-center px-5 my-16 sm:my-64">
-        <Grid>
-          <FullWidthContentContainer>
-            <Heading
-              level={HeadingLevel.l2}
-              className="max-w-5xl justify-center align-center text-center md:mb-24 sm:text-5xl"
-            >
-              Designed with the future of software development in mind.
-              <span className="bg-gradient bg-clip-text text-transparent">
-                {" "}
-                All in pure TypeScript or Python.
-              </span>
-            </Heading>
-          </FullWidthContentContainer>
-        </Grid>
-      </Section>
-      <Section>
-        <Grid>
-          <ThirdWidthContentContainer>
-            <IconCard
-              title="Simple Primitives"
-              description="Simple data engineering abstractions to help you do more with less boilerplate"
-              Icon={ServerIcon}
-            />
-          </ThirdWidthContentContainer>
-          <ThirdWidthContentContainer>
-            <IconCard
-              title="Automated Glue"
-              description="Write code, get the results you expect. Moose makes sure the data keeps flowing"
-              Icon={ServerIcon}
-            />
-          </ThirdWidthContentContainer>
-          <ThirdWidthContentContainer>
-            <IconCard
-              title="Build-time Data Context"
-              description="Never guess a table name or field. Moose pulls data context into dev workflows"
-              Icon={ServerIcon}
-            />
-          </ThirdWidthContentContainer>
-        </Grid>
-      </Section>
-    </>
+    <Section className="max-w-5xl mx-auto">
+      <Heading
+        level={HeadingLevel.l2}
+        className="max-w-5xl justify-center align-center text-center md:mb-24 sm:text-5xl"
+      >
+        Tools you love, context you need.
+        <span className="bg-gradient bg-clip-text text-transparent">
+          {" "}
+          Built for modern, AI-centric development workflows
+        </span>
+      </Heading>
+      <Grid>
+        <ThirdWidthContentContainer>
+          <IconCard
+            title="Local to cloud development workflows"
+            description="Build your app locally using the tools you love then take your app to the cloud reliably"
+            Icon={Cloud}
+          />
+        </ThirdWidthContentContainer>
+        <ThirdWidthContentContainer>
+          <IconCard
+            title="Data Model awareness for you and your AI co-pilots"
+            description="Data context pulled directly into your development workflow at dev and build time"
+            Icon={Wand2}
+          />
+        </ThirdWidthContentContainer>
+        <ThirdWidthContentContainer>
+          <IconCard
+            title="Infra automation to keep you focused"
+            description="Write code, get infra. Moose uses framework-defined infra to keep you focused"
+            Icon={Bot}
+          />
+        </ThirdWidthContentContainer>
+      </Grid>
+    </Section>
   );
 }
diff --git a/apps/framework-landing/app/sections/home/PrimitivesCode.tsx b/apps/framework-landing/app/sections/home/PrimitivesCode.tsx
index 950f9ebaa..a4a112536 100644
--- a/apps/framework-landing/app/sections/home/PrimitivesCode.tsx
+++ b/apps/framework-landing/app/sections/home/PrimitivesCode.tsx
@@ -9,11 +9,11 @@ import {
   SelectValue,
   SelectContent,
   SelectItem,
-  IconCard,
+  BackgroundIcon,
 } from "@514labs/design-system-components/components";
 import { TrackableTabsTrigger } from "@514labs/design-system-components/trackable-components";
 import { CopyButton } from "../../copy-button";
-
+import { cn } from "@514labs/design-system-components/utils";
 import {
   Heading,
   Text,
@@ -35,7 +35,7 @@ import {
   HardDriveUpload,
   CopyIcon,
 } from "lucide-react";
-import { useState, Fragment } from "react";
+import { useState } from "react";
 import CodeBlock from "../../shiki";
 
 const content = {
@@ -45,22 +45,25 @@ const content = {
       "Codify the shape and structure of the data that is used in your application",
     filename: "/datamodels/models",
     ts: `
+import { Key } from "@514labs/moose-lib"
+
 export interface UserActivity {
-    id: string;
+    id: Key<string>;
     userId: string;
     activity: string;
     timestamp: Date;
 }
 
 export interface ParsedActivity {
-    id: string;
+    id: Key<string>;
     userId: string;
     activity: string;
     utcTimestamp: Date;
 }`,
     py: `
-from moose_lib import Key
+from moose_lib import Key, moose_data_model
 
+@moose_data_model
 @dataclass
 class UserActivity:
     eventId: Key[str]
@@ -68,6 +71,7 @@ class UserActivity:
     userId: str
     activity: str
 
+@moose_data_model
 @dataclass
 class ParsedActivity:
     eventId: Key[str]
@@ -95,7 +99,7 @@ export default function run(source: UserActivity): ParsedActivity {
 } `,
     py: `
 from app.datamodels.models import UserActivity, ParsedActivity
-from moose_lib import Flow
+from moose_lib import StreamingFunction
 
 def parse_activity(activity: UserActivity) -> ParsedActivity:
     return ParsedActivity(
@@ -105,7 +109,7 @@ def parse_activity(activity: UserActivity) -> ParsedActivity:
         activity=activity.activity,
     )
 
-my_flow = Flow(
+my_flow = StreamingFunction(
     run=parse_activity
 )
 `,
@@ -295,107 +299,105 @@ const infrastructure = [
 ];
 
 export const PrimitivesCode = () => {
-  const [activeTab, setActiveTab] = useState<keyof typeof content>("models");
   const [language, setLanguage] = useState("ts");
 
   return (
-    <Fragment>
-      <Section className="mx-auto max-w-5xl sm:px-6 lg:px-8">
-        <Grid className="flex flex-col">
-          <FullWidthContentContainer className="flex md:flex-row flex-col gap-5 p-4 sm:p-6 border rounded-3xl h-fit">
-            <HalfWidthContentContainer className="flex flex-col gap-5 justify-start md:w-1/2 w-full">
-              <Heading level={HeadingLevel.l3} className="mb-0">
-                Develop application logic
-              </Heading>
-              <Text className="text-muted-foreground">
-                Define data workflows locally in your TypeScript or Python
-                project code.
-              </Text>
-              <Tabs
-                value={activeTab}
-                onValueChange={(tab) =>
-                  setActiveTab(tab as keyof typeof content)
-                }
+    <Section className="mx-auto max-w-5xl sm:px-6 lg:px-8">
+      <FullWidthContentContainer className="w-full justify-center">
+        <Tabs defaultValue="models">
+          <TabsList className="mx-auto w-full justify-center">
+            {Object.keys(content).map((tab) => (
+              <TrackableTabsTrigger
+                name={"primitives-code-snippet"}
+                subject={tab}
+                key={tab}
+                value={tab}
+                className="py-0 px-1"
               >
-                <TabsList className="mx-auto w-full justify-start">
-                  {Object.keys(content).map((tab) => (
-                    <TrackableTabsTrigger
-                      key={tab}
-                      value={tab}
-                      className="py-0 px-1"
-                      name="Moose Primitives Code"
-                      subject={tab}
-                    >
-                      <Text className="py-0 px-2 ">
-                        {content[tab as keyof typeof content]?.title}
-                      </Text>
-                    </TrackableTabsTrigger>
-                  ))}
-                </TabsList>
-                {Object.keys(content).map((tab) => (
-                  <TabsContent key={tab} value={tab}>
-                    <Text className="text-muted-foreground">
-                      {content[tab as keyof typeof content]?.description}
-                    </Text>
-                  </TabsContent>
-                ))}
-              </Tabs>
-            </HalfWidthContentContainer>
-            <HalfWidthContentContainer className="md:w-2/3 w-full overflow-hidden">
-              <div className="flex justify-end gap-2 items-center">
-                <Select value={language} onValueChange={setLanguage}>
-                  <SelectTrigger className="px-2 py-1 w-fit justify-between gap-2 border text-primary">
-                    <SelectValue placeholder="Select Language" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ts">TypeScript</SelectItem>
-                    <SelectItem value="py">Python</SelectItem>
-                  </SelectContent>
-                </Select>
-                <CopyButton
-                  copyText={content[activeTab]?.[language as "ts" | "py"] || ""}
-                  subject={content[activeTab]?.filename}
-                  name={content[activeTab]?.filename}
-                  className="px-2 py-1 w-fit justify-between gap-2 border-muted bg-transparent hover:bg-primary/10"
-                >
-                  <CopyIcon size={16} />
-                </CopyButton>
-              </div>
-              <CodeBlock
-                className="mt-2"
-                code={content[activeTab]?.[language as "ts" | "py"] || ""}
-                language={language as "ts" | "py"}
-                filename={`${content[activeTab]?.filename}.${language}` || ""}
-              />
-            </HalfWidthContentContainer>
-          </FullWidthContentContainer>
-          <FullWidthContentContainer className="flex flex-col gap-2.5 border p-5 rounded-3xl justify-start text-left">
-            <Heading level={HeadingLevel.l3} className="mb-0">
-              Moose automatically derives the infrastructure
-            </Heading>
-            <Text className="text-muted-foreground">
-              Moose automatically creates and manages the APIs, topics, tables,
-              and processes needed to support the data workflows defined in your
-              project code.
-            </Text>
-            <div className="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
-              {infrastructure.map((infra) => (
-                <IconCard
-                  className={`${
-                    infra.primitive === activeTab
-                      ? "bg-primary/10 shadow-sm"
-                      : ""
-                  } ${infra.order}`}
-                  key={infra.title}
-                  Icon={infra.icon}
-                  title={infra.title}
-                  description={infra.infra}
-                />
-              ))}
-            </div>
-          </FullWidthContentContainer>
-        </Grid>
-      </Section>
-    </Fragment>
+                <Text className="py-0 px-2 ">
+                  {content[tab as keyof typeof content]?.title}
+                </Text>
+              </TrackableTabsTrigger>
+            ))}
+          </TabsList>
+          {Object.keys(content).map((tab) => (
+            <TabsContent key={tab} value={tab} className="mx-auto w-full">
+              {/* <Text className="text-muted-foreground">
+                  {content[tab as keyof typeof content]?.description}
+                </Text> */}
+              <Grid className="w-full">
+                <HalfWidthContentContainer className="md:col-span-7">
+                  <div>
+                    <Heading level={HeadingLevel.l3} className="mb-0">
+                      Develop application logic
+                    </Heading>
+                  </div>
+                  <div className="flex flex-col w-full overflow-hidden relative mt-2">
+                    <div className="flex flex-row justify-end gap-2 items-center absolute top-6 right-4 z-10">
+                      <Select value={language} onValueChange={setLanguage}>
+                        <SelectTrigger className="px-2 py-1 w-fit justify-between gap-2 border text-primary bg-background">
+                          <SelectValue placeholder="Select Language" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="ts">TypeScript</SelectItem>
+                          <SelectItem value="py">Python</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <CopyButton
+                        copyText={
+                          content[tab as keyof typeof content]?.[
+                            language as "ts" | "py"
+                          ] || ""
+                        }
+                        subject={content[tab as keyof typeof content]?.filename}
+                        name={content[tab as keyof typeof content]?.filename}
+                        className="px-2 py-1 w-fit justify-between gap-2 border-muted bg-transparent hover:bg-primary/10"
+                      >
+                        <CopyIcon size={16} />
+                      </CopyButton>
+                    </div>
+                    <CodeBlock
+                      className="mt-4 pb-4 h-96"
+                      code={
+                        content[tab as keyof typeof content]?.[
+                          language as "ts" | "py"
+                        ] || ""
+                      }
+                      language={language as "ts" | "py"}
+                      filename={
+                        `${content[tab as keyof typeof content]?.filename}.${language}` ||
+                        ""
+                      }
+                    />
+                  </div>
+                </HalfWidthContentContainer>
+                <HalfWidthContentContainer className="md:col-span-5 flex-grow-0">
+                  <Heading level={HeadingLevel.l3}>Moose derives infra</Heading>
+                  <div className="w-full grid grid-row-6 gap-2 mt-2">
+                    {infrastructure.map((infra) => (
+                      <div
+                        key={infra.title}
+                        className={cn(
+                          "flex flex-row items-start justify-start gap-4 rounded-2xl p-1",
+                          tab === infra.primitive ? "bg-muted" : "",
+                        )}
+                      >
+                        <BackgroundIcon Icon={infra.icon} variant="default" />
+                        <div>
+                          <Text className="my-0">{infra.title}</Text>
+                          <Text className="my-0 text-muted-foreground">
+                            {infra.infra}
+                          </Text>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </HalfWidthContentContainer>
+              </Grid>
+            </TabsContent>
+          ))}
+        </Tabs>
+      </FullWidthContentContainer>
+    </Section>
   );
 };
diff --git a/apps/framework-landing/app/sections/home/WhatIsMooseForV2.tsx b/apps/framework-landing/app/sections/home/WhatIsMooseForV2.tsx
index 383f82915..fa34830a9 100644
--- a/apps/framework-landing/app/sections/home/WhatIsMooseForV2.tsx
+++ b/apps/framework-landing/app/sections/home/WhatIsMooseForV2.tsx
@@ -11,48 +11,44 @@ import {
 import React from "react";
 
 import { IconCard } from "@514labs/design-system-components/components";
-import {
-  FileBarChart,
-  GitBranch,
-  LayoutDashboard,
-  PieChart,
-} from "lucide-react";
+import { Code, GitCompare, LayoutDashboard, PieChart } from "lucide-react";
 
 export const WhatIsMooseFor = () => {
   return (
-    <>
-      <Section className="max-w-5xl mx-auto">
-        <FullWidthContentContainer>
-          <Heading
-            level={HeadingLevel.l1}
-            className="max-w-5xl justify-center align-center text-center mb-24 sm:text-5xl"
-          >
-            Use Cases
-          </Heading>
-        </FullWidthContentContainer>
-        <Grid className="grid grid-cols-2 grid-rows-2 grid-flow-col">
-          <IconCard
-            title="Real-Time Dashboards"
-            description=""
-            Icon={LayoutDashboard}
-          />
-          <IconCard
-            title="Interactive Analytics Features"
-            description=""
-            Icon={PieChart}
-          />
-          <IconCard
-            title="Enterprise Data Platforms"
-            description=""
-            Icon={FileBarChart}
-          />
-          <IconCard
-            title="Custom Data Pipelines"
-            description=""
-            Icon={GitBranch}
-          />
-        </Grid>
-      </Section>
-    </>
+    <Section className="max-w-5xl mx-auto">
+      <FullWidthContentContainer>
+        <Heading
+          level={HeadingLevel.l1}
+          className="max-w-5xl justify-center align-center text-center mb-24 sm:text-5xl"
+        >
+          Use Cases.{" "}
+          <span className="text-muted-foreground">
+            What Moose is really great for.
+          </span>
+        </Heading>
+      </FullWidthContentContainer>
+      <Grid className="grid grid-cols-2 grid-rows-2 grid-flow-col">
+        <IconCard
+          title="Interactive Analytics Features"
+          description="Enable embedded personalized charts, metrics, and data feeds in your user-facing applications"
+          Icon={PieChart}
+        />
+        <IconCard
+          title="Custom Data APIs"
+          description="Serve processed data through authenticated APIs for external applications"
+          Icon={Code}
+        />
+        <IconCard
+          title="Enterprise Data Products"
+          description="Power reports, dashboards, and internal analytics like C360, observability, or supply chain"
+          Icon={LayoutDashboard}
+        />
+        <IconCard
+          title="Real-Time Processing Pipelines"
+          description="Process and analyze live data streams for real-time insights and workflow automation"
+          Icon={GitCompare}
+        />
+      </Grid>
+    </Section>
   );
 };
diff --git a/apps/framework-landing/app/shiki.tsx b/apps/framework-landing/app/shiki.tsx
index 728b5255e..b4282e171 100644
--- a/apps/framework-landing/app/shiki.tsx
+++ b/apps/framework-landing/app/shiki.tsx
@@ -7,7 +7,7 @@ const mooseTheme = {
   name: "moose-theme",
   type: "dark",
   fg: "#E0E0E0",
-  bg: "#1C1C1C",
+  bg: "#000000",
   settings: [
     {
       scope: ["comment", "punctuation.definition.comment"],
@@ -119,7 +119,7 @@ export default function CodeBlock({
           {
             name: "moose-theme",
             fg: "#E0E0E0",
-            bg: "#1c1c1c",
+            bg: "#000000",
             settings: mooseTheme.settings,
           },
         ],
@@ -137,17 +137,12 @@ export default function CodeBlock({
   }, [code, language]);
 
   return (
-    <div
-      className={cn(
-        "overflow-y-auto w-full h-[350px] bg-muted rounded-lg",
-        className,
-      )}
-    >
-      <div className="w-full text-sm text-muted-foreground bg-muted p-3 font-mono">
+    <div className={cn("overflow-y-auto w-full rounded-2xl border", className)}>
+      <div className="w-full text-sm text-muted-foreground p-3 font-mono">
         {filename}
       </div>
       <div
-        className="px-3 text-sm bg-muted"
+        className="px-3 text-sm"
         dangerouslySetInnerHTML={{ __html: highlightedCode }}
       />
     </div>
diff --git a/packages/design-system-components/components/icon-cards.tsx b/packages/design-system-components/components/icon-cards.tsx
index 0e381938e..efa0fdf56 100644
--- a/packages/design-system-components/components/icon-cards.tsx
+++ b/packages/design-system-components/components/icon-cards.tsx
@@ -25,6 +25,11 @@ interface IconCardProps {
   variant?: "default" | "gradient";
 }
 
+interface IconPops {
+  Icon: React.ElementType;
+  variant: "default" | "gradient";
+}
+
 interface CTACardProps extends IconCardProps {
   ctaLink: string;
   ctaLabel: string;
@@ -45,23 +50,7 @@ function BaseCard({
   return (
     <Card className={cn("rounded-2xl h-full flex flex-col", className)}>
       <CardHeader>
-        <div
-          className={cn(
-            "w-fit rounded-[12px] p-[2px]",
-            variant === "gradient"
-              ? "bg-gradient-to-b from-pink from-4.65% to-background to-93.24% border-transparent"
-              : "",
-          )}
-        >
-          <div
-            className={cn(
-              "rounded-[10px] w-fit p-2",
-              variant === "gradient" ? "bg-gradientDarkPink" : "bg-[#262626]",
-            )}
-          >
-            <Icon className="h-[24px] w-[24px] text-white" />
-          </div>
-        </div>
+        <BackgroundIcon variant={variant} Icon={Icon} />
       </CardHeader>
       <CardContent className="flex-grow">
         <Text className="my-0">{title}</Text>
@@ -72,6 +61,28 @@ function BaseCard({
   );
 }
 
+export function BackgroundIcon({ Icon, variant = "default" }: IconPops) {
+  return (
+    <div
+      className={cn(
+        "w-fit rounded-[12px] p-[2px]",
+        variant === "gradient"
+          ? "bg-gradient-to-b from-pink from-4.65% to-background to-93.24% border-transparent"
+          : "",
+      )}
+    >
+      <div
+        className={cn(
+          "rounded-[10px] w-fit p-2",
+          variant === "gradient" ? "bg-gradientDarkPink" : "bg-[#262626]",
+        )}
+      >
+        <Icon className="h-[24px] w-[24px] text-white" />
+      </div>
+    </div>
+  );
+}
+
 export function IconCard({
   title,
   description,