Skip to content

feat(ui): landing content sections, footer, use cases, and loading states [UI #13, #14, #15, #16] #180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tinna23 merged 1 commit into from
Mar 24, 2026
+924 −111
Merged

feat(ui): landing content sections, footer, use cases, and loading states [UI #13, #14, #15, #16] #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 59 additions & 61 deletions packages/ui/src/app/account/[address]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,8 @@ function AccountPageInner() {
Back to search
</button>

{/* {loading && <AccountSkeleton />} */}
{loading && (
<p className="text-white/30 text-xs font-mono pt-8">Loading...</p>
)}
{loading && <AccountSkeleton />}


{error && !loading && (
<div className="px-4 py-3 rounded-lg bg-red-900/20 border border-red-700/30 text-red-300 text-xs font-mono">
Expand Down Expand Up @@ -124,60 +122,60 @@ export default function AccountPage() {

// ── Skeleton ───────────────────────────────────────────────────────────────

// function AccountSkeleton() {
// return (
// <div className="space-y-4 animate-pulse">
// <div
// style={{
// height: "16px",
// width: "100px",
// borderRadius: "6px",
// background: "rgba(255,255,255,0.06)",
// }}
// />
// <div
// style={{
// height: "60px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// <div
// style={{
// display: "grid",
// gridTemplateColumns: "1fr 1fr 1fr",
// gap: "12px",
// }}
// >
// <div
// style={{
// height: "80px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// <div
// style={{
// height: "80px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// <div
// style={{
// height: "80px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// </div>
// <div
// style={{
// height: "60px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// </div>
// );
// }
function AccountSkeleton() {
return (
<div className="space-y-4 animate-pulse">
<div
style={{
height: "16px",
width: "100px",
borderRadius: "6px",
background: "rgba(255,255,255,0.06)",
}}
/>
<div
style={{
height: "60px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr",
gap: "12px",
}}
>
<div
style={{
height: "80px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
<div
style={{
height: "80px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
<div
style={{
height: "80px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
</div>
<div
style={{
height: "60px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
</div>
);
}
6 changes: 6 additions & 0 deletions packages/ui/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
'use client";';
import HeroSection from '@/components/landing/HeroSection';
import HowItWorksSection from '@/components/landing/HowItWorksSection';
import Navbar from '@/components/landing/Navbar';
import UseCasesSection from '@/components/landing/UseCasesSection';
import WhatWeDecodeSection from '@/components/landing/WhatWeDecodeSection';

export default function LandingPage() {
return (
Expand Down Expand Up @@ -42,6 +45,9 @@ export default function LandingPage() {

<Navbar />
<HeroSection />
<HowItWorksSection />
<WhatWeDecodeSection />
<UseCasesSection />
</div>
);
}
98 changes: 48 additions & 50 deletions packages/ui/src/app/tx/[hash]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,8 @@ function TxPageInner() {
Back to search
</button>

{/* {loading && <TransactionSkeleton />} */}
{loading && (
<p className="text-white/30 text-xs font-mono pt-8">Loading...</p>
)}
{loading && <TransactionSkeleton />}


{error && !loading && (
<div className="px-4 py-3 rounded-lg bg-red-900/20 border border-red-700/30 text-red-300 text-xs font-mono">
Expand All @@ -112,49 +110,49 @@ export default function TxPage() {

// ── Skeleton ───────────────────────────────────────────────────────────────

// function TransactionSkeleton() {
// return (
// <div className="space-y-4 animate-pulse">
// <div
// style={{
// height: "16px",
// width: "120px",
// borderRadius: "6px",
// background: "rgba(255,255,255,0.06)",
// }}
// />
// <div
// style={{
// height: "60px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// <div
// style={{
// height: "80px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// <div
// style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}
// >
// <div
// style={{
// height: "72px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// <div
// style={{
// height: "72px",
// borderRadius: "12px",
// background: "rgba(255,255,255,0.04)",
// }}
// />
// </div>
// </div>
// );
// }
function TransactionSkeleton() {
return (
<div className="space-y-4 animate-pulse">
<div
style={{
height: "16px",
width: "120px",
borderRadius: "6px",
background: "rgba(255,255,255,0.06)",
}}
/>
<div
style={{
height: "60px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
<div
style={{
height: "80px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
<div
style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}
>
<div
style={{
height: "72px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
<div
style={{
height: "72px",
borderRadius: "12px",
background: "rgba(255,255,255,0.04)",
}}
/>
</div>
</div>
);
}
52 changes: 52 additions & 0 deletions packages/ui/src/components/landing/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Link from "next/link";
import React from "react";

export default function Footer() {
return (
<footer className="relative z-10 border-t border-white/5 px-6 sm:px-10 py-8 max-w-6xl mx-auto flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center gap-2">
<div className="w-5 h-5 rounded-md bg-sky-400/10 border border-sky-400/25 flex items-center justify-center">
<svg
width="10"
height="10"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
className="text-sky-400"
>
<circle cx="12" cy="12" r="3" />
<path d="M12 2v3m0 14v3M2 12h3m14 0h3m-3.5-6.5-2 2m-9 9-2 2m0-13 2 2m9 9 2 2" />
</svg>
</div>
<span className="text-xs font-mono text-white/25">Stellar Explain</span>
</div>

<div className="flex items-center gap-6 text-xs font-mono text-white/25">
<a
href="https://github.com/StellarCommons/Stellar-Explain"
target="_blank"
rel="noopener noreferrer"
className="hover:text-white/50 transition-colors"
>
GitHub
</a>
<a
href="https://github.com/StellarCommons/Stellar-Explain/issues"
target="_blank"
rel="noopener noreferrer"
className="hover:text-white/50 transition-colors"
>
Issues
</a>
<Link href="/app" className="hover:text-white/50 transition-colors">
App
</Link>
</div>

<p className="text-xs font-mono text-white/15">
Built on Stellar Horizon
</p>
</footer>
);
}
48 changes: 48 additions & 0 deletions packages/ui/src/components/landing/HowItWorksSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { STEPS } from '@/lib/landing-data';
import React from 'react';

function HowItWorksSection() {
return (
<section className="relative z-10 max-w-6xl mx-auto px-6 sm:px-10 py-20 border-t border-white/5">
<div className="text-center mb-14">
<p className="text-xs font-mono text-sky-400/70 uppercase tracking-widest mb-3">
How it works
</p>
<h2
className="text-2xl sm:text-3xl font-bold text-white tracking-tight"
style={{ fontFamily: "'IBM Plex Mono', monospace" }}
>
Three steps to clarity
</h2>
</div>

<div className="grid sm:grid-cols-3 gap-6">
{STEPS.map((step) => (
<div
key={step.n}
className="group relative rounded-2xl border border-white/8 bg-white/2 p-6 hover:border-sky-500/25 hover:bg-white/4 transition-all duration-300"
>
{/* step number watermark */}
<span className="absolute top-4 right-5 text-5xl font-bold text-white/4 font-mono select-none group-hover:text-sky-400/8 transition-colors duration-300">
{step.n}
</span>

<div className="w-9 h-9 rounded-xl bg-sky-400/8 border border-sky-400/20 flex items-center justify-center text-sky-400 mb-4 group-hover:bg-sky-400/15 transition-colors duration-300">
{step.icon}
</div>

<h3
className="text-sm font-semibold text-white/90 mb-2"
style={{ fontFamily: "'IBM Plex Mono', monospace" }}
>
{step.title}
</h3>
<p className="text-sm text-white/40 leading-relaxed">{step.body}</p>
</div>
))}
</div>
</section>
);
}

export default HowItWorksSection;
Loading
Loading