Add "Why Phanpy?" section

This commit is contained in:
Lim Chee Aun 2023-04-24 22:58:14 +08:00
parent 8e46da5e80
commit 1dc14105eb
7 changed files with 115 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

View file

@ -44,3 +44,45 @@
#welcome:hover h2 { #welcome:hover h2 {
animation: psychedelic 10s infinite alternate; 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);
}

View file

@ -1,5 +1,10 @@
import './welcome.css'; 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 logo from '../assets/logo.svg';
import Link from '../components/link'; import Link from '../components/link';
import states from '../utils/states'; import states from '../utils/states';
@ -36,6 +41,74 @@ function Welcome() {
</b> </b>
</big> </big>
</p> </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 /> <hr />
<p> <p>
<a href="https://github.com/cheeaun/phanpy" target="_blank"> <a href="https://github.com/cheeaun/phanpy" target="_blank">