New Homepage (#2305)

* wip * wip * wip * wip * wip * wip * wip * wip * Still wip * wip * New alpha Sparkle * New alpha Sparkle * New alpha Sparkle * Large screen version * Large screen version polish * Footer * Large screen version polish * smaller images * working my way up from small screens * working my way up from small screens * package reset * package reset * Refactoring for smaller screens * Refactoring for smaller screens adding tabs * Reset changes in sparkle for separate PR * clean * Moving to Sparkle29 * Reset front directory to match origin/main * Polishing * Ready for prod * Adding new sign in, sign up, anchor links in the bar * package front * fine tune * Fixing * Fixing * Fixing names * Fixing potential Webgl problem on iPhone * adding shape icons * Polishing texts and animation * Copy fixes * Polishing plan look * Polishing * Fix rebase and bump sparkle * Use PlanTable that we already have in subscription page * Handle the signup buttons * Fix post rebase --------- Co-authored-by: édouard wautier <edouardwautier@MacBook-Pro-de-edouard.local> Co-authored-by: PopDaph <daphne.popin@gmail.com> Co-authored-by: Daphné Popin <PopDaph@users.noreply.github.com>
dust-tt · Nov 6, 2023 · 374e5ba · 374e5ba
1 parent 75918c0
commit 374e5ba
Show file tree

Hide file tree

Showing 21 changed files with 1,389 additions and 390 deletions.
diff --git a/front/components/Button.tsx b/front/components/Button.tsx
@@ -1,4 +1,12 @@
-import { Button } from "@dust-tt/sparkle";
+import {
+  Button,
+  DropdownMenu,
+  GithubLogo,
+  GoogleLogo,
+  Icon,
+  LoginIcon,
+  RocketIcon,
+} from "@dust-tt/sparkle";
 
 import { classNames } from "@app/lib/utils";
 
@@ -37,6 +45,98 @@ export function SignInButton({
       variant="tertiary"
       icon={icon}
       onClick={onClick}
+      size="md"
     ></Button>
   );
 }
+
+export function SignInDropDownButton({
+  buttonVariant = "tertiary",
+  buttonLabel = "Sign in",
+  buttonIcon = LoginIcon,
+  buttonClassname = "",
+  shouldDisplayGithub,
+  onClickGithub,
+  onClickGoogle,
+}: {
+  buttonVariant?: "primary" | "secondary" | "tertiary";
+  buttonLabel?: string;
+  buttonIcon?: typeof Icon;
+  buttonClassname?: string;
+  shouldDisplayGithub: boolean;
+  onClickGithub: () => void;
+  onClickGoogle: () => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Button>
+        <Button
+          variant={buttonVariant}
+          className={buttonClassname}
+          size="sm"
+          label={buttonLabel}
+          icon={buttonIcon}
+        />
+      </DropdownMenu.Button>
+      <DropdownMenu.Items origin="topRight" width={240}>
+        <div className="flex flex-col gap-2 p-4">
+          <Button
+            variant="tertiary"
+            size="md"
+            label="With Google"
+            icon={GoogleLogo}
+            onClick={onClickGoogle}
+          />
+          {shouldDisplayGithub && (
+            <Button
+              variant="tertiary"
+              size="md"
+              label="With GitHub"
+              icon={GithubLogo}
+              onClick={onClickGithub}
+            />
+          )}
+        </div>
+      </DropdownMenu.Items>
+    </DropdownMenu>
+  );
+}
+
+export function SignUpDropDownButton({
+  buttonVariant = "primary",
+  buttonLabel = "Start with Dust",
+  buttonIcon = RocketIcon,
+  buttonClassname = "",
+  onClickGoogle,
+}: {
+  buttonVariant?: "primary" | "secondary" | "tertiary";
+  buttonLabel?: string;
+  buttonIcon?: typeof Icon;
+  buttonClassname?: string;
+  onClickGoogle: () => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Button>
+        <Button
+          variant={buttonVariant}
+          className={buttonClassname}
+          size="sm"
+          label={buttonLabel}
+          icon={buttonIcon}
+        />
+      </DropdownMenu.Button>
+      <DropdownMenu.Items origin="topRight" width={260}>
+        <div className="flex flex-col gap-2 p-4">
+          <Button
+            variant="tertiary"
+            size="md"
+            label="Sign up with Google"
+            icon={GoogleLogo}
+            onClick={onClickGoogle}
+          />
+        </div>
+      </DropdownMenu.Items>
+    </DropdownMenu>
+  );
+}
diff --git a/front/components/PlansTables.tsx b/front/components/PlansTables.tsx
@@ -10,10 +10,10 @@ interface PricePlanProps {
   size: "sm" | "xs";
   className?: string;
   isTabs?: boolean;
-  plan: PlanType;
-  onClickProPlan: () => void;
-  onClickEnterprisePlan: () => void;
-  isProcessing: boolean;
+  plan?: PlanType;
+  onClickProPlan?: () => void;
+  onClickEnterprisePlan?: () => void;
+  isProcessing?: boolean;
 }
 
 function FreePriceTable({ size }: { size: "sm" | "xs" }) {
@@ -45,9 +45,9 @@ function ProPriceTable({
   isProcessing,
 }: {
   size: "sm" | "xs";
-  plan: PlanType;
-  onClick: () => void;
-  isProcessing: boolean;
+  plan?: PlanType;
+  onClick?: () => void;
+  isProcessing?: boolean;
 }) {
   const biggerButtonSize = size === "xs" ? "sm" : "md";
   return (
@@ -75,7 +75,7 @@ function ProPriceTable({
       <PriceTable.Item label="Assistants can execute actions" />
       <PriceTable.Item label="Workspace role and permissions" variant="dash" />
       <PriceTable.ActionContainer>
-        {plan.code !== PRO_PLAN_SEAT_29_CODE && (
+        {plan && plan.code !== PRO_PLAN_SEAT_29_CODE && (
           <Button
             variant="primary"
             size={biggerButtonSize}
@@ -95,8 +95,8 @@ function EnterprisePriceTable({
   isProcessing,
 }: {
   size: "sm" | "xs";
-  onClick: () => void;
-  isProcessing: boolean;
+  onClick?: () => void;
+  isProcessing?: boolean;
 }) {
   const biggerButtonSize = size === "xs" ? "sm" : "md";
   return (
@@ -118,14 +118,16 @@ function EnterprisePriceTable({
       <PriceTable.Item label="Advanced workspace role and permissions" />
       <PriceTable.Item label="Dedicated account support" />
       <PriceTable.ActionContainer>
-        <Button
-          variant="primary"
-          size={biggerButtonSize}
-          label="Contact us"
-          icon={SparklesIcon}
-          disabled={isProcessing}
-          onClick={onClick}
-        />
+        {onClick && (
+          <Button
+            variant="primary"
+            size={biggerButtonSize}
+            label="Contact us"
+            icon={SparklesIcon}
+            disabled={isProcessing}
+            onClick={onClick}
+          />
+        )}
       </PriceTable.ActionContainer>
     </PriceTable>
   );