From df3aadcd4c5b488df0725efa4c81693cc6ab6e63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A9douard=20wautier?=
 <edouardwautier@MacBook-Pro-de-edouard.local>
Date: Tue, 24 Oct 2023 15:01:39 +0200
Subject: [PATCH] wip

---
 front/pages/index.tsx                 | 69 +++++++++++++++++++--------
 sparkle/src/components/PriceTable.tsx |  6 ++-
 2 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 9fd900d2013b7..4ac77c571a6c6 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -366,7 +366,7 @@ export default function Home({
             <div
               className={classNames(
                 defaultFlexClasses,
-                "s-dark dark col-span-8 col-start-3 flex flex-col gap-4"
+                "s-dark dark col-span-12 flex flex-col gap-4"
               )}
             >
               <H2>Pricing</H2>
@@ -376,7 +376,6 @@ export default function Home({
                   price="$0"
                   priceLabel="/ month"
                   color="emerald"
-                  className="w-64"
                 >
                   <PriceTable.Item label="One user" variant="dash" />
                   <PriceTable.Item label="One workspace" variant="dash" />
@@ -386,34 +385,66 @@ export default function Home({
                     label="50 documents as data sources"
                     variant="dash"
                   />
+                  <PriceTable.Item
+                    label="No connections
+(GitHub, Google Drive, Notion, Slack)"
+                    variant="xmark"
+                  />
                   <PriceTable.Item label="Privacy and Data Security" />
                   <PriceTable.Item label="State of the art LLM models (GPT-4, Claude, …)" />
                   <PriceTable.Item label="Dust Developer Platform" />
                 </PriceTable>
                 <PriceTable
-                  title="Team"
-                  price="0€"
+                  title="Pro"
+                  price="$29"
                   color="sky"
                   priceLabel="/ month / seat"
-                  className="w-64"
                 >
-                  <PriceTable.Item label="Unlimited members / workspace" />
+                  <PriceTable.Item label="Up to 500 users" />
+                  <PriceTable.Item label="One workspace" variant="dash" />
                   <PriceTable.Item label="Unlimited custom assistants" />
-                  <PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
-                  <PriceTable.Item label="1 user" />
-                  <PriceTable.Item label="1 user" />
-                  <PriceTable.Item label="1 user" />
-                  <PriceTable.Item label="1 user" />
+                  <PriceTable.Item label="Unlimited messages" />
+                  <PriceTable.Item label="Unlimited data sources (fair use)" />
+                  <PriceTable.Item
+                    label="Connections
+(GitHub, Google Drive, Notion, Slack)"
+                  />
+                  <PriceTable.Item label="Privacy and Data Security" />
+                  <PriceTable.Item label="State of the art LLM models (GPT-4, Claude, …)" />
+                  <PriceTable.Item label="Dust Developer Platform" />
+
+                  <PriceTable.Item label="Single Sign-on (Google, GitHub)" />
+                  <PriceTable.Item
+                    label="Workspace role and permissions"
+                    variant="dash"
+                  />
+                  <PriceTable.Item label="Centralize billing" variant="dash" />
+
+                  <PriceTable.Item label="Assistants available via Slackbot" />
+                  <PriceTable.Item label="Assistants can execute Dust Apps" />
                 </PriceTable>
-                <PriceTable title="Enterprise" price="Custom" className="w-64">
-                  <PriceTable.Item label="Unlimited members / workspace" />
-                  <PriceTable.Item label="Unlimited workspaces" />
+                <PriceTable title="Enterprise" price="Custom">
+                  <PriceTable.Item label="From 100 users" />
+                  <PriceTable.Item label="Multiple workspaces" variant="dash" />
                   <PriceTable.Item label="Unlimited custom assistants" />
-                  <PriceTable.Item label="1 user" />
-                  <PriceTable.Item label="1 user" />
-                  <PriceTable.Item label="1 user" />
-                  <PriceTable.Item label="1 user" />
-                  <PriceTable.Item label="1 user" />
+                  <PriceTable.Item label="Unlimited messages" />
+                  <PriceTable.Item label="Unlimited data sources (fair use)" />
+                  <PriceTable.Item
+                    label="Connections
+(GitHub, Google Drive, Notion, Slack)"
+                  />
+                  <PriceTable.Item label="Privacy and Data Security" />
+                  <PriceTable.Item label="State of the art LLM models (GPT-4, Claude, …)" />
+                  <PriceTable.Item label="Dust Developer Platform" />
+
+                  <PriceTable.Item label="Single Sign-on (Google, GitHub)" />
+                  <PriceTable.Item label="Advanced workspace role and permissions" />
+                  <PriceTable.Item label="Centralize billing" />
+
+                  <PriceTable.Item label="Assistants available via Slackbot" />
+                  <PriceTable.Item label="Assistants can execute Dust Apps" />
+                  <PriceTable.Item label="Assistant design and evaluation" />
+                  <PriceTable.Item label="Dedicated account support" />
                 </PriceTable>
               </div>
             </div>
diff --git a/sparkle/src/components/PriceTable.tsx b/sparkle/src/components/PriceTable.tsx
index 1d0e0cecac41a..437731701f604 100644
--- a/sparkle/src/components/PriceTable.tsx
+++ b/sparkle/src/components/PriceTable.tsx
@@ -41,7 +41,7 @@ export function PriceTable({
   return (
     <div
       className={classNames(
-        "s-w-72",
+        "s-w-full",
         "s-flex s-cursor-default s-flex-col s-rounded-xl s-p-1 s-shadow-xl",
         "s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100",
         colorTable[color],
@@ -155,5 +155,7 @@ interface PriceTableContainerProps {
 }
 
 PriceTable.Container = function ({ children }: PriceTableContainerProps) {
-  return <div className="s-flex s-w-full s-gap-3">{children}</div>;
+  return (
+    <div className="s-flex s-w-full s-items-stretch  s-gap-3">{children}</div>
+  );
 };