378 lines
15 KiB
TypeScript
378 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { Crown, Award, Star, Users, TrendingUp, ShoppingBag, ArrowRight, CheckCircle, AlertCircle } from 'lucide-react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import PageHero from '@/components/sections/PageHero'
|
|
import PartnershipApplicationForm from '@/components/forms/PartnershipApplicationForm'
|
|
|
|
interface TierAvailability {
|
|
name: string
|
|
limit: number
|
|
currentCount: number
|
|
remaining: number
|
|
available: boolean
|
|
percentageFull: number
|
|
}
|
|
|
|
export default function PartnerPage() {
|
|
const [isApplicationFormOpen, setIsApplicationFormOpen] = useState(false)
|
|
const [selectedTier, setSelectedTier] = useState('Silver')
|
|
const [tierAvailability, setTierAvailability] = useState<TierAvailability[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
// Fetch tier availability on component mount
|
|
useEffect(() => {
|
|
async function fetchTierAvailability() {
|
|
try {
|
|
const response = await fetch('/api/partnership/tiers')
|
|
const data = await response.json()
|
|
if (data.success) {
|
|
setTierAvailability(data.tiers)
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch tier availability:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchTierAvailability()
|
|
}, [])
|
|
|
|
const partnershipTiers = [
|
|
{
|
|
name: 'Diamond',
|
|
icon: Crown,
|
|
maxUsers: 500,
|
|
color: '#3B82F6', // Blue for premium
|
|
bgColor: '#EFF6FF',
|
|
features: [
|
|
'Maximum 500 members',
|
|
'Highest commission rates',
|
|
'Premium marketing materials',
|
|
'Direct company support',
|
|
'Exclusive product launches',
|
|
'Priority customer service',
|
|
'Advanced analytics dashboard',
|
|
'Custom branding options'
|
|
],
|
|
benefits: 'First come, first served - No upgrades available'
|
|
},
|
|
{
|
|
name: 'Gold',
|
|
icon: Award,
|
|
maxUsers: 1500,
|
|
color: '#F59E0B', // Gold
|
|
bgColor: '#FFFBEB',
|
|
features: [
|
|
'Maximum 1,500 members',
|
|
'High commission rates',
|
|
'Standard marketing materials',
|
|
'Regular company support',
|
|
'Early product access',
|
|
'Priority support queue',
|
|
'Standard analytics',
|
|
'Co-branded materials'
|
|
],
|
|
benefits: 'Perfect for growing businesses'
|
|
},
|
|
{
|
|
name: 'Silver',
|
|
icon: Star,
|
|
maxUsers: 3000,
|
|
color: '#6B7280', // Silver gray
|
|
bgColor: '#F9FAFB',
|
|
features: [
|
|
'Maximum 3,000 members',
|
|
'Standard commission rates',
|
|
'Basic marketing materials',
|
|
'Email support',
|
|
'Regular product updates',
|
|
'Standard support',
|
|
'Basic analytics',
|
|
'Standard materials'
|
|
],
|
|
benefits: 'Great starting point for new partners'
|
|
}
|
|
]
|
|
|
|
const whyPartner = [
|
|
{
|
|
icon: TrendingUp,
|
|
title: 'Growing Market',
|
|
description: 'Be part of India's fastest-growing authentic food market with increasing demand for traditional products.'
|
|
},
|
|
{
|
|
icon: ShoppingBag,
|
|
title: 'Quality Products',
|
|
description: 'Market premium quality, FSSAI-certified traditional food products that customers trust and love.'
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Dedicated Support',
|
|
description: 'Get comprehensive support, training, and marketing materials to help you succeed.'
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Hero Section */}
|
|
<PageHero
|
|
title="Marketing Partner"
|
|
subtitle="Be Our"
|
|
description="Join Padmaaja Rasooi's exclusive marketing partnership program and help us bring authentic Indian flavors to kitchens across the nation."
|
|
badge={{
|
|
text: "Partnership Opportunity"
|
|
}}
|
|
backgroundGradient="from-slate-900/90 via-emerald-900/80 to-slate-800/85"
|
|
titleGradient="from-orange-500 to-orange-400"
|
|
className="bg-gradient-to-r from-emerald-600/20 to-orange-500/20"
|
|
/>
|
|
|
|
{/* Partnership Tiers */}
|
|
<section className="py-20 bg-gradient-to-br from-slate-50 to-emerald-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Choose Your Partnership Level
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
|
First come, first served basis - No upgrades available. Secure your preferred tier today!
|
|
</p>
|
|
<div className="inline-flex items-center px-4 py-2 bg-red-100 text-red-800 rounded-full text-sm font-medium">
|
|
<CheckCircle className="h-4 w-4 mr-2" />
|
|
Limited Spots Available - No Tier Upgrades
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{partnershipTiers.map((tier, index) => {
|
|
const availability = tierAvailability.find(t => t.name === tier.name)
|
|
const isAvailable = availability?.available ?? true
|
|
const remaining = availability?.remaining ?? 0
|
|
|
|
return (
|
|
<motion.div
|
|
key={tier.name}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.1 }}
|
|
className={index === 0 ? 'md:scale-105' : ''}
|
|
>
|
|
<Card className={`h-full border-2 shadow-xl hover:shadow-2xl transition-all duration-300 ${
|
|
index === 0 ? 'border-blue-300' : 'border-gray-200'
|
|
} ${!isAvailable ? 'opacity-75' : ''}`}>
|
|
<CardHeader className="text-center pb-4" style={{backgroundColor: tier.bgColor}}>
|
|
<div className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4" style={{backgroundColor: `${tier.color}20`}}>
|
|
<tier.icon className="h-10 w-10" style={{color: tier.color}} />
|
|
</div>
|
|
<CardTitle className="text-2xl font-bold text-gray-900 mb-2">
|
|
{tier.name} Partner
|
|
</CardTitle>
|
|
<div className="text-3xl font-bold mb-2" style={{color: tier.color}}>
|
|
{tier.maxUsers.toLocaleString()} Users
|
|
</div>
|
|
|
|
{/* Availability Status */}
|
|
{!isLoading && availability && (
|
|
<div className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
|
|
isAvailable
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-red-100 text-red-800'
|
|
}`}>
|
|
{isAvailable ? (
|
|
<>
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
|
{remaining} spots left
|
|
</>
|
|
) : (
|
|
<>
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
|
FULL
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
{tier.benefits}
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<div className="space-y-3 mb-6">
|
|
{tier.features.map((feature, idx) => (
|
|
<div key={idx} className="flex items-start">
|
|
<CheckCircle className="h-5 w-5 text-emerald-500 mr-3 mt-0.5 flex-shrink-0" />
|
|
<span className="text-gray-600">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button
|
|
className="w-full text-white font-semibold"
|
|
style={{backgroundColor: isAvailable ? tier.color : '#9CA3AF'}}
|
|
disabled={!isAvailable}
|
|
onClick={() => {
|
|
if (isAvailable) {
|
|
setSelectedTier(tier.name)
|
|
setIsApplicationFormOpen(true)
|
|
}
|
|
}}
|
|
>
|
|
{isAvailable ? `Apply for ${tier.name}` : 'Tier Full'}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Partner With Us */}
|
|
<section className="py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Why Partner With Padmaaja Rasooi?
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Join a trusted brand that's revolutionizing the traditional food market in India.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{whyPartner.map((reason, index) => (
|
|
<motion.div
|
|
key={reason.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.1 }}
|
|
>
|
|
<Card className="h-full border-0 shadow-lg hover:shadow-xl transition-all duration-300">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6" style={{backgroundColor: '#F5873B20'}}>
|
|
<reason.icon className="h-8 w-8" style={{color: '#F5873B'}} />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-4">
|
|
{reason.title}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{reason.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How It Works */}
|
|
<section className="py-20 bg-gradient-to-br from-slate-50 to-emerald-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
How Partnership Works
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Simple steps to become a Padmaaja Rasooi marketing partner.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
{[
|
|
{ step: '1', title: 'Choose Tier', description: 'Select your preferred partnership tier based on customer capacity' },
|
|
{ step: '2', title: 'Apply', description: 'Submit your application with required documentation' },
|
|
{ step: '3', title: 'Get Approved', description: 'Our team reviews and approves qualified partners' },
|
|
{ step: '4', title: 'Start Marketing', description: 'Begin promoting our authentic food products to your network' }
|
|
].map((step, index) => (
|
|
<motion.div
|
|
key={step.step}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.1 }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{backgroundColor: '#F5873B', color: 'white'}}>
|
|
<span className="text-xl font-bold">{step.step}</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{step.description}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Ready to Start Your Partnership Journey?
|
|
</h2>
|
|
<p className="text-xl text-gray-600 mb-8">
|
|
Don't miss this opportunity to be part of India's authentic food revolution.
|
|
Limited spots available on first-come, first-served basis.
|
|
</p>
|
|
<div className="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center">
|
|
<Button
|
|
size="lg"
|
|
className="w-full sm:w-auto text-lg px-8 py-4"
|
|
style={{backgroundColor: '#F5873B', color: 'white'}}
|
|
onClick={() => {
|
|
setSelectedTier('Silver')
|
|
setIsApplicationFormOpen(true)
|
|
}}
|
|
>
|
|
Apply Now <ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="w-full sm:w-auto text-lg px-8 py-4 border-gray-300"
|
|
>
|
|
Contact Us
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Partnership Application Form */}
|
|
<PartnershipApplicationForm
|
|
isOpen={isApplicationFormOpen}
|
|
onClose={() => setIsApplicationFormOpen(false)}
|
|
selectedTier={selectedTier}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|