Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
édouard wautier authored and édouard wautier committed Oct 23, 2023
1 parent 4058373 commit 98f0618
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 41 deletions.
171 changes: 147 additions & 24 deletions front/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Logo } from "@dust-tt/sparkle";
import { Logo, PriceTable } from "@dust-tt/sparkle";
import { Button } from "@dust-tt/sparkle";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import Head from "next/head";
Expand Down Expand Up @@ -58,8 +58,8 @@ const hClasses = {
};

const pClasses = {
normal: "font-regular text-lg text-slate-400 md:text-xl drop-shadow",
big: "font-regular text-xl text-slate-400 md:text-2xl drop-shadow",
normal: "font-regular text-sm text-slate-400 md:text-lg drop-shadow",
big: "font-regular text-lg text-slate-400 md:text-xl drop-shadow",
};

interface ContentProps {
Expand All @@ -82,6 +82,9 @@ export const H2 = ({ children, className = "" }: ContentProps) => (
export const H3 = ({ children, className = "" }: ContentProps) => (
<h3 className={classNames(className, hClasses.h3)}>{children}</h3>
);
export const H4 = ({ children, className = "" }: ContentProps) => (
<h4 className={classNames(className, hClasses.h4)}>{children}</h4>
);

export const P = ({ children, className = "", variant }: ContentProps) => (
<p
Expand Down Expand Up @@ -192,12 +195,12 @@ export default function Home({
<br />
with customizable and secure AI&nbsp;assistants
</H1>
<P variant="big" className="col-span-6 col-start-3">
<H4 className="col-span-6 col-start-3">
<Strong>AI is changing the way we work.</Strong>
<br />
Effectively channeling the potential of AI is a competitive
edge.
</P>
</H4>
</div>
</Grid>
<Grid>
Expand All @@ -219,7 +222,7 @@ export default function Home({
<div
className={classNames(
defaultFlexClasses,
"col-span-8 flex flex-col gap-4"
"col-span-8 col-start-3 flex flex-col gap-4"
)}
>
<H2>
Expand Down Expand Up @@ -253,40 +256,160 @@ export default function Home({
<div
className={classNames(
defaultFlexClasses,
"col-span-8 col-start-5 flex flex-col gap-4 text-right"
"col-span-8 col-start-3 flex flex-col gap-4 text-right"
)}
>
<h2 className={hClasses.h2}>
<H2>
Bring your&nbsp;team
<br />
up&nbsp;to&nbsp;speed.
</h2>
<p className={pClasses.big}>
Moving to AI is a paradigm shift in your team’s workflow.
</H2>
<P variant="big">
Embracing AI is a&nbsp;paradigm shift for&nbsp;your
team’s&nbsp;workflows.
<br />
Dust{" "}
<Strong>
spotlights your most creative and driven team members
</Strong>{" "}
and <Strong>spreads their findings</Strong> effortlessly
throughout your&nbsp;organization.
</p>
Dust empowers
<Strong>your most creative and driven team members</Strong>{" "}
to&nbsp;<Strong>develop and&nbsp;share</Strong> their practices
throughout your&nbsp;company.
</P>
</div>
</Grid>
<Grid>
<P className="col-span-4">
Seamlessly manage workspace invitations with SSO.
Team members can <Strong>imagine and build new workflows</Strong>,
package them in an{" "}
<Strong>easy to&nbsp;use / easy to&nbsp;share</Strong> assistants.
</P>
<P className="col-span-4">
Allow assistants and teammates to collaborate across workflows to
solve problems faster.
Spread good practices &&nbsp;encourage collaboration with
<Strong>@mentions in&nbsp;Dust conversations</Strong> and{" "}
<Strong>Slack&nbsp;integration</Strong>.
</P>
<P className="col-span-4">
Learn from best practices to easily deploy assistants with
specific data source specs and custom instructions for your use
cases across functions.
Seamlessly manage workspace invitations with{" "}
<Strong>single sign-on</Strong>&nbsp;(SSO).
</P>
</Grid>

<Grid>
<div
className={classNames(
defaultFlexClasses,
"col-span-6 flex flex-col gap-4"
)}
>
<H2>
Designed for security
<br />
and data privacy.
</H2>
<P>
No re-training of&nbsp;models on your internal knowledge.
Enterprise-grade security to manage your&nbsp;data access
policies with control and&nbsp;confidence.
<br />
</P>
</div>
<div
className={classNames(
defaultFlexClasses,
"col-span-6 flex flex-col gap-4"
)}
>
<H2>
Need more?
<br />
Dust do it!
</H2>
<P className={pClasses.big}>
Built for developers and tinkerers with powerful actions and
application orchestration to fit your exact needs.
</P>
</div>
</Grid>
<Grid>
<div
className={classNames(
defaultFlexClasses,
"col-span-6 flex flex-col gap-4"
)}
>
<H2>Pricing</H2>
<PriceTable.Container>
<PriceTable
title="Free"
price="0€"
priceLabel="/ month"
color="emerald"
className="w-64"
>
<PriceTable.Item
label="Single member / workspace"
variant="dash"
/>
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
<PriceTable.Item label="20 messages a week" variant="dash" />
<PriceTable.Item
label="Static Data Sources (35Mo)"
variant="dash"
/>
<PriceTable.Item
label="Connected Data Sources"
variant="xmark"
/>
</PriceTable>
<PriceTable
title="Pro"
price="0€"
priceLabel="/ month"
className="w-64"
>
<PriceTable.Item
label="Single member / workspace"
variant="dash"
/>
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
<PriceTable.Item label="20 messages a week" variant="dash" />
<PriceTable.Item
label="Static Data Sources (35Mo)"
variant="dash"
/>
<PriceTable.Item
label="Connected Data Sources"
variant="xmark"
/>
</PriceTable>
<PriceTable
title="Team"
price="0€"
color="sky"
priceLabel="/ month / seat"
className="w-64"
>
<PriceTable.Item label="Unlimited members / workspace" />
<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>
<PriceTable title="Enterprise" price="Custom" className="w-64">
<PriceTable.Item label="Unlimited members / workspace" />
<PriceTable.Item label="Unlimited workspaces" />
<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>
</PriceTable.Container>
</div>
</Grid>
</div>
<div
ref={scrollRef1}
Expand Down
40 changes: 29 additions & 11 deletions sparkle/src/components/PriceTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,25 @@ interface PriceTableProps {
title: string;
price: string;
priceLabel?: string;
color?: "pink" | "sky" | "emerald";
color?: "pink" | "sky" | "emerald" | "amber" | "blue";
className?: string;
children: ReactNode;
}

const colorTable = {
pink: "s-bg-pink-400",
sky: "s-bg-sky-400",
emerald: "s-bg-emerald-400",
pink: "s-bg-pink-400 dark:s-bg-pink-500",
amber: "s-bg-amber-400 dark:s-bg-amber-500",
sky: "s-bg-sky-400 dark:s-bg-sky-500",
blue: "s-bg-blue-400 dark:s-bg-blue-500",
emerald: "s-bg-emerald-400 dark:s-bg-emerald-500",
};

const textColorTable = {
pink: "s-text-pink-900",
sky: "s-text-sky-900",
emerald: "s-text-emerald-900",
pink: "s-text-pink-900 dark:s-text-pink-950",
amber: "s-text-amber-900 dark:s-text-amber-950",
sky: "s-text-sky-900 dark:s-text-sky-950",
blue: "s-text-blue-900 dark:s-text-blue-950",
emerald: "s-text-emerald-900 dark:s-text-emerald-950",
};

export function PriceTable({
Expand All @@ -45,7 +49,12 @@ export function PriceTable({
)}
>
<div className="s-flex s-flex-col s-px-3 s-py-2">
<div className="s-w-full s-text-right s-text-2xl s-font-semibold s-text-white">
<div
className={classNames(
"s-w-full s-text-right s-text-2xl s-font-semibold",
"s-text-structure-0"
)}
>
{title}
</div>
<div className="-s-mt-2 s-flex s-flex-row s-items-baseline s-gap-2">
Expand All @@ -62,7 +71,12 @@ export function PriceTable({
</span>
</div>
</div>
<div className="s-flex s-h-full s-flex-col s-overflow-hidden s-rounded-lg s-bg-white s-shadow-md">
<div
className={classNames(
"s-flex s-h-full s-flex-col s-overflow-hidden s-rounded-lg s-shadow-md",
"s-bg-white dark:s-bg-structure-100-dark"
)}
>
{children}
</div>
</div>
Expand Down Expand Up @@ -95,7 +109,9 @@ PriceTable.Item = function ({
return (
<div
className={classNames(
"s-flex s-items-center s-gap-1.5 s-border-b s-border-structure-100 s-px-2 s-py-2.5 s-text-sm s-text-element-800 ",
"s-flex s-items-center s-gap-1.5 s-border-b s-px-2 s-py-2.5 s-text-sm",
"s-border-structure-100 s-text-element-800",
"dark:s-border-structure-200-dark/50 dark:s-text-element-800-dark",
className
)}
>
Expand All @@ -108,7 +124,9 @@ PriceTable.Item = function ({
</div>
<div
className={classNames(
variant === "xmark" ? "s-text-element-600" : "",
variant === "xmark"
? "s-text-element-600 dark:s-text-element-600-dark"
: "",
"s-overflow-hidden s-overflow-ellipsis s-whitespace-nowrap"
)}
>
Expand Down
8 changes: 2 additions & 6 deletions sparkle/src/stories/PriceTable.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const Pricing = () => {
title="Test"
price="0€"
priceLabel="/ month"
color="emerald"
className="s-w-64"
>
<PriceTable.Item label="Single member / workspace" variant="dash" />
Expand Down Expand Up @@ -50,12 +51,7 @@ export const Pricing = () => {
<Button size="sm" variant="primary" label="Select this plan" />
</PriceTable.ActionContainer>
</PriceTable>
<PriceTable
title="Enterprise"
price="Custom"
color="emerald"
className="s-w-64"
>
<PriceTable title="Enterprise" price="Custom" className="s-w-64">
<PriceTable.Item label="Unlimited members / workspace" />
<PriceTable.Item label="Unlimited workspaces" />
<PriceTable.Item label="Unlimited custom assistants" />
Expand Down

0 comments on commit 98f0618

Please sign in to comment.