Skip to content

Commit 6667033

Browse files
0xVida0xVida
authored
Merge pull request #279 from odeyemitobi/feat/mobile-responsive-marketing-pages
Enhance mobile responsiveness of FAQ and Use Cases pages; update styling for Features section
2 parents 2b0bee3 + ca60fa0 commit 6667033

File tree

3 files changed

+59
-59
lines changed

3 files changed

+59
-59
lines changed

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,32 +32,32 @@ export default function FaqPage() {
3232
<Navbar />
3333

3434
{/* ── Hero ───────────────────────────────────────────────────────────── */}
35-
<section className="pt-32 pb-14 px-6 border-b border-border">
35+
<section className="pt-20 pb-8 px-4 sm:pt-24 sm:pb-12 sm:px-6 md:pt-32 md:pb-14 border-b border-border">
3636
<div className="mx-auto max-w-3xl text-center">
3737
{/* Breadcrumb */}
38-
<nav className="flex items-center justify-center gap-2 mb-8 text-sm font-body text-muted-foreground">
38+
<nav className="flex items-center justify-center gap-2 mb-6 sm:mb-8 text-xs sm:text-sm font-body text-muted-foreground">
3939
<Link href="/" className="hover:text-foreground transition-colors">
4040
Home
4141
</Link>
4242
<span className="text-muted-foreground/40">/</span>
4343
<span className="text-foreground">FAQ</span>
4444
</nav>
4545

46-
<div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 mb-5">
46+
<div className="inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-2xl bg-primary/10 mb-4 sm:mb-5">
4747
<HelpCircle className="h-6 w-6 text-primary" />
4848
</div>
4949

50-
<h1 className="text-4xl md:text-6xl font-display font-extrabold tracking-tight text-foreground leading-tight">
50+
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-display font-extrabold tracking-tight text-foreground leading-tight">
5151
Frequently asked
5252
<br className="hidden sm:block" /> questions
5353
</h1>
54-
<p className="mt-4 text-lg font-body text-muted-foreground max-w-xl mx-auto">
54+
<p className="mt-3 sm:mt-4 text-base sm:text-lg font-body text-muted-foreground max-w-xl mx-auto">
5555
{totalQuestions} answers to the most common questions about Stellar
5656
Suite.
5757
</p>
5858

5959
{/* Search */}
60-
<div className="mt-10">
60+
<div className="mt-6 sm:mt-8 lg:mt-10">
6161
<FaqSearch
6262
value={query}
6363
onChange={(v) => {
@@ -71,7 +71,7 @@ export default function FaqPage() {
7171
</section>
7272

7373
{/* ── Main ───────────────────────────────────────────────────────────── */}
74-
<main id="main-content" className="py-16 px-6">
74+
<main id="main-content" className="py-12 px-4 sm:py-14 sm:px-6 md:py-16">
7575
<div className="mx-auto max-w-3xl">
7676
{/* ── Search results ── */}
7777
{isSearching ? (
@@ -105,15 +105,15 @@ export default function FaqPage() {
105105
<div>
106106
{/* Category filter tabs */}
107107
<div
108-
className="flex flex-wrap gap-2 mb-10"
108+
className="flex flex-wrap gap-2 mb-6 sm:mb-8 lg:mb-10"
109109
role="tablist"
110110
aria-label="FAQ categories"
111111
>
112112
<button
113113
role="tab"
114114
aria-selected={activeCategory === ALL_ID}
115115
onClick={() => setActiveCategory(ALL_ID)}
116-
className={`rounded-full px-4 py-2 text-sm font-semibold font-display transition-all duration-200 border ${
116+
className={`rounded-full px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm font-semibold font-display transition-all duration-200 border touch-manipulation ${
117117
activeCategory === ALL_ID
118118
? "border-primary bg-primary text-primary-foreground shadow-sm"
119119
: "border-border text-muted-foreground hover:text-foreground hover:border-foreground/30"
@@ -127,7 +127,7 @@ export default function FaqPage() {
127127
role="tab"
128128
aria-selected={activeCategory === cat.id}
129129
onClick={() => setActiveCategory(cat.id)}
130-
className={`rounded-full px-4 py-2 text-sm font-semibold font-display transition-all duration-200 border ${
130+
className={`rounded-full px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm font-semibold font-display transition-all duration-200 border touch-manipulation ${
131131
activeCategory === cat.id
132132
? "border-primary bg-primary text-primary-foreground shadow-sm"
133133
: "border-border text-muted-foreground hover:text-foreground hover:border-foreground/30"
@@ -139,19 +139,19 @@ export default function FaqPage() {
139139
</div>
140140

141141
{/* Accordion sections */}
142-
<div className="flex flex-col gap-12">
142+
<div className="flex flex-col gap-8 sm:gap-10 lg:gap-12">
143143
{visibleCategories.map((cat) => (
144144
<section
145145
key={cat.id}
146146
aria-labelledby={`cat-heading-${cat.id}`}
147147
>
148148
<h2
149149
id={`cat-heading-${cat.id}`}
150-
className="text-xs font-bold uppercase tracking-widest text-muted-foreground font-display mb-4"
150+
className="text-xs sm:text-sm font-bold uppercase tracking-widest text-muted-foreground font-display mb-3 sm:mb-4"
151151
>
152152
{cat.label}
153153
</h2>
154-
<div className="flex flex-col gap-3">
154+
<div className="flex flex-col gap-2 sm:gap-3">
155155
{cat.items.map((item) => (
156156
<FaqItem key={item.id} item={item} />
157157
))}
@@ -163,19 +163,19 @@ export default function FaqPage() {
163163
)}
164164

165165
{/* ── CTA ── */}
166-
<div className="mt-20 rounded-2xl border border-border bg-card p-8 text-center">
167-
<div className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 mb-4">
166+
<div className="mt-16 sm:mt-20 rounded-2xl border border-border bg-card p-6 sm:p-8 text-center">
167+
<div className="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl bg-primary/10 mb-3 sm:mb-4">
168168
<MessageSquare className="h-5 w-5 text-primary" />
169169
</div>
170-
<h2 className="font-display font-bold text-foreground text-lg mb-2">
170+
<h2 className="font-display font-bold text-foreground text-base sm:text-lg mb-2">
171171
Still have questions?
172172
</h2>
173-
<p className="text-sm font-body text-muted-foreground mb-6 max-w-sm mx-auto">
173+
<p className="text-xs sm:text-sm font-body text-muted-foreground mb-4 sm:mb-6 max-w-sm mx-auto">
174174
Can&apos;t find what you&apos;re looking for? Our team is happy to help.
175175
</p>
176176
<ContactDialog
177177
trigger={
178-
<span className="btn-primary cursor-pointer">Contact us</span>
178+
<span className="btn-primary cursor-pointer text-sm sm:text-base">Contact us</span>
179179
}
180180
/>
181181
</div>

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

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -83,85 +83,85 @@ export default function UseCasesPage() {
8383
<div className="min-h-screen bg-background">
8484
<Navbar />
8585

86-
<section className="pt-32 pb-16 px-6 border-b border-border">
86+
<section className="pt-20 pb-12 px-4 sm:pt-24 sm:pb-14 sm:px-6 md:pt-32 md:pb-16 border-b border-border">
8787
<div className="mx-auto max-w-5xl text-center">
88-
<h1 className="text-4xl md:text-6xl font-display font-extrabold tracking-tight text-foreground leading-tight">
88+
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-display font-extrabold tracking-tight text-foreground leading-tight">
8989
Use cases &amp; examples
9090
</h1>
91-
<p className="mt-5 text-lg font-body text-muted-foreground max-w-2xl mx-auto">
91+
<p className="mt-4 sm:mt-5 text-base sm:text-lg font-body text-muted-foreground max-w-2xl mx-auto">
9292
Stellar Suite powers teams shipping everything from DeFi primitives
9393
to community governance. These examples show how builders put the
9494
workflow to work.
9595
</p>
96-
<div className="mt-8 flex flex-wrap justify-center gap-3">
97-
<Link href="/#use-cases" className="btn-outline">
96+
<div className="mt-6 sm:mt-8 flex flex-wrap justify-center gap-3">
97+
<Link href="/#use-cases" className="btn-outline text-sm sm:text-base touch-manipulation">
9898
Explore the live demo
9999
</Link>
100-
<Link href="/community" className="btn-primary">
100+
<Link href="/community" className="btn-primary text-sm sm:text-base touch-manipulation">
101101
Meet the community
102102
</Link>
103103
</div>
104104
</div>
105105
</section>
106106

107-
<main id="main-content" className="py-16 px-6">
108-
<div className="mx-auto max-w-6xl space-y-20">
107+
<main id="main-content" className="py-12 px-4 sm:py-14 sm:px-6 md:py-16">
108+
<div className="mx-auto max-w-6xl space-y-16 sm:space-y-20">
109109
<section>
110-
<h2 className="text-2xl md:text-3xl font-display font-bold text-foreground mb-6">
110+
<h2 className="text-xl sm:text-2xl md:text-3xl font-display font-bold text-foreground mb-4 sm:mb-6">
111111
Common use cases
112112
</h2>
113-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
113+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
114114
{USE_CASES.map((item) => (
115115
<div
116116
key={item.title}
117-
className="rounded-2xl border border-border bg-card p-6"
117+
className="rounded-2xl border border-border bg-card p-4 sm:p-6"
118118
>
119-
<div className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 mb-4">
119+
<div className="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl bg-primary/10 mb-3 sm:mb-4">
120120
<item.icon className="h-5 w-5 text-primary" />
121121
</div>
122-
<h3 className="text-lg font-display font-bold text-foreground mb-2">
122+
<h3 className="text-base sm:text-lg font-display font-bold text-foreground mb-2">
123123
{item.title}
124124
</h3>
125-
<p className="text-sm text-muted-foreground font-body leading-relaxed">
125+
<p className="text-xs sm:text-sm text-muted-foreground font-body leading-relaxed">
126126
{item.description}
127127
</p>
128128
</div>
129129
))}
130130
</div>
131131
</section>
132132

133-
<section className="rounded-2xl border border-border bg-card p-8">
134-
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
133+
<section className="rounded-2xl border border-border bg-card p-6 sm:p-8">
134+
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 sm:gap-6">
135135
<div>
136-
<h2 className="text-2xl md:text-3xl font-display font-bold text-foreground">
136+
<h2 className="text-xl sm:text-2xl md:text-3xl font-display font-bold text-foreground">
137137
Project examples
138138
</h2>
139-
<p className="mt-3 text-sm text-muted-foreground font-body">
139+
<p className="mt-2 sm:mt-3 text-xs sm:text-sm text-muted-foreground font-body">
140140
A few real-world paths teams take from idea to deployment.
141141
</p>
142142
</div>
143143
<a
144144
href="https://github.com/0xVida/stellar-suite/tree/main/templates"
145145
target="_blank"
146146
rel="noopener noreferrer"
147-
className="btn-outline"
147+
className="btn-outline text-sm sm:text-base touch-manipulation"
148148
>
149149
Browse templates
150150
</a>
151151
</div>
152-
<div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
152+
<div className="mt-6 sm:mt-8 grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
153153
{EXAMPLES.map((example) => (
154154
<div
155155
key={example.title}
156-
className="rounded-2xl border border-border/70 bg-background p-6"
156+
className="rounded-2xl border border-border/70 bg-background p-4 sm:p-6"
157157
>
158-
<h3 className="text-base font-display font-bold text-foreground mb-4">
158+
<h3 className="text-sm sm:text-base font-display font-bold text-foreground mb-3 sm:mb-4">
159159
{example.title}
160160
</h3>
161-
<ol className="space-y-3 text-sm text-muted-foreground font-body">
161+
<ol className="space-y-2 sm:space-y-3 text-xs sm:text-sm text-muted-foreground font-body">
162162
{example.steps.map((step) => (
163163
<li key={step} className="flex gap-3">
164-
<span className="mt-1 h-2 w-2 rounded-full bg-primary" />
164+
<span className="mt-0.5 sm:mt-1 h-2 w-2 rounded-full bg-primary flex-shrink-0" />
165165
<span>{step}</span>
166166
</li>
167167
))}
@@ -171,30 +171,30 @@ export default function UseCasesPage() {
171171
</div>
172172
</section>
173173

174-
<section className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
174+
<section className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 items-center">
175175
<div>
176176
<h2 className="text-2xl md:text-3xl font-display font-bold text-foreground">
177177
Ship faster with the sidebar
178178
</h2>
179-
<p className="mt-4 text-sm text-muted-foreground font-body leading-relaxed">
179+
<p className="mt-3 sm:mt-4 text-xs sm:text-sm text-muted-foreground font-body leading-relaxed">
180180
Build, deploy, and simulate contracts in minutes. Stellar Suite
181181
keeps the CLI, deployment history, and simulation results within
182182
reach.
183183
</p>
184-
<div className="mt-6 flex flex-wrap gap-3">
185-
<Link href="/#get-started" className="btn-primary">
184+
<div className="mt-4 sm:mt-6 flex flex-wrap gap-3">
185+
<Link href="/#get-started" className="btn-primary text-sm sm:text-base touch-manipulation">
186186
Get started
187187
</Link>
188-
<Link href="/blog" className="btn-outline">
188+
<Link href="/blog" className="btn-outline text-sm sm:text-base touch-manipulation">
189189
Read tutorials
190190
</Link>
191191
</div>
192192
</div>
193-
<div className="rounded-2xl border border-border bg-card p-8">
194-
<div className="text-xs font-semibold uppercase tracking-widest text-muted-foreground font-display">
193+
<div className="rounded-2xl border border-border bg-card p-6 sm:p-8">
194+
<div className="text-xs sm:text-sm font-semibold uppercase tracking-widest text-muted-foreground font-display">
195195
What teams like
196196
</div>
197-
<ul className="mt-4 space-y-3 text-sm text-muted-foreground font-body">
197+
<ul className="mt-3 sm:mt-4 space-y-2 sm:space-y-3 text-xs sm:text-sm text-muted-foreground font-body">
198198
<li className="flex gap-3">
199199
<span className="mt-1 h-2 w-2 rounded-full bg-primary" />
200200
<span>One-click deployment without terminal context switching.</span>

‎frontend/src/components/FeaturesSection.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,28 @@ const features = [
1111

1212
const FeaturesSection = () => {
1313
return (
14-
<section id="features" className="section-padding bg-muted/50">
14+
<section id="features" className="section-padding bg-muted/50 py-12 sm:py-16 px-4 sm:px-6">
1515
<div className="container mx-auto max-w-6xl">
16-
<div className="text-center mb-16">
17-
<h2 className="text-3xl md:text-5xl font-display font-extrabold tracking-tight text-foreground">
16+
<div className="text-center mb-12 sm:mb-16">
17+
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-display font-extrabold tracking-tight text-foreground">
1818
Everything you need to build on Soroban
1919
</h2>
20-
<p className="mt-4 text-lg font-body text-muted-foreground max-w-2xl mx-auto">
20+
<p className="mt-3 sm:mt-4 text-base sm:text-lg font-body text-muted-foreground max-w-2xl mx-auto">
2121
A complete toolkit that replaces the Stellar CLI with a visual, intuitive experience.
2222
</p>
2323
</div>
2424

25-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
25+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
2626
{features.map((f) => (
2727
<div
2828
key={f.title}
29-
className="rounded-2xl border border-border bg-background p-8 hover:shadow-lg transition-shadow duration-300"
29+
className="rounded-2xl border border-border bg-background p-6 sm:p-8 hover:shadow-lg transition-shadow duration-300"
3030
>
31-
<div className="mb-5 icon-box-md rounded-xl">
31+
<div className="mb-4 sm:mb-5 icon-box-md rounded-xl">
3232
<f.icon className="h-5 w-5" strokeWidth={2.2} />
3333
</div>
34-
<h3 className="text-lg font-display font-bold text-foreground mb-2">{f.title}</h3>
35-
<p className="text-sm font-body text-muted-foreground leading-relaxed">{f.description}</p>
34+
<h3 className="text-base sm:text-lg font-display font-bold text-foreground mb-2">{f.title}</h3>
35+
<p className="text-xs sm:text-sm font-body text-muted-foreground leading-relaxed">{f.description}</p>
3636
</div>
3737
))}
3838
</div>

0 commit comments

Comments
 (0)