Skip to content

Commit 0d9a02c

Browse files
vpiconevpicone
committed
feat: 2col
1 parent 213777b commit 0d9a02c

File tree

12 files changed

+143
-77
lines changed

12 files changed

+143
-77
lines changed

‎components/Grid/Grid.module.scss

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
@use "styles/variables" as *;
12
.grid {
23
max-width: 1152px;
3-
margin: 0;
4-
padding: 2rem 0;
5-
}
6-
7-
.column {
4+
width: 100%;
5+
margin: 0 auto;
6+
display: grid;
7+
grid-template-columns: repeat(16, 1fr);
8+
text-align: left;
89
padding: 1rem;
9-
--cds-grid-gutter: 0;
10+
background: $background;
1011
}

‎components/Grid/Grid.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import styles from "./Grid.module.scss";
2-
import { Grid as CarbonGrid, Column as CarbonColumn } from "@carbon/react";
32
import cx from "classnames";
43

54
export const Grid = (props: any) => {
65
const { className, ...otherProps } = props;
7-
return <CarbonGrid className={cx(styles.grid, className)} {...otherProps} />;
6+
return <div className={cx(styles.grid, className)} {...otherProps} />;
87
};
98

109
export const Column = (props: any) => {
1110
const { className, ...otherProps } = props;
12-
return (
13-
<CarbonColumn className={cx(styles.column, className)} {...otherProps} />
14-
);
11+
return <div className={cx(styles.column, className)} {...otherProps} />;
1512
};
1613

1714
export default Grid;

‎components/Hero/Hero.module.scss

+9-12
Original file line numberDiff line numberDiff line change
@@ -39,42 +39,38 @@
3939
);
4040
}
4141

