Skip to content

Commit

Permalink
fixing alignement on landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@pinotalexandre
pinotalexandre committed Dec 17, 2024
1 parent 6bb3f7b commit 0314520
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 318 deletions.
6 changes: 3 additions & 3 deletions front/components/home/ContentBlocks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const ImgBlock: React.FC<ImgBlockProps> = ({
<div className="ml-[10%] pr-[20%] md:m-0 md:pr-[28%]">
{children ? children : null}
</div>
<div className="flex flex-col gap-2 lg:gap-4">
<div className="flex flex-col px-0 py-6">
<H3 className="text-white">{title}</H3>
{renderContent()}
</div>
Expand Down Expand Up @@ -274,8 +274,8 @@ export const CarousselContentBlock = ({
{description}
</P>
</div>
<div className="w-full text-center">
<Link href={href} shallow={true} className="block w-full">
<div className="w-full text-left">
<Link href={href} shallow={true} className="inline-block">
<Button
label={"Discover Dust for " + title}
variant="outline"
Expand Down
10 changes: 5 additions & 5 deletions front/components/home/ContentComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ export const Grid = ({
);

const hClasses = {
h1: "font-objektiv text-4xl font-bold tracking-tight md:text-5xl lg:text-5xl py-2",
h2: "font-objektiv text-3xl font-bold tracking-tight lg:text-4xl xl:text-5xl py-2",
h3: "font-objektiv text-xl font-bold tracking-tight lg:text-2xl xl:text-3xl py-1",
h4: "font-objektiv text-lg font-bold tracking-tight lg:text-xl xl:text-2xl",
h5: "font-objektiv text-lg font-bold tracking-tight lg:text-xl xl:text-xl",
h1: "font-objektiv text-4xl font-bold tracking-tight md:text-5xl lg:text-5xl py-2 text-left",
h2: "font-objektiv text-3xl font-bold tracking-tight lg:text-4xl xl:text-5xl py-2 text-left",
h3: "font-objektiv text-xl font-bold tracking-tight lg:text-2xl xl:text-3xl py-1 text-left",
h4: "font-objektiv text-lg font-bold tracking-tight lg:text-xl xl:text-2xl text-left",
h5: "font-objektiv text-lg font-bold tracking-tight lg:text-xl xl:text-xl text-left",
};

interface ContentProps {
Expand Down
54 changes: 24 additions & 30 deletions front/components/home/content/Product/BlogSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,40 +9,34 @@ import {
} from "@app/components/home/Carousel";
import { BlogBlock } from "@app/components/home/ContentBlocks";
import { Grid, H2, P } from "@app/components/home/ContentComponents";
import { classNames } from "@app/lib/utils";

export function BlogSection() {
return (
<Grid gap="gap-8">
<div
className={classNames(
"flex flex-col gap-8",
"col-span-12",
"lg:col-span-10 lg:col-start-2",
"xl:col-span-9 xl:col-start-2",
"2xl:col-start-3"
)}
>
<H2 from="from-green-200" to="to-emerald-400">
Dust in Action:
<br />
Customer Stories
</H2>
<P size="lg">
Discover how our customers augment their&nbsp;workflows
with&nbsp;Dust.
</P>
</div>
<div className="col-span-12 flex flex-col items-center gap-4">
<div className="col-span-12">
<Carousel className="w-full">
<div className="flex w-full flex-row gap-4 md:justify-center">
<CarouselPrevious />
<CarouselNext />
<div className="mb-6 flex items-end justify-between">
<div>
<H2 from="from-green-200" to="to-emerald-400">
Dust in Action:
<br />
Customer Stories
</H2>
<P size="lg">
Discover how our customers augment their&nbsp;workflows
with&nbsp;Dust.
</P>
</div>
<div className="flex gap-4">
<CarouselPrevious />
<CarouselNext />
</div>
</div>

<CarouselContent>
<CarouselItem className="basis-full md:basis-1/2 md:px-6 lg:basis-1/3">
<CarouselItem className="basis-full md:basis-1/2 lg:basis-1/3">
<BlogBlock
title="Navigating Growth and Innovation with November Five’s Dario Prskalo"
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/"
>
Expand All @@ -52,10 +46,10 @@ export function BlogSection() {
/>
</BlogBlock>
</CarouselItem>
<CarouselItem className="basis-full px-6 md:basis-1/2 lg:basis-1/3">
<CarouselItem className="basis-full 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."
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/"
>
<img
Expand All @@ -64,7 +58,7 @@ export function BlogSection() {
/>
</BlogBlock>
</CarouselItem>
<CarouselItem className="basis-full px-6 md:basis-1/2 lg:basis-1/3">
<CarouselItem className="basis-full 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."
Expand Down
35 changes: 15 additions & 20 deletions front/components/home/content/Product/FutureSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,26 @@ export function FutureSection() {
return (
<>
<Grid>
<div
className={classNames(
"col-span-12 flex flex-col gap-8",
"lg:col-span-10 lg:col-start-2",
"xl:col-span-8 xl:col-start-2",
"2xl:col-start-3"
)}
>
<H2 from="from-sky-200" to="to-blue-400">
Future-Proof
<br />
your AI&nbsp;Strategy
</H2>
<P size="lg">
Integrates with your internal&nbsp;data. <br />
Automatically updated with the&nbsp;latest&nbsp;models
across&nbsp;all&nbsp;major&nbsp;AI&nbsp;providers.
</P>
<div className="col-span-12 mb-6">
<div>
<H2 from="from-sky-200" to="to-blue-400">
Future-Proof
<br />
your AI&nbsp;Strategy
</H2>
<P size="lg">
Integrates with your internal&nbsp;data.
<br />
Automatically updated with the&nbsp;latest&nbsp;models
across&nbsp;all&nbsp;major&nbsp;AI&nbsp;providers.
</P>
</div>
</div>
<div
className={classNames(
"col-span-12 pt-8",
"grid grid-cols-1 gap-x-8 gap-y-20",
"md:grid-cols-3 md:gap-y-16",
"2xl:col-span-10 2xl:col-start-2"
"md:grid-cols-3 md:gap-y-16"
)}
>
<ImgBlock
Expand Down
69 changes: 8 additions & 61 deletions front/components/home/content/Product/IntroSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,7 @@ import {
import Link from "next/link";
import React, { useEffect, useState } from "react";

import { Grid, H1, P, Strong } from "@app/components/home/ContentComponents";
import { classNames } from "@app/lib/utils";

import TrustedBy from "../../TrustedBy";
import { H1, P } from "@app/components/home/ContentComponents";

const ResponsiveIframe = () => {
return (
Expand Down Expand Up @@ -111,23 +108,13 @@ export function IntroSection() {
);

return (
<>
<Grid
className="pt-[6vh] sm:pt-[8vh] xl:pt-[12vh] 2xl:pt-[18vh]"
verticalAlign="center"
>
<div
className={classNames(
"col-span-12",
"flex flex-col gap-8",
"md:col-span-6",
"2xl:col-span-5 2xl:col-start-2"
)}
>
<div className="w-full pt-[6vh] sm:pt-[8vh] xl:pt-[12vh] 2xl:pt-[18vh]">
<div className="flex flex-col gap-16 md:flex-row md:gap-32">
<div className="flex flex-col gap-8">
<H1 from="from-red-200" to="to-red-400">
Build custom AI&nbsp;assistants to speed up your work
</H1>
{<div className="w-full md:hidden">{MainVisualImage()}</div>}
<div className="w-full md:hidden">{MainVisualImage()}</div>
<P size="lg" className="text-slate-50">
Amplify your team's performance with personalized assistants
connected to your proprietary knowledge and data.
Expand All @@ -143,48 +130,8 @@ export function IntroSection() {
</Link>
</div>
</div>
<div
className={classNames(
"col-span-12 hidden",
"md:col-span-6 md:block",
"2xl:col-span-5 2xl:col-start-8"
)}
>
{MainVisualImage()}
</div>

<TrustedBy />

<div
className={classNames(
"col-span-12",
"grid grid-cols-1 gap-12 px-6",
"sm:grid-cols-2 sm:gap-6 sm:pr-0",
"lg:col-span-10 lg:col-start-2",
"xl:col-span-12 xl:grid-cols-4"
)}
>
<P size="md" dotCSS="text-amber-300" shape="triangle">
Connect <Strong>your team's data</Strong> and{" "}
<Strong>break&nbsp;down knowledge silos</Strong> with
context&#8209;aware&nbsp;assistants.
</P>
<P size="md" dotCSS="text-red-400" shape="rectangle">
Empower your teams with&nbsp;
<Strong>assistants tailored to&nbsp;their needs</Strong>{" "}
on&nbsp;concrete use&nbsp;cases.
</P>
<P size="md" dotCSS="text-sky-400" shape="circle">
Remain model agnostic: effortlessly{" "}
<Strong>switch to the most advanced AI&nbsp;models</Strong> without
touching your&nbsp;workflows.
</P>
<P size="md" dotCSS="text-emerald-400" shape="hexagon">
<Strong>Control data access granularly</Strong> with a{" "}
<Strong>safe and privacy-obsessed</Strong> application.
</P>
</div>
</Grid>
</>
<div className="hidden md:block">{MainVisualImage()}</div>
</div>
</div>
);
}
Loading

0 comments on commit 0314520

Please sign in to comment.