this repo has no description
Add "Why Phanpy?" section
+115
src/assets/features/boosts-carousel.jpg
src/assets/features/boosts-carousel.jpg
This is a binary file and will not be displayed.
src/assets/features/grouped-notifications.jpg
src/assets/features/grouped-notifications.jpg
This is a binary file and will not be displayed.
src/assets/features/multi-column.jpg
src/assets/features/multi-column.jpg
This is a binary file and will not be displayed.
src/assets/features/multi-hashtag-timeline.jpg
src/assets/features/multi-hashtag-timeline.jpg
This is a binary file and will not be displayed.
src/assets/features/nested-comments-thread.jpg
src/assets/features/nested-comments-thread.jpg
This is a binary file and will not be displayed.
+42
src/pages/welcome.css
+42
src/pages/welcome.css
···
44
44
#welcome:hover h2 {
45
45
animation: psychedelic 10s infinite alternate;
46
46
}
47
+
48
+
#why-container summary {
49
+
font-weight: bold;
50
+
margin: 16px 0;
51
+
padding: 0;
52
+
text-decoration: underline;
53
+
cursor: pointer;
54
+
}
55
+
#why-container[open] summary {
56
+
text-decoration: none;
57
+
opacity: 0.5;
58
+
}
59
+
60
+
#why-container .sections section {
61
+
text-align: start;
62
+
max-width: 480px;
63
+
background-color: var(--bg-color);
64
+
border-radius: 30px;
65
+
border: 1px solid var(--bg-color);
66
+
font-weight: 600;
67
+
font-size: 106.25%;
68
+
overflow: hidden;
69
+
box-shadow: 0 0 0 1px var(--outline-color),
70
+
0 4px 16px -8px var(--drop-shadow-color);
71
+
margin-bottom: 16px;
72
+
}
73
+
#why-container .sections section h4 {
74
+
margin: 0;
75
+
padding: 30px 30px 0;
76
+
font-size: 111.765%;
77
+
color: var(--blue-color);
78
+
font-weight: 600;
79
+
}
80
+
#why-container .sections section p {
81
+
margin-inline: 30px;
82
+
margin-bottom: 30px;
83
+
}
84
+
#why-container .sections section img {
85
+
width: 100%;
86
+
height: auto;
87
+
border-top: 1px solid var(--outline-color);
88
+
}
+73
src/pages/welcome.jsx
+73
src/pages/welcome.jsx
···
1
1
import './welcome.css';
2
2
3
+
import boostsCarouselUrl from '../assets/features/boosts-carousel.jpg';
4
+
import groupedNotificationsUrl from '../assets/features/grouped-notifications.jpg';
5
+
import multiColumnUrl from '../assets/features/multi-column.jpg';
6
+
import multiHashtagTimelineUrl from '../assets/features/multi-hashtag-timeline.jpg';
7
+
import nestedCommentsThreadUrl from '../assets/features/nested-comments-thread.jpg';
3
8
import logo from '../assets/logo.svg';
4
9
import Link from '../components/link';
5
10
import states from '../utils/states';
···
36
41
</b>
37
42
</big>
38
43
</p>
44
+
<details id="why-container">
45
+
<summary>Why Phanpy?</summary>
46
+
<div class="sections">
47
+
<section>
48
+
<h4>Boosts Carousel</h4>
49
+
<p>
50
+
Visually separate original posts and re-shared posts (boosted
51
+
posts).
52
+
</p>
53
+
<img
54
+
src={boostsCarouselUrl}
55
+
alt="Screenshot of Boosts Carousel"
56
+
loading="lazy"
57
+
/>
58
+
</section>
59
+
<section>
60
+
<h4>Nested comments thread</h4>
61
+
<p>Effortlessly follow conversations. Semi-collapsible replies.</p>
62
+
<img
63
+
src={nestedCommentsThreadUrl}
64
+
alt="Screenshot of nested comments thread"
65
+
loading="lazy"
66
+
/>
67
+
</section>
68
+
<section>
69
+
<h4>Grouped notifications</h4>
70
+
<p>
71
+
Similar notifications are grouped and collapsed to reduce clutter.
72
+
</p>
73
+
<img
74
+
src={groupedNotificationsUrl}
75
+
alt="Screenshot of grouped notifications"
76
+
loading="lazy"
77
+
/>
78
+
</section>
79
+
<section>
80
+
<h4>Single or multi-column</h4>
81
+
<p>
82
+
By default, single column for zen-mode seekers. Configurable
83
+
multi-column for power users.
84
+
</p>
85
+
<img
86
+
src={multiColumnUrl}
87
+
alt="Screenshot of multi-column UI"
88
+
loading="lazy"
89
+
/>
90
+
</section>
91
+
<section>
92
+
<h4>Multi-hashtag timeline</h4>
93
+
<p>Up to 5 hashtags combined into a single timeline.</p>
94
+
<img
95
+
src={multiHashtagTimelineUrl}
96
+
alt="Screenshot of multi-hashtag timeline with a form to add more hashtags"
97
+
loading="lazy"
98
+
/>
99
+
</section>
100
+
<p>Convinced yet?</p>
101
+
<p>
102
+
<big>
103
+
<b>
104
+
<Link to="/login" class="button">
105
+
Log in
106
+
</Link>
107
+
</b>
108
+
</big>
109
+
</p>
110
+
</div>
111
+
</details>
39
112
<hr />
40
113
<p>
41
114
<a href="https://github.com/cheeaun/phanpy" target="_blank">