Skip to content

Commit 2b0bee3

Browse files
0xVida0xVida
authored
Merge pull request #277 from chigozirim007/issues/259-263-266-268-269
Add community and use cases pages with UI polish
2 parents d2305fe + 498f1cd commit 2b0bee3

File tree

14 files changed

+702
-0
lines changed

14 files changed

+702
-0
lines changed

‎frontend/src/app/blog/[slug]/loading.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
export default function Loading() {
4+
return (
5+
<div className="min-h-screen bg-background">
6+
<main className="pt-28 pb-20 px-6">
7+
<div className="mx-auto max-w-3xl space-y-6">
8+
<Skeleton className="h-4 w-40" />
9+
<Skeleton className="h-8 w-3/4" />
10+
<Skeleton className="h-5 w-1/2" />
11+
<Skeleton className="h-24 w-full rounded-2xl" />
12+
<div className="space-y-3">
13+
{[...Array(6)].map((_, i) => (
14+
<Skeleton key={i} className="h-4 w-full" />
15+
))}
16+
</div>
17+
</div>
18+
</main>
19+
</div>
20+
);
21+
}

‎frontend/src/app/blog/loading.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
export default function Loading() {
4+
return (
5+
<div className="min-h-screen bg-background">
6+
<section className="pt-32 pb-14 px-6 border-b border-border">
7+
<div className="mx-auto max-w-6xl space-y-4">
8+
<Skeleton className="h-6 w-32" />
9+
<Skeleton className="h-10 w-1/2" />
10+
<Skeleton className="h-5 w-2/3" />
11+
<Skeleton className="h-12 w-full max-w-xl" />
12+
</div>
13+
</section>
14+
<main className="py-16 px-6">
15+
<div className="mx-auto max-w-6xl space-y-6">
16+
<Skeleton className="h-52 w-full rounded-2xl" />
17+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
18+
{[...Array(4)].map((_, i) => (
19+
<Skeleton key={i} className="h-44 w-full rounded-2xl" />
20+
))}
21+
</div>
22+
</div>
23+
</main>
24+
</div>
25+
);
26+
}

‎frontend/src/app/community/loading.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
export default function Loading() {
4+
return (
5+
<div className="min-h-screen bg-background">
6+
<section className="pt-32 pb-14 px-6 border-b border-border">
7+
<div className="mx-auto max-w-5xl text-center space-y-4">
8+
<Skeleton className="h-10 w-2/3 mx-auto" />
9+
<Skeleton className="h-5 w-1/2 mx-auto" />
10+
<div className="flex justify-center gap-3">
11+
<Skeleton className="h-11 w-32 rounded-xl" />
12+
<Skeleton className="h-11 w-32 rounded-xl" />
13+
</div>
14+
</div>
15+
</section>
16+
<main className="py-16 px-6">
17+
<div className="mx-auto max-w-6xl space-y-8">
18+
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
19+
{[...Array(4)].map((_, i) => (
20+
<Skeleton key={i} className="h-24 w-full rounded-2xl" />
21+
))}
22+
</div>
23+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
24+
{[...Array(3)].map((_, i) => (
25+
<Skeleton key={i} className="h-36 w-full rounded-2xl" />
26+
))}
27+
</div>
28+
</div>
29+
</main>
30+
</div>
31+
);
32+
}

