MockupMagic - Device Screenshot Generator

Génère des mockups professionnels de sites web dans des devices Apple (iPhone 17, iPad Pro).

✨ Fonctionnalités

• 5 types de devices : iPhone 17 Pro (face, incliné gauche, incliné droite), iPad Pro (portrait, paysage)
• Capture automatique : Entre une URL et génère les screenshots instantanément
• Design premium : Frames réalistes avec Dynamic Island, reflets, et ombres
• Export PNG : Télécharge les mockups en haute résolution
• Interface moderne : Design sombre élégant avec effets glassmorphism

🚀 Déploiement sur Vercel

Option 1 : Déploiement en un clic

1. Pousse ce projet sur GitHub
2. Va sur vercel.com
3. Clique sur "New Project"
4. Importe ton repository
5. Clique sur "Deploy" - C'est tout !

Option 2 : Via Vercel CLI

# Installe Vercel CLI
npm i -g vercel

# Dans le dossier du projet
cd mockup-generator

# Déploie
vercel

# Pour la production
vercel --prod

🛠️ Développement local

# Installe les dépendances
npm install

# Lance le serveur de développement
npm run dev

# Build de production
npm run build

📁 Structure du projet

mockup-generator/
├── app/
│   ├── api/
│   │   └── screenshot/
│   │       └── route.ts      # API de capture d'écran
│   ├── globals.css           # Styles globaux
│   ├── layout.tsx            # Layout principal
│   └── page.tsx              # Page d'accueil
├── components/
│   ├── DeviceFrame.tsx       # Composants de frames devices
│   └── MockupGenerator.tsx   # Composant principal
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vercel.json               # Config Vercel

🎨 Personnalisation

Ajouter un nouveau device

Dans components/DeviceFrame.tsx, ajoute un nouveau case dans getDeviceStyles() :

case 'iphone-mini':
  return {
    container: 'w-[240px] h-[490px]',
    transform: '',
    screen: { width: 216, height: 468, radius: 38, top: 11, left: 12 },
    notch: true,
  }

Modifier les couleurs

Édite tailwind.config.ts pour personnaliser la palette :

colors: {
  'accent': '#your-color',
  'accent-light': '#your-lighter-color',
}

🔧 API Screenshot

L'API utilise Microlink pour capturer les screenshots. Elle inclut un fallback vers Thum.io en cas d'erreur.

Endpoint : POST /api/screenshot

Body :

{
  "url": "https://example.com",
  "width": 430,
  "height": 932
}

📝 Limites connues

• Les sites avec protection anti-bot peuvent ne pas être capturés
• Certains sites bloquent les captures d'écran tierces
• Les sessions authentifiées ne sont pas supportées

📄 License

MIT - Utilise librement pour tes projets !

---

Créé avec ❤️ par Ed