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]>
json-schema-org · Oct 9, 2024 · 888447a · 888447a
1 parent a7678e3
commit 888447a
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 75 deletions.
diff --git a/app/components/CertificateButton/index.tsx b/app/components/CertificateButton/index.tsx
@@ -1 +1 @@
-export {default as default} from './CertificateButton';
+export { default as default } from "./CertificateButton";
diff --git a/app/components/CommunityLinks/CommunityLinks.module.css b/app/components/CommunityLinks/CommunityLinks.module.css
@@ -6,12 +6,12 @@
   position: relative;
 }
 .footerLink {
-  color: hsl(var(--primary));
+  color: hsl(var(--text));
   text-decoration: underline;
   text-underline-offset: 0.15em;
-  text-decoration-color: hsl(var(--primary) / 0.3);
+  text-decoration-color: hsl(var(--primary) / 0.5);
 }
 
 .footerLink:hover {
-  text-decoration-color: hsl(var(--primary));
+  text-decoration-color: hsl(var(--text));
 }
diff --git a/app/components/HomePageLinks/HomePageLinks.module.css b/app/components/HomePageLinks/HomePageLinks.module.css
@@ -0,0 +1,8 @@
+/* grid of 4 rows  */
+.HomePageLinks {
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
+  gap: 8px;
+  column-gap: 32px;
+  grid-auto-flow: column;
+}
diff --git a/app/components/HomePageLinks/HomePageLinks.tsx b/app/components/HomePageLinks/HomePageLinks.tsx
@@ -0,0 +1,40 @@
+import { contentManager } from "@/lib/contentManager";
+import styles from "./HomePageLinks.module.css";
+import Link from "next/link";
+import { useMemo } from "react";
+import CommunityLinksStyles from "@/app/components/CommunityLinks/CommunityLinks.module.css";
+
+export default function HomePageLinks() {
+  const outline = contentManager.getOutline();
+  const totalChapters = contentManager.getTotalChapters();
+  const chapterInfo: {
+    title: string;
+    link: string;
+  }[] = useMemo(() => {
+    const chapterInfo = [];
+    for (let i = 0; i < totalChapters; i++) {
+      const chapter = outline[i];
+      chapterInfo.push({
+        title: chapter.title,
+        link: contentManager.getPathWithPrefix(
+          chapter.steps[0].fullPath,
+        ) as string,
+      });
+    }
+    return chapterInfo;
+  }, []);
+
+  return (
+    <div className={styles.HomePageLinks}>
+      {chapterInfo.map((chapter, index) => (
+        <Link
+          key={index}
+          href={chapter.link}
+          className={CommunityLinksStyles.footerLink}
+        >
+          {index + 1}. {chapter.title}
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/HomePageLinks/index.tsx b/app/components/HomePageLinks/index.tsx
@@ -0,0 +1 @@
+export { default as default } from "./HomePageLinks";
diff --git a/app/components/OutlineDrawer/OutlineDrawer.tsx b/app/components/OutlineDrawer/OutlineDrawer.tsx
@@ -43,10 +43,9 @@ export default function OutlineDrawer({
         <DrawerContent>
           <DrawerCloseButton />
           <DrawerHeader display={"flex"} justifyContent={"space-between"}>
-
             Outline
-            <CertificateButton  />
-            </DrawerHeader>
+            <CertificateButton />
+          </DrawerHeader>
 
           <DrawerBody>
             <nav>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,42 +1,31 @@
 import styles from "./styles/page.module.css";
-import Link from "next/link";
 import cx from "classnames";
 import { interFont, outfitFont } from "./styles/fonts";
-import RightArrow from "./styles/icons/RightArrow";
 import CompanyLogos from "./components/CommunityLinks/CommunityLinks";
-import { contentManager } from "@/lib/contentManager";
+import HomePageLinks from "./components/HomePageLinks/HomePageLinks";
+import { Flex } from "@chakra-ui/react";
 
 export default function Home() {
-  const outline = contentManager.getOutline();
   return (
     <div className={cx(styles.main, outfitFont.className)}>
       <div className={styles.wrapper}>
-        <div className={styles.titleWrapper}>
-          <div className={styles.title}>
-            <div>A Tour of</div>
-            <div className={styles.jsonSchemaTitle}>JSON Schema</div>
-          </div>
-          <div className={styles.subtitleWrapper}>
-            <div className={styles.subtitle1}>
-              Build more. Break less. Empower others.
+        <div className={styles.backgroundClipWrapper}>
+          <div className={styles.titleWrapper}>
+            <div className={styles.title}>
+              <div>A Tour of</div>
+              <div className={styles.jsonSchemaTitle}>JSON Schema</div>
             </div>
-            <div className={styles.subtitle2}>
-              Ensure confident & reliable use of JSON data with JSON Schema
+            <div className={styles.subtitleWrapper}>
+              <div className={styles.subtitle1}>
+                Build more. Break less. Empower others.
+              </div>
+              <div className={styles.subtitle2}>
+                Ensure confident & reliable use of JSON data with JSON Schema
+              </div>
             </div>
           </div>
         </div>
-        <Link
-          href={
-            contentManager.getPathWithPrefix(
-              outline[0].steps[0].fullPath,
-            ) as string
-          }
-        >
-          <button className={styles.mainBtn}>
-            START NOW
-            <RightArrow />
-          </button>
-        </Link>
+        <HomePageLinks />
       </div>
       <div className={styles.footer}>
         <div className={cx(styles.footerText, interFont.className)}>

diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -65,6 +65,7 @@ html {
   --primary: var(--primary-light);
   --error: var(--error-light);
   --success: var(--success-light);
+  --backgroundImage: var(--backgroundImage-light);
 }
 
 /* html[data-theme="dark"] svg {

diff --git a/app/styles/page.module.css b/app/styles/page.module.css
@@ -3,44 +3,54 @@
   flex-direction: column;
   height: inherit;
 
-  justify-content: space-between;
   align-items: center;
 }
 
 .wrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
-  gap: 64px;
-  justify-content: center;
+  width: 100%;
+  align-items: center;
+}
+
+.backgroundClipWrapper {
+  display: flex;
+  flex-direction: column;
+  background: hsl(var(--primary));
+  clip-path: polygon(0 0, 0 100%, 0% 100%, 100% 75%, 100% 0);
+  color: white;
+  height: max-content;
+  width: 100%;
+  padding-top: 64px;
+  padding-bottom: 96px;
+
   align-items: center;
 }
 
 .titleWrapper {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-right: 5em;
+
+  /* justify-content: center; */
+  /* align-items: center; */
 }
 .title {
-  font-size: 6rem;
+  font-size: 5rem;
   font-weight: 900;
   display: flex;
   flex-direction: column;
   gap: 0px;
-  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
 }
 
 .title > div {
   line-height: 115%;
   letter-spacing: -2px;
 }
 .jsonSchemaTitle {
-  color: hsl(var(--primary));
   text-decoration: underline;
   text-decoration-thickness: 0.075em;
   /* add some gap between the underline and text */
-
   text-underline-offset: 0.15em;
 }
 .subtitle1 {
@@ -52,8 +62,6 @@
 }
 .subtitle2 {
   font-size: 1.3rem;
-
-  color: hsl(var(--text) / 0.5);
 }
 .subtitleWrapper {
   display: flex;
@@ -62,29 +70,6 @@
   justify-content: center;
 }
 
-.mainBtn {
-  font-weight: 800;
-  font-size: 1.4em;
-  background-color: hsl(var(--primary));
-  color: white;
-  display: flex;
-  justify-self: center;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 14px;
-  border-radius: 8px;
-  transition:
-    gap 0.2s,
-    padding 0.2s;
-  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.25);
-  padding-right: 18px;
-}
-
-.mainBtn:hover {
-  gap: 24px;
-  padding: 8px 18px;
-}
-
 .footer {
   display: flex;
   flex-direction: column;

diff --git a/app/styles/theme.ts b/app/styles/theme.ts
@@ -141,10 +141,10 @@ const Modal = {
     dialog: {
       bg: "hsl(var(--background))",
       color: "hsl(var(--text))",
-      borderRadius: "16px"
-    }
-  }
-}
+      borderRadius: "16px",
+    },
+  },
+};
 
 export const theme = extendTheme({
   config: {

diff --git a/lib/client-functions.ts b/lib/client-functions.ts
@@ -137,13 +137,15 @@ export function isChapterCompleted(chapterIndex: number, totalSteps: number) {
   return true;
 }
 
-
 export function isTheTourCompleted() {
-  const totalStepsForAllChapters = contentManager.getNumberOfStepsFromAllChapters();
+  const totalStepsForAllChapters =
+    contentManager.getNumberOfStepsFromAllChapters();
   if (!localStorage.getItem("progress")) {
     return false;
   }
-  const completedSteps = Object.keys(JSON.parse(localStorage.getItem("progress")!)).length;
+  const completedSteps = Object.keys(
+    JSON.parse(localStorage.getItem("progress")!),
+  ).length;
   return totalStepsForAllChapters === completedSteps;
 }
 

diff --git a/lib/contentVariables.ts b/lib/contentVariables.ts
@@ -4,4 +4,5 @@ export const contentFolderPath: string = "./content";
 export const contentFolderName: string = contentFolderPath.replace("./", "");
 export const indexFileName = "index.mdx";
 export const instructionsFileName = "instructions.mdx";
-export const googleSheetAPIRoute = "https://script.google.com/macros/s/AKfycbxjH778iyBlZ8_oY946fTLW6H0HcfByaNk0collEgIwERwnpeErkaYEuKjWxAQ2qg/exec"
+export const googleSheetAPIRoute =
+  "https://script.google.com/macros/s/AKfycbxjH778iyBlZ8_oY946fTLW6H0HcfByaNk0collEgIwERwnpeErkaYEuKjWxAQ2qg/exec";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export {default as default} from './CertificateButton';
		export { default as default } from "./CertificateButton";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as default } from "./HomePageLinks";