adding about page content and effects on selection

web/frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy } from 'react';
+import { Suspense, lazy, useState } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import CognitoProvider from '@/features/cognito/cognito-hosted';
@@ -10,25 +10,31 @@ const queryClient = new QueryClient();
 const Home = lazy(() => import('@/pages/Home/Home'));
 const About = lazy(() => import('@/pages/About/About'));
 
-const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <CognitoProvider>
-      <BrowserRouter>
-        <div className="app">
-          <Header />
-          <div className="appbody">
-          <Suspense fallback={<div>Loading...</div>}>
-            <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/about" element={<About />} />
-            </Routes>
-          </Suspense>
-          </div>
-          <Footer />
-        </div>
-      </BrowserRouter>
-    </CognitoProvider>
-  </QueryClientProvider>
-);
+const App: React.FC = () => {
+    const [highlightedParagraph, setHighlightedParagraph] = useState<string | null>(null);
+    const highlight =(id: string | null) =>{
+            setHighlightedParagraph(id);
+        }
+    return(
+       <QueryClientProvider client={queryClient}>
+        <CognitoProvider>
+          <BrowserRouter>
+            <div className="app">
+              <Header />
+              <div className="appbody">
+              <Suspense fallback={<div>Loading...</div>}>
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/about" element={<About highlightedParagraph={highlightedParagraph} highlight={highlight}/>} />
+                </Routes>
+              </Suspense>
+              </div>
+              <Footer highlight={highlight}/>
+            </div>
+          </BrowserRouter>
+        </CognitoProvider>
+      </QueryClientProvider>
+    );
+};
 
-export default App;
+export default App;

web/frontend/src/components/Footer.tsx

@@ -1,16 +1,24 @@
 import styles from './components.module.css';
 import { Link } from 'react-router-dom';
 
-export default function Footer() {
+interface FooterProps{
+    highlight:(id:string) =>void;
+}
+const Footer: React.FC<FooterProps> = ({highlight}) => {
+    const handleLinkClick = (id:string)=>{
+        highlight(id);
+    }
     const year = new Date().getFullYear();
 
     return (
         <footer className={styles.Footer}>
             <p><Link  className={styles.Footerlink} to="/about">About</Link></p>
-            <p><Link className={styles.Footerlink} to="/about">Code</Link></p>
-            <p><Link className={styles.Footerlink} to="/about">Manuscript</Link></p>
+            <p><Link className={styles.Footerlink} to="/about" onClick={() => handleLinkClick("code")}>Code</Link></p>
+            <p><Link className={styles.Footerlink} to="/about" onClick={() => handleLinkClick("manuscript")}>manuscript</Link></p>
             <p ><a className={styles.Footerlink} href="https://www.tri.global/privacy-policy/" target="_blank" rel="noreferrer">Privacy Policy</a></p>
             <p className={styles.Footercopyright}>© Copyright Toyota Research Institute {year}</p>
         </footer>
     );
-}
+};
+
+export default Footer;

web/frontend/src/pages/About/About.module.css

