import { motion } from "framer-motion";
import { FileText, CheckCircle, Shield, Music, Users, CreditCard, Globe, Zap } from "lucide-react";
const sections = [
{
icon: Music,
title: "Objectif de la Plateforme",
content: "Polo Master est une plateforme musicale premium permettant aux artistes adultes de publier, distribuer et monétiser leur musique. Les utilisateurs bénéficient d'un système de reproduction automatique après souscription à un abonnement premium."
},
{
icon: Users,
title: "Public Cible",
content: "Artistes musiciens adultes (18+), producteurs, labels indépendants et amateurs de musique souhaitant découvrir de nouveaux talents à travers une plateforme sécurisée et professionnelle."
},
{
icon: Shield,
title: "Système de Sécurité",
content: "Inscription gratuite avec vérification d'identité. Paiements protégés via Visa, MasterCard et PayPal avec chiffrement SSL. Protection des données personnelles conforme au RGPD."
},
{
icon: CreditCard,
title: "Modèle Économique",
content: "Freemium : accès gratuit limité (3 pistes, pas de reproduction auto). Abonnements Starter (9.99€/mois), Premium (24.99€/mois) et Platinum (49.99€/mois) avec fonctionnalités progressives."
},
{
icon: Zap,
title: "Reproduction Automatique",
content: "Système de lecture automatique des pistes pour les abonnés premium. Les écoutes générées par la reproduction automatique sont comptabilisées et contribuent aux revenus de l'artiste."
},
{
icon: Globe,
title: "Distribution Multi-Plateformes",
content: "Les artistes peuvent choisir les plateformes sur lesquelles leur musique sera recommandée : Spotify, Apple Music, Deezer, YouTube Music, SoundCloud, Tidal, Amazon Music."
},
];
const features = [
"Création de compte artiste avec profil complet (6 photos max)",
"Upload de pistes audio en qualité HD",
"Système de promotion et mise en avant",
"Zone de rémunération basée sur les écoutes",
"Tableau de bord avec statistiques en temps réel",
"Reproduction automatique pour abonnés premium",
"Base de données sécurisée pour tous les contenus",
"Système de paiement multi-méthodes (Visa, MC, PayPal)",
"Interface responsive (mobile et desktop)",
"Gestion des réseaux sociaux intégrée",
"Système de bonus et promotions fiables",
"Contact email et support client",
];
export default function CahierDeCharge() {
return (
<div className="max-w-5xl mx-auto px-4 py-16">
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="text-center mb-16">
<div className="inline-flex items-center gap-2 bg-primary/10 border border-primary/20 rounded-full px-4 py-1.5 mb-4">
<FileText className="w-4 h-4 text-primary" />
<span className="text-sm text-primary font-medium">Documentation</span>
</div>
<h1 className="font-heading text-4xl md:text-5xl font-bold text-foreground mb-4">
Cahier de <span className="text-primary">Charge</span>
</h1>
<p className="text-muted-foreground text-lg max-w-lg mx-auto">
Spécifications techniques et fonctionnelles de la plateforme Polo Master
</p>
</motion.div>
{/* Project Info */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="bg-card border border-border rounded-2xl p-8 mb-10"
>
<h2 className="font-heading text-2xl font-bold text-foreground mb-4">Informations du Projet</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div className="flex justify-between py-2 border-b border-border">
<span className="text-muted-foreground">Nom du projet</span>
<span className="text-foreground font-medium">Polo Master — Plateforme Musicale</span>
</div>
<div className="flex justify-between py-2 border-b border-border">
<span className="text-muted-foreground">Société</span>
<span className="text-foreground font-medium">SAS Polo Master</span>
</div>
<div className="flex justify-between py-2 border-b border-border">
<span className="text-muted-foreground">Fondateur & Propriétaire</span>
<span className="text-primary font-semibold">Paul Melam Mosange</span>
</div>
<div className="flex justify-between py-2 border-b border-border">
<span className="text-muted-foreground">Type</span>
<span className="text-foreground font-medium">Plateforme musicale SaaS</span>
</div>
<div className="flex justify-between py-2 border-b border-border">
<span className="text-muted-foreground">Modèle</span>
<span className="text-foreground font-medium">Freemium + Premium</span>
</div>
<div className="flex justify-between py-2 border-b border-border">
<span className="text-muted-foreground">Copyright</span>
<span className="text-foreground font-medium">© {new Date().getFullYear()} Paul Melam Mosange</span>
</div>
</div>
</motion.div>
{/* Sections */}
<div className="space-y-6 mb-12">
{sections.map((section, i) => {
const Icon = section.icon;
return (
<motion.div
key={i}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.15 + i * 0.08 }}
className="bg-card border border-border rounded-2xl p-6"
>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
<Icon className="w-6 h-6 text-primary" />
</div>
<div>
<h3 className="font-heading text-lg font-bold text-foreground mb-2">{section.title}</h3>
<p className="text-muted-foreground leading-relaxed">{section.content}</p>
</div>
</div>
</motion.div>
);
})}
</div>
{/* Features Checklist */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="bg-card border border-border rounded-2xl p-8"
>
<h2 className="font-heading text-2xl font-bold text-foreground mb-6">Liste des Fonctionnalités</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{features.map((feature, i) => (
<div key={i} className="flex items-center gap-3">
<CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
<span className="text-sm text-foreground">{feature}</span>
</div>
))}
</div>
</motion.div>
</div>
);
}