Skip to content

Commit 888447a

Browse files
pavanydgJeelRajodiya
pavanydg
and
JeelRajodiya
authored
styles: updates the home page (#93)
* gives proper text color to a completed and active task * refactor: css * updated the home page * modifiend ui * made the homepage responsive * refactor: rename component * refactor: use CSS grids * refactor: styles * format: files * styles: fix gap --------- Co-authored-by: JeelRajodiya <[email protected]>
1 parent a7678e3 commit 888447a

File tree

12 files changed

+101
-75
lines changed

12 files changed

+101
-75
lines changed

‎app/components/CertificateButton/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export {default as default} from './CertificateButton';
1+
export { default as default } from "./CertificateButton";

‎app/components/CommunityLinks/CommunityLinks.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
position: relative;
77
}
88
.footerLink {
9-
color: hsl(var(--primary));
9+
color: hsl(var(--text));
1010
text-decoration: underline;
1111
text-underline-offset: 0.15em;
12-
text-decoration-color: hsl(var(--primary) / 0.3);
12+
text-decoration-color: hsl(var(--primary) / 0.5);
1313
}
1414

1515
.footerLink:hover {
16-
text-decoration-color: hsl(var(--primary));
16+
text-decoration-color: hsl(var(--text));
1717
}

‎app/components/HomePageLinks/HomePageLinks.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* grid of 4 rows */
2+
.HomePageLinks {
3+
display: grid;
4+
grid-template-rows: repeat(4, 1fr);
5+
gap: 8px;
6+
column-gap: 32px;
7+
grid-auto-flow: column;
8+
}

‎app/components/HomePageLinks/HomePageLinks.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { contentManager } from "@/lib/contentManager";
2+
import styles from "./HomePageLinks.module.css";
3+
import Link from "next/link";
4+
import { useMemo } from "react";
5+
import CommunityLinksStyles from "@/app/components/CommunityLinks/CommunityLinks.module.css";
6+
7+
export default function HomePageLinks() {
8+
const outline = contentManager.getOutline();
9+
const totalChapters = contentManager.getTotalChapters();
10+
const chapterInfo: {
11+
title: string;
12+
link: string;
13+
}[] = useMemo(() => {
14+
const chapterInfo = [];
15+
for (let i = 0; i < totalChapters; i++) {
16+
const chapter = outline[i];
17+
chapterInfo.push({
18+
title: chapter.title,
19+
link: contentManager.getPathWithPrefix(
20+
chapter.steps[0].fullPath,
21+
) as string,
22+
});
23+
}
24+
return chapterInfo;
25+
}, []);
26+
27+
return (
28+
<div className={styles.HomePageLinks}>
29+
{chapterInfo.map((chapter, index) => (
30+
<Link
31+
key={index}
32+
href={chapter.link}
33+
className={CommunityLinksStyles.footerLink}
34+
>
35+
{index + 1}. {chapter.title}
36+
</Link>
37+
))}
38+
</div>
39+
);
40+
}

‎app/components/HomePageLinks/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as default } from "./HomePageLinks";

