Website fixes (#5237)

* Fixing Caroussel * Button size in caroussel fixing * Make Button Label truncatable
dust-tt · May 24, 2024 · 5bc2d95 · 5bc2d95
1 parent 668095e
commit 5bc2d95
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
diff --git a/front/components/home/Carousel.tsx b/front/components/home/Carousel.tsx
@@ -163,7 +163,7 @@ const CarouselContent = React.forwardRef<
         ref={ref}
         className={classNames(
           "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          orientation === "horizontal" ? "" : "-mt-4 flex-col",
           className
         )}
         {...props}
@@ -186,7 +186,7 @@ const CarouselItem = React.forwardRef<
       aria-roledescription="slide"
       className={classNames(
         "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        orientation === "horizontal" ? "" : "pt-4",
         className
       )}
       {...props}

diff --git a/front/components/home/ContentBlocks.tsx b/front/components/home/ContentBlocks.tsx
@@ -209,12 +209,13 @@ export const CarousselContentBlock = ({
         </P>
       </div>
       <div className="w-full text-center">
-        <Link href={href} shallow={true}>
+        <Link href={href} shallow={true} className="block w-full">
           <Button
             label={"Discover Dust for " + title}
             variant="tertiary"
             size="md"
             icon={ArrowRightIcon}
+            className="max-w-full"
           />
         </Link>
       </div>
@@ -224,7 +225,7 @@ export const CarousselContentBlock = ({
         {assistants.map((block, index) => (
           <CarouselItem
             key={index}
-            className="basis-1/2 md:basis-1/3 lg:basis-1/4"
+            className="basis-1/2 px-8 md:basis-1/2 lg:basis-1/3 xl:basis-1/4"
           >
             <SolutionSectionAssistantBlock {...block} />
           </CarouselItem>

diff --git a/front/components/home/content/Product/BlogSection.tsx b/front/components/home/content/Product/BlogSection.tsx
@@ -34,44 +34,41 @@ export function BlogSection() {
         </P>
       </div>
       <div className="col-span-12 flex flex-col items-center gap-4">
-        <Carousel className="w-full" isLooping={true}>
-          <div className="flex w-full flex-row justify-center gap-4">
+        <Carousel className="w-full">
+          <div className="flex w-full flex-row gap-4 md:justify-center">
             <CarouselPrevious label="previous" />
             <CarouselNext label="next" />
           </div>
           <CarouselContent>
-            <CarouselItem className="basis-full md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="basis-full md:basis-1/2 md:px-6 lg:basis-1/3">
               <BlogBlock
                 title="Navigating Growth and Innovation with November Five’s Dario Prskalo"
                 content="Discover how November Five leverages AI with Dust to enhance efficiency and maintain a human touch in their digital solutions."
                 href="https://blog.dust.tt/november-five-ai-transformation-dust/"
-                className="m-6 lg:m-4 xl:m-6"
               >
                 <img
                   src="https://blog.dust.tt/content/images/size/w2000/2024/04/DSCF6552-1.jpeg"
                   alt="Blog Image"
                 />
               </BlogBlock>
             </CarouselItem>
-            <CarouselItem className="basis-full md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="basis-full px-6 md:basis-1/2 lg:basis-1/3">
               <BlogBlock
                 title="How Eléonore improved the efficiency of Pennylane’s Care team thanks to Dust"
                 content="Discover how Pennylane leveraged Dust’s specialized virtual assistants to improve efficiency and optimize workflows."
                 href="https://blog.dust.tt/pennylane-dust-customer-support-journey/"
-                className="m-6 lg:m-4 xl:m-6"
               >
                 <img
                   src="https://blog.dust.tt/content/images/size/w2000/2024/04/Ele-onore-MOTTE--1--1.jpg"
                   alt="Blog Image"
                 />
               </BlogBlock>
             </CarouselItem>
-            <CarouselItem className="basis-full md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="basis-full px-6 md:basis-1/2 lg:basis-1/3">
               <BlogBlock
                 title="Integrating AI for Enhanced Workflows at Alan"
                 content="Discover how Alan revolutionizes healthcare and enhances workflows using AI. See how @code-help and Dust streamline developer tasks."
                 href="https://blog.dust.tt/integrating-ai-workflows-alan/"
-                className="m-6 lg:m-4 xl:m-6"
               >
                 <img
                   src="https://blog.dust.tt/content/images/size/w2000/2024/03/cover-vincent.png"

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.152",
+  "version": "0.2.153",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

diff --git a/sparkle/src/components/Button.tsx b/sparkle/src/components/Button.tsx
@@ -218,7 +218,9 @@ export function Button({
       {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
       {avatar && <Avatar size={size} visual={avatar} isRounded />}
       {labelVisible ? (
-        <div className={finalContainerClasses}>{label}</div>
+        <div className={classNames("truncate", finalContainerClasses)}>
+          {label}
+        </div>
       ) : null}
       {type === "menu" && (
         <Icon