‎frontend/src/app/community/page.tsx‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { Users, HeartHandshake, GitPullRequest, Sparkles } from "lucide-react";
5+
import Navbar from "@/components/Navbar";
6+
import Footer from "@/components/Footer";
7+
8+
const COMMUNITY_STATS = [
9+
{ label: "Open source contributors", value: "120+" },
10+
{ label: "Templates in repo", value: "8" },
11+
{ label: "Weekly installs", value: "1.2k" },
12+
{ label: "Issues resolved", value: "300+" },
13+
];
14+
15+
const CONTRIBUTION_PATHS = [
16+
{
17+
title: "Contribute code",
18+
description:
19+
"Pick an issue, open a PR, and ship improvements to the extension.",
20+
icon: GitPullRequest,
21+
href: "https://github.com/0xVida/stellar-suite/issues",
22+
},
23+
{
24+
title: "Share templates",
25+
description:
26+
"Submit contract templates to help new teams launch faster.",
27+
icon: Sparkles,
28+
href: "https://github.com/0xVida/stellar-suite#contributing",
29+
},
30+
{
31+
title: "Support developers",
32+
description:
33+
"Answer questions, write guides, and share workflows with the community.",
34+
icon: HeartHandshake,
35+
href: "https://github.com/0xVida/stellar-suite/discussions",
36+
},
37+
];
38+
39+
const COMMUNITY_VALUES = [
40+
"Keep workflows simple and fast.",
41+
"Favor clarity over cleverness.",
42+
"Ship small improvements often.",
43+
"Document what we build.",
44+
];
45+
46+
export default function CommunityPage() {
47+
return (
48+
<div className="min-h-screen bg-background">
49+
<Navbar />
50+
51+
<section className="pt-32 pb-16 px-6 border-b border-border">
52+
<div className="mx-auto max-w-5xl text-center">
53+
<div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 mb-5">
54+
<Users className="h-6 w-6 text-primary" />
55+
</div>
56+
<h1 className="text-4xl md:text-6xl font-display font-extrabold tracking-tight text-foreground leading-tight">
57+
Community &amp; Contributors
58+
</h1>
59+
<p className="mt-5 text-lg font-body text-muted-foreground max-w-2xl mx-auto">
60+
Stellar Suite is built in the open. Every release is shaped by
61+
builders who care about better Soroban workflows.
62+
</p>
63+
<div className="mt-8 flex flex-wrap justify-center gap-3">
64+
<a
65+
href="https://github.com/0xVida/stellar-suite"
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
className="btn-primary"
69+
>
70+
Visit GitHub
71+
</a>
72+
<Link href="/use-cases" className="btn-outline">
73+
See use cases
74+
</Link>
75+
</div>
76+
</div>
77+
</section>
78+
79+
<main id="main-content" className="py-16 px-6">
80+
<div className="mx-auto max-w-6xl space-y-20">
81+
<section className="grid grid-cols-1 md:grid-cols-4 gap-4">
82+
{COMMUNITY_STATS.map((stat) => (
83+
<div
84+
key={stat.label}
85+
className="rounded-2xl border border-border bg-card p-6 text-center"
86+
>
87+
<p className="text-2xl font-display font-extrabold text-foreground">
88+
{stat.value}
89+
</p>
90+
<p className="mt-1 text-sm text-muted-foreground font-body">
91+
{stat.label}
92+
</p>
93+
</div>
94+
))}
95+
</section>
96+
97+
<section className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">
98+
<div>
99+
<h2 className="text-2xl md:text-3xl font-display font-bold text-foreground">
100+
How we work together
101+
</h2>
102+
<p className="mt-4 text-base text-muted-foreground font-body leading-relaxed">
103+
We keep the bar high and the process lightweight. If a change
104+
improves developer flow, it is worth shipping.
105+
</p>
106+
<ul className="mt-6 space-y-3">
107+
{COMMUNITY_VALUES.map((value) => (
108+
<li key={value} className="flex items-start gap-3">
109+
<span className="mt-2 h-2 w-2 rounded-full bg-primary" />
110+
<span className="text-sm text-muted-foreground font-body">
111+
{value}
112+
</span>
113+
</li>
114+
))}
115+
</ul>
116+
</div>
117+
<div className="rounded-2xl border border-border bg-card p-6">
118+
<h3 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground font-display">
119+
Contributor snapshot
120+
</h3>
121+
<div className="mt-6 space-y-4">
122+
{[
123+
{
124+
title: "Core maintainers",
125+
detail: "Own the roadmap, review PRs, and ship releases.",
126+
},
127+
{
128+
title: "Template authors",
129+
detail: "Provide reusable Soroban contract scaffolds.",
130+
},
131+
{
132+
title: "QA & feedback",
133+
detail: "Test builds, file bugs, and validate fixes.",
134+
},
135+
].map((item) => (
136+
<div key={item.title}>
137+
<p className="text-sm font-semibold text-foreground">
138+
{item.title}
139+
</p>
140+
<p className="text-sm text-muted-foreground font-body">
141+
{item.detail}
142+
</p>
143+
</div>
144+
))}
145+
</div>
146+
</div>
147+
</section>
148+
149+
<section>
150+
<h2 className="text-2xl md:text-3xl font-display font-bold text-foreground mb-6">
151+
Ways to contribute
152+
</h2>
153+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
154+
{CONTRIBUTION_PATHS.map((path) => (
155+
<a
156+
key={path.title}
157+
href={path.href}
158+
target="_blank"
159+
rel="noopener noreferrer"
160+
className="rounded-2xl border border-border bg-card p-6 hover:border-primary/50 transition-colors"
161+
>
162+
<div className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 mb-4">
163+
<path.icon className="h-5 w-5 text-primary" />
164+
</div>
165+
<h3 className="text-lg font-display font-bold text-foreground mb-2">
166+
{path.title}
167+
</h3>
168+
<p className="text-sm text-muted-foreground font-body leading-relaxed">
169+
{path.description}
170+
</p>
171+
</a>
172+
))}
173+
</div>
174+
</section>
175+
176+
<section className="rounded-2xl border border-border bg-card p-8 text-center">
177+
<h2 className="text-xl font-display font-bold text-foreground">
178+
Ready to build with us?
179+
</h2>
180+
<p className="mt-3 text-sm text-muted-foreground font-body">
181+
Browse issues, share feedback, or open a PR. Every contribution
182+
moves the ecosystem forward.
183+
</p>
184+
<div className="mt-6 flex flex-wrap justify-center gap-3">
185+
<a
186+
href="https://github.com/0xVida/stellar-suite/issues"
187+
target="_blank"
188+
rel="noopener noreferrer"
189+
className="btn-primary"
190+
>
191+
Explore issues
192+
</a>
193+
<a
194+
href="https://github.com/0xVida/stellar-suite#contributing"
195+
target="_blank"
196+
rel="noopener noreferrer"
197+
className="btn-outline"
198+
>
199+
Contributing guide
200+
</a>
201+
</div>
202+
</section>
203+
</div>
204+
</main>
205+
206+
<Footer />
207+
</div>
208+
);
209+
}

