Add "Why Phanpy?" section

src/pages/welcome.css

@@ -44,3 +44,45 @@
 #welcome:hover h2 {
   animation: psychedelic 10s infinite alternate;
 }
+
+#why-container summary {
+  font-weight: bold;
+  margin: 16px 0;
+  padding: 0;
+  text-decoration: underline;
+  cursor: pointer;
+}
+#why-container[open] summary {
+  text-decoration: none;
+  opacity: 0.5;
+}
+
+#why-container .sections section {
+  text-align: start;
+  max-width: 480px;
+  background-color: var(--bg-color);
+  border-radius: 30px;
+  border: 1px solid var(--bg-color);
+  font-weight: 600;
+  font-size: 106.25%;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--outline-color),
+    0 4px 16px -8px var(--drop-shadow-color);
+  margin-bottom: 16px;
+}
+#why-container .sections section h4 {
+  margin: 0;
+  padding: 30px 30px 0;
+  font-size: 111.765%;
+  color: var(--blue-color);
+  font-weight: 600;
+}
+#why-container .sections section p {
+  margin-inline: 30px;
+  margin-bottom: 30px;
+}
+#why-container .sections section img {
+  width: 100%;
+  height: auto;
+  border-top: 1px solid var(--outline-color);
+}

src/pages/welcome.jsx

@@ -1,5 +1,10 @@
 import './welcome.css';
 
+import boostsCarouselUrl from '../assets/features/boosts-carousel.jpg';
+import groupedNotificationsUrl from '../assets/features/grouped-notifications.jpg';
+import multiColumnUrl from '../assets/features/multi-column.jpg';
+import multiHashtagTimelineUrl from '../assets/features/multi-hashtag-timeline.jpg';
+import nestedCommentsThreadUrl from '../assets/features/nested-comments-thread.jpg';
 import logo from '../assets/logo.svg';
 import Link from '../components/link';
 import states from '../utils/states';
@@ -36,6 +41,74 @@ function Welcome() {
           </b>
         </big>
       </p>
+      <details id="why-container">
+        <summary>Why Phanpy?</summary>
+        <div class="sections">
+          <section>
+            <h4>Boosts Carousel</h4>
+            <p>
+              Visually separate original posts and re-shared posts (boosted
+              posts).
+            </p>
+            <img
+              src={boostsCarouselUrl}
+              alt="Screenshot of Boosts Carousel"
+              loading="lazy"
+            />
+          </section>
+          <section>
+            <h4>Nested comments thread</h4>
+            <p>Effortlessly follow conversations. Semi-collapsible replies.</p>
+            <img
+              src={nestedCommentsThreadUrl}
+              alt="Screenshot of nested comments thread"
+              loading="lazy"
+            />
+          </section>
+          <section>
+            <h4>Grouped notifications</h4>
+            <p>
+              Similar notifications are grouped and collapsed to reduce clutter.
+            </p>
+            <img
+              src={groupedNotificationsUrl}
+              alt="Screenshot of grouped notifications"
+              loading="lazy"
+            />
+          </section>
+          <section>
+            <h4>Single or multi-column</h4>
+            <p>
+              By default, single column for zen-mode seekers. Configurable
+              multi-column for power users.
+            </p>
+            <img
+              src={multiColumnUrl}
+              alt="Screenshot of multi-column UI"
+              loading="lazy"
+            />
+          </section>
+          <section>
+            <h4>Multi-hashtag timeline</h4>
+            <p>Up to 5 hashtags combined into a single timeline.</p>
+            <img
+              src={multiHashtagTimelineUrl}
+              alt="Screenshot of multi-hashtag timeline with a form to add more hashtags"
+              loading="lazy"
+            />
+          </section>
+          <p>Convinced yet?</p>
+          <p>
+            <big>
+              <b>
+                <Link to="/login" class="button">
+                  Log in
+                </Link>
+              </b>
+            </big>
+          </p>
+        </div>
+      </details>
       <hr />
       <p>
         <a href="https://github.com/cheeaun/phanpy" target="_blank">