‎app/components/OutlineDrawer/OutlineDrawer.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,9 @@ export default function OutlineDrawer({
4343
<DrawerContent>
4444
<DrawerCloseButton />
4545
<DrawerHeader display={"flex"} justifyContent={"space-between"}>
46-
4746
Outline
48-
<CertificateButton />
49-
</DrawerHeader>
47+
<CertificateButton />
48+
</DrawerHeader>
5049

5150
<DrawerBody>
5251
<nav>

‎app/page.tsx‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,31 @@
11
import styles from "./styles/page.module.css";
2-
import Link from "next/link";
32
import cx from "classnames";
43
import { interFont, outfitFont } from "./styles/fonts";
5-
import RightArrow from "./styles/icons/RightArrow";
64
import CompanyLogos from "./components/CommunityLinks/CommunityLinks";
7-
import { contentManager } from "@/lib/contentManager";
5+
import HomePageLinks from "./components/HomePageLinks/HomePageLinks";
6+
import { Flex } from "@chakra-ui/react";
87

98
export default function Home() {
10-
const outline = contentManager.getOutline();
119
return (
1210
<div className={cx(styles.main, outfitFont.className)}>
1311
<div className={styles.wrapper}>
14-
<div className={styles.titleWrapper}>
15-
<div className={styles.title}>
16-
<div>A Tour of</div>
17-
<div className={styles.jsonSchemaTitle}>JSON Schema</div>
18-
</div>
19-
<div className={styles.subtitleWrapper}>
20-
<div className={styles.subtitle1}>
21-
Build more. Break less. Empower others.
12+
<div className={styles.backgroundClipWrapper}>
13+
<div className={styles.titleWrapper}>
14+
<div className={styles.title}>
15+
<div>A Tour of</div>
16+
<div className={styles.jsonSchemaTitle}>JSON Schema</div>
2217
</div>
23-
<div className={styles.subtitle2}>
24-
Ensure confident & reliable use of JSON data with JSON Schema
18+
<div className={styles.subtitleWrapper}>
19+
<div className={styles.subtitle1}>
20+
Build more. Break less. Empower others.
21+
</div>
22+
<div className={styles.subtitle2}>
23+
Ensure confident & reliable use of JSON data with JSON Schema
24+
</div>
2525
</div>
2626
</div>
2727
</div>
28-
<Link
29-
href={
30-
contentManager.getPathWithPrefix(
31-
outline[0].steps[0].fullPath,
32-
) as string
33-
}
34-
>
35-
<button className={styles.mainBtn}>
36-
START NOW
37-
<RightArrow />
38-
</button>
39-
</Link>
28+
<HomePageLinks />
4029
</div>
4130
<div className={styles.footer}>
4231
<div className={cx(styles.footerText, interFont.className)}>

‎app/styles/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ html {
6565
--primary: var(--primary-light);
6666
--error: var(--error-light);
6767
--success: var(--success-light);
68+
--backgroundImage: var(--backgroundImage-light);
6869
}
6970

7071
/* html[data-theme="dark"] svg {

‎app/styles/page.module.css‎

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,54 @@
33
flex-direction: column;
44
height: inherit;
55

6-
justify-content: space-between;
76
align-items: center;
87
}
98

109
.wrapper {
1110
display: flex;
1211
flex-direction: column;
1312
height: 100%;
14-
gap: 64px;
15-
justify-content: center;
13+
width: 100%;
14+
align-items: center;
15+
}
16+
17+
.backgroundClipWrapper {
18+
display: flex;
19+
flex-direction: column;
20+
background: hsl(var(--primary));
21+
clip-path: polygon(0 0, 0 100%, 0% 100%, 100% 75%, 100% 0);
22+
color: white;
23+
height: max-content;
24+
width: 100%;
25+
padding-top: 64px;
26+
padding-bottom: 96px;
27+
1628
align-items: center;
1729
}
1830

1931
.titleWrapper {
2032
display: flex;
2133
flex-direction: column;
22-
gap: 8px;
23-
margin-right: 5em;
34+
35+
/* justify-content: center; */
36+
/* align-items: center; */
2437
}
2538
.title {
26-
font-size: 6rem;
39+
font-size: 5rem;
2740
font-weight: 900;
2841
display: flex;
2942
flex-direction: column;
3043
gap: 0px;
31-
text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
3244
}
3345

3446
.title > div {
3547
line-height: 115%;
3648
letter-spacing: -2px;
3749
}
3850
.jsonSchemaTitle {
39-
color: hsl(var(--primary));
4051
text-decoration: underline;
4152
text-decoration-thickness: 0.075em;
4253
/* add some gap between the underline and text */
43-
4454
text-underline-offset: 0.15em;
4555
}
4656
.subtitle1 {
@@ -52,8 +62,6 @@
5262
}
5363
.subtitle2 {
5464
font-size: 1.3rem;
55-
56-
color: hsl(var(--text) / 0.5);
5765
}
5866
.subtitleWrapper {
5967
display: flex;
@@ -62,29 +70,6 @@
6270
justify-content: center;
6371
}
6472

65-
.mainBtn {
66-
font-weight: 800;
67-
font-size: 1.4em;
68-
background-color: hsl(var(--primary));
69-
color: white;
70-
display: flex;
71-
justify-self: center;
72-
align-items: center;
73-
gap: 8px;
74-
padding: 8px 14px;
75-
border-radius: 8px;
76-
transition:
77-
gap 0.2s,
78-
padding 0.2s;
79-
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.25);
80-
padding-right: 18px;
81-
}
82-
83-
.mainBtn:hover {
84-
gap: 24px;
85-
padding: 8px 18px;
86-
}
87-
8873
.footer {
8974
display: flex;
9075
flex-direction: column;

‎app/styles/theme.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -141,10 +141,10 @@ const Modal = {
141141
dialog: {
142142
bg: "hsl(var(--background))",
143143
color: "hsl(var(--text))",
144-
borderRadius: "16px"
145-
}
146-
}
147-
}
144+
borderRadius: "16px",
145+
},
146+
},
147+
};
148148

149149
export const theme = extendTheme({
150150
config: {

0 commit comments

Comments
 (0)