‎frontend/src/app/faq/loading.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
export default function Loading() {
4+
return (
5+
<div className="min-h-screen bg-background">
6+
<section className="pt-32 pb-14 px-6 border-b border-border">
7+
<div className="mx-auto max-w-3xl space-y-4 text-center">
8+
<Skeleton className="h-6 w-24 mx-auto" />
9+
<Skeleton className="h-10 w-2/3 mx-auto" />
10+
<Skeleton className="h-5 w-1/2 mx-auto" />
11+
<Skeleton className="h-12 w-full max-w-xl mx-auto" />
12+
</div>
13+
</section>
14+
<main className="py-16 px-6">
15+
<div className="mx-auto max-w-3xl space-y-4">
16+
{[...Array(6)].map((_, i) => (
17+
<Skeleton key={i} className="h-16 w-full rounded-xl" />
18+
))}
19+
</div>
20+
</main>
21+
</div>
22+
);
23+
}

‎frontend/src/app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Metadata } from "next";
22
import { Providers } from "@/components/Providers";
3+
import RouteTopLoader from "@/components/RouteTopLoader";
34
import "@/app/globals.css";
45
import Navbar from "@/components/Navbar";
56

@@ -52,6 +53,7 @@ export default function RootLayout({
5253
<a href="#main-content" className="skip-link">
5354
Skip to content
5455
</a>
56+
<RouteTopLoader />
5557
<Navbar />
5658
<div className="pt-16">
5759
<Providers>{children}</Providers>

‎frontend/src/app/loading.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
export default function Loading() {
4+
return (
5+
<div className="min-h-screen bg-background">
6+
<div className="pt-28 px-6">
7+
<div className="mx-auto max-w-6xl space-y-10">
8+
<div className="space-y-4">
9+
<Skeleton className="h-8 w-1/2" />
10+
<Skeleton className="h-5 w-2/3" />
11+
</div>
12+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
13+
{[...Array(3)].map((_, i) => (
14+
<Skeleton key={i} className="h-40 w-full rounded-2xl" />
15+
))}
16+
</div>
17+
<div className="space-y-4">
18+
<Skeleton className="h-6 w-1/3" />
19+
<Skeleton className="h-24 w-full rounded-2xl" />
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
);
25+
}

‎frontend/src/app/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import NewsSection from "@/components/NewsSection";
77
import TrustSection from "@/components/TrustSection";
88
import CtaSection from "@/components/CtaSection";
99
import Footer from "@/components/Footer";
10+
import ScrollToTopButton from "@/components/ScrollToTopButton";
1011

1112
export default function Home() {
1213
return (
@@ -20,6 +21,7 @@ export default function Home() {
2021
<TrustSection />
2122
<CtaSection />
2223
<Footer />
24+
<ScrollToTopButton />
2325
</main>
2426
);
2527
}

‎frontend/src/app/use-cases/loading.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
export default function Loading() {
4+
return (
5+
<div className="min-h-screen bg-background">
6+
<section className="pt-32 pb-14 px-6 border-b border-border">
7+
<div className="mx-auto max-w-5xl text-center space-y-4">
8+
<Skeleton className="h-10 w-2/3 mx-auto" />
9+
<Skeleton className="h-5 w-1/2 mx-auto" />
10+
</div>
11+
</section>
12+
<main className="py-16 px-6">
13+
<div className="mx-auto max-w-6xl space-y-8">
14+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
15+
{[...Array(6)].map((_, i) => (
16+
<Skeleton key={i} className="h-36 w-full rounded-2xl" />
17+
))}
18+
</div>
19+
<Skeleton className="h-56 w-full rounded-2xl" />
20+
</div>
21+
</main>
22+
</div>
23+
);
24+
}

0 commit comments

Comments
 (0)