Skip to content

Commit 1390432

Browse files
krutilovkrutilov
authored
Merge pull request JetBrains#3777 from JetBrains/ktl-1116-nextjs-front-page-hero-section
ktl-1116 feat: hero section
2 parents 79ac124 + cac0c62 commit 1390432

File tree

8 files changed

+240
-15
lines changed

8 files changed

+240
-15
lines changed

‎blocks/front-page/hero/hero.module.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints/media.pcss";
2+
3+
.heroSection {
4+
background: #19191C;
5+
padding: 96px 0;
6+
overflow: hidden;
7+
8+
@media (--ktl-tm) {
9+
padding: 48px 0;
10+
}
11+
}
12+
13+
.heroText {
14+
margin: 0;
15+
@media (--ktl-tm) {
16+
text-align: center;
17+
margin-bottom: 24px;
18+
}
19+
}
20+
21+
.grid {
22+
display: flex;
23+
justify-content: space-between;
24+
align-items: center;
25+
26+
@media (--ktl-tm) {
27+
display: block;
28+
}
29+
}
30+
31+
.content {
32+
33+
}
34+
35+
.imageMobile {
36+
display: none;
37+
@media (--ktl-tm) {
38+
display: block;
39+
width: 100%;
40+
max-width: 260px;
41+
margin: 0 auto;
42+
}
43+
}
44+
45+
.imageDesktop {
46+
display: block;
47+
@media (--ktl-tm) {
48+
display: none;
49+
width: 100%;
50+
}
51+
}
52+
53+
.info {
54+
margin-top: 72px;
55+
display: flex;
56+
57+
@media (--ktl-tm) {
58+
display: block;
59+
text-align: center;
60+
margin-top: 24px;
61+
}
62+
}
63+
64+
.developer {
65+
display: flex;
66+
align-items: center;
67+
margin-left: 24px;
68+
padding-left: 24px;
69+
border-left: 1px solid rgba(255, 255, 255, 0.20);
70+
71+
@media (--ktl-tm) {
72+
box-sizing: border-box;
73+
justify-content: center;
74+
width: 100%;
75+
border: 0;
76+
border-top: 1px solid rgba(255, 255, 255, 0.20);
77+
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
78+
padding: 24px 0;
79+
margin-left: 0;
80+
margin-top: 72px;
81+
}
82+
}
83+
84+
.developerLogo {
85+
margin-right: 12px;
86+
height: 52px;
87+
width: 52px;
88+
}

‎blocks/front-page/hero/hero.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { FC, ReactNode } from 'react';
2+
import Button from '@rescui/button';
3+
import cn from 'classnames';
4+
5+
import { useTextStyles, createTextCn } from '@rescui/typography';
6+
import { ThemeProvider } from '@rescui/ui-contexts';
7+
8+
import '@jetbrains/kotlin-web-site-ui/out/components/layout';
9+
10+
import styles from './hero.module.css';
11+
12+
import JBLogo from '../../../assets/jetbrains-logo.svg';
13+
import HeroImg from './images/hero-cover.png';
14+
import HeroImg2x from './images/[email protected]';
15+
16+
interface Props {
17+
children: ReactNode;
18+
}
19+
20+
export const HeroSection: FC<Props> = ({ children }) => {
21+
const textCn = useTextStyles();
22+
const darkTextCn = createTextCn('dark');
23+
24+
return (
25+
<ThemeProvider theme={'dark'}>
26+
<section className={styles.heroSection}>
27+
<div className={cn('ktl-layout', 'ktl-layout--center')}>
28+
<div className={styles.grid}>
29+
<div className={styles.content}>
30+
<h1 className={cn(darkTextCn('rs-hero'), styles.heroText)}>{children}</h1>
31+
32+
<img
33+
className={styles.imageMobile}
34+
src={HeroImg.src}
35+
srcSet={`${HeroImg2x.src} 2x`}
36+
alt="kotlin"
37+
/>
38+
39+
<div className={styles.info}>
40+
<Button size={'l'} href="/docs/getting-started.html">
41+
Get Started
42+
</Button>
43+
<div className={styles.developer}>
44+
<img src={JBLogo.src} alt="jetbrains logo" className={styles.developerLogo} />r{' '}
45+
<div className={darkTextCn('rs-text-3', { hardness: 'hard' })}>
46+
Kotlin, developed by&nbsp;
47+
<a
48+
href="https://www.jetbrains.com/"
49+
className={darkTextCn('rs-link', { hardness: 'hard' })}
50+
target={'_blank'}
51+
rel={'noreferrer noopener'}
52+
>
53+
JetBrains
54+
</a>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<img
61+
className={styles.imageDesktop}
62+
src={HeroImg.src}
63+
srcSet={`${HeroImg2x.src} 2x`}
64+
alt="kotlin"
65+
/>
66+
</div>
67+
</div>
68+
</section>
69+
</ThemeProvider>
70+
);
71+
};

