Skip to content

Commit c658bfa

Browse files
adenaufaladenaufal
committed
refactor(ui): polish homepage and user dashboard layouts across breakpoints
1 parent a41e309 commit c658bfa

17 files changed

Lines changed: 229 additions & 236 deletions

‎build/components/CallToAction.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ export const CallToAction = () => {
99
};
1010

1111
return (
12-
<section className="py-24 relative overflow-hidden bg-gray-900">
12+
<section className="py-16 md:py-20 relative overflow-hidden bg-gray-900">
1313
{/* Background Decor */}
1414
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-600/20 rounded-full blur-[120px] pointer-events-none"></div>
1515
<div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-blue-600/10 rounded-full blur-[100px] pointer-events-none"></div>
1616

17-
<div className="max-w-4xl mx-auto px-4 text-center relative z-10">
18-
<h2 className="text-3xl md:text-5xl font-extrabold text-white mb-6 tracking-tight">
17+
<div className="max-w-4xl mx-auto px-3 sm:px-4 text-center relative z-10">
18+
<h2 className="text-2xl sm:text-3xl md:text-5xl font-extrabold text-white mb-5 sm:mb-6 tracking-tight">
1919
Mulai Transaksi <span className="text-brand-400">Aman Sekarang</span>
2020
</h2>
21-
<p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
21+
<p className="text-base sm:text-lg md:text-xl text-gray-400 mb-8 sm:mb-10 max-w-2xl mx-auto leading-relaxed">
2222
Dipercaya 500+ freelancer dan kreator. Fee transparan, no hidden fee, proses cepat 30-60 menit!
2323
</p>
2424

@@ -35,20 +35,31 @@ export const CallToAction = () => {
3535
<span>Chat Admin Sekarang</span>
3636
</a>
3737

38+
<a
39+
href={CONFIG.MESSENGER_URL}
40+
target="_blank"
41+
rel="noreferrer"
42+
onClick={handleClick}
43+
className="md:hidden inline-flex items-center gap-2 bg-white text-brand-700 font-bold text-sm sm:text-base px-5 sm:px-6 py-3 rounded-xl shadow-lg w-full justify-center"
44+
>
45+
<MessageCircle size={20} />
46+
Chat Admin Sekarang
47+
</a>
48+
3849
<div className="hidden md:flex items-center gap-2 text-sm text-gray-400 font-medium">
3950
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
4051
Diproses di jam operasional {CONFIG.OPERATIONAL_HOURS}
4152
</div>
4253

4354
{/* Social Follow Link */}
44-
<div className="mt-8 pt-8 border-t border-white/10 w-full max-w-sm text-center">
45-
<p className="text-gray-500 text-sm mb-4">Mau update rate harian?</p>
55+
<div className="mt-6 sm:mt-8 pt-6 sm:pt-8 border-t border-white/10 w-full max-w-sm text-center">
56+
<p className="text-gray-500 text-xs sm:text-sm mb-4">Mau update rate harian?</p>
4657
<a
4758
href={CONFIG.FACEBOOK_URL}
4859
target="_blank"
4960
rel="noreferrer"
5061
onClick={() => trackEvent('social_follow_click', { platform: 'facebook' })}
51-
className="inline-flex items-center gap-2 text-gray-400 hover:text-white transition-colors text-sm font-semibold group/social"
62+
className="inline-flex items-center gap-2 text-gray-400 hover:text-white transition-colors text-xs sm:text-sm font-semibold group/social"
5263
>
5364
<div className="p-2 bg-gray-800 rounded-lg group-hover/social:bg-[#1877F2] transition-colors">
5465
<Facebook size={18} />

‎build/components/Dashboard.tsx‎

Lines changed: 100 additions & 128 deletions
Large diffs are not rendered by default.

‎build/components/FAQ.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const FAQ = () => {
2424
};
2525

2626
return (
27-
<section id="faq" className="py-24 bg-gray-50 border-t border-gray-100/50">
27+
<section id="faq" className="py-16 md:py-20 bg-white border-t border-slate-200/70">
2828
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
2929
<div className="text-center mb-16">
3030
<h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">

‎build/components/FeeSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const FeeSection = () => {
5454
}, []);
5555

5656
return (
57-
<section id="fees" className="py-24 relative overflow-hidden bg-gradient-to-b from-white via-blue-50/50 to-white">
57+
<section id="fees" className="py-16 md:py-20 relative overflow-hidden bg-gradient-to-b from-white via-blue-50/40 to-white">
5858
{/* Background Decor */}
5959
<div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:24px_24px] opacity-30"></div>
6060

@@ -80,14 +80,14 @@ export const FeeSection = () => {
8080
</motion.p>
8181
</div>
8282

83-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
83+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
8484
{/* Standard Fees */}
8585
<motion.div
8686
initial={{ opacity: 0, x: -30 }}
8787
whileInView={{ opacity: 1, x: 0 }}
8888
viewport={{ once: true }}
8989
transition={{ duration: 0.5, delay: 0.2 }}
90-
className="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 group"
90+
className="bg-white p-7 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-xl hover:shadow-slate-900/10 transition-all duration-300 group"
9191
>
9292
<div className="flex items-center gap-4 mb-8">
9393
<div className="p-3.5 bg-blue-50 rounded-2xl text-blue-600 shadow-sm group-hover:scale-110 transition-transform duration-300">

‎build/components/Footer.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ import { ProgrammaticLinks } from './ProgrammaticLinks';
66

77
export const Footer = () => {
88
return (
9-
<footer className="bg-white border-t border-gray-200 py-12">
10-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
9+
<footer className="bg-white border-t border-gray-200 py-10 md:py-12">
10+
<div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
1111
{/* Programmatic SEO Links Section */}
12-
<div className="mb-12 pb-12 border-b border-gray-200">
12+
<div className="mb-8 md:mb-12 pb-8 md:pb-12 border-b border-gray-200">
1313
<ProgrammaticLinks variant="compact" />
1414
</div>
1515

16-
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
17-
<div className="col-span-1 md:col-span-2 pr-8">
18-
<h3 className="text-xl font-bold text-gray-900 mb-4">{CONFIG.APP_NAME}</h3>
16+
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8 mb-8">
17+
<div className="col-span-1 md:col-span-2 pr-0 md:pr-8">
18+
<h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-4">{CONFIG.APP_NAME}</h3>
1919
<p className="text-gray-700 text-sm leading-relaxed mb-6">
2020
Jasa convert PayPal ke Rupiah yang mengutamakan keamanan dan kepercayaan.
2121
Diproses manual, rate transparan, dan tanpa biaya tersembunyi.
@@ -53,7 +53,7 @@ export const Footer = () => {
5353
</div>
5454
</div>
5555

56-
<div className="border-t border-gray-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-400">
56+
<div className="border-t border-gray-100 pt-6 md:pt-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-3 md:gap-4 text-xs text-gray-400">
5757
<p className="text-gray-700">&copy; {new Date().getFullYear()} {CONFIG.APP_NAME}. All rights reserved.</p>
5858
<p className="text-gray-700">
5959
Disclaimer: Kami bukan bagian dari PayPal Inc.

‎build/components/Hero.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -136,14 +136,16 @@ export const Hero = () => {
136136
};
137137

138138
return (
139-
<section className="relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden bg-white">
140-
<div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-30"></div>
139+
<section className="relative pt-28 pb-14 md:pt-32 md:pb-16 lg:pt-40 lg:pb-24 overflow-hidden">
140+
<div className="absolute inset-0 bg-[radial-gradient(#e2e8f0_1px,transparent_1px)] [background-size:20px_20px] opacity-35"></div>
141+
<div className="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-brand-100/70 blur-3xl" />
142+
<div className="absolute -right-24 top-28 w-80 h-80 rounded-full bg-blue-100/70 blur-3xl" />
141143

142144
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
143145
{/* Rate Volatility Alert */}
144146
<RateVolatilityAlert currentRate={convertRate} />
145147

146-
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-24">
148+
<div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-24">
147149

148150
{/* Text Content */}
149151
<div className="flex-1 text-center lg:text-left z-10">
@@ -157,17 +159,17 @@ export const Hero = () => {
157159
<div className="inline-flex items-center gap-2 bg-green-50 border border-green-200 px-3 py-1.5 rounded-full">
158160
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
159161
<span className="text-xs font-semibold text-green-700">
160-
{CONFIG.LIVE_STATUS} • {CONFIG.AVERAGE_PROCESS_TIME}
162+
{CONFIG.LIVE_STATUS} | {CONFIG.AVERAGE_PROCESS_TIME}
161163
</span>
162164
</div>
163165
<RealtimeProof />
164166
</div>
165167

166-
<h1 className="text-4xl lg:text-6xl font-extrabold text-gray-900 tracking-tight leading-tight mb-6">
168+
<h1 className="text-[1.75rem] max-[360px]:text-[1.62rem] sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 tracking-tight leading-tight mb-5 md:mb-6">
167169
Convert PayPal ke Rupiah, <span className="text-brand-600 bg-clip-text text-transparent bg-gradient-to-r from-brand-600 to-blue-400">Cepat & Aman</span>
168170
</h1>
169171

170-
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto lg:mx-0 font-medium leading-relaxed">
172+
<p className="text-base sm:text-lg md:text-xl text-gray-600 mb-7 md:mb-8 max-w-2xl mx-auto lg:mx-0 font-medium leading-relaxed">
171173
Langsung cair ke bank atau e-wallet kamu. Rate update otomatis setiap jam, fee transparan, no hidden fee!
172174
</p>
173175
</motion.div>
@@ -194,12 +196,12 @@ export const Hero = () => {
194196
</motion.ul>
195197

196198
{/* Social Proof Avatars */}
197-
<div className="flex items-center justify-center lg:justify-start gap-4 mb-8">
199+
<div className="flex items-center justify-center lg:justify-start gap-3 sm:gap-4 mb-7 md:mb-8">
198200
<div className="flex -space-x-3">
199201
{heroAvatars.map((avatar, idx) => (
200202
<img
201203
key={avatar.avatar + idx}
202-
className="w-12 h-12 rounded-full border-2 border-white shadow-sm"
204+
className="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white shadow-sm"
203205
src={avatar.avatar}
204206
alt={avatar.name}
205207
width="48"
@@ -208,7 +210,7 @@ export const Hero = () => {
208210
decoding="async"
209211
/>
210212
))}
211-
<div className="w-12 h-12 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-600 shadow-sm">
213+
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-600 shadow-sm">
212214
99+
213215
</div>
214216
</div>
@@ -228,18 +230,18 @@ export const Hero = () => {
228230
initial={{ opacity: 0, y: 20 }}
229231
animate={{ opacity: 1, y: 0 }}
230232
transition={{ delay: 0.4, duration: 0.5 }}
231-
className="flex flex-col items-center lg:items-start gap-4 mb-8"
233+
className="flex flex-col items-center lg:items-start gap-3 md:gap-4 mb-8"
232234
>
233235
<motion.button
234236
whileHover={{ scale: 1.05 }}
235237
whileTap={{ scale: 0.95 }}
236238
onClick={handleConvertClick}
237-
className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-700 hover:to-brand-600 text-white font-bold text-lg rounded-xl shadow-lg shadow-brand-500/30 transition-all flex items-center justify-center gap-2 ring-4 ring-brand-500/10"
239+
className="w-full sm:w-auto px-6 sm:px-7 md:px-8 py-3.5 md:py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-700 hover:to-brand-600 text-white font-bold text-sm sm:text-base md:text-lg rounded-xl shadow-lg shadow-brand-500/30 transition-all flex items-center justify-center gap-2 ring-4 ring-brand-500/10"
238240
>
239-
<MessageCircle size={24} />
241+
<MessageCircle size={22} />
240242
Chat via Messenger
241243
</motion.button>
242-
<div className="flex items-center gap-2 text-sm text-gray-600 font-medium bg-white/50 backdrop-blur-sm px-4 py-1.5 rounded-full border border-gray-200">
244+
<div className="flex items-center gap-2 text-xs sm:text-sm text-gray-600 font-medium bg-white/50 backdrop-blur-sm px-4 py-1.5 rounded-full border border-gray-200">
243245
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
244246
Jam operasional {CONFIG.OPERATIONAL_HOURS}
245247
</div>
@@ -254,7 +256,7 @@ export const Hero = () => {
254256
className="flex-1 w-full max-w-md z-10"
255257
id="calculator"
256258
>
257-
<div className="bg-white/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/50 overflow-hidden ring-1 ring-black/5 transform transition-all hover:shadow-[0_20px_50px_rgba(0,0,0,0.1)]">
259+
<div className="bg-white/85 backdrop-blur-xl rounded-3xl shadow-2xl border border-slate-200/70 overflow-hidden ring-1 ring-slate-900/5 transform transition-all hover:shadow-[0_20px_50px_rgba(15,23,42,0.14)]">
258260
<div className="bg-gray-900 p-4 text-white text-center">
259261
<div className="font-bold text-lg">
260262
1 USD = Rp {(mode === 'convert' ? convertRate : effectiveTopupRate).toLocaleString('id-ID')}
@@ -265,7 +267,7 @@ export const Hero = () => {
265267
</div>
266268
</div>
267269

268-
<div className="p-6 md:p-8 space-y-6">
270+
<div className="p-5 sm:p-6 md:p-8 space-y-5 md:space-y-6">
269271
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
270272
<button
271273
className={`w-full px-4 py-3 rounded-lg border text-sm font-semibold transition ${mode === 'convert' ? 'bg-brand-50 border-brand-200 text-brand-700' : 'bg-gray-50 border-gray-200 text-gray-600 hover:border-brand-200'}`}
@@ -299,7 +301,7 @@ export const Hero = () => {
299301
</div>
300302

301303
{mode === 'convert' ? (
302-
<div className="flex flex-col gap-4 min-h-[160px]">
304+
<div className="flex flex-col gap-4 min-h-[132px] md:min-h-[160px]">
303305
<div className="bg-blue-50/50 p-4 rounded-lg space-y-2 border border-dashed border-blue-100">
304306
<div className="flex justify-between text-sm text-gray-600">
305307
<span>Estimasi Fee</span>
@@ -321,13 +323,13 @@ export const Hero = () => {
321323
readOnly
322324
aria-label="Jumlah Rupiah yang kamu terima"
323325
value={formatIDR(idrReceived)}
324-
className="w-full pl-4 pr-4 py-3 bg-brand-50 border border-brand-200 rounded-lg text-2xl font-bold text-brand-700"
326+
className="w-full pl-4 pr-4 py-3 bg-brand-50 border border-brand-200 rounded-lg text-xl md:text-2xl font-bold text-brand-700"
325327
/>
326328
</div>
327329
</div>
328330
</div>
329331
) : (
330-
<div className="flex flex-col gap-4 min-h-[160px]">
332+
<div className="flex flex-col gap-4 min-h-[132px] md:min-h-[160px]">
331333
<div className="rounded-lg border border-blue-100 bg-blue-50/50 p-4 space-y-1.5">
332334
<div className="text-sm text-gray-700 font-semibold">Top-up rate (saldo tersedia)</div>
333335
<p className="text-xs text-gray-600">Jika saldo admin kosong, rate normal akan dikonfirmasi dulu.</p>

‎build/components/HowItWorks.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,9 @@ export const HowItWorks = () => {
3131
];
3232

3333
return (
34-
<section id="how-it-works" className="py-24 relative overflow-hidden">
34+
<section id="how-it-works" className="py-16 md:py-20 relative overflow-hidden bg-slate-50/80">
3535
{/* Background Decor */}
36-
<div className="absolute inset-0 bg-gray-50/50"></div>
37-
<div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:24px_24px] opacity-50"></div>
36+
<div className="absolute inset-0 bg-[radial-gradient(#cbd5e11a_1px,transparent_1px)] [background-size:24px_24px] opacity-50"></div>
3837

3938
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
4039
<div className="text-center mb-16">
@@ -58,7 +57,7 @@ export const HowItWorks = () => {
5857
</motion.p>
5958
</div>
6059

61-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
60+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
6261
{steps.map((step, index) => {
6362
const Icon = step.icon;
6463
return (
@@ -70,7 +69,7 @@ export const HowItWorks = () => {
7069
transition={{ duration: 0.5, delay: index * 0.1 }}
7170
className="relative group"
7271
>
73-
<div className="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 h-full z-10 relative group-hover:-translate-y-1">
72+
<div className="bg-white p-7 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-xl hover:shadow-slate-900/10 transition-all duration-300 h-full z-10 relative group-hover:-translate-y-1">
7473

7574
{/* Step Number Badge */}
7675
<div className={`w-14 h-14 rounded-2xl ${step.color} text-white flex items-center justify-center mb-6 text-xl font-bold shadow-lg shadow-gray-200 group-hover:scale-110 transition-transform duration-300`}>

0 commit comments

Comments
 (0)