42-
.grid {
43-
display: grid;
44-
text-align: left;
45-
height: 100%;
46-
width: 100%;
42+
.grid.grid {
4743
z-index: 1;
48-
grid-template-columns: repeat(16, 1fr);
44+
padding-bottom: 0;
45+
padding-right: 0;
4946
}
5047

5148
.title {
5249
@include type-style("heading-05");
53-
padding: 2rem;
50+
padding: 1rem;
5451
background: $background;
5552
text-align: left;
56-
grid-column-start: 2;
53+
grid-column-start: 1;
5754
grid-column-end: 7;
5855
}
5956

6057
.cta {
6158
background: $background;
6259
grid-column-start: 7;
63-
grid-column-end: 16;
60+
grid-column-end: 17;
6461
display: flex;
6562
flex-direction: column;
6663
}
6764

6865
.pitch {
6966
@include type-style("heading-04");
70-
padding: 2rem 1rem;
71-
margin-bottom: 2rem;
67+
padding: 1rem;
68+
margin-bottom: 3rem;
7269
height: 50%;
7370
display: block;
7471
}
7572

7673
.actions {
77-
height: 50%;
7874
display: flex;
7975
flex-direction: row;
8076
width: 100%;
@@ -88,6 +84,7 @@
8884
flex-direction: column;
8985
padding: 1rem;
9086
width: 50%;
87+
height: 100%;
9188
background: $layer-01;
9289
&:hover {
9390
background: $layer-hover-01;

‎components/Hero/Hero.tsx

+3-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styles from "./Hero.module.scss";
22
import Image from "next/future/image";
33
import { ArrowRight, Video } from "@carbon/icons-react";
4-
import { Grid, Column } from "components/Grid";
4+
import { Grid } from "components/Grid";
55
import { StaticImageData } from "next/image";
66
import cx from "classnames";
77

@@ -23,7 +23,7 @@ const Hero = ({
2323
alt="Digital tunnel made of tiny points of light"
2424
/>
2525
</div>
26-
<div className={styles.grid}>
26+
<Grid className={styles.grid}>
2727
<div className={styles.title}>CodeFlare</div>
2828
<div className={styles.cta}>
2929
<p className={styles.pitch}>
@@ -47,23 +47,9 @@ const Hero = ({
4747
</a>
4848
</div>
4949
</div>
50-
</div>
50+
</Grid>
5151
</section>
5252
);
5353
};
5454

5555
export default Hero;
56-
57-
// <Grid className={styles.grid} fullWidth condensed>
58-
// <Column sm={0} md={1}></Column>
59-
// <Column className={styles.title} sm={2} md={2} lg={5}>
60-
// <h1>CodeFlare</h1>
61-
// </Column>
62-
// <Column className={styles.cta} sm={2} md={2} lg={9}>
63-
// <span>
64-
// Seamlessly set up, run, and scale your AI and ML from your laptop to
65-
// the cloud.
66-
// </span>
67-
// </Column>
68-
// <Column sm={0} md={1}></Column>
69-
// </Grid>

‎components/TwoColumn/TwoColumn.module.scss

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@use "styles/variables" as *;
2+
3+
.wrapper {
4+
margin: 6rem auto;
5+
}
6+
7+
.left {
8+
padding: 1rem;
9+
grid-column-start: 1;
10+
grid-column-end: 9;
11+
}
12+
13+
.heading {
14+
@include type-style("heading-04");
15+
width: 90%;
16+
margin-bottom: 2rem;
17+
}
18+
19+
.image {
20+
grid-column-start: 10;
21+
grid-column-end: 17;
22+
object-fit: cover;
23+
width: 100%;
24+
}
25+
26+
.listItem {
27+
padding: 0;
28+
display: flex;
29+
margin-bottom: 2rem;
30+
align-items: center;
31+
}
32+
33+
.listItem p {
34+
@include type-style("heading-03");
35+
}
36+
37+
.iconWrapper {
38+
min-width: 48px;
39+
height: 48px;
40+
margin-right: 2rem;
41+
}
42+
.icon {
43+
width: 100%;
44+
height: 100%;
45+
fill: $icon-secondary;
46+
}

‎components/TwoColumn/TwoColumn.tsx

+45-19
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,53 @@
1+
import { ReactNode } from "react";
2+
import { Innovate, Teammates, Path } from "@carbon/pictograms-react";
3+
14
import styles from "./TwoColumn.module.scss";
2-
import { Grid, Column } from "components/Grid";
5+
import { Grid } from "components/Grid";
6+
import Image from "next/future/image";
7+
import screen from "media/screen.png";
8+
9+
const ListItem = ({
10+
children,
11+
icon,
12+
}: {
13+
icon: ReactNode;
14+
children: ReactNode;
15+
}) => {
16+
return (
17+
<li className={styles.listItem}>
18+
<div className={styles.iconWrapper}>{icon}</div>
19+
<p>{children}</p>
20+
</li>
21+
);
22+
};
323

424
const TwoColumn = () => {
525
return (
6-
<Grid>
7-
<Column sm={4} lg={8}>
8-
<ul>
9-
<li>
10-
Let us run Ray for you, hosted on cloud infrastructure fully managed
11-
by us, so that you can focus on what you do best — ship great
12-
products.
13-
</li>
14-
<li>
15-
Anyscale automatically scales your infrastructure and clusters up or
16-
down to meet the dynamic demands of your workloads.
17-
</li>
18-
<li>
19-
Keep tabs on the costs tied to jobs, clusters, and users in a single
20-
intuitive UI.
21-
</li>
26+
<Grid className={styles.wrapper}>
27+
<div className={styles.left}>
28+
<p className={styles.heading}>
29+
Empower your AI and ML teams to innovate where it matters. We‘ll
30+
handle the rest.
31+
</p>
32+
<ul className={styles.list}>
33+
<ListItem icon={<Path className={styles.icon} />}>
34+
Minimize the effort and skills needed to scale your AI and ML
35+
</ListItem>
36+
<ListItem icon={<Innovate className={styles.icon} />}>
37+
Access the latest innovations and experience in running data science
38+
platforms
39+
</ListItem>
40+
<ListItem icon={<Teammates className={styles.icon} />}>
41+
Run your workloads anywhere.
42+
</ListItem>
2243
</ul>
23-
</Column>
24-
<Column sm={4} lg={8}></Column>
44+
</div>
45+
<Image
46+
className={styles.image}
47+
src={screen}
48+
placeholder="blur"
49+
alt="Screen shot of Ray dashboard"
50+
/>
2551
</Grid>
2652
);
2753
};

‎media/screen.png

45.4 KB
Loading

‎package-lock.json

+25
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@carbon/icons-react": "^11.6.0",
13+
"@carbon/pictograms-react": "^11.28.0",
1314
"@carbon/react": "^1.8.0",
1415
"@carbon/styles": "^1.8.0",
1516
"classnames": "^2.3.1",

‎pages/index.tsx

+2-16
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Hero from "components/Hero";
55
import Callout from "components/Callout";
66
import Intro from "components/Intro";
77
import Lightbox from "components/Lightbox";
8+
import TwoColumn from "components/TwoColumn";
89

910
import heroImage from "media/hero.webp";
1011
import videoPoster from "media/poster.jpg";
@@ -31,22 +32,7 @@ const Home: NextPage = () => {
3132
<source src={videoSrc} type="video/mp4" />
3233
</video>
3334
</Lightbox>
34-
<Intro>
35-
<p>
36-
Seamlessly set up, run, and scale your AI and ML workflows, then
37-
deploy anywhere using the power of Red Hat OpenShift.
38-
</p>
39-
<span>↓</span>
40-
</Intro>
41-
<Callout
42-
style={{ background: "#0043ce" }}
43-
heading="CodeFlare ++ OpenShift"
44-
>
45-
Leveraging Red Hat OpenShift platform you can run your data science
46-
workloads anywhere
47-
<br />
48-
<a href="research.ibm.com">Request a demo →</a>
49-
</Callout>
35+
<TwoColumn />
5036
<Callout heading="Case study">
5137
A major semi-conductor manufacterer applied the framework to analyze and
5238
optimize approximately <strong>100,000 pipelines</strong> for training

‎styles/globals.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ html,
22
body {
33
padding: 0;
44
margin: 0;
5-
background: #262626;
6-
color: rgb(244, 244, 244);
5+
background: #161616;
6+
color:#f4f4f4;
77
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, Segoe UI,
88
Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
99
sans-serif;

‎types.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
declare module "@carbon/react";
22
declare module "@carbon/icons-react";
3+
declare module "@carbon/pictograms-react";
34
declare module "*.mp4";

0 commit comments

Comments
 (0)