update download section

This commit is contained in:
2026-06-16 15:14:08 +05:30
parent 4c24466ac2
commit 6958805396
5 changed files with 40 additions and 30 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -50,14 +50,14 @@ export function Download() {
{/* Header */}
<div className="flex justify-between items-center z-10">
<div className="text-[9px] font-mono text-purple-lavender">Nearle App</div>
<div className="text-[9px] font-mono text-white/50">4G LTE</div>
<div className="text-[11px] font-mono text-purple-lavender">Nearle App</div>
<div className="text-[11px] font-mono text-white/50">4G LTE</div>
</div>
{/* Main Content inside Mockup */}
<div className="my-auto flex flex-col gap-5 z-10">
<div className="text-center">
<span className="inline-block bg-purple-primary/20 text-purple-accent border border-purple-primary/30 rounded-full px-2.5 py-0.5 text-[8px] font-bold tracking-widest uppercase mb-2">
<span className="inline-block bg-purple-primary/20 text-purple-accent border border-purple-primary/30 rounded-full px-3 py-1 text-[11px] font-bold tracking-widest uppercase mb-2">
Hyperlocal Suite
</span>
<h4 className="font-display font-extrabold text-xl text-white tracking-tight leading-tight">
@@ -69,24 +69,24 @@ export function Download() {
<div className="flex flex-col gap-2.5">
{/* App item 1 */}
<div className="bg-white/5 border border-white/10 rounded-2xl p-2.5 flex items-center gap-2.5 backdrop-blur-sm">
<div className="w-8 h-8 rounded-xl bg-purple-deep flex items-center justify-center text-sm">
<div className="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 backdrop-blur-sm">
<div className="w-9 h-9 rounded-xl bg-purple-deep flex items-center justify-center text-base">
🏪
</div>
<div className="flex-1">
<div className="text-[8px] font-bold text-white/40 uppercase">Nearle Partner</div>
<div className="text-[10px] font-extrabold text-white">Local Merchant App</div>
<div className="text-[11px] font-bold text-white/40 uppercase">Nearle Partner</div>
<div className="text-[13px] font-extrabold text-white">Local Merchant App</div>
</div>
</div>
{/* App item 2 */}
<div className="bg-white/5 border border-white/10 rounded-2xl p-2.5 flex items-center gap-2.5 backdrop-blur-sm">
<div className="w-8 h-8 rounded-xl bg-purple-deep flex items-center justify-center text-sm">
<div className="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 backdrop-blur-sm">
<div className="w-9 h-9 rounded-xl bg-purple-deep flex items-center justify-center text-base">
🔮
</div>
<div className="flex-1">
<div className="text-[8px] font-bold text-white/40 uppercase">Nearle Admin</div>
<div className="text-[10px] font-extrabold text-white">Community Coordinator</div>
<div className="text-[11px] font-bold text-white/40 uppercase">Nearle Admin</div>
<div className="text-[13px] font-extrabold text-white">Community Coordinator</div>
</div>
</div>
@@ -95,7 +95,7 @@ export function Download() {
{/* Footer UI inside Phone */}
<div className="border-t border-white/10 pt-3 text-center z-10">
<div className="text-[7px] text-white/40 uppercase tracking-widest">Coimbatore, India</div>
<div className="text-[10px] text-white/40 uppercase tracking-widest">Coimbatore, India</div>
</div>
</div>
@@ -130,46 +130,56 @@ export function Download() {
{ title: 'Nearle Admin', desc: 'Operate local hubs and coordinate logistics.', emoji: '🔮' },
].map((b) => (
<div key={b.title} className="flex gap-3 p-3.5 bg-nearle-bgsoft/60 border border-nearle-border/40 rounded-2xl hover:border-purple-lavender/60 transition duration-300">
<span className="text-xl">{b.emoji}</span>
<span className="text-2xl">{b.emoji}</span>
<div>
<h5 className="font-display font-extrabold text-xs text-nearle-dark">{b.title}</h5>
<p className="font-body text-[10px] text-nearle-mid leading-normal mt-0.5">{b.desc}</p>
<h5 className="font-display font-extrabold text-sm text-nearle-dark">{b.title}</h5>
<p className="font-body text-xs text-nearle-mid leading-normal mt-0.5">{b.desc}</p>
</div>
</div>
))}
</div>
{/* Direct High-Fidelity Call To Action Container */}
{/* Store Badges */}
<div className="flex flex-col gap-4 pt-6 border-t border-nearle-border/40 max-w-md">
<div className="text-[9px] font-mono text-purple-primary font-extrabold uppercase tracking-widest mb-1">Direct Download</div>
<h3 className="font-display font-extrabold text-lg text-nearle-dark">
Download Nearle App
</h3>
<div className="flex flex-wrap gap-3">
{/* Google Play Store Link Button */}
<div className="flex flex-col sm:flex-row items-center gap-3">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center justify-center gap-2.5 px-6 py-3 bg-gradient-purple text-white hover:shadow-cta hover:scale-[1.02] transition-all duration-300 rounded-full font-bold text-xs tracking-wider uppercase active:scale-95 shadow-md flex-1 min-w-[170px]"
className="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-[10px] border border-[#E2E8F0] bg-white hover:bg-[#F8FAFC] hover:border-[#CBD5E1] active:bg-[#F1F5F9] transition-all duration-200"
>
<span>🤖</span>
<span>Google Play</span>
<svg viewBox="0 0 24 24" className="w-5 h-5 shrink-0" fill="#111827">
<path d="M1.22 0c-.132.087-.22.246-.22.432v23.136c0 .186.088.345.22.432l12.064-12.086L1.22 0zm12.79 12.386l3.64 3.614-5.484 3.066s-5.482 3.07-8.624 4.82l10.468-11.5zm1.346-1.35l3.822-3.768 5.592 3.144c.624.35.624.926 0 1.276l-5.592 3.144-3.822-3.796V11.036zM1.22 24c.132.087.22.246.22.432v-3.094c0-.186-.088-.345-.22-.432l.22 3.094zm-.22-7.314v-9.372c0-.186.088-.345.22-.432l-.22 9.804c-.132-.087-.22-.246-.22-.432v.432z" />
</svg>
<div className="text-left leading-tight">
<div className="text-[8px] text-[#475569] font-medium tracking-wide">GET IT ON</div>
<div className="text-[12px] font-semibold text-[#111827] -mt-0.5">Google Play</div>
</div>
</a>
{/* Apple App Store Link Button */}
<a
href="https://apps.apple.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center justify-center gap-2.5 px-6 py-3 bg-nearle-dark text-white hover:bg-purple-deep hover:shadow-cta hover:scale-[1.02] transition-all duration-300 rounded-full font-bold text-xs tracking-wider uppercase active:scale-95 shadow-md flex-1 min-w-[170px]"
className="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-[10px] border border-[#E2E8F0] bg-white hover:bg-[#F8FAFC] hover:border-[#CBD5E1] active:bg-[#F1F5F9] transition-all duration-200"
>
<span>🍎</span>
<span>App Store</span>
<svg viewBox="0 0 24 24" className="w-5 h-5 shrink-0" fill="#111827">
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
</svg>
<div className="text-left leading-tight">
<div className="text-[8px] text-[#475569] font-medium tracking-wide">Download on the</div>
<div className="text-[12px] font-semibold text-[#111827] -mt-0.5">App Store</div>
</div>
</a>
</div>
<div className="text-[10px] text-nearle-mid leading-relaxed mt-1">
Install the unified ecosystem app directly on your Android or iOS device to get started instantly.
</div>
<p className="font-body text-xs text-nearle-light">
Available on Android and iOS
</p>
</div>
</div>