‎blocks/front-page/hero/images/hero-cover.png

69.9 KB
Loading

‎blocks/front-page/hero/images/[email protected]

248 KB
Loading

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@
9090
"next-global-css": "^1.3.1",
9191
"next-optimized-images": "3.0.0-canary.10",
9292
"next-transpile-modules": "^10.0.1",
93+
"postcss-custom-media": "10.0.0",
94+
"postcss-import": "15.1.0",
9395
"prettier": "2.6.2",
9496
"start-server-and-test": "1.14.0",
9597
"typescript": "4.6.3",

‎pages/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,19 @@ import React from 'react';
22
import GlobalHeader from '@jetbrains/kotlin-web-site-ui/out/components/header';
33
import searchConfig from '../search-config.json';
44

5+
import { HeroSection } from '../blocks/front-page/hero/hero';
6+
57
function Index() {
68
return (
79
<>
810
<GlobalHeader productWebUrl={''} hasSearch={true} searchConfig={searchConfig} darkHeader />
11+
<HeroSection>
12+
<>
13+
Concise.
14+
<br /> Multiplatform.
15+
<br /> Fun.
16+
</>
17+
</HeroSection>
918
</>
1019
);
1120
}

‎postcss.config.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
module.exports = {
2-
plugins: [
3-
'autoprefixer',
4-
'postcss-custom-properties'
5-
]
6-
}
2+
plugins: {
3+
autoprefixer: {},
4+
'postcss-custom-properties': {},
5+
'postcss-import': {},
6+
'postcss-custom-media': {
7+
preserve: false,
8+
},
9+
},
10+
};

‎yarn.lock

+61-10
Original file line numberDiff line numberDiff line change
@@ -1327,6 +1327,26 @@
13271327
"@babel/helper-validator-identifier" "^7.22.5"
13281328
to-fast-properties "^2.0.0"
13291329

1330+
"@csstools/cascade-layer-name-parser@^1.0.3":
1331+
version "1.0.4"
1332+
resolved "https://registry.yarnpkg.com/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz#3ff490b84660dc0592b4315029f22908f3de0577"
1333+
integrity sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==
1334+
1335+
"@csstools/css-parser-algorithms@^2.3.0":
1336+
version "2.3.1"
1337+
resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz#ec4fc764ba45d2bb7ee2774667e056aa95003f3a"
1338+
integrity sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==
1339+
1340+
"@csstools/css-tokenizer@^2.1.1":
1341+
version "2.2.0"
1342+
resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz#9d70e6dcbe94e44c7400a2929928db35c4de32b5"
1343+
integrity sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==
1344+
1345+
"@csstools/media-query-list-parser@^2.1.2":
1346+
version "2.1.4"
1347+
resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz#0017f99945f6c16dd81a7aacf6821770933c3a5c"
1348+
integrity sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==
1349+
13301350
"@discoveryjs/json-ext@^0.5.0":
13311351
version "0.5.7"
13321352
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
@@ -6729,6 +6749,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
67296749
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
67306750
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
67316751

6752+
pify@^2.3.0:
6753+
version "2.3.0"
6754+
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
6755+
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
6756+
67326757
pify@^4.0.1:
67336758
version "4.0.1"
67346759
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
@@ -6772,6 +6797,16 @@ portfinder@^1.0.28:
67726797
debug "^3.2.7"
67736798
mkdirp "^0.5.6"
67746799

