110 lines
4.9 KiB
TypeScript
110 lines
4.9 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { MapPin, UserPlus, Store, ArrowRight, MessageCircle, ScanQrCode } from 'lucide-react'
|
||
|
||
export default function ContactPage() {
|
||
|
||
return (
|
||
<div className="pt-24 pb-20 bg-white">
|
||
{/* Header */}
|
||
<section className="container mx-auto px-4 md:px-6 mb-16 text-center">
|
||
<h1 className="text-4xl font-bold text-secondary mb-4">合作加盟</h1>
|
||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||
无论您是希望成为区域合伙人，还是商家寻求数字化转型，我们都期待与您携手共赢。
|
||
</p>
|
||
</section>
|
||
|
||
<div className="container mx-auto px-4 md:px-6">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
|
||
{/* Left: Partner Benefits & Info */}
|
||
<div className="space-y-8">
|
||
{/* Partner Benefits */}
|
||
<Card className="border-0 shadow-lg bg-accent">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl flex items-center gap-2">
|
||
<UserPlus className="w-5 h-5 text-primary" />
|
||
合伙人权益
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex gap-4">
|
||
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
||
<Store className="w-5 h-5 text-primary" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold">区域独家保护</h3>
|
||
<p className="text-sm text-muted-foreground">享受区域内所有商家流水的分润，建立持久管道收益。</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
||
<ArrowRight className="w-5 h-5 text-primary" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold">全套运营支持</h3>
|
||
<p className="text-sm text-muted-foreground">提供技术培训、物料支持、招商会销支持，助您快速展业。</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Contact Info */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-bold text-secondary">联系我们</h2>
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
|
||
<MapPin className="w-5 h-5 text-primary" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">公司地址</p>
|
||
<p className="font-semibold text-lg">天津市武清区京津产业新城海达商务大厦</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Card className="border-0 shadow-lg">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<MessageCircle className="w-5 h-5 text-primary" />
|
||
扫码联系客服
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<div className="flex flex-col items-center space-y-6">
|
||
<div className="relative">
|
||
<img
|
||
src="/baima-qrcode.png"
|
||
alt="企业微信客服二维码"
|
||
className="w-64 h-64 object-contain rounded-2xl shadow-2xl border-4 border-primary/20"
|
||
/>
|
||
<div className="absolute -bottom-2 -right-2 w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-lg">
|
||
<ScanQrCode className="w-6 h-6 text-white" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<h3 className="text-xl font-bold text-gray-900">
|
||
立即扫码，一对一沟通
|
||
</h3>
|
||
<p className="text-muted-foreground max-w-md">
|
||
我们的专业团队将为您提供详细的产品咨询和合作方案，期待与您携手共赢。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 text-sm text-primary font-medium">
|
||
<div className="w-2 h-2 bg-primary rounded-full animate-pulse" />
|
||
客服在线中，快速响应
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|