From 3af99f33357630a82eec4a4cc923c92e1a24033b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=A9douard=20wautier?= Date: Thu, 26 Oct 2023 19:09:06 +0200 Subject: [PATCH] working my way up from small screens --- front/components/home/contentComponents.tsx | 44 +-- front/pages/index.tsx | 406 +++++++++++++++----- 2 files changed, 326 insertions(+), 124 deletions(-) diff --git a/front/components/home/contentComponents.tsx b/front/components/home/contentComponents.tsx index d2b979c6f77b6..3d8ab9280e7be 100644 --- a/front/components/home/contentComponents.tsx +++ b/front/components/home/contentComponents.tsx @@ -1,43 +1,31 @@ import classNames from "classnames"; import React, { ReactElement, ReactNode } from "react"; -const defaultGridClasses = "grid grid-cols-12 gap-10"; +const defaultGridClasses = + "grid grid-cols-12 gap-x-6 gap-y-10 md:gap-12 px-6 md:px-20 xl:px-0 xl:gap-10"; -export const Grid = ({ - children, - colorCSS = "text-slate-50", - className = "", -}: ContentProps) => ( -
- {children} -
+export const Grid = ({ children, className = "" }: ContentProps) => ( +
{children}
); const hClasses = { - h1: "font-objektiv text-4xl font-bold tracking-tight md:text-6xl drop-shadow-lg", - h2: "font-objektiv text-3xl font-bold tracking-tight md:text-5xl drop-shadow-lg", - h3: "font-objektiv text-xl font-bold tracking-tight md:text-3xl drop-shadow-md", - h4: "font-objektiv text-lg font-bold tracking-tight md:text-2xl drop-shadow-md", + h1: "font-objektiv text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl drop-shadow-lg", + h2: "font-objektiv text-3xl font-bold tracking-tight lg:text-4xl xl:text-5xl drop-shadow-lg", + h3: "font-objektiv text-xl font-bold tracking-tight lg:text-2x xl:text-3xl drop-shadow-md", + h4: "font-objektiv text-lg font-bold tracking-tight lg:text-xl xl:text-2xl drop-shadow-md", }; interface ContentProps { children: ReactNode; className?: string; - colorCSS?: string; } type TagName = "h1" | "h2" | "h3" | "h4"; const createHeadingComponent = (Tag: TagName) => { - const Component: React.FC = ({ - children, - colorCSS = "text-slate-50", - className = "", - }) => { + const Component: React.FC = ({ children, className = "" }) => { return ( - - {children} - + {children} ); }; Component.displayName = Tag.toUpperCase(); @@ -49,8 +37,8 @@ export const H2 = createHeadingComponent("h2"); export const H3 = createHeadingComponent("h3"); export const H4 = createHeadingComponent("h4"); -export const Span = ({ children, colorCSS, className = "" }: ContentProps) => ( - {children} +export const Span = ({ children, className = "" }: ContentProps) => ( + {children} ); const borderColorTable = { @@ -64,8 +52,8 @@ const borderColorTable = { const pClasses = { xs: "font-regular text-sm text-slate-400 md:text-base", sm: "font-regular text-base text-slate-400 md:text-lg", - md: "font-regular text-lg text-slate-400 md:text-xl drop-shadow", - lg: "font-regular text-xl text-slate-400 md:text-2xl drop-shadow", + md: "font-regular text-base md:text-lg text-slate-400 lg:text-xl drop-shadow", + lg: "font-regular text-lg md:text-xl text-slate-400 lg:text-2xl drop-shadow", }; interface PProps { @@ -84,7 +72,7 @@ export const P = ({

{ { className: classNames( singleChild.props.className, - "h-12 w-12 drop-shadow-[0_5px_5px_rgba(0,0,0,0.4)]" + "h-8 w-8 md:h-12 md:w-12 drop-shadow-[0_5px_5px_rgba(0,0,0,0.4)]" ), } ); diff --git a/front/pages/index.tsx b/front/pages/index.tsx index b8a58f3ca337d..96ceea179622e 100644 --- a/front/pages/index.tsx +++ b/front/pages/index.tsx @@ -174,36 +174,51 @@ export default function Home({

-
+
-
+
- +
-

- +

+ Amplify your team's potential {" "}
with customizable and secure AI assistants.

-

+

AI is changing the way we work.
- Effectively channeling the potential of AI is a competitive - edge. + Effectively channeling its potential{" "} + {/*
*/} + is a competitive edge.

-
+
- + +
+ + + +
+

+ Deploy the best Large Language Models to  + all your company, +
+ today. +

+

+ Connect Dust to your team’s data and{" "} + break down knowledge silos{" "} + with context‑aware assistants. +

+

+ Empower your teams with{" "} + assistants tailored to their needs on + concrete use cases. +

+

+ Control data access granularly with a{" "} + safe and privacy-obsessed application. +

+ +

@@ -237,7 +289,7 @@ export default function Home({ safe and privacy-obsessed application.

-
+
@@ -249,27 +301,65 @@ export default function Home({ ref={scrollRef1} className={classNames( defaultFlexClasses, - "col-span-8 col-start-3 flex flex-col gap-4 text-right" + "flex flex-col gap-4", + "col-span-12", + "md:col-span-8 md:col-start-4", + "xl:col-span-8 xl:col-start-2", + "2xl:col-start-3 2xl:text-right" )} > -

+

Get the state of the art,
today and tomorrow. -

+

Dust gives you access to the  - leading models,
+ leading models, +
and  augments them with  your company’s internal information.

+
+ + + +
+
+

+ Your own knowledge base continuously in sync:{" "} + + Notion, Slack, GitHub, Google Drive, and more + + . +

+

@@ -295,19 +385,35 @@ export default function Home({ - - - +

+ + + +
+
+

Proprietary and open-source models suited to your needs:{" "} OpenAI, Anthropic, Mistral…

- - - +
+ + + +
@@ -320,19 +426,21 @@ export default function Home({ - - - +
+ + + +
-

- Your own knowledge base continuously in sync:{" "} - - Notion, Slack, GitHub, Google Drive, and more - - . -

-
+ -
+

Team members imagine new workflows and  package them with assistants that others can effortlessly use.

-
+
@@ -391,7 +516,12 @@ export default function Home({

@@ -405,7 +535,7 @@ export default function Home({ single sign‑on (SSO).

-
+
@@ -414,35 +544,27 @@ export default function Home({
-
-

+
+

Designed for security
and data privacy.

-
-

- Your data is private, No re-training - of models on your internal knowledge. -

-

- Enterprise-grade security to manage - your data access policies with control and confidence. -

-
+

+ Your data is private, No re-training + of models on your internal knowledge. +

+

+ Enterprise-grade security to manage + your data access policies with control and confidence. +

+

+ Need more? +
+ Dust do it! +

+
+ + + +
+

+ Provide{" "} + developers and tinkerers with a platform{" "} + to build custom actions and application orchestration + to fit your team’s exact needs. +

+

+ Support custom plugins for assistants to interact + with your own databases on advanced use cases. +

+ +
-

- Need more? +

+ Want to start with Dust?
- Dust do it! + + Come check us out on a larger screen! +

- Provide{" "} - developers and tinkerers with a platform{" "} - to build custom actions and application orchestration - to fit your team’s exact needs. -

-

- Support custom plugins for assistants to - interact with your{" "} - own databases on advanced use cases. + We're excited for you to explore our price plans and start + your onboarding journey. For the optimal experience, + please return on a device with a bigger screen.

- -
-

+ +
+

Start with Dust!
Meet our pricing plans. @@ -486,10 +634,13 @@ export default function Home({
-
+
- -

+ +

Our product constitution

-

Augmenting humans, not replacing them

+

+ Augmenting humans, not replacing them +

We're optimistic about making work life better for smart people. We're building R2-D2, not Skynet.

-
-

Hard problems over hype

+
+

Hard problems over hype

There's more to do than wrapping GPT into a chat UI. We're in this to solve hard problems on user experience and product quality.

-
-

Building with an AI core

+
+

+ Building with an AI core +

We're building with large language models in mind from the ground up, rather than sprinkling them here and there. @@ -718,14 +896,29 @@ const Header = () => { const Footer = () => { return ( -

-
+
+
-
+
-
+

Careers

@@ -744,7 +937,14 @@ const Footer = () => {

-
+

About

@@ -764,7 +964,14 @@ const Footer = () => {

-
+

Privacy

@@ -779,7 +986,14 @@ const Footer = () => {

-
+

Legal