Skip to content

Commit e4f4504

Browse files
frontsideairfrontsideair
authored
Remaining small fixes (#281)
1 parent d42f85b commit e4f4504

File tree

6 files changed

+106
-69
lines changed

6 files changed

+106
-69
lines changed

‎website/src/components/Header/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { cva } from "class-variance-authority";
1616
const MD_BREAKPOINT = 640;
1717

1818
const navStyles = cva(
19-
"fixed w-full z-20 top-0 start-0 bg-[#F7F8F8]/1 border-b border-[#F7F8F8]/8 backdrop-blur-[20px] drop-shadow-[0px_1px_2px_rgba(0_0_0/75%),0px_1px_12px_rgba(0_0_0/75%)] overflow-y-auto",
19+
"fixed w-full z-20 top-0 start-0 bg-black/20 border-b border-[#F7F8F8]/8 backdrop-blur-[20px] overflow-y-auto",
2020
{
2121
variants: {
2222
isOpen: {

‎website/src/components/HeaderProductsSubmenu/HeaderProductsSubmenu.tsx

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
11
import Link from "@docusaurus/Link";
22
import { HeaderMenuItem } from "../HeaderMenuItem/HeaderMenuItem";
3+
import { cva } from "class-variance-authority";
4+
5+
const wrapper = cva(
6+
"flex flex-col md:flex-row md:max-w-4xl mx-auto gap-6 md:gap-8 lg:gap-10 px-1 md:px-4 lg:pl-0 products-submenu overflow-x-hidden",
7+
);
8+
9+
const component = cva("flex flex-col gap-4");
10+
11+
const titleContainer = cva(
12+
"flex flex-col gap-1 md:gap-4 border-b border-[#F7F8F8]/8 pb-4",
13+
);
14+
15+
const title = cva("text-white");
16+
17+
const subtitle = cva("text-[#F7F8F8]/60 m-0");
18+
19+
const feature = cva("flex flex-col gap-3");
20+
21+
const featureTitle = cva("text-[#F7F8F8]/60 text-sm");
22+
23+
const columns = cva("flex flex-row gap-6 xxs:gap-8");
24+
25+
const column = cva("min-w-30 xxs:min-w-40 flex flex-col md:gap-1");
326

427
export const HeaderProductsSubmenu = () => {
528
return (
6-
<div className="flex flex-col md:flex-row md:max-w-4xl mx-auto gap-6 md:gap-8 lg:gap-10 px-1 md:px-4 lg:pl-0 products-submenu">
7-
<div className="flex flex-col gap-4">
8-
<div className="flex flex-col gap-1 md:gap-4 border-b border-[#F7F8F8]/8 pb-4">
29+
<div className={wrapper()}>
30+
<div className={component()}>
31+
<div className={titleContainer()}>
932
<Link to="/genai">
10-
<h3 className="text-white">Gen AI</h3>
11-
<p className="text-[#F7F8F8]/60 m-0">
12-
Ship high-quality GenAI, fast
13-
</p>
33+
<h3 className={title()}>Gen AI</h3>
34+
<p className={subtitle()}>Ship high-quality GenAI, fast</p>
1435
</Link>
1536
</div>
16-
<div className="flex flex-col gap-3">
17-
<span className="text-[#F7F8F8]/60 text-sm">Features</span>
18-
<div className="flex flex-row gap-8">
19-
<div className="min-w-40 flex flex-col md:gap-1">
37+
<div className={feature()}>
38+
<span className={featureTitle()}>Features</span>
39+
<div className={columns()}>
40+
<div className={column()}>
2041
<HeaderMenuItem
2142
href="/genai/observability"
2243
label="Observability"
@@ -27,7 +48,7 @@ export const HeaderProductsSubmenu = () => {
2748
label="Prompt Registry"
2849
/>
2950
</div>
30-
<div className="min-w-40 flex flex-col md:gap-1">
51+
<div className={column()}>
3152
<HeaderMenuItem
3253
href="/genai/app-versioning"
3354
label="App versioning"
@@ -37,17 +58,17 @@ export const HeaderProductsSubmenu = () => {
3758
</div>
3859
</div>
3960
</div>
40-
<div className="flex flex-col gap-4">
41-
<div className="flex flex-col gap-1 md:gap-4 border-b border-[#F7F8F8]/8 pb-4">
61+
<div className={component()}>
62+
<div className={titleContainer()}>
4263
<Link to="/classical-ml">
43-
<h3 className="text-white">Model training</h3>
44-
<p className="text-[#F7F8F8]/60">Mastering the ML lifecycle</p>
64+
<h3 className={title()}>Model training</h3>
65+
<p className={subtitle()}>Mastering the ML lifecycle</p>
4566
</Link>
4667
</div>
47-
<div className="flex flex-col gap-3">
48-
<span className="text-[#F7F8F8]/60 text-sm">Features</span>
49-
<div className="flex flex-row gap-8">
50-
<div className="min-w-40 flex flex-col md:gap-1">
68+
<div className={feature()}>
69+
<span className={featureTitle()}>Features</span>
70+
<div className={columns()}>
71+
<div className={column()}>
5172
<HeaderMenuItem
5273
href="/classical-ml/experiment-tracking"
5374
label="Experiment tracking"
@@ -57,7 +78,7 @@ export const HeaderProductsSubmenu = () => {
5778
label="Model evaluation"
5879
/>
5980
</div>
60-
<div className="min-w-40 flex flex-col md:gap-1">
81+
<div className={column()}>
6182
<HeaderMenuItem
6283
href="/classical-ml/models"
6384
label="MLflow models"

‎website/src/components/Layout/AboveTheFold.tsx

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,27 @@
11
import { PropsWithChildren } from "react";
22
import { Heading, Body, SectionLabel, GetStartedButton } from "../index";
3+
import { cva, VariantProps } from "class-variance-authority";
34

4-
type Props = PropsWithChildren<{
5-
title: string;
6-
body: string | string[];
7-
sectionLabel?: string;
8-
hasGetStartedButton?: true | string;
9-
bodyColor?: "default" | "white";
10-
}>;
5+
type Props = VariantProps<typeof innerWrapper> &
6+
PropsWithChildren<{
7+
title: string;
8+
body: string | string[];
9+
sectionLabel?: string;
10+
hasGetStartedButton?: true | string;
11+
bodyColor?: "default" | "white";
12+
}>;
13+
14+
const innerWrapper = cva(
15+
"flex flex-col justify-center items-center flex-1 gap-6 w-full max-w-5xl mx-auto md:px-4",
16+
{
17+
variants: {
18+
minHeight: {
19+
small: "min-h-[350px]",
20+
default: "min-h-[550px]",
21+
},
22+
},
23+
},
24+
);
1125

1226
export function AboveTheFold({
1327
children,
@@ -16,11 +30,12 @@ export function AboveTheFold({
1630
sectionLabel,
1731
hasGetStartedButton,
1832
bodyColor,
33+
minHeight = "default",
1934
}: Props) {
2035
const bodyParts = Array.isArray(body) ? body : [body];
2136
return (
22-
<div className="flex flex-col min-h-[calc(100dvh-var(--spacing)*40)] gap-6">
23-
<div className="flex flex-col justify-center items-center flex-1 gap-6 w-full max-w-5xl mx-auto md:px-4">
37+
<div className="flex flex-col gap-6">
38+
<div className={innerWrapper({ minHeight })}>
2439
{sectionLabel && <SectionLabel label={sectionLabel} />}
2540
<div className="max-w-4xl mx-auto">
2641
<Heading level={1}>{title}</Heading>

‎website/src/components/Layout/Layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
77

88
type Props = PropsWithChildren;
99

10-
const wrapper = cva("flex flex-col gap-20 bg-no-repeat w-full py-20", {
10+
const wrapper = cva("flex flex-col gap-20 bg-no-repeat w-full py-32", {
1111
variants: {
1212
variant: {
1313
red: "",

‎website/src/css/custom.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
--font-weight-regular: 400;
2929

30-
--breakpoint-xxs: 4rem;
30+
--breakpoint-xxs: 24rem;
3131
--breakpoint-xs: 32rem;
3232
}
3333

‎website/src/pages/index.tsx

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,42 +19,43 @@ export default function Home(): JSX.Element {
1919
<AboveTheFold
2020
title="Deliver production-ready AI"
2121
body="The open source developer platform to build AI applications and models with confidence."
22-
/>
23-
24-
<GlossyCardContainer>
25-
<GlossyCard>
26-
<Card
27-
title="GenAI Apps & Agents"
28-
bodySize="m"
29-
body="Enhance your GenAI applications with end-to-end tracking, observability, and evaluations, all in one integrated platform."
30-
padded
31-
rounded={false}
32-
cta={{
33-
href: "/genai",
34-
text: "Learn more",
35-
prominent: true,
36-
}}
37-
image={<img src={GenAI} alt="" className="hidden md:block" />}
38-
/>
39-
</GlossyCard>
40-
<GlossyCard>
41-
<Card
42-
title="Model Training"
43-
bodySize="m"
44-
body="Streamline your machine learning workflows with end-to-end tracking, model management, and deployment."
45-
padded
46-
rounded={false}
47-
cta={{
48-
href: "/classical-ml",
49-
text: "Learn more",
50-
prominent: true,
51-
}}
52-
image={
53-
<img src={ModelTraining} alt="" className="hidden md:block" />
54-
}
55-
/>
56-
</GlossyCard>
57-
</GlossyCardContainer>
22+
minHeight="small"
23+
>
24+
<GlossyCardContainer>
25+
<GlossyCard>
26+
<Card
27+
title="GenAI Apps & Agents"
28+
bodySize="m"
29+
body="Enhance your GenAI applications with end-to-end tracking, observability, and evaluations, all in one integrated platform."
30+
padded
31+
rounded={false}
32+
cta={{
33+
href: "/genai",
34+
text: "Learn more",
35+
prominent: true,
36+
}}
37+
image={<img src={GenAI} alt="" className="hidden md:block" />}
38+
/>
39+
</GlossyCard>
40+
<GlossyCard>
41+
<Card
42+
title="Model Training"
43+
bodySize="m"
44+
body="Streamline your machine learning workflows with end-to-end tracking, model management, and deployment."
45+
padded
46+
rounded={false}
47+
cta={{
48+
href: "/classical-ml",
49+
text: "Learn more",
50+
prominent: true,
51+
}}
52+
image={
53+
<img src={ModelTraining} alt="" className="hidden md:block" />
54+
}
55+
/>
56+
</GlossyCard>
57+
</GlossyCardContainer>
58+
</AboveTheFold>
5859

5960
<Customers />
6061
<EcosystemList />

0 commit comments

Comments
 (0)