Enhance AboutPage layout and add back button; update App.css for impr…

…oved styling
ntemposd · Jan 5, 2025 · ca836bf · ca836bf
1 parent 8410e3a
commit ca836bf
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 29 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,8 +5,8 @@
 }
 
 .App-logo {
-    width: 160px;
-    height: 160px;
+    width: 200px;
+    height: 200px;
     transition: transform var(--transition-speed) ease;
     pointer-events: none;
 }
@@ -116,6 +116,20 @@ input[type="date"]::placeholder {
     transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add hover animation */
 }
 
+.about {
+    width: 85%;
+    margin: 10px auto;
+    padding: 30px 20px; /* Adjusted for original typography */
+    font-size: 1.1rem; /* Restored original typography */
+    line-height: 1.5; /* Restored original line-height */
+    color: var(--text-color);
+    background-color: #fff; /* Bright white background */
+    border: 1px solid rgba(0, 0, 0, 0.1); 
+    border-radius: var(--border-radius); /* Smooth corners */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for modern look */
+    text-align: center;
+}
+
 .message.show {
     opacity: 1; /* Animations for Message Visibility */
 }
@@ -128,4 +142,37 @@ footer {
     /* background-color: var(--light-bg-color); */
     padding: 1rem 0;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
-}
+}
+
+.back-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    /* background-color: #f0f0f0; */
+    color: #333;
+    border: none;
+    border-radius: 50px;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+
+  .back-button .material-icons {
+    font-size: 18px;
+  }
+
+  .back-button:hover {
+    background-color: #e0e0e0;
+    transform: translateY(-2px);
+  }
+
+  .back-button:focus {
+    outline: 2px solid #ffcc00;
+  }
+
diff --git a/src/components/AboutPage.js b/src/components/AboutPage.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
 import babyImage from '../assets/baby-girl.svg';
 import headerImage from '../assets/baby_texture.png';
 
@@ -11,61 +12,72 @@ preloadImage(babyImage);
 preloadImage(headerImage);
 
 const AboutPage = () => {
+  const navigate = useNavigate(); // Initialize useNavigate
+
   return (
     <div className="App text-center">
       <header className="App-header">
-        <div className="container pt-4">
+        <div className="container pt-4 position-relative">
+          {/* Back Button */}
+          <button
+            onClick={() => navigate('/')} // Navigate to homepage
+            className="back-button"
+            aria-label="Back to Homepage"
+          >
+            <span className="material-icons">arrow_back</span> Home
+          </button>
+
           <img src={babyImage} className="App-logo" alt="Baby" />
           <h1 className="fw-bold">Growth Leaps</h1>
-          <p className="fw-light mt-1"><span className="highlight">Why I built this app.</span>{' '}
+          <p className="fw-light mt-1">
+            <span className="lead">Why I built this app.</span>{' '}
             <span
               className="material-icons"
               aria-label="Under construction"
             >
               construction
-            </span>{' '}
-
+            </span>
           </p>
         </div>
         <svg height="1" width="100%" className="header-line">
           <line x1="0" y1="0" x2="100%" y2="1" stroke="yellow" strokeWidth="4" />
         </svg>
       </header>
       <main>
-          
+        <section className="about container container-fluid container-lg container-md container-sm container-xl container-xxl">
           <p>
-            During a child’s first year, unexpected short-term mood changes, without other medical signs, may be linked to transitions between growth cycle stages. These periods, often referred to as Growth Leaps, vary from child to child and are rather based on observation than in scientific evidence. Understanding transitions can help parents navigate their child's infancy with greater patience.
+            During a child's first year, brief periods of unexpected mood
+            changes, occurring without other noticeable symptoms, may be linked
+            to transitions between growth cycle stages. Often referred to as
+            "Growth Leaps", these periods vary from child to child and are
+            primarily based on observation rather than scientific evidence.
+            Gaining insight into these transitions can help parents approach
+            their child's infancy with greater patience.
           </p>
           <h2>How it works</h2>
           <p>
-            The app helped my partner quickly calculate the current week of our kids' growth cycles,
-            saving the need to count manually in the calendar. The app is free,{' '}
+            Simply input a birthdate to calculate the weeks since birth and view
+            developmental progress content for a baby's first year. Using the
+            app, we’ve been able to quickly determine the current week of our
+            kids' growth cycles, which has been especially helpful for my
+            partner, saving the hassle of manually counting on a calendar. The
+            app is free,{' '}
             <a
               href="https://github.com/ntemposd/babyweeks"
               target="_blank"
               rel="noopener noreferrer"
               className="link"
             >
               open-source
-            </a>{' '}
-            and runs on your browser.
-          </p>
-
-          <h2>Upcoming improvements</h2>
-          <ul className="list-group mt-1">
-            <li className="list-group-item">Translate into more languages</li>
-            <li className="list-group-item">Add year 1+ transitions content</li>
-          </ul>
-          <p className="mt-4">
-            Have an idea? Send me an{' '}
-            <a
-              href="mailto:[email protected]"
-              className="link"
-            >
-              email
             </a>
-            .
+            , and runs directly in your browser.
+          </p>
+
+          <h2>Roadmap</h2>
+          <p>Add languages <br />
+             Add more content <br />
           </p>
+        </section>
       </main>
 
       <footer>

diff --git a/src/components/BabyWeeksCalculator.js b/src/components/BabyWeeksCalculator.js
@@ -47,7 +47,7 @@ function BabyWeeksCalculator() {
         <div className="container pt-4">
           <img src={babyImage} className="App-logo" alt="Baby" />
           <h1 className="fw-bold">Growth Leaps</h1>
-          <p className="fw-light mt-1">Explore Your Infant's Development <Link to="/about"><span className="material-icons">info</span>
+          <p className="lead">Explore Your Infant's Development <Link to="/about"><span className="material-icons">info</span>
           </Link></p>
         </div>
         <svg height="1" width="100%" className="header-line">