Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing alignment landing page #9456

Merged
merged 2 commits into from
Dec 17, 2024
Merged

Fixing alignment landing page #9456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0314520
fixing alignement on landing page
pinotalexandre Dec 17, 2024
6f5020e
Fixing missing parts
pinotalexandre Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions front/components/home/ContentBlocks.tsx
View file
Open in desktop
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
Open in desktop
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
42 changes: 21 additions & 21 deletions front/components/home/TrustedBy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,59 +18,59 @@ export default function TrustedBy() {
</H3>
<div
className={classNames(
"mt-8 max-w-[400px] sm:w-full sm:max-w-none",
"grid grid-cols-2 gap-x-2",
"sm:grid-cols-3 sm:gap-x-16",
"md:grid-cols-4 md:gap-x-16"
"mt-8 w-full",
"grid grid-cols-2 place-items-center gap-1",
"sm:grid-cols-3 sm:gap-0",
"md:grid-cols-4 md:gap-0"
)}
>
<Image
alt="alan"
src="/static/landing/logos/alan.png"
width={600}
height={300}
width={250}
height={100}
/>
<Image
alt="watershed"
src="/static/landing/logos/watershed.png"
width={600}
height={300}
width={250}
height={100}
/>
<Image
alt="qonto"
src="/static/landing/logos/qonto.png"
width={600}
height={300}
width={250}
height={100}
/>
<Image
alt="pennylane"
src="/static/landing/logos/pennylane.png"
width={600}
height={300}
width={250}
height={100}
/>
<Image
alt="payfit"
src="/static/landing/logos/payfit.png"
width={600}
height={300}
width={250}
height={100}
/>
<Image
alt="watershed"
alt="malt"
src="/static/landing/logos/malt.png"
width={600}
height={300}
width={250}
height={100}
/>
<Image
alt="hivebrite"
src="/static/landing/logos/hivebrite.png"
width={600}
height={300}
width={250}
height={100}
/>
<Image
alt="blueground"
src="/static/landing/logos/blueground.png"
width={600}
height={300}
width={250}
height={100}
/>
</div>
</div>
Expand Down
54 changes: 24 additions & 30 deletions front/components/home/content/Product/BlogSection.tsx
View file
Open in desktop
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
Open in desktop
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
82 changes: 28 additions & 54 deletions front/components/home/content/Product/IntroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@ 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, Strong } from "@app/components/home/ContentComponents";
import TrustedBy from "@app/components/home/TrustedBy";

const ResponsiveIframe = () => {
return (
Expand Down Expand Up @@ -111,59 +109,35 @@ 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"
)}
>
<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>}
<P size="lg" className="text-slate-50">
Amplify your team's performance with personalized assistants
connected to your proprietary knowledge and data.
</P>
<div>
<Link href="/home/pricing" shallow={true}>
<Button
variant="highlight"
size="md"
label="Get started"
icon={RocketIcon}
/>
</Link>
<div className="w-full pt-[6vh] sm:pt-[8vh] xl:pt-[12vh] 2xl:pt-[18vh]">
<div className="flex flex-col gap-16">
<div className="flex flex-col items-center 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>
<P size="lg" className="text-slate-50">
Amplify your team's performance with personalized assistants
connected to your proprietary knowledge and data.
</P>
<div>
<Link href="/home/pricing" shallow={true}>
<Button
variant="highlight"
size="md"
label="Get started"
icon={RocketIcon}
/>
</Link>
</div>
</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 className="hidden md:block">{MainVisualImage()}</div>
</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"
)}
>
<div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg: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
Expand All @@ -184,7 +158,7 @@ export function IntroSection() {
<Strong>safe and privacy-obsessed</Strong> application.
</P>
</div>
</Grid>
</>
</div>
</div>
);
}
Loading
Loading