Skip to content

Commit af3f043

Browse files
committed
feat: kelly lead
1 parent f27296b commit af3f043

29 files changed

+669
-46
lines changed

components/Callout/Callout.module.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
@use "styles/variables" as *;
77

88
.wrapper {
9-
background: $support-info;
109
}
1110

1211
.grid {
@@ -28,3 +27,10 @@
2827
@include type-style("heading-04");
2928
font-weight: 300;
3029
}
30+
31+
.right a {
32+
display: block;
33+
margin-top: 2rem;
34+
text-decoration: underline;
35+
@include type-style("heading-03");
36+
}

components/Callout/Callout.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
import { Grid, Column } from "@carbon/react";
1+
import { Grid, Column } from "components/Grid";
22
import { ReactNode } from "react";
33
import styles from "./Callout.module.scss";
44

55
type Props = {
66
heading: string;
77
children: ReactNode;
8+
style?: any;
89
};
910

10-
const Callout = ({ heading, children }: Props) => {
11+
const Callout = ({ heading, children, ...rest }: Props) => {
1112
return (
12-
<div className={styles.wrapper}>
13-
<Grid className={styles.grid}>
13+
<div {...rest}>
14+
<Grid className={styles.wrapper}>
1415
<Column sm={0} lg={1}></Column>
15-
<Column className={styles.column} sm={4} md={2} lg={5}>
16+
<Column sm={4} md={2} lg={5}>
1617
<span className={styles.left}>{heading}</span>
1718
</Column>
18-
<Column className={styles.column} sm={4} md={6} lg={9}>
19+
<Column sm={4} md={6} lg={9}>
1920
<p className={styles.right}>{children}</p>
2021
</Column>
2122
<Column sm={0} lg={1}></Column>

components/Grid/Grid.module.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.grid {
2+
max-width: 1152px;
3+
margin: 0;
4+
padding: 2rem 0;
5+
}
6+
7+
.column {
8+
padding: 1rem;
9+
--cds-grid-gutter: 0;
10+
}

components/Grid/Grid.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import styles from "./Grid.module.scss";
2+
import { Grid as CarbonGrid, Column as CarbonColumn } from "@carbon/react";
3+
import cx from "classnames";
4+
5+
export const Grid = (props: any) => {
6+
const { className, ...otherProps } = props;
7+
return <CarbonGrid className={cx(styles.grid, className)} {...otherProps} />;
8+
};
9+
10+
export const Column = (props: any) => {
11+
const { className, ...otherProps } = props;
12+
return (
13+
<CarbonColumn className={cx(styles.column, className)} {...otherProps} />
14+
);
15+
};
16+
17+
export default Grid;

components/Grid/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./Grid";
2+
export { default } from "./Grid";

components/Hero/Hero.module.scss

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
width: 100%;
1111
height: 45vh; /* if you don't want it to take up the full screen, reduce this number */
1212
overflow: hidden;
13+
isolation: isolate;
1314
}
1415

1516
.image {
@@ -38,18 +39,66 @@
3839
);
3940
}
4041

41-
.card {
42-
position: relative;
42+
.grid {
43+
display: grid;
44+
text-align: left;
45+
height: 100%;
46+
width: 100%;
47+
z-index: 1;
48+
grid-template-columns: repeat(16, 1fr);
49+
}
50+
51+
.title {
52+
@include type-style("heading-05");
53+
padding: 2rem;
4354
background: $background;
44-
padding: 1rem;
55+
text-align: left;
56+
grid-column-start: 2;
57+
grid-column-end: 7;
58+
}
59+
60+
.cta {
61+
background: $background;
62+
grid-column-start: 7;
63+
grid-column-end: 16;
4564
display: flex;
4665
flex-direction: column;
47-
align-items: flex-start;
48-
aspect-ratio: 1 / 1;
49-
transition: background 0.2s ease;
66+
}
67+
68+
.pitch {
69+
@include type-style("heading-04");
70+
padding: 2rem 1rem;
71+
margin-bottom: 2rem;
72+
height: 50%;
73+
display: block;
74+
}
5075

76+
.actions {
77+
height: 50%;
78+
display: flex;
79+
flex-direction: row;
80+
width: 100%;
81+
}
82+
83+
.action {
84+
border: none;
85+
color: currentColor;
86+
position: relative;
87+
display: flex;
88+
flex-direction: column;
89+
padding: 1rem;
90+
width: 50%;
91+
background: $layer-01;
5192
&:hover {
5293
background: $layer-hover-01;
94+
cursor: pointer;
95+
}
96+
}
97+
98+
.primary {
99+
background: $blue-60;
100+
&:hover {
101+
background: $blue-50;
53102
}
54103
}
55104

@@ -60,8 +109,8 @@
60109
}
61110

62111
.label {
63-
@include type-style("heading-01");
64-
font-weight: 300;
112+
@include type-style("body-long-01");
113+
margin-bottom: 3rem;
65114
}
66115

67116
.heading {

components/Hero/Hero.tsx

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,69 @@
11
import styles from "./Hero.module.scss";
22
import Image from "next/future/image";
3-
import heroImage from "images/hero.webp";
4-
import { ArrowRight } from "@carbon/icons-react";
5-
import { Grid, Column } from "@carbon/react";
3+
import { ArrowRight, Video } from "@carbon/icons-react";
4+
import { Grid, Column } from "components/Grid";
5+
import { StaticImageData } from "next/image";
6+
import cx from "classnames";
67

7-
const Hero = ({ heading, action }: { heading: string; action: string }) => {
8+
const Hero = ({
9+
src,
10+
setLightboxOpen,
11+
}: {
12+
setLightboxOpen: (open: boolean) => void;
13+
src: StaticImageData;
14+
}) => {
815
return (
916
<section className={styles.container}>
1017
<div className={styles.imageWrapper}>
1118
<Image
1219
className={styles.image}
1320
placeholder="blur"
1421
priority
15-
src={heroImage}
22+
src={src}
1623
alt="Digital tunnel made of tiny points of light"
1724
/>
1825
</div>
19-
<Grid className={styles.grid} fullWidth condensed>
20-
<Column sm={2} md={5} lg={12}></Column>
21-
<Column
22-
as="a"
23-
href="google.com"
24-
sm={2}
25-
md={3}
26-
lg={4}
27-
className={styles.card}
28-
>
29-
<span className={styles.label}>{action}</span>
30-
<span className={styles.heading}>{heading}</span>
31-
<ArrowRight width="24" height="24" className={styles.arrow} />
32-
</Column>
33-
</Grid>
26+
<div className={styles.grid}>
27+
<div className={styles.title}>CodeFlare</div>
28+
<div className={styles.cta}>
29+
<p className={styles.pitch}>
30+
Seamlessly set up, run, and scale your AI
31+
<br />
32+
and ML from your laptop to the cloud.
33+
</p>
34+
<div className={styles.actions}>
35+
<button
36+
onClick={() => setLightboxOpen(true)}
37+
className={styles.action}
38+
>
39+
<span className={styles.heading}>Watch demo</span>
40+
<span className={styles.label}>Learn more</span>
41+
<Video width="24" height="24" className={styles.arrow} />
42+
</button>
43+
<a className={cx(styles.action, styles.primary)}>
44+
<span className={styles.heading}>Try Codeflare</span>
45+
<span className={styles.label}>Sign of for the beta</span>
46+
<ArrowRight width="24" height="24" className={styles.arrow} />
47+
</a>
48+
</div>
49+
</div>
50+
</div>
3451
</section>
3552
);
3653
};
3754

3855
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/Intro/Intro.module.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@use "styles/variables" as *;
2+
3+
.con {
4+
background: $background;
5+
}
6+
.wrapper * {
7+
@include type-style("heading-04");
8+
margin-bottom: 1em;
9+
font-weight: 300;
10+
}
11+
12+
.wrapper {
13+
padding-bottom: 2em;
14+
}

components/Intro/Intro.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Grid, Column } from "components/Grid";
2+
import { ReactNode } from "react";
3+
import styles from "./Intro.module.scss";
4+
5+
type Props = {
6+
children: ReactNode;
7+
};
8+
9+
const Intro = ({ children }: Props) => {
10+
return (
11+
<div className={styles.con}>
12+
<Grid className={styles.wrapper}>
13+
<Column sm={0} md={1}></Column>
14+
<Column sm={4} lg={8}>
15+
{children}
16+
</Column>
17+
<Column sm={0} md={1}></Column>
18+
</Grid>
19+
</div>
20+
);
21+
};
22+
23+
export default Intro;

components/Intro/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./Intro";
2+
export { default } from "./Intro";

0 commit comments

Comments
 (0)