@@ -0,0 +1,61 @@
+.PageContent{
+    display: flex;
+    width: 1440px;
+    height: 862px;
+    padding: 40px 160px 40px 160px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 40px;
+}
+.AboutHeader{
+    align-self: stretch;
+    color: var(--grey-900, #212121);
+    text-align: center;
+    font-feature-settings: 'clig' off, 'liga' off;
+
+    /* header/h2 */
+    font-family: Gellix;
+    font-size: 34px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 42px; /* 123.529% */
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+.Content{
+    align-self: stretch;
+    color: var(--grey-900, #212121);
+    font-feature-settings: 'clig' off, 'liga' off;
+    padding-top:8px;
+    /* body/body 1-regular */
+    font-family: Gellix;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+    letter-spacing: 0.15px;
+}
+.Titles{
+    align-self: stretch;
+    color: var(--grey-900, #212121);
+    font-feature-settings: 'clig' off, 'liga' off;
+    /* header/h4 */
+    font-family: Gellix;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 32px; /* 160% */
+}
+
+.highlighted {
+    padding-top:8px;
+    padding-bottom:8px;
+    padding-left:8px;
+    padding-right:8px;
+    border-radius: 10px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 10px 0px #757575;
+}
+.gap{
+    padding-bottom:40px;
+}

web/frontend/src/pages/About/About.tsx

@@ -1,13 +1,89 @@
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import styles from './About.module.css'
+
+interface highlightProps {
+  highlightedParagraph: string | null;
+  highlight : (id: string | null) => void;
+}
+
+const About: React.FC<highlightProps> = ({highlightedParagraph, highlight}) => {
+    console.log(highlightedParagraph)
+
+    useEffect(() => {
+        const divs = document.querySelectorAll('div');
+        divs.forEach((div) => {
+          if (div.id === highlightedParagraph) {
+            div.classList.add(styles.highlighted);
+          }
+          else {
+             div.classList.remove(styles.highlighted);
+          }
+        });
+
+        // Remove highlight after 5 seconds
+            const timeoutId = setTimeout(() => {
+              divs.forEach((div) => {
+               if (div.id === highlightedParagraph) {
+                    div.classList.remove(styles.highlighted);
+                }
+              });
+              highlight(null);
+            }, 500);
+
+            return () => clearTimeout(timeoutId);
+      }, [highlightedParagraph]);
+
+      useEffect(() => {
+          // Additional effect to handle the initial rendering when highlightedParagraph is null
+          const divs = document.querySelectorAll('div');
+          divs.forEach((div) => {
+            div.classList.remove(styles.highlighted);
+          });
+        }, []); // Empty dependency array for initial rendering
 
-export default function About() {
     return (
+        <div className={styles.PageContent}>
         <article>
-            <p><Link to="/">Back to Main</Link></p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et laoreet magna. Vivamus consectetur lacus sed neque placerat, quis rhoncus nisl sodales. Etiam gravida scelerisque sem, ut vehicula libero vulputate nec. Sed ut orci id est hendrerit vulputate volutpat at lectus. Nulla maximus est nisl, nec dignissim enim laoreet non. Curabitur nunc metus, bibendum ut mi nec, posuere fermentum felis. Curabitur pulvinar laoreet tortor, ut faucibus mi tempus eu. Vivamus ut rutrum diam, et tincidunt magna. Suspendisse egestas in ante non suscipit. Ut massa augue, commodo id facilisis eget, vestibulum a mauris.</p>
-            <p>Curabitur mi tellus, dignissim in tristique et, rhoncus quis enim. Curabitur ut ipsum justo. Pellentesque purus urna, feugiat ut nunc nec, luctus blandit felis. Donec ac sem dolor. Sed eget quam urna. Maecenas varius consectetur convallis. Ut non turpis id ex volutpat condimentum sit amet sed lacus. Proin vel nisl ut magna ornare lobortis. Nullam non diam ut lorem aliquam faucibus sed scelerisque nisl. Ut mattis urna sem, id lobortis velit iaculis ut. Donec vestibulum lacus id pretium facilisis. Maecenas iaculis dolor in mi placerat placerat. Aenean aliquet ex eros, accumsan sodales diam laoreet sit amet. Nam vehicula pulvinar metus, quis condimentum erat blandit ac.</p>
-            <p>Sed consectetur sodales massa, sit amet gravida est consectetur non. Cras pretium enim urna, semper euismod est euismod quis. Integer dui quam, blandit feugiat orci quis, laoreet ullamcorper est. Maecenas pulvinar magna dictum odio elementum sodales. Sed id metus finibus, vehicula nibh blandit, mollis tellus. Cras quis mauris at neque pulvinar venenatis. Vivamus pellentesque ipsum sit amet convallis tempor. Donec dictum faucibus sem, ut molestie lacus finibus volutpat.</p>
-            <p>Suspendisse ac augue ac mi sagittis congue sed feugiat ex. Donec pretium rhoncus nisi vitae aliquam. Aliquam eget semper mauris, eleifend bibendum ipsum. Integer nec quam vitae erat blandit consectetur. Nullam non nunc ac leo tristique bibendum. Donec sed felis non ex ornare suscipit nec a nulla. Ut dignissim diam ut metus sagittis, sed faucibus nisi fringilla. Vestibulum ut felis vitae ligula feugiat iaculis.</p>
+            <p><Link to="/">Back to Main Page</Link></p>
+            <h2 className={styles.AboutHeader}>About</h2>
+            <div id=""><p className={styles.Content}>
+                    Piro is an application that assists with rational planning of solid-state synthesis routes for inorganics.
+                    It is a recommendation system for navigation and planning of synthesis of inorganic materials based on classical
+                    nucleation theory and semi-empirical, data-driven approximations to its parts. Currently it works with Materials Project data via its Rester API.
+                    <br/><br/>
+                    Piro creates synthesis reaction planning plots for target polymorphs under a specific set of thermodynamic
+                    conditions and a precursor library, where favorable routes are those that are (nearly) Pareto optimal in terms of two metrics:
+                    nucleation barrier and phase-selection. It allows retrosynthetic analysis of target inorganic materials
+                    to generate a synthesis reaction tree. (i.e. laying out the reaction pathways necessary to arrive at the
+                    target from practical/purchasable reagents/starting materials)
+            </p></div>
+            <p className={styles.gap}></p>
+            <div id="contact"><h4 className={styles.Titles}>Contact</h4>
+            <p className={styles.Content}>
+                    The piro platform is developed by a team of researchers and software developers at Toyota Research Institute: Murat Aykol,
+                    Joseph Montoya, Jens Hummelshøj, Chris Fajardo, Michael Puzon, and Reko Ong.
+                    If you have any questions or feedback, please reach out to us at <a href="mailto:[email protected]">[email protected]</a>
+            </p></div>
+            <p className={styles.gap}></p>
+            <div id="code"><h4 className={styles.Titles}>Code</h4>
+            <p className={styles.Content}>
+                    If you’d like to use the python interface to piro, or to access the code for this site,
+                    please visit our github page: <a href="https://github.com/TRI-AMDD/piro" target="_blank">https://github.com/TRI-AMDD/piro</a>.
+                    Tutorial jupyter notebooks showing how to use piro locally are provided in the notebooks folder.
+            </p>
+            </div>
+             <p className={styles.gap}></p>
+            <div id="manuscript">
+            <h4 className={styles.Titles}>Manuscript</h4>
+            <p className={styles.Content}>
+                    For more information about the physical theory behind piro, please read our paper,
+                    “Rational Solid-State Synthesis Routes for Inorganic Materials” by Murat Aykol et al.
+                    <a href="https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888" target="_blank">(https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888)</a>.
+            </p></div>
         </article>
+        </div>
     );
-}
+};
+
+export default About;