first commit
This commit is contained in:
136
src/components/home/Download.tsx
Normal file
136
src/components/home/Download.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { SectionHeader } from '@/components/ui/SectionHeader'
|
||||
import { GlassCard } from '@/components/ui/GlassCard'
|
||||
import { fadeUp, staggerContainer, viewportConfig } from '@/lib/animations'
|
||||
|
||||
type DownloadCard = {
|
||||
name: string
|
||||
role: string
|
||||
desc: string
|
||||
playUrl: string
|
||||
qrSymbol: string
|
||||
color: string
|
||||
tag: string
|
||||
}
|
||||
|
||||
const CARDS: DownloadCard[] = [
|
||||
{
|
||||
name: 'Nearle Deal',
|
||||
role: 'For Residents',
|
||||
desc: 'Order groceries, buy daily essentials, secure community deals, and manage local bookings in one dashboard.',
|
||||
playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.deal',
|
||||
qrSymbol: '🥦',
|
||||
color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
|
||||
tag: 'Shop Now',
|
||||
},
|
||||
{
|
||||
name: 'Nearle Partner',
|
||||
role: 'For Businesses',
|
||||
desc: 'List catalog products, manage orders instantly, inspect revenue graphs, and execute instant escrow cash outs.',
|
||||
playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.partner',
|
||||
qrSymbol: '🏪',
|
||||
color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
|
||||
tag: 'Grow Sales',
|
||||
},
|
||||
{
|
||||
name: 'Nearle Gear',
|
||||
role: 'For Riders',
|
||||
desc: 'Receive optimized route paths, complete geolocated drop confirmations, and view comprehensive fleet earnings.',
|
||||
playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.gear',
|
||||
qrSymbol: '🛵',
|
||||
color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
|
||||
tag: 'Earn Daily',
|
||||
},
|
||||
{
|
||||
name: 'Nearle Admin',
|
||||
role: 'For Coordinators',
|
||||
desc: 'Oversee local hubs, monitor rider activity levels, approve new merchant stores, and check operational health.',
|
||||
playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.admin',
|
||||
qrSymbol: '🔮',
|
||||
color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
|
||||
tag: 'Manage Hub',
|
||||
},
|
||||
]
|
||||
|
||||
export function Download() {
|
||||
return (
|
||||
<div className="py-24 sm:py-32 bg-nearle-bgsoft px-5 sm:px-8 relative overflow-hidden">
|
||||
{/* Decorative Grids */}
|
||||
<div className="absolute inset-0 bg-grid-soft opacity-30 pointer-events-none" />
|
||||
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<SectionHeader
|
||||
label="Mobile Suite"
|
||||
heading={
|
||||
<>
|
||||
Deploy the Nearle
|
||||
<br />
|
||||
<span className="bg-gradient-purple bg-clip-text text-transparent">
|
||||
Platform Today
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
sub="Scan the QR codes or download directly from Google Play Store to activate your smart neighbourhood ecosystem."
|
||||
align="center"
|
||||
className="mb-16 sm:mb-20"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"
|
||||
>
|
||||
{CARDS.map((card) => (
|
||||
<motion.div key={card.name} variants={fadeUp} className="group">
|
||||
<GlassCard className={`h-full flex flex-col justify-between p-6 ${card.color} shadow-nearle-sm hover:shadow-nearle-lg group-hover:scale-[1.02] transition-all duration-300`}>
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-3 mb-6">
|
||||
<span className="text-[10px] font-mono font-bold tracking-widest text-purple-primary uppercase">
|
||||
{card.role}
|
||||
</span>
|
||||
<span className="bg-purple-lavender text-purple-deep rounded-full px-2.5 py-0.5 font-mono text-[9px] font-bold tracking-widest uppercase">
|
||||
{card.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-display font-extrabold text-xl text-nearle-dark group-hover:text-purple-deep transition-colors duration-200">
|
||||
{card.name}
|
||||
</h3>
|
||||
|
||||
<p className="font-body text-nearle-mid text-xs leading-relaxed mt-3 mb-8">
|
||||
{card.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4 pt-6 border-t border-nearle-border/40">
|
||||
{/* Mock QR Code container */}
|
||||
<div className="w-16 h-16 rounded-xl bg-white border border-nearle-border flex flex-col items-center justify-center p-1 shadow-sm relative group-hover:border-purple-primary transition-all duration-300 select-none">
|
||||
<div className="w-full h-full border-2 border-dashed border-purple-lavender rounded-lg flex items-center justify-center text-xl">
|
||||
{card.qrSymbol}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col gap-1.5">
|
||||
<a
|
||||
href={card.playUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-nearle-dark hover:bg-purple-deep text-white rounded-full font-bold text-[10px] tracking-wider uppercase transition active:scale-95 shadow-sm"
|
||||
>
|
||||
<span>🤖</span>
|
||||
<span>Play Store</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user