From 8eeaa4e9c59e6a2b20519abc0160f80ebe7f0bef Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Thu, 29 Aug 2024 21:23:26 +0200
Subject: [PATCH] feat: add real content to the About Tab [PT-188182214]

---
 src/components/about-tab.scss | 23 ++++++++-------
 src/components/about-tab.tsx  | 55 ++++++++++++++++++++++++++++-------
 2 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/src/components/about-tab.scss b/src/components/about-tab.scss
index cf5f3c5..34cb73d 100644
--- a/src/components/about-tab.scss
+++ b/src/components/about-tab.scss
@@ -1,34 +1,37 @@
 @import "./vars.scss";
 
 .about-tab {
-  color:#333;
-  padding: 20px;
   box-sizing: border-box;
   width: $location-tab-width;
   height: $location-tab-height;
   padding: $tab-padding;
+  font-weight: 500;
+  overflow-y: scroll;
+  max-height: 480px;
 
-  h2 {
-    font-size: 1.2em;
-    margin-bottom: 10px;
+  h2, h3 {
+    font-size: 12px;
+    font-weight: 600;
+
+    margin-top: 10px;
+    &:first-child {
+      margin-top: 5px;
+    }
   }
 
   h3 {
-    font-size: 1em;
-    margin-bottom: 10px;
     text-transform: uppercase;
-    font-weight: medium;
   }
 
   hr {
     border-top: 1px solid $teal-light;
     margin-top: 20px;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
   }
 
   .subsection {
     p {
-      padding-left:10px;
+      padding-left: 10px;
     }
   }
 }
diff --git a/src/components/about-tab.tsx b/src/components/about-tab.tsx
index 6918003..aed1cc7 100644
--- a/src/components/about-tab.tsx
+++ b/src/components/about-tab.tsx
@@ -2,20 +2,55 @@ import React from "react";
 
 import "./about-tab.scss";
 
+const Link = ({ href, children }: { href: string, children: React.ReactNode }) => (
+  <a href={href} target="_blank" rel="noreferrer">
+    {children}
+  </a>
+);
+
 export const AboutTab: React.FC = () => {
   return (
     <div className="about-tab">
-      <h2>Lorem ipsum dolor sit amet</h2>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet nisl.</p>
-      <p>Donec auctor, nisl nec ultricies lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet nisl. Nullam auctor, nisl nec ultricies lacinia, nisl nisl aliquam nisl.</p>
+      <h2>Day Length Data</h2>
+      <p>
+        The Day Length plugin calculates data on daylight for each day of the year at any location on Earth. The
+        calculated dataset does not include the effects of clouds, land formation, and other variables that affect
+        sunlight in order to provide the underlying causes of Earth’s seasons and climate.
+      </p>
+      <h2>Simulation</h2>
+      <p>
+        An integrated simulation of the orbit of the Earth around the Sun allows for a focus on the physical
+        relationship of Earth and Sun. The data and simulation can be used to explore the amount, angle and intensity of
+        daylight that determine seasonal and climatic differences across the globe.
+      </p>
+      <h2>Solar Intensity and Sunlight Angle</h2>
+      <p>
+        Solar energy is radiant light and heat from the Sun that is important for understanding Earth’s seasons and
+        climate. The Earth’s axis and yearly orbit cause the daylight hours and solar intensity reaching the Earth to
+        vary by location.
+      </p>
+      <p>
+        Because the Earth is spherical, sunlight reaches the surface at different angles from 0° when it is at the
+        horizon (lowest solar intensity) to 90° when directly overhead (highest solar intensity). In addition, the 23°
+        tilt of the Earth’s axis further affects the angle of sunlight reaching the different latitudes of the Earth.
+      </p>
+      <p>
+        To explore actual measurement values of sunlight data for locations, we suggest visiting
+        the <Link href="https://power.larc.nasa.gov/">NASA POWER website</Link>.
+      </p>
+
       <hr/>
-      <h2>Consectetur adipiscing elit</h2>
-      <div className="subsection">
-        <h3>Nullam auctor</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet nisl.</p>
-        <h3>Nisl nec ultricies</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet nisl.</p>
-      </div>
+
+      <p>
+        The Day Length plugin for CODAP was developed by the <Link href="https://concord.org/">Concord Consortium</Link>
+        as part of the <Link href="https://mss.wested.org/project/boosting-data-science-teaching-and-learning-in-stem/">Boosting Data Science</Link> project,
+        a collaboration between <Link href="https://www.wested.org/">WestEd</Link> and the Concord Consortium.
+      </p>
+      <p>
+        This material is based upon work supported by the National Science Foundation under Grant No. 2101049. Any
+        opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and
+        do not necessarily reflect the views of the National Science Foundation.
+      </p>
     </div>
   );
 };