Skip to content

Commit a9b118a

Browse files
ankitkr104ankitkr104
committed
feat: UI improvements — deployment cards, HOW IT WORKS content, and layout fixes
Changes in this PR: 1. Standardise HOW IT WORKS step content (app/page.tsx + lib/i18n/locales/en.json) - Step 3: 'Mint EquityCoin' → 'Use or Redeem' with updated description focused on user action (payments or redemption) rather than internal minting - Step 4: 'Trigger Redemptions' → 'Automatic Safety Protection' with updated description explaining reserve ratio protection and peg maintenance - Updated howItWorksDesc to reflect the cleaner, user-facing flow 2. Fix HOW IT WORKS card alignment (app/page.tsx) - Added md:items-stretch to the grid so all 4 cards match the tallest card height - Added flex flex-col to each card for proper vertical stretching - Added flex-1 to description paragraphs so they fill remaining space evenly - Added flex-shrink-0 to number circles and arrows to prevent squishing - Unified title font size to text-base across all 4 cards (was inconsistent text-lg) 3. Remove EquityCoins and Trigger Redemptions nav buttons (app/deployments/page.tsx) - Removed the two bottom navigation buttons from the Deployments page - Removed the divider above them - Page now ends cleanly after the deployment cards grid 4. Redesign deployment detail page layout (app/deployments/[id]/DeploymentDetailClient.tsx) - Replaced single 4-tab action panel with two dedicated cards: StableCoin card (Supply, Crash Tolerance, Reserve Ratio + Mint/Redeem) EquityCoin card (Supply, Annual Yield, Leverage + Mint/Redeem) - Added Deployment Health section (Total Reserve, ratio slider, Trigger Redemptions status) - Trigger Redemption button appears inside the detail page only when status is danger - Removed redundant ReserveWidget, Quick Reference, and Reserve Asset/Network rows - Added Crash Tolerance metric calculated from reserve ratio
1 parent 60721f1 commit a9b118a

4 files changed

Lines changed: 49 additions & 59 deletions

File tree

