Skip to content

Commit 7392b44

Browse files
adarshaacharyaadarshaacharya
committed
feat: revamp landing page to showcase real-time data and enhance user experience
Updated the landing page to display genuine daily data, including Bikram Sambat dates, festivals, and various rates, replacing the previous static feature list. Enhanced the CSS for improved layout and responsiveness, introducing a new board format for presenting information clearly. This update aims to provide users with a more interactive and informative experience.
1 parent 7f9e720 commit 7392b44

2 files changed

Lines changed: 277 additions & 60 deletions

File tree

‎apps/landing/index.html‎

Lines changed: 92 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -181,47 +181,101 @@ <h2>See it in action</h2>
181181
<div class="wrap">
182182
<div class="section-head">
183183
<h2>Everything Nepal checks in a day</h2>
184-
<p class="section-sub">Nine modules, one compact popover. Toggle what you need in Settings.</p>
184+
<p class="section-sub">A real day, exactly as the app shows it. Every number below is genuine, not a mockup.</p>
185185
</div>
186186

187-
<div class="feature-list">
188-
<article class="feature-item">
189-
<h3>Bikram Sambat calendar</h3>
190-
<p>AD conversion, tithi, festivals, and public holidays. Fully offline.</p>
191-
</article>
192-
<article class="feature-item">
193-
<h3>News</h3>
194-
<p>Headlines from ten Nepali newsrooms, in Nepali and English, all day.</p>
195-
</article>
196-
<article class="feature-item">
197-
<h3>Bazar &amp; NEPSE</h3>
198-
<p>Gold, silver, fuel, Kalimati vegetables, and a NEPSE watchlist.</p>
199-
</article>
200-
<article class="feature-item">
201-
<h3>Rashifal</h3>
202-
<p>Daily rashifal for all twelve rashis, with a quick sign finder.</p>
203-
</article>
204-
<article class="feature-item">
205-
<h3>Day plans &amp; Keeper</h3>
206-
<p>Notes on any BS date, plus renewals and bills tracked by due date.</p>
207-
</article>
208-
<article class="feature-item">
209-
<h3>Weather &amp; forex</h3>
210-
<p>Kathmandu weather and air quality, plus Nepal Rastra Bank rates.</p>
211-
</article>
212-
<article class="feature-item">
213-
<h3>World clocks &amp; radio</h3>
214-
<p>Pin cities beside Nepal time and stream Nepali FM stations in-app.</p>
215-
</article>
216-
<article class="feature-item">
217-
<h3>Nepali unit tools</h3>
218-
<p>Land, weight, VAT, and simple-interest conversions in Nepali units.</p>
219-
</article>
220-
<article class="feature-item">
221-
<h3>Nepali or English</h3>
222-
<p>The full interface in either language, with Devanagari or English numerals.</p>
223-
</article>
187+
<!--
188+
The date, the tithi, the festivals and every rate below are read out of
189+
apps/showcase/src/data/scenes.json — the recording the panels above run
190+
on, produced by apps/showcase-data from the real engine and the real
191+
parsers. They describe the same day the carousel does. Refresh them
192+
together: `cd apps/showcase && bun run data && bun run build`.
193+
-->
194+
<div class="day">
195+
<div class="day-date">
196+
<p class="day-bs" lang="ne">१० भदौ २०८३</p>
197+
<p class="day-ad">Wednesday, 26 August 2026 <span class="day-tithi" lang="ne">त्रयोदशी</span></p>
198+
<p class="day-note">Dates, festivals and public holidays work fully offline, every year from 2066 to 2083 &mdash; and you can jot a note on any day.</p>
199+
</div>
200+
201+
<ol class="day-next">
202+
<li>
203+
<span class="day-next-name" lang="ne">पूर्णिमाव्रत, बाजुरा बडिमालिका मेला</span>
204+
<span class="day-next-when">Tomorrow</span>
205+
</li>
206+
<li class="is-holiday">
207+
<span class="day-next-name" lang="ne">ऋषितर्पणी, रक्षाबन्धन</span>
208+
<span class="day-next-when">In 2 days <span class="day-next-flag">Public holiday</span></span>
209+
</li>
210+
<li class="is-holiday">
211+
<span class="day-next-name" lang="ne">गाईजात्रा (सापारू)</span>
212+
<span class="day-next-when">In 3 days <span class="day-next-flag">Public holiday</span></span>
213+
</li>
214+
</ol>
224215
</div>
216+
217+
<dl class="board">
218+
<div class="board-row">
219+
<dt><span lang="ne">समाचार</span> <span class="board-en">News</span></dt>
220+
<dd class="board-value">10 newsrooms</dd>
221+
<p class="board-note">Gorkhapatra, Kantipur, OnlineKhabar, Ratopati, The Kathmandu Post and five more, in Nepali and English.</p>
222+
</div>
223+
<div class="board-row">
224+
<dt><span lang="ne">सुनचाँदी</span> <span class="board-en">Fine gold</span></dt>
225+
<dd class="board-value">Rs 3,06,800 <span class="board-unit">/ tola</span></dd>
226+
<p class="board-note">FENEGOSIDA's published rate, up Rs 1,600 on the day before. Silver Rs 4,770.</p>
227+
</div>
228+
<div class="board-row">
229+
<dt><span lang="ne">नेप्से</span> <span class="board-en">NEPSE</span></dt>
230+
<dd class="board-value">2,558.35 <span class="board-delta">&minus;1.38%</span></dd>
231+
<p class="board-note">The index, thirteen sub-indices, four leaderboards and all 348 listed companies.</p>
232+
</div>
233+
<div class="board-row">
234+
<dt><span lang="ne">इन्धन</span> <span class="board-en">Petrol</span></dt>
235+
<dd class="board-value">Rs 200 <span class="board-unit">/ litre</span></dd>
236+
<p class="board-note">Nepal Oil Corporation, in force since 2 August. Diesel, kerosene and the LPG cylinder too.</p>
237+
</div>
238+
<div class="board-row">
239+
<dt><span lang="ne">तरकारी</span> <span class="board-en">Kalimati</span></dt>
240+
<dd class="board-value">Rs 65 <span class="board-unit">/ kg</span></dd>
241+
<p class="board-note">Average for <span lang="ne">गोलभेडा ठूलो(नेपाली)</span>. 101 items, wholesale, with the day's low and high.</p>
242+
</div>
243+
<div class="board-row">
244+
<dt><span lang="ne">मौसम</span> <span class="board-en">Kathmandu</span></dt>
245+
<dd class="board-value">23&deg; <span class="board-unit">AQI 90</span></dd>
246+
<p class="board-note">Open-Meteo: six-day forecast, PM2.5 and PM10, and what the air quality means today.</p>
247+
</div>
248+
<div class="board-row">
249+
<dt><span lang="ne">विनिमय दर</span> <span class="board-en">US dollar</span></dt>
250+
<dd class="board-value">Rs 152.39</dd>
251+
<p class="board-note">Nepal Rastra Bank's buying rate. 22 currencies, buy and sell, with your own pinned first.</p>
252+
</div>
253+
<div class="board-row">
254+
<dt><span lang="ne">राशिफल</span> <span class="board-en">Rashifal</span></dt>
255+
<dd class="board-value">12 <span class="board-unit" lang="ne">राशि</span></dd>
256+
<p class="board-note">The day's reading for every sign, and a finder that takes the first syllable of a name.</p>
257+
</div>
258+
<div class="board-row">
259+
<dt><span lang="ne">रेडियो</span> <span class="board-en">Radio</span></dt>
260+
<dd class="board-value">272 stations</dd>
261+
<p class="board-note">Nepali FM, streamed in the popover, with the player docked while you use the rest.</p>
262+
</div>
263+
<div class="board-row">
264+
<dt><span lang="ne">औजार</span> <span class="board-en">Tools</span></dt>
265+
<dd class="board-value">1 ropani = 5,476 ft&sup2;</dd>
266+
<p class="board-note">Land in ropani and bigha, tola to grams, VAT, simple interest, and a second clock for any city.</p>
267+
</div>
268+
<div class="board-row">
269+
<dt><span lang="ne">सम्हाल</span> <span class="board-en">Keeper</span></dt>
270+
<dd class="board-value">5 document types</dd>
271+
<p class="board-note">Citizenship, passport, licence, national ID and PAN, with renewals and bills tracked by due date.</p>
272+
</div>
273+
<div class="board-row">
274+
<dt><span lang="ne">भाषा</span> <span class="board-en">Language</span></dt>
275+
<dd class="board-value" lang="ne">नेपाली <span class="board-unit">/ English</span></dd>
276+
<p class="board-note">The whole interface in either, with Devanagari or Latin numerals. Any module you do not want, off in Settings.</p>
277+
</div>
278+
</dl>
225279
</div>
226280
</section>
227281

