270 lines
9.4 KiB
HTML
Executable File
270 lines
9.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>💼 H3R7Tech - Services Digitaux</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-dark: #0d0d1a;
|
|
--bg-card: #16162a;
|
|
--primary: #e94560;
|
|
--secondary: #7b2cbf;
|
|
--accent: #00d9ff;
|
|
--text: #fff;
|
|
--text-dim: #aaa;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Outfit', sans-serif;
|
|
background: var(--bg-dark);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
}
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
}
|
|
.header p {
|
|
font-size: 1.2em;
|
|
opacity: 0.9;
|
|
}
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.section {
|
|
margin: 40px 0;
|
|
}
|
|
.section h2 {
|
|
color: var(--accent);
|
|
font-size: 1.8em;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid var(--secondary);
|
|
padding-bottom: 10px;
|
|
}
|
|
.card {
|
|
background: var(--bg-card);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.card h3 {
|
|
color: var(--primary);
|
|
margin-bottom: 10px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
.price {
|
|
font-size: 2em;
|
|
color: var(--accent);
|
|
font-weight: bold;
|
|
}
|
|
.price span {
|
|
font-size: 0.4em;
|
|
color: var(--text-dim);
|
|
}
|
|
.tag {
|
|
display: inline-block;
|
|
background: var(--secondary);
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8em;
|
|
margin: 3px;
|
|
}
|
|
.tag.red { background: var(--primary); }
|
|
.tag.green { background: #00ff88; color: #000; }
|
|
.tag.blue { background: var(--accent); color: #000; }
|
|
.check {
|
|
color: #00ff88;
|
|
margin-right: 8px;
|
|
}
|
|
ul { list-style: none; }
|
|
ul li::before { content: "→ "; color: var(--accent); }
|
|
.cta {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, var(--accent), #0099cc);
|
|
color: var(--bg-dark);
|
|
padding: 15px 30px;
|
|
border-radius: 30px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
}
|
|
.hero {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
background: linear-gradient(180deg, rgba(123,44,191,0.2), transparent);
|
|
}
|
|
.hero h2 {
|
|
font-size: 2em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.stats {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
.stat {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.stat .number {
|
|
font-size: 2.5em;
|
|
color: var(--accent);
|
|
font-weight: bold;
|
|
}
|
|
.niche-card {
|
|
border-left: 4px solid var(--primary);
|
|
}
|
|
.niche-card.pod { border-color: #00ff88; }
|
|
.niche-card.artisan { border-color: var(--accent); }
|
|
.niche-card.turf { border-color: var(--primary); }
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="https://portal-kolifee.duckdns.org/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
<div class="header">
|
|
<h1>🐾 H3R7Tech</h1>
|
|
<p>Solutions digitales pour artisans, entrepreneurs et passionnés</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- SERVICES -->
|
|
<div class="section">
|
|
<h2>💼 Nos Services</h2>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h3>🖨️ Print On Demand</h3>
|
|
<p>Création de produits personnalisés (t-shirts, mugs, stickers)</p>
|
|
<p class="price">15-40%<span> marge</span></p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>🏪 Site Vitrine Artisan</h3>
|
|
<p>Site web 1 page pour artisans et petits commerces</p>
|
|
<p class="price">199€<span> one-shot</span></p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>📊 CRM sur Mesure</h3>
|
|
<p>Gestion prospects, suivi clients, pipeline</p>
|
|
<p class="price">49-99€<span>/mois</span></p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>🏇 Turf Predictions</h3>
|
|
<p>Prédictions IA pour les courses hippiques</p>
|
|
<p class="price">9.90-99€<span>/mois</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NICHE POD -->
|
|
<div class="section">
|
|
<h2>🎯 Niche #1: Print On Demand</h2>
|
|
<div class="card niche-card pod">
|
|
<h3>🛍️ Comment ça marche</h3>
|
|
<ul>
|
|
<li>Tu crées un design</li>
|
|
<li>Client commande sur ta boutique</li>
|
|
<li>Printful imprime et expédie</li>
|
|
<li>Tu touches la marge</li>
|
|
</ul>
|
|
<div style="margin-top:15px">
|
|
<span class="tag green">T-shirts</span>
|
|
<span class="tag green">Mugs</span>
|
|
<span class="tag green">Stickers</span>
|
|
<span class="tag green">Posters</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NICHE ARTISANS -->
|
|
<div class="section">
|
|
<h2>🎯 Niche #2: Services aux Artisans</h2>
|
|
<div class="card niche-card artisan">
|
|
<h3>🔧 Le problème</h3>
|
|
<p>80% des artisans n'ont pas de site web et perdent des clients.</p>
|
|
<h3 style="margin-top:15px">La solution</h3>
|
|
<ul>
|
|
<li>Site web vitrine (199€)</li>
|
|
<li>Gestion Google Business (49€/mois)</li>
|
|
<li>Photos produits (99€)</li>
|
|
<li>Formation réseaux sociaux (149€)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NICHE TURF -->
|
|
<div class="section">
|
|
<h2>🎯 Niche #3: Turf Betting Service</h2>
|
|
<div class="card niche-card turf">
|
|
<h3>🏇 Monetisation</h3>
|
|
<div class="grid">
|
|
<div>
|
|
<span class="tag">Gratuit</span>
|
|
<p>1 prédiction/jour (email)</p>
|
|
</div>
|
|
<div>
|
|
<span class="tag red">Essentiel 9.90€/mois</span>
|
|
<p>3 prédictions + analyse</p>
|
|
</div>
|
|
<div>
|
|
<span class="tag red">Premium 29.90€/mois</span>
|
|
<p>5 prédictions + money management</p>
|
|
</div>
|
|
<div>
|
|
<span class="tag red">VIP 99€/mois</span>
|
|
<p>Picks exclusifs + suivi</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OBJECTIFS -->
|
|
<div class="section">
|
|
<h2>📈 Objectifs 2026</h2>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="number">100€</div>
|
|
<div>Mars</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="number">500€</div>
|
|
<div>Mai</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="number">1000€</div>
|
|
<div>Juillet</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="number">2500€</div>
|
|
<div>Novembre</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CONTACT -->
|
|
<div class="section">
|
|
<div class="hero">
|
|
<h2>🚀 Lançons-nous!</h2>
|
|
<p>Tu veux commander un service ou discuter d'un projet?</p>
|
|
<a href="mailto:h3r7@tech.local" class="cta">Me contacter</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|