‎app/deployments/[id]/DeploymentDetailClient.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -331,11 +331,15 @@ export default function DeploymentDetailClient({ id }: { id: string }) {
331331
<div>
332332
<p className="text-xs text-gray-400 mb-2">{tDetail("triggerRedemptions")}</p>
333333
{d.status === "danger" ? (
334-
<div className="rounded-xl bg-red-50 border border-red-200 p-4">
335-
<p className="text-sm font-bold text-red-600 mb-1">{tDetail("active")}</p>
334+
<div className="rounded-xl bg-red-50 border border-red-200 p-4 space-y-3">
335+
<p className="text-sm font-bold text-red-600">{tDetail("active")}</p>
336336
<p className="text-xs text-red-500 leading-5">
337337
{tDetail("activeDesc")}
338338
</p>
339+
<button className="flex items-center justify-center gap-2 w-full py-2.5 rounded-full bg-red-500 hover:bg-red-600 text-white text-xs font-bold transition">
340+
<span className="h-1.5 w-1.5 rounded-full bg-white animate-ping flex-shrink-0" />
341+
Trigger Redemption →
342+
</button>
339343
</div>
340344
) : d.status === "warning" ? (
341345
<div className="rounded-xl bg-amber-50 border border-amber-200 p-4">

‎app/deployments/page.tsx‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,22 @@ function ContractCard({ d }: { d: Deployment }) {
102102
</div>
103103
</div>
104104

105-
{/* single Open button */}
106-
<div className="px-4 py-3 border-t border-[#efe2c9]">
105+
{/* action buttons */}
106+
<div className="px-4 py-3 border-t border-[#efe2c9] flex flex-col gap-2">
107107
<Link href={`/deployments/${d.id}`}
108-
className="block w-full py-2 rounded-full bg-[#fbbf24] hover:bg-[#f59e0b] text-[#1a1a1a] text-xs font-semibold transition text-center">
108+
className="block w-full py-2.5 rounded-full bg-[#fbbf24] hover:bg-[#f59e0b] text-[#1a1a1a] text-xs font-semibold transition text-center">
109109
Open →
110110
</Link>
111+
{d.status === "warning" && (
112+
<p className="text-[10px] text-amber-600 text-center font-medium">
113+
⚡ Approaching 150% threshold
114+
</p>
115+
)}
116+
{d.status === "danger" && (
117+
<p className="text-[10px] text-red-500 text-center font-medium">
118+
⚠ Reserve below 150% — redemptions active
119+
</p>
120+
)}
111121
</div>
112122
</div>
113123
</div>
@@ -259,32 +269,6 @@ export default function DeploymentsPage() {
259269
</div>
260270
</section>
261271

262-
{/* divider */}
263-
<div className="border-t border-[#e7dac4]" />
264-
265-
{/* ── feature nav buttons — centered ──────────────────────────── */}
266-
<section className="py-8 flex justify-center">
267-
<div className="flex flex-wrap gap-3 justify-center">
268-
<Link href="/equity"
269-
className="inline-flex items-center gap-2 rounded-full border border-[#e7dac4] bg-white px-6 py-2.5 text-sm font-semibold text-[#1a1a1a] hover:bg-[#fbf6ec] hover:border-amber-300 hover:-translate-y-0.5 transition-all shadow-sm">
270-
EquityCoins
271-
<span className="text-amber-600 font-bold">→</span>
272-
</Link>
273-
<Link href="/force-redemption"
274-
className={`inline-flex items-center gap-2 rounded-full border px-6 py-2.5 text-sm font-semibold hover:-translate-y-0.5 transition-all shadow-sm ${
275-
dangerList.length > 0
276-
? "border-red-200 bg-red-50 text-red-700 hover:bg-red-100"
277-
: "border-[#e7dac4] bg-white text-[#1a1a1a] hover:bg-[#fbf6ec] hover:border-amber-300"
278-
}`}>
279-
{dangerList.length > 0 && (
280-
<span className="h-2 w-2 rounded-full bg-red-500 animate-pulse flex-shrink-0" />
281-
)}
282-
Trigger Redemptions
283-
<span className={`font-bold ${dangerList.length > 0 ? "text-red-500" : "text-amber-600"}`}>→</span>
284-
</Link>
285-
</div>
286-
</section>
287-
288272
</div>
289273
</main>
290274

‎app/page.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,7 @@ export default function Home() {
521521
</div>
522522
</section>
523523

524-
{/* Protocol Overview — three-column layout matching reference image */}
524+
{/* Protocol Overview — horizontal flow */}
525525
<section id="build" className="py-20 px-6 bg-[#fbf6ec]">
526526
<div className="mx-auto max-w-7xl rounded-[2rem] border border-amber-100 bg-white p-8 shadow-[0_22px_60px_rgba(15,23,42,0.08)] md:p-12">
527527
<h2 className="text-center text-4xl font-semibold tracking-tight text-gray-900 md:text-5xl">{tHome("howItWorks")}</h2>
@@ -530,36 +530,38 @@ export default function Home() {
530530
</p>
531531

532532
<div className="mt-12 rounded-[1.75rem] border border-amber-100 bg-gradient-to-b from-[#fffdf8] to-[#fff7eb] p-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.85)] md:p-8">
533-
<div className="grid gap-4 md:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] md:items-center">
534-
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm">
535-
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">1</div>
536-
<h3 className="text-lg font-semibold text-slate-900">{tHome("howItWorksSteps.1.title")}</h3>
537-
<p className="mt-2 text-sm leading-6 text-slate-600">{tHome("howItWorksSteps.1.desc")}</p>
533+
<div className="grid gap-4 md:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] md:items-stretch">
534+
535+
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm flex flex-col">
536+
<div className="mx-auto mb-4 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">1</div>
537+
<h3 className="text-base font-semibold text-slate-900">{tHome("howItWorksSteps.1.title")}</h3>
538+
<p className="mt-2 text-sm leading-6 text-slate-600 flex-1">{tHome("howItWorksSteps.1.desc")}</p>
538539
</div>
539540

540-
<div className="flex items-center justify-center text-3xl font-light text-amber-300 md:px-1">→</div>
541+
<div className="flex items-center justify-center text-3xl font-light text-amber-300 md:px-1 flex-shrink-0">→</div>
541542

542-
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm">
543-
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">2</div>
544-
<h3 className="text-lg font-semibold text-slate-900">{tHome("howItWorksSteps.2.title")}</h3>
545-
<p className="mt-2 text-sm leading-6 text-slate-600">{tHome("howItWorksSteps.2.desc")}</p>
543+
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm flex flex-col">
544+
<div className="mx-auto mb-4 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">2</div>
545+
<h3 className="text-base font-semibold text-slate-900">{tHome("howItWorksSteps.2.title")}</h3>
546+
<p className="mt-2 text-sm leading-6 text-slate-600 flex-1">{tHome("howItWorksSteps.2.desc")}</p>
546547
</div>
547548

548-
<div className="flex items-center justify-center text-3xl font-light text-amber-300 md:px-1">→</div>
549+
<div className="flex items-center justify-center text-3xl font-light text-amber-300 md:px-1 flex-shrink-0">→</div>
549550

550-
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm">
551-
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">3</div>
552-
<h3 className="text-lg font-semibold text-slate-900">{tHome("howItWorksSteps.3.title")}</h3>
553-
<p className="mt-2 text-sm leading-6 text-slate-600">{tHome("howItWorksSteps.3.desc")}</p>
551+
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm flex flex-col">
552+
<div className="mx-auto mb-4 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">3</div>
553+
<h3 className="text-base font-semibold text-slate-900">{tHome("howItWorksSteps.3.title")}</h3>
554+
<p className="mt-2 text-sm leading-6 text-slate-600 flex-1">{tHome("howItWorksSteps.3.desc")}</p>
554555
</div>
555556

556-
<div className="flex items-center justify-center text-3xl font-light text-amber-300 md:px-1">→</div>
557+
<div className="flex items-center justify-center text-3xl font-light text-amber-300 md:px-1 flex-shrink-0">→</div>
557558

558-
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm md:col-span-1">
559-
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">4</div>
560-
<h3 className="text-lg font-semibold text-slate-900">{tHome("howItWorksSteps.4.title")}</h3>
561-
<p className="mt-2 text-sm leading-6 text-slate-600">{tHome("howItWorksSteps.4.desc")}</p>
559+
<div className="rounded-2xl border border-amber-100 bg-white/80 p-5 text-center shadow-[0_10px_28px_rgba(15,23,42,0.06)] backdrop-blur-sm flex flex-col">
560+
<div className="mx-auto mb-4 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-amber-50 text-2xl text-amber-600 shadow-inner">4</div>
561+
<h3 className="text-base font-semibold text-slate-900">{tHome("howItWorksSteps.4.title")}</h3>
562+
<p className="mt-2 text-sm leading-6 text-slate-600 flex-1">{tHome("howItWorksSteps.4.desc")}</p>
562563
</div>
564+
563565
</div>
564566
</div>
565567

‎lib/i18n/locales/en.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,23 @@
3131
"learnMoreAboutTectonic": "Learn more about Tectonic",
3232
"viewAllDeployments": "VIEW ALL DEPLOYMENTS",
3333
"howItWorks": "HOW IT WORKS",
34-
"howItWorksDesc": "The protocol flow is intentionally simple: deposit an asset, mint the stablecoin, mint the equity coin, and redeem if the reserve needs to be restored.",
34+
"howItWorksDesc": "The protocol flow is straightforward: deposit a native asset, mint a stablecoin, use or redeem it, and rely on automatic safety mechanisms to keep the reserve healthy.",
3535
"howItWorksSteps": {
3636
"1": {
3737
"title": "Deposit Native Asset",
38-
"desc": "Users deposit the reserve asset into the protocol."
38+
"desc": "Users deposit the blockchain's native asset into the protocol."
3939
},
4040
"2": {
4141
"title": "Mint StableCoin",
42-
"desc": "The protocol mints the stablecoin against the reserve."
42+
"desc": "The protocol issues stablecoins backed by the reserve."
4343
},
4444
"3": {
45-
"title": "Mint EquityCoin",
46-
"desc": "An equity coin is minted to capture protocol upside."
45+
"title": "Use or Redeem",
46+
"desc": "Users can use the stablecoins for payments or redeem them back for the reserve asset."
4747
},
4848
"4": {
49-
"title": "Trigger Redemptions",
50-
"desc": "If needed, the system triggers redemptions to restore safety."
49+
"title": "Automatic Safety Protection",
50+
"desc": "If reserve levels become unsafe, the protocol can trigger redemptions to restore the reserve ratio and maintain the peg."
5151
}
5252
},
5353
"joinCommunity": "Join the Community",

0 commit comments

Comments
 (0)