Hugging Face's logo

Spaces:
kloudboy
/
mailfortress-pro
Running

App Files Community
kloudboy commited on
Commit
d8b3de5
·
verified ·
1 Parent(s): f30d591

Email Hosting Plans (Per User / Per Month)

Browse files

Plan Price/User Storage Features
Base Plan ₹480 5GB • Priority Support
• IMAP/SMTP access
• SPF/DKIM/DMARC configured
• Webmail access
Business Plan ₹650 10GB • Everything in Base Plan
• Custom folder rules & filters
• Enhanced spam protection
• Backup retention 30 days
Premium Plan ₹850 20GB • Everything in Business Plan
• Extended backup 90 days
• Email archiving
• Gmail migration included
• SLA Priority Support

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +390 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Mailfortress Pro
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: MailFortress Pro 🚀
3
+ colorFrom: gray
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,391 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MailFortress Pro - Professional Email Hosting</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ }
22
+
23
+ .card-hover {
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .card-hover:hover {
28
+ transform: translateY(-10px);
29
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
30
+ }
31
+
32
+ .feature-icon {
33
+ width: 48px;
34
+ height: 48px;
35
+ border-radius: 12px;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ margin-bottom: 16px;
40
+ }
41
+
42
+ .pricing-card {
43
+ border-radius: 20px;
44
+ overflow: hidden;
45
+ }
46
+
47
+ .popular-badge {
48
+ position: absolute;
49
+ top: -12px;
50
+ right: 20px;
51
+ background: linear-gradient(45deg, #FFD700, #FFA500);
52
+ color: white;
53
+ padding: 8px 16px;
54
+ border-radius: 20px;
55
+ font-weight: 600;
56
+ font-size: 0.75rem;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50">
61
+ <!-- Navigation -->
62
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
63
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
64
+ <div class="flex justify-between items-center h-16">
65
+ <div class="flex items-center space-x-2">
66
+ <i data-feather="mail" class="text-purple-600 w-8 h-8"></i>
67
+ <span class="text-xl font-bold text-gray-800">MailFortress Pro</span>
68
+ </div>
69
+
70
+ <div class="hidden md:flex items-center space-x-8">
71
+ <a href="#features" class="text-gray-600 hover:text-purple-600 transition-colors">Features</a>
72
+ <a href="#pricing" class="text-gray-600 hover:text-purple-600 transition-colors">Pricing</a>
73
+ <a href="#contact" class="text-gray-600 hover:text-purple-600 transition-colors">Contact</a>
74
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition-colors">
75
+ Get Started
76
+ </button>
77
+ </div>
78
+
79
+ <button class="md:hidden">
80
+ <i data-feather="menu" class="w-6 h-6"></i>
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </nav>
85
+
86
+ <!-- Hero Section -->
87
+ <section class="gradient-bg text-white py-20">
88
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
89
+ <div class="text-center">
90
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
91
+ Professional Email
92
+ <span class="block text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-400">
93
+ Hosting Solutions
94
+ </span>
95
+ </h1>
96
+ <p class="text-xl md:text-2xl mb-8 text-purple-100 max-w-3xl mx-auto">
97
+ Secure, reliable, and feature-rich email hosting for businesses of all sizes.
98
+ Built for professionals who demand excellence.
99
+ </p>
100
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
101
+ <button class="bg-white text-purple-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-lg">
102
+ Start Free Trial
103
+ </button>
104
+ <button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition-colors text-lg">
105
+ View Plans
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Features Section -->
113
+ <section id="features" class="py-20 bg-white">
114
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
115
+ <div class="text-center mb-16">
116
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Why Choose MailFortress Pro?</h2>
117
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
118
+ Our email hosting platform is designed with security, reliability, and productivity in mind
119
+ </p>
120
+ </div>
121
+
122
+ <div class="grid md:grid-cols-3 gap-8">
123
+ <div class="text-center p-8 card-hover bg-gray-50 rounded-2xl">
124
+ <div class="feature-icon bg-purple-100 text-purple-600 mx-auto">
125
+ <i data-feather="shield" class="w-6 h-6"></i>
126
+ </div>
127
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Military-Grade Security</h3>
128
+ <p class="text-gray-600">SPF, DKIM, and DMARC configured by default to protect your domain reputation</p>
129
+ </div>
130
+
131
+ <div class="text-center p-8 card-hover bg-gray-50 rounded-2xl">
132
+ <div class="feature-icon bg-blue-100 text-blue-600 mx-auto">
133
+ <i data-feather="cloud" class="w-6 h-6"></i>
134
+ </div>
135
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">99.9% Uptime Guarantee</h3>
136
+ <p class="text-gray-600">Reliable infrastructure with SLA-backed performance and priority support</p>
137
+ </div>
138
+
139
+ <div class="text-center p-8 card-hover bg-gray-50 rounded-2xl">
140
+ <div class="feature-icon bg-green-100 text-green-600 mx-auto">
141
+ <i data-feather="zap" class="w-6 h-6"></i>
142
+ </div>
143
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Seamless Migration</h3>
144
+ <p class="text-gray-600">Easy migration from Gmail and other providers with zero downtime</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Pricing Section -->
151
+ <section id="pricing" class="py-20 bg-gray-50">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
153
+ <div class="text-center mb-16">
154
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Simple, Transparent Pricing</h2>
155
+ <p class="text-xl text-gray-600">Per user, per month. No hidden fees, no surprises.</p>
156
+ </div>
157
+
158
+ <div class="grid lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
159
+ <!-- Base Plan -->
160
+ <div class="pricing-card bg-white rounded-2xl shadow-lg card-hover">
161
+ <div class="p-8 border-b">
162
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Base Plan</h3>
163
+ <div class="flex items-baseline mb-4">
164
+ <span class="text-4xl font-bold text-gray-800">₹480</span>
165
+ <span class="text-gray-600 ml-2">/user/month</span>
166
+ </div>
167
+ <p class="text-gray-600">Perfect for startups and small teams</p>
168
+ </div>
169
+
170
+ <div class="p-8">
171
+ <div class="mb-6">
172
+ <h4 class="font-semibold text-gray-800 mb-3">5GB Storage</h4>
173
+ <ul class="space-y-3">
174
+ <li class="flex items-center text-gray-600">
175
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
176
+ Priority Support
177
+ </li>
178
+ <li class="flex items-center text-gray-600">
179
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
180
+ IMAP/SMTP access
181
+ </li>
182
+ <li class="flex items-center text-gray-600">
183
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
184
+ SPF/DKIM/DMARC configured
185
+ </li>
186
+ <li class="flex items-center text-gray-600">
187
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
188
+ Webmail access
189
+ </li>
190
+ </ul>
191
+ </div>
192
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-semibold">
193
+ Get Started
194
+ </button>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Business Plan -->
199
+ <div class="pricing-card bg-white rounded-2xl shadow-xl card-hover relative">
200
+ <div class="popular-badge">MOST POPULAR</div>
201
+ <div class="p-8 border-b bg-gradient-to-r from-purple-600 to-blue-600 text-white">
202
+ <h3 class="text-2xl font-bold mb-2">Business Plan</h3>
203
+ <div class="flex items-baseline mb-4">
204
+ <span class="text-4xl font-bold">₹650</span>
205
+ <span class="ml-2 opacity-90">/user/month</span>
206
+ </div>
207
+ <p class="opacity-90">Ideal for growing businesses</p>
208
+ </div>
209
+
210
+ <div class="p-8">
211
+ <div class="mb-6">
212
+ <h4 class="font-semibold text-gray-800 mb-3">10GB Storage</h4>
213
+ <ul class="space-y-3">
214
+ <li class="flex items-center text-gray-600">
215
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
216
+ Everything in Base Plan
217
+ </li>
218
+ <li class="flex items-center text-gray-600">
219
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
220
+ Custom folder rules & filters
221
+ </li>
222
+ <li class="flex items-center text-gray-600">
223
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
224
+ Enhanced spam protection
225
+ </li>
226
+ <li class="flex items-center text-gray-600">
227
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
228
+ Backup retention 30 days
229
+ </li>
230
+ </ul>
231
+ </div>
232
+ <button class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-3 rounded-lg hover:from-purple-700 hover:to-blue-700 transition-colors font-semibold">
233
+ Get Started
234
+ </button>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Premium Plan -->
239
+ <div class="pricing-card bg-white rounded-2xl shadow-lg card-hover">
240
+ <div class="p-8 border-b">
241
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Premium Plan</h3>
242
+ <div class="flex items-baseline mb-4">
243
+ <span class="text-4xl font-bold text-gray-800">₹850</span>
244
+ <span class="text-gray-600 ml-2">/user/month</span>
245
+ </div>
246
+ <p class="text-gray-600">Enterprise-grade features</p>
247
+ </div>
248
+
249
+ <div class="p-8">
250
+ <div class="mb-6">
251
+ <h4 class="font-semibold text-gray-800 mb-3">20GB Storage</h4>
252
+ <ul class="space-y-3">
253
+ <li class="flex items-center text-gray-600">
254
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
255
+ Everything in Business Plan
256
+ </li>
257
+ <li class="flex items-center text-gray-600">
258
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
259
+ Extended backup 90 days
260
+ </li>
261
+ <li class="flex items-center text-gray-600">
262
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
263
+ Email archiving
264
+ </li>
265
+ <li class="flex items-center text-gray-600">
266
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
267
+ Gmail migration included
268
+ </li>
269
+ <li class="flex items-center text-gray-600">
270
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
271
+ SLA Priority Support
272
+ </li>
273
+ </ul>
274
+ </div>
275
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-semibold">
276
+ Get Started
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- CTA Section -->
285
+ <section class="py-20 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
286
+ <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
287
+ <h2 class="text-4xl font-bold mb-6">Ready to Upgrade Your Email Experience?</h2>
288
+ <p class="text-xl mb-8 opacity-90">
289
+ Join thousands of businesses that trust MailFortress Pro for their email hosting needs
290
+ </p>
291
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
292
+ <button class="bg-white text-purple-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-lg">
293
+ Start Your Free Trial
294
+ </button>
295
+ <button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition-colors text-lg">
296
+ Schedule a Demo
297
+ </button>
298
+ </div>
299
+ </div>
300
+ </section>
301
+
302
+ <!-- Footer -->
303
+ <footer id="contact" class="bg-gray-800 text-white py-12">
304
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
305
+ <div class="grid md:grid-cols-4 gap-8">
306
+ <div>
307
+ <div class="flex items-center space-x-2 mb-4">
308
+ <i data-feather="mail" class="w-6 h-6 text-purple-400"></i>
309
+ <span class="text-xl font-bold">MailFortress Pro</span>
310
+ </div>
311
+ <p class="text-gray-400">
312
+ Professional email hosting solutions for modern businesses
313
+ </p>
314
+ </div>
315
+
316
+ <div>
317
+ <h4 class="font-semibold mb-4">Quick Links</h4>
318
+ <ul class="space-y-2 text-gray-400">
319
+ <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
320
+ <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
321
+ <li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
322
+ <li><a href="#" class="hover:text-white transition-colors">Support</a></li>
323
+ </ul>
324
+ </div>
325
+
326
+ <div>
327
+ <h4 class="font-semibold mb-4">Contact</h4>
328
+ <ul class="space-y-2 text-gray-400">
329
+ <li class="flex items-center">
330
+ <i data-feather="mail" class="w-4 h-4 mr-3"></i>
331
+ support@mailfortresspro.com
332
+ </li>
333
+ <li class="flex items-center">
334
+ <i data-feather="phone" class="w-4 h-4 mr-3"></i>
335
+ +91-XXXXX-XXXXX
336
+ </li>
337
+ </ul>
338
+ </div>
339
+
340
+ <div>
341
+ <h4 class="font-semibold mb-4">Follow Us</h4>
342
+ <div class="flex space-x-4">
343
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
344
+ <i data-feather="twitter" class="w-5 h-5"></i>
345
+ </a>
346
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
347
+ <i data-feather="linkedin" class="w-5 h-5"></i>
348
+ </a>
349
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
350
+ <i data-feather="facebook" class="w-5 h-5"></i>
351
+ </a>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
357
+ <p>&copy; 2024 MailFortress Pro. All rights reserved.</p>
358
+ </div>
359
+ </div>
360
+ </footer>
361
+
362
+ <script>
363
+ feather.replace();
364
+
365
+ // Simple animation for cards on scroll
366
+ const observerOptions = {
367
+ threshold: 0.1,
368
+ rootMargin: '0px 0px -50px 0px'
369
+ };
370
+
371
+ const observer = new IntersectionObserver((entries) => {
372
+ entries.forEach(entry => {
373
+ if (entry.isIntersecting) {
374
+ entry.target.style.opacity = '1';
375
+ entry.target.style.transform = 'translateY(0)';
376
+ }
377
+ });
378
+ }, observerOptions);
379
+
380
+ document.addEventListener('DOMContentLoaded', () => {
381
+ const cards = document.querySelectorAll('.card-hover');
382
+ cards.forEach(card => {
383
+ card.style.opacity = '0';
384
+ card.style.transform = 'translateY(20px)';
385
+ card.style.transition = 'all 0.6s ease';
386
+ observer.observe(card);
387
+ });
388
+ });
389
+ </script>
390
+ </body>
391
  </html>