First version of landing page completed

Author: marcofarina

docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
   title: 'Python Doesn\'t Byte',
-  tagline: 'Programmare in Python senza farsi male',
+  tagline: 'Il libro di testo, reinventato.',
   favicon: 'img/icons/favicon.ico',
 
   // Set the production url of your site here

src/components/Chapters/Section/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import styles from './styles.module.css';
+
+function Section({children}) {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.container}>{children}</div>
+    </div>
+  );
+}
+
+export default Section;

src/components/Chapters/Section/styles.module.css

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.wrapper {
+  background: linear-gradient(
+      to bottom,
+      var(--home-section-top),
+      var(--home-section-bottom)
+    ),
+    var(--home-section-top);
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  max-width: 1000px;
+  padding: 8rem 1rem 5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

src/components/Chapters/SectionTitle/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import styles from './styles.module.css';
+
+function SectionTitle({title, description}) {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>{title}</h1>
+      <h3 className={styles.description}>{description}</h3>
+    </div>
+  );
+}
+
+export default SectionTitle;

src/components/Chapters/SectionTitle/styles.module.css

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-size: 48px;
+}
+
+.description {
+  font-size: 20px;
+  color: var(--home-secondary-text);
+  line-height: 150%;
+  margin-top: 1rem;
+  font-weight: normal;
+  max-width: 850px;
+}

src/components/Chapters/ThemeImage/index.js

@@ -0,0 +1,35 @@
+import React, {useState, useEffect} from 'react';
+
+function ThemeImage({lightSrc, darkSrc, className, alt}) {
+  const [theme, setTheme] = useState('light');
+
+  useEffect(() => {
+    const themeObserver = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'data-theme'
+        ) {
+          setTheme(mutation.target.getAttribute('data-theme'));
+        }
+      });
+    });
+
+    const htmlElement = document.documentElement;
+    themeObserver.observe(htmlElement, {
+      attributes: true,
+    });
+
+    return () => themeObserver.disconnect();
+  }, []);
+
+  return (
+    <img
+      src={theme === 'dark' ? darkSrc : lightSrc}
+      alt={alt}
+      className={className}
+    />
+  );
+}
+
+export default ThemeImage;

src/components/Chapters/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import ThemeImage from './ThemeImage';
+import Section from './Section';
+import SectionTitle from './SectionTitle';
+
+import styles from './styles.module.css';
+
+function Chapters() {
+    return (
+        <Section>
+            <SectionTitle
+                title="Cosa vuoi imparare oggi?"
+                description={
+                    <>
+                        Ogni capitolo del libro, a portata di mano.
+                    </>
+                }
+            />
+            <div className={styles.cardContainer}>
+                <div className={styles.card}>
+                    <ThemeImage
+                        lightSrc="/img/homepage/ide.svg"
+                        darkSrc="/img/homepage/ide.svg"
+                        className={styles.cardImage}
+                        alt="Icon of a terminal window with input and output"
+                    />
+                    <div className={styles.cardContent}>
+                        <h4 className={styles.cardTitle}>Fondamenti di Python</h4>
+                        <p className={styles.cardDescription}>
+                            Come installare e usare Python, cos'è un IDE, come si scrive e si esegue un programma.
+                        </p>
+                    </div>
+                </div>
+                <div className={styles.card}>
+                    <ThemeImage
+                        lightSrc="/img/homepage/input-output_dark.svg"
+                        darkSrc="/img/homepage/input-output_dark.svg"
+                        className={styles.cardImage}
+                        alt=""
+                    />
+                    <div className={styles.cardContent}>
+                        <h4 className={styles.cardTitle}>
+                            Le basi del linguaggio
+                        </h4>
+                        <p className={styles.cardDescription}>
+                            Input e output, le variabili, i tipi di dati, le operazioni aritmetiche e le espressioni.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </Section>
+    );
+}
+
+export default Chapters;

src/components/Chapters/styles.module.css

@@ -0,0 +1,67 @@
+.cardContainer {
+    display: grid;
+    gap: 2rem;
+    margin: 2rem auto;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.card {
+    border: 1px solid var(--home-border);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
+    background-color: var(--home-background);
+    display: flex;
+    flex-direction: column;
+}
+
+.cardContent {
+    padding: 16px 24px;
+}
+
+.cardTitle {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    font-size: 20px;
+    line-height: 140%;
+}
+
+.cardDescription {
+    margin-top: 0;
+    color: var(--home-secondary-text);
+    font-size: 16px;
+    line-height: 150%;
+}
+
+@media only screen and (max-width: 900px) {
+    .cardContainer {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .card {
+        flex-direction: row;
+        text-align: left;
+    }
+
+    .cardImage {
+        width: auto;
+        height: 150px;
+        margin: 1rem;
+        border-radius: 0.5rem;
+        border: 1px solid var(--home-border);
+    }
+}
+
+@media only screen and (max-width: 650px) {
+    .card {
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+    }
+
+    .cardImage {
+        margin-bottom: 0;
+        max-width: calc(100% - 2rem);
+    }
+}