‎apps/landing/style.css‎

Lines changed: 185 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1104,55 +1104,218 @@ section {
11041104

11051105
/* ---------- features ---------- */
11061106

1107+
/*
1108+
* The rate board.
1109+
*
1110+
* This section used to be nine equal cells of heading-and-sentence, which is
1111+
* the shape every landing page reaches for and the one place on this page that
1112+
* described the product instead of showing it. Everything above it embeds the
1113+
* running app; this opted out and read as filler.
1114+
*
1115+
* What replaced it is the thing the app actually is: a board of the day's
1116+
* figures, the way a rate is posted in a shop window — a Bikram Sambat date at
1117+
* full display size, the festivals it leads to, and beneath them what each
1118+
* module answered, in the units Nepal uses. Every number is read out of the
1119+
* same recording the panels above run on, so the section cannot claim a figure
1120+
* the product could not produce.
1121+
*/
1122+
11071123
.features-section {
11081124
background: var(--canvas);
11091125
}
11101126

1111-
.feature-list {
1127+
/* ---- the day */
1128+
1129+
.day {
11121130
display: grid;
1113-
grid-template-columns: repeat(3, minmax(0, 1fr));
1114-
column-gap: clamp(28px, 4vw, 56px);
1115-
border-bottom: 1px solid var(--divider);
1131+
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
1132+
align-items: start;
1133+
gap: clamp(28px, 5vw, 72px);
1134+
padding-bottom: clamp(30px, 4vw, 44px);
11161135
}
11171136

1118-
@media (max-width: 860px) {
1119-
.feature-list {
1120-
grid-template-columns: repeat(2, minmax(0, 1fr));
1137+
@media (max-width: 780px) {
1138+
.day {
1139+
grid-template-columns: minmax(0, 1fr);
1140+
gap: 28px;
11211141
}
11221142
}
11231143

1124-
@media (max-width: 560px) {
1125-
.feature-list {
1126-
grid-template-columns: 1fr;
1144+
.day-bs {
1145+
font-family: var(--devanagari);
1146+
font-weight: 700;
1147+
/* The one place on the page where Devanagari runs at display size. It is the
1148+
product's subject, so it gets the largest type in the section. */
1149+
font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
1150+
line-height: 1.06;
1151+
letter-spacing: -0.02em;
1152+
margin: 0;
1153+
text-wrap: balance;
1154+
}
1155+
1156+
.day-ad {
1157+
margin: 10px 0 0;
1158+
font-size: 15px;
1159+
color: var(--text-secondary);
1160+
font-variant-numeric: tabular-nums;
1161+
}
1162+
1163+
.day-tithi {
1164+
font-family: var(--devanagari);
1165+
color: var(--gold);
1166+
margin-left: 6px;
1167+
}
1168+
1169+
.day-note {
1170+
margin: 18px 0 0;
1171+
max-width: 46ch;
1172+
font-size: 15px;
1173+
line-height: 1.65;
1174+
color: var(--text-muted);
1175+
text-wrap: pretty;
1176+
}
1177+
1178+
/* ---- what the date leads to */
1179+
1180+
.day-next {
1181+
list-style: none;
1182+
margin: 6px 0 0;
1183+
padding: 0;
1184+
}
1185+
1186+
.day-next li {
1187+
display: flex;
1188+
align-items: baseline;
1189+
justify-content: space-between;
1190+
gap: 16px;
1191+
padding: 11px 0;
1192+
border-top: 1px solid var(--divider);
1193+
}
1194+
1195+
.day-next li:last-child {
1196+
border-bottom: 1px solid var(--divider);
1197+
}
1198+
1199+
.day-next-name {
1200+
font-family: var(--devanagari);
1201+
font-size: 15px;
1202+
min-width: 0;
1203+
overflow: hidden;
1204+
text-overflow: ellipsis;
1205+
white-space: nowrap;
1206+
}
1207+
1208+
.day-next li.is-holiday .day-next-name {
1209+
color: var(--holiday);
1210+
}
1211+
1212+
.day-next-when {
1213+
flex: none;
1214+
font-size: 13px;
1215+
color: var(--text-muted);
1216+
font-variant-numeric: tabular-nums;
1217+
}
1218+
1219+
/* Never colour alone: the holiday tint above is paired with the word. */
1220+
.day-next-flag {
1221+
margin-left: 8px;
1222+
padding: 2px 6px;
1223+
border-radius: 999px;
1224+
border: 1px solid color-mix(in srgb, var(--holiday) 32%, transparent);
1225+
color: var(--holiday);
1226+
font-size: 11px;
1227+
letter-spacing: 0.01em;
1228+
white-space: nowrap;
1229+
}
1230+
1231+
/* ---- the board */
1232+
1233+
.board {
1234+
display: grid;
1235+
grid-template-columns: repeat(2, minmax(0, 1fr));
1236+
column-gap: clamp(28px, 4vw, 64px);
1237+
margin: 0;
1238+
border-bottom: 1px solid var(--divider);
1239+
}
1240+
1241+
@media (max-width: 780px) {
1242+
.board {
1243+
grid-template-columns: minmax(0, 1fr);
11271244
}
11281245
}
11291246

1130-
.feature-item {
1131-
padding: 20px 0 26px;
1247+
.board-row {
1248+
display: grid;
1249+
grid-template-columns: minmax(0, 1fr) auto;
1250+
align-items: baseline;
1251+
column-gap: 20px;
1252+
padding: 16px 0 18px;
11321253
border-top: 1px solid var(--divider);
11331254
}
11341255

1135-
.feature-item h3 {
1136-
margin: 0 0 6px;
1137-
font-size: 0.95rem;
1256+
.board-row dt {
1257+
font-family: var(--devanagari);
1258+
font-size: 1rem;
11381259
font-weight: 600;
11391260
letter-spacing: -0.01em;
1140-
transition: color 0.15s var(--ease-out-quart);
1261+
min-width: 0;
11411262
}
11421263

1143-
.feature-item:hover h3 {
1144-
color: var(--gold);
1264+
.board-en {
1265+
font-family: var(--sans);
1266+
font-weight: 400;
1267+
font-size: 13px;
1268+
color: var(--text-muted);
1269+
margin-left: 8px;
11451270
}
11461271

1147-
.feature-item p {
1272+
.board-value {
11481273
margin: 0;
1149-
font-size: 14px;
1150-
line-height: 1.65;
1274+
font-family: var(--display);
1275+
font-weight: 600;
1276+
font-size: 1.0625rem;
1277+
letter-spacing: -0.015em;
1278+
/* A board of figures has to align down the column, and these are numbers
1279+
being compared, not text being read. */
1280+
font-variant-numeric: tabular-nums;
1281+
white-space: nowrap;
1282+
}
1283+
1284+
.board-unit {
1285+
font-weight: 400;
1286+
font-size: 13px;
1287+
color: var(--text-muted);
1288+
letter-spacing: 0;
1289+
}
1290+
1291+
.board-delta {
1292+
font-weight: 500;
1293+
font-size: 13px;
1294+
color: var(--holiday);
1295+
letter-spacing: 0;
1296+
}
1297+
1298+
.board-note {
1299+
grid-column: 1 / -1;
1300+
margin: 7px 0 0;
1301+
max-width: 46ch;
1302+
font-size: 13.5px;
1303+
line-height: 1.6;
11511304
color: var(--text-muted);
1152-
max-width: 34ch;
11531305
text-wrap: pretty;
11541306
}
11551307

1308+
@media (max-width: 420px) {
1309+
.board-row {
1310+
grid-template-columns: minmax(0, 1fr);
1311+
row-gap: 4px;
1312+
}
1313+
1314+
.board-value {
1315+
white-space: normal;
1316+
}
1317+
}
1318+
11561319
/* ---------- install ---------- */
11571320

11581321
.install-lead {

0 commit comments

Comments
 (0)