Use CzechitasIntro component

website/src/app/[topicId]/(course)/[courseId]/[chapterId]/page.tsx

@@ -11,7 +11,7 @@ import styles from './styles.module.scss';
 import { session } from 'app/session';
 import { CmsAgent } from 'kodim-cms/esm/access-control/claim-agent';
 import ReactHast from 'app/components/ReactHast';
-import Icon from 'app/components/Icon';
+import CzechitasIntro from 'app/components/CzechitasIntro';
 
 export const dynamic = 'force-dynamic';
 
@@ -81,11 +81,8 @@ const ChapterPage = async ({ params }: Props): Promise<JSX.Element> => {
           <p className={styles.lead}>{course.lead}</p>
         </div>
       </div>
-      { course.organization === 'czechitas' && (
-        <div className={styles.czechitasIntro}>
-          <Icon className={styles.czechitasIcon} name="czechitas" size="5rem" />
-          <p>Tento kurz je vytvořen pro neziskovou organizaci <a href="https://www.czechitas.cz">Czechitas</a>, jejíž cílem je otevřít ženám svět informačních technologií. Na kurz je možné se přihlásit na <a href={course.outboundLink ?? "https://www.czechitas.cz"}>webu Czechitas</a>.</p>
-        </div>
+      {course.organization === 'czechitas' && (
+        <CzechitasIntro course outboundLink={course.outboundLink} />
       )}
       <div className={styles.courseInfo}>
         { course.intro !== null && (
@@ -99,7 +96,7 @@ const ChapterPage = async ({ params }: Props): Promise<JSX.Element> => {
           <div className={styles.courseInfoItem}>
             <a 
               href={`/odber?topic=${course.title}`}
-              className={styles.bigBtn}
+              className="btnBig"
             >
               Mám zájem o tento kurz
             </a>
@@ -132,7 +129,7 @@ const ChapterPage = async ({ params }: Props): Promise<JSX.Element> => {
             </>
           )
       }
-    </div>      
+    </div>
   );
 };
 

website/src/app/[topicId]/(course)/[courseId]/[chapterId]/styles.module.scss

@@ -49,21 +49,6 @@
   margin: 0;
 }
 
-.czechitasIntro {
-  @include padded;
-  max-width: 40rem;
-  margin: 2rem auto 1rem auto;
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.czechitasIcon {
-  margin-top: 1rem;
-  color: #692D8B;
-  flex-shrink: 0;
-}
-
 .courseInfo {
   @include padded;
   @include breakpoint-md {
@@ -79,25 +64,6 @@
   page-break-inside: avoid;
 }
 
-a.bigBtn {
-  display: block;
-  margin-top: 2rem;
-  background-color: $palette-1;
-  color: white;
-  text-align: center;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  text-decoration: none;
-  font-size: 1.2rem;
-  font-weight: bold;
-  transition: 300ms;
-
-  &:hover {
-    transform: scale(1.05);
-    transition: 300ms;
-  }
-}
-
 .lessonsHeading {
   @include padded;
 }

website/src/app/[topicId]/(home)/page.tsx

@@ -7,6 +7,7 @@ import Menu from 'app/components/Menu';
 import MainLayout from 'app/components/MainLayout';
 import styles from './styles.module.scss';
 import { session } from  'app/session';
+import CzechitasIntro from 'app/components/CzechitasIntro';
 
 export const dynamic = 'force-dynamic';
 
@@ -51,11 +52,19 @@ const HomePage = async ({ params }: Props): Promise<JSX.Element> => {
           activeKey={division.name}
           centered
         />
-        <div className={styles.divisionIntro} />
-
+        {division.name === 'czechitas'
+          ? <CzechitasIntro /> 
+          : <div className={styles.divisionIntro} />
+        }
         {division.topics.map((topic) => (
           <TopicView key={topic.name} topic={topic} />
         ))}
+        <div className={styles.newsletter}>
+          <p>
+            Přihlaste se k odběru novinek a nezmeškejte žádný nový kurz, článek nebo akci.
+          </p>
+          <a href="/odber" className="btnBig">Přihlásit k odběru</a>
+        </div>
       </div>
     </MainLayout>
   );

website/src/app/[topicId]/(home)/styles.module.scss

@@ -6,6 +6,7 @@
 
   display: flex;
   flex-direction: column;
+  gap: 2rem;
   align-items: center;
 
   margin-top: 1rem;
@@ -62,3 +63,8 @@
 .divisionIntro {
   padding-bottom: 2rem;
 }
+
+.newsletter {
+  @include padded;
+  max-width: 26rem;
+}

website/src/app/components/CzechitasIntro/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Icon from '../Icon';
+import styles from './styles.module.scss';
+
+interface Props {
+  course?: boolean;
+  outboundLink?: string | null;
+}
+
+const CzechitasIntro = (
+  { course = false, outboundLink = null}: Props
+): JSX.Element => {
+  return (
+    <div className={styles.czechitasIntro}>
+      <Icon className={styles.czechitasIcon} name="czechitas" size="5rem" />
+      <div>
+        {course ? (
+          <>
+            <p>Tento kurz je vytvořen pro neziskovou organizaci <a href="https://www.czechitas.cz">Czechitas</a>, jejíž cílem je otevírat ženám svět informačních technologií.</p>
+            <p>Na kurz je možné se přihlásit na <a href={outboundLink ?? "https://www.czechitas.cz"}>webu Czechitas</a>.</p>
+          </>
+        ) : (
+          <p>Následující kurzy jsou vytvořeny pro neziskovou organizaci <a href="https://www.czechitas.cz">Czechitas</a>, jejíž cílem je otevírat ženám svět informačních technologií.</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CzechitasIntro;

website/src/app/components/CzechitasIntro/styles.module.scss

@@ -0,0 +1,17 @@
+@import "styles/variables.scss";
+@import "styles/mixins.scss";
+
+.czechitasIntro {
+  @include padded;
+  max-width: 40rem;
+  margin: 2rem auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.czechitasIcon {
+  margin-top: 1rem;
+  color: #692D8B;
+  flex-shrink: 0;
+}

website/src/styles/global.scss

@@ -99,3 +99,21 @@ input[type="checkbox"] {
     cursor: not-allowed;
   }
 }
+
+.btnBig {
+  display: block;
+  margin-top: 1rem;
+  background-color: $palette-1;
+  color: white;
+  text-align: center;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  font-weight: bold;
+  transition: 300ms;
+
+  &:hover {
+    transform: scale(1.05);
+    transition: 300ms;
+  }
+}