6800+
[email protected]:
6801+
version "10.0.0"
6802+
resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-10.0.0.tgz#299781f67d043de7d3eaa13923c26c586d9cd57a"
6803+
integrity sha512-NxDn7C6GJ7X8TsWOa8MbCdq9rLERRLcPfQSp856k1jzMreL8X9M6iWk35JjPRIb9IfRnVohmxAylDRx7n4Rv4g==
6804+
dependencies:
6805+
"@csstools/cascade-layer-name-parser" "^1.0.3"
6806+
"@csstools/css-parser-algorithms" "^2.3.0"
6807+
"@csstools/css-tokenizer" "^2.1.1"
6808+
"@csstools/media-query-list-parser" "^2.1.2"
6809+
67756810
[email protected]:
67766811
version "11.0.0"
67776812
resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-11.0.0.tgz#f98cd192cd8dfcd8afa3baa1ad5b5d91d01292f3"
@@ -6784,6 +6819,15 @@ [email protected]:
67846819
resolved "https://registry.yarnpkg.com/postcss-font-smoothing/-/postcss-font-smoothing-0.1.0.tgz#bb233ac15b83b88caf2a8c7dec8cf19a097f9946"
67856820
integrity sha512-6FQaLm6iZoRG1ab7xo2O82RbfqB7thZ0zhGfEP/+zLDSGut0qawAtWzuB4FhXirUYNXDU3hSlXawUQtgOzl2rw==
67866821

6822+
[email protected]:
6823+
version "15.1.0"
6824+
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
6825+
integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
6826+
dependencies:
6827+
postcss-value-parser "^4.0.0"
6828+
read-cache "^1.0.0"
6829+
resolve "^1.1.7"
6830+
67876831
[email protected]:
67886832
version "6.1.1"
67896833
resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.1.1.tgz#58dd0a3accd9bc87cc52eff75244db578d11301a"
@@ -6829,7 +6873,7 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
68296873
cssesc "^3.0.0"
68306874
util-deprecate "^1.0.2"
68316875

6832-
postcss-value-parser@^4.1.0:
6876+
postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
68336877
version "4.2.0"
68346878
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
68356879
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -7206,6 +7250,13 @@ react@^18.2.0:
72067250
dependencies:
72077251
loose-envify "^1.1.0"
72087252

7253+
read-cache@^1.0.0:
7254+
version "1.0.0"
7255+
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
7256+
integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
7257+
dependencies:
7258+
pify "^2.3.0"
7259+
72097260
read-file-async@^1.0.0:
72107261
version "1.0.0"
72117262
resolved "https://registry.yarnpkg.com/read-file-async/-/read-file-async-1.0.0.tgz#118fd0b8d0f76dc95cbb658e72ea6f107210deae"
@@ -7474,6 +7525,15 @@ [email protected]:
74747525
postcss "^7.0.35"
74757526
source-map "0.6.1"
74767527

7528+
resolve@^1.1.7, resolve@^1.20.0:
7529+
version "1.22.4"
7530+
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
7531+
integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
7532+
dependencies:
7533+
is-core-module "^2.13.0"
7534+
path-parse "^1.0.7"
7535+
supports-preserve-symlinks-flag "^1.0.0"
7536+
74777537
resolve@^1.10.0, resolve@^1.14.2, resolve@^1.22.0, resolve@^1.22.1, resolve@^1.3.3:
74787538
version "1.22.2"
74797539
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
@@ -7483,15 +7543,6 @@ resolve@^1.10.0, resolve@^1.14.2, resolve@^1.22.0, resolve@^1.22.1, resolve@^1.3
74837543
path-parse "^1.0.7"
74847544
supports-preserve-symlinks-flag "^1.0.0"
74857545

7486-
resolve@^1.20.0:
7487-
version "1.22.4"
7488-
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
7489-
integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
7490-
dependencies:
7491-
is-core-module "^2.13.0"
7492-
path-parse "^1.0.7"
7493-
supports-preserve-symlinks-flag "^1.0.0"
7494-
74957546
resolve@^2.0.0-next.4:
74967547
version "2.0.0-next.4"
74977548
resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"

0 commit comments

Comments
 (0)