[courses] added hero to courses page (#121)

* refactor: hero to accept props * feat: added hero to courses
solana-foundation · Nov 27, 2024 · bf0e502 · bf0e502
1 parent b209502
commit bf0e502
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 59 deletions.
diff --git a/src/components/developers/sections/DevelopersHeroSection/DevelopersHeroSection.jsx b/src/components/developers/sections/DevelopersHeroSection/DevelopersHeroSection.jsx
@@ -1,46 +1,49 @@
 import classNames from "classnames";
 import Image from "next/image";
-
-import Button from "../../../shared/Button";
-import { useTranslation } from "next-i18next";
-
-import heroImg from "../../../../../assets/developers/hero-geometry.png";
-import StackExchangeIcon from "../../../../../assets/developers/stackexchange.inline.svg";
-
+import Button from "@/components/shared/Button";
 import styles from "./DevelopersHeroSection.module.scss";
 
-const HeroSection = () => {
-  const { t } = useTranslation();
-
+const HeroSection = ({
+  img: { src, alt = "" },
+  title,
+  description,
+  buttons,
+}) => {
   return (
     <section
-      className={classNames("pt-7 pt-lg-12 pb-md-14", styles["hero-section"])}
+      className={classNames("pt-7 pt-lg-12 pb-md-12", styles["hero-section"])}
     >
       <div className="container position-relative">
         <div className={styles["hero-section__image"]}>
-          <Image src={heroImg} alt="" placeholder="blur" priority />
+          <Image src={src} alt={alt} placeholder="blur" priority />
         </div>
         <div className={styles["hero-section__light"]} />
         <div className={styles["content"]}>
-          <h1>{t("developers.hero.title")}</h1>
-          <p className="h6 subdued">{t("developers.hero.description")}</p>
-          <div className={styles["content__hero-buttons"]}>
-            <Button
-              to="/docs/intro/quick-start"
-              newTab={false}
-              variant="secondary"
-            >
-              {t("developers.hero.build")}
-            </Button>
-            <Button
-              to="https://solana.stackexchange.com/"
-              newTab
-              className={styles["content__btn-icon"]}
-            >
-              <span>Stack Exchange</span>
-              <StackExchangeIcon width={16} height={20} fill="currentColor" />
-            </Button>
-          </div>
+          <h1>{title}</h1>
+          <p className="h6 subdued">{description}</p>
+          {buttons && (
+            <div className={styles["content__hero-buttons"]}>
+              {buttons?.cta && (
+                <Button
+                  to={buttons.cta.href}
+                  newTab={false}
+                  variant="secondary"
+                >
+                  {buttons.cta.label}
+                </Button>
+              )}
+              {buttons?.secondary && (
+                <Button
+                  to={buttons.secondary.href}
+                  newTab
+                  className={styles["content__btn-icon"]}
+                >
+                  <span>{buttons.secondary.label}</span>
+                  {buttons.secondary.icon || null}
+                </Button>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </section>

diff --git a/src/pages/developers/courses/index.tsx b/src/pages/developers/courses/index.tsx
@@ -3,7 +3,8 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import HTMLHead from "@/components/HTMLHead";
 import SharedButton from "@/components/shared/Button";
 import RoundedDepthCard from "@/components/shared/RoundedDepthCard";
-import DevelopersLayout from "@/components/developers/DevelopersLayout";
+import Layout from "@/components/layout";
+
 import ContentApi from "@/utils/contentApi";
 import { useTranslation } from "next-i18next";
 import classNames from "classnames";
@@ -12,6 +13,9 @@ import { InferGetStaticPropsType } from "next";
 
 import { CardDeck } from "@solana-foundation/solana-lib";
 import { DefaultCard } from "@solana-foundation/solana-lib/dist/components/CardDeck/DefaultCard/defaultCard";
+import DevelopersHeroSection from "@/components/developers/sections/DevelopersHeroSection/DevelopersHeroSection";
+import HeroImage from "@@/public/src/img/validators/validators_geometry.png";
+import YouTubeIcon from "@@/assets/developers/content/youtube.inline.svg";
 
 export async function getStaticProps({ locale }) {
   // locate the records for the group being viewed (via the correctly formatted api route)
@@ -75,34 +79,59 @@ export default function DeveloperCoursesIndex({
   );
 
   return (
-    <DevelopersLayout>
+    <Layout>
       <HTMLHead
         title={"Developer Courses"}
         description={t("developers.guides.seo-description")}
       />
+      <div className="overflow-hidden">
+        <DevelopersHeroSection
+          title={t("developers.courses.featured-item.title")}
+          description={t("developers.courses.featured-item.description")}
+          img={{
+            src: HeroImage,
+            // alt: "",
+          }}
+          buttons={{
+            cta: {
+              label: t("developers.course-hero.start-now"),
+              href: "/developers/courses/intro-to-solana/getting-started",
+            },
+            secondary: {
+              label: t("nav.developers.tutorials.bootcamp"),
+              href: "https://www.youtube.com/watch?v=amAq-WHAFs8&list=PLilwLeBwGuK7HN8ZnXpGAD9q6i4syhnVc",
+              icon: <YouTubeIcon width={16} height={20} fill="currentColor" />,
+            },
+          }}
+        />
 
-      <CardDeck numCols={3} cards={courseCards} isListing />
+        <CardDeck numCols={3} cards={courseCards} isListing />
 
-      <div className={classNames(styles["developers-content-page"])}>
-        {/* @ts-expect-error */}
-        <RoundedDepthCard
-          className="p-5 mt-10"
-          bgColor="#26262b"
-          color="#ffffff"
-          shadow="bottom"
-        >
-          <h4>{t("developers.resources.items.stackexchange.ask.title")}</h4>
-          <p>{t("developers.resources.items.stackexchange.ask.description")}</p>
-          {/* @ts-expect-error */}
-          <SharedButton
-            to="https://solana.stackexchange.com/"
-            variant="secondary"
-            newTab
-          >
-            {t("developers.resources.items.stackexchange.ask.cta-label")}
-          </SharedButton>
-        </RoundedDepthCard>
+        <div className="container">
+          <div className={classNames(styles["developers-content-page"])}>
+            {/* @ts-expect-error */}
+            <RoundedDepthCard
+              className="p-5 mt-10"
+              bgColor="#26262b"
+              color="#ffffff"
+              shadow="bottom"
+            >
+              <h4>{t("developers.resources.items.stackexchange.ask.title")}</h4>
+              <p>
+                {t("developers.resources.items.stackexchange.ask.description")}
+              </p>
+              {/* @ts-expect-error */}
+              <SharedButton
+                to="https://solana.stackexchange.com/"
+                variant="secondary"
+                newTab
+              >
+                {t("developers.resources.items.stackexchange.ask.cta-label")}
+              </SharedButton>
+            </RoundedDepthCard>
+          </div>
+        </div>
       </div>
-    </DevelopersLayout>
+    </Layout>
   );
 }
diff --git a/src/pages/developers/index.jsx b/src/pages/developers/index.jsx
@@ -12,6 +12,9 @@ import DevelopersResourcesSection from "@/components/developers/sections/Develop
 import DevelopersDocumentsSection from "@/components/developers/sections/DevelopersDocumentsSection/DevelopersDocumentsSection";
 import DevelopersContentSection from "@/components/developers/sections/DevelopersContentSection/DevelopersContentSection";
 
+import heroImg from "@@/assets/developers/hero-geometry.png";
+import StackExchangeIcon from "@@/assets/developers/stackexchange.inline.svg";
+
 export default function DevelopersPage({
   resources,
   guides,
@@ -27,24 +30,40 @@ export default function DevelopersPage({
         description={t("developers.description")}
       />
       <div className="overflow-hidden">
-        <DevelopersHeroSection />
+        <DevelopersHeroSection
+          title={t("developers.hero.title")}
+          description={t("developers.hero.description")}
+          img={{
+            src: heroImg,
+            // alt: "",
+          }}
+          buttons={{
+            cta: {
+              label: t("developers.hero.build"),
+              href: "/docs/intro/quick-start",
+            },
+            secondary: {
+              label: "Stack Exchange",
+              href: "https://solana.stackexchange.com",
+              icon: (
+                <StackExchangeIcon width={16} height={20} fill="currentColor" />
+              ),
+            },
+          }}
+        />
 
         <DevelopersCoursesSection /* courses={courses} */ />
-
         <DevelopersResourcesSection
           items={guides}
           baseHref={`/developers/guides`}
           translationKey={"guides"}
         />
-
         <DevelopersResourcesSection
           items={resources}
           baseHref={`/developers/resources`}
           translationKey={"resources"}
         />
-
         <DevelopersDocumentsSection latestVideo={latestChangelogVideo} />
-
         <DevelopersContentSection />
       </div>
     </Layout>