Hugging Face's logo

Spaces:
serialcode24x7
/
mail-generate
Running

App Files Community
serialcode24x7 commited on
Commit
fba5060
·
verified ·
1 Parent(s): 451d907

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +955 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mail Generate
3
- emoji: 📊
4
- colorFrom: yellow
5
- colorTo: blue
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: mail-generate
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,955 @@
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>EmailCraft Pro | Professional Email Writing Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 50%, #2B32B2 100%);
12
+ }
13
+ .topic-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .template-card:hover {
18
+ transform: scale(1.02);
19
+ }
20
+ .testimonial-card {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .testimonial-card:hover {
24
+ background-color: #f8fafc;
25
+ }
26
+ .nav-link:hover {
27
+ color: #3b82f6;
28
+ }
29
+ .tone-option:hover {
30
+ background-color: #e0e7ff;
31
+ }
32
+ .keyword-chip:hover {
33
+ background-color: #3b82f6;
34
+ color: white;
35
+ }
36
+ @media (max-width: 768px) {
37
+ .hero-text {
38
+ font-size: 2.5rem;
39
+ }
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="font-sans antialiased text-gray-800">
44
+ <!-- Navigation -->
45
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
46
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
47
+ <div class="flex justify-between h-16">
48
+ <div class="flex items-center">
49
+ <div class="flex-shrink-0 flex items-center">
50
+ <i class="fas fa-envelope-open-text text-blue-600 text-2xl mr-2"></i>
51
+ <span class="text-xl font-bold text-gray-900">EmailCraft Pro</span>
52
+ </div>
53
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
54
+ <a href="#features" class="nav-link border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
55
+ <a href="#templates" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Templates</a>
56
+ <a href="#topics" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Topics</a>
57
+ <a href="#testimonials" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a>
58
+ </div>
59
+ </div>
60
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
61
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Sign Up Free</button>
62
+ </div>
63
+ <div class="-mr-2 flex items-center sm:hidden">
64
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
65
+ <span class="sr-only">Open main menu</span>
66
+ <i class="fas fa-bars"></i>
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Mobile menu -->
73
+ <div class="hidden sm:hidden" id="mobile-menu">
74
+ <div class="pt-2 pb-3 space-y-1">
75
+ <a href="#features" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
76
+ <a href="#templates" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Templates</a>
77
+ <a href="#topics" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Topics</a>
78
+ <a href="#testimonials" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Testimonials</a>
79
+ <div class="mt-4 pl-3">
80
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full">Sign Up Free</button>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </nav>
85
+
86
+ <!-- Hero Section -->
87
+ <div class="gradient-bg text-white">
88
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
89
+ <div class="text-center">
90
+ <h1 class="hero-text text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
91
+ Write Emails That Get Results
92
+ </h1>
93
+ <p class="mt-6 max-w-lg mx-auto text-xl">
94
+ AI-powered email writing platform that helps you craft professional, effective emails in minutes.
95
+ </p>
96
+ <div class="mt-10 flex justify-center space-x-4">
97
+ <button class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 border border-transparent rounded-md text-base font-medium md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">
98
+ Start Writing Free
99
+ </button>
100
+ <button class="bg-transparent hover:bg-blue-700 text-white px-8 py-3 border border-white rounded-md text-base font-medium md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">
101
+ See Templates
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Features Section -->
109
+ <div id="features" class="py-12 bg-white">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="lg:text-center">
112
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2>
113
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
114
+ Everything you need to write better emails
115
+ </p>
116
+ </div>
117
+
118
+ <div class="mt-10">
119
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
120
+ <!-- Feature 1 -->
121
+ <div class="relative">
122
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
123
+ <i class="fas fa-lightbulb"></i>
124
+ </div>
125
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Topic Suggestions</p>
126
+ <p class="mt-2 ml-16 text-base text-gray-500">
127
+ Get inspired with pre-defined topics across business, marketing, sales, and more to kickstart your email.
128
+ </p>
129
+ </div>
130
+
131
+ <!-- Feature 2 -->
132
+ <div class="relative">
133
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
134
+ <i class="fas fa-file-alt"></i>
135
+ </div>
136
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Professional Templates</p>
137
+ <p class="mt-2 ml-16 text-base text-gray-500">
138
+ Choose from hundreds of customizable templates for various industries and purposes.
139
+ </p>
140
+ </div>
141
+
142
+ <!-- Feature 3 -->
143
+ <div class="relative">
144
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
145
+ <i class="fas fa-volume-up"></i>
146
+ </div>
147
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Tone & Style Options</p>
148
+ <p class="mt-2 ml-16 text-base text-gray-500">
149
+ Adjust your email's tone from formal to friendly with our tone selector.
150
+ </p>
151
+ </div>
152
+
153
+ <!-- Feature 4 -->
154
+ <div class="relative">
155
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
156
+ <i class="fas fa-key"></i>
157
+ </div>
158
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Keyword Suggestions</p>
159
+ <p class="mt-2 ml-16 text-base text-gray-500">
160
+ AI-powered keyword recommendations to improve your email's effectiveness.
161
+ </p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Email Editor Preview -->
169
+ <div class="bg-gray-50 py-12">
170
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
171
+ <div class="lg:text-center mb-12">
172
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Editor</h2>
173
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
174
+ Powerful Email Editor
175
+ </p>
176
+ </div>
177
+
178
+ <div class="bg-white rounded-lg shadow-xl overflow-hidden">
179
+ <div class="p-4 bg-gray-100 border-b flex justify-between items-center">
180
+ <div class="flex space-x-2">
181
+ <button class="px-3 py-1 bg-white rounded text-sm font-medium">New Email</button>
182
+ <button class="px-3 py-1 bg-white rounded text-sm font-medium">Save Draft</button>
183
+ </div>
184
+ <div class="flex space-x-2">
185
+ <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm font-medium">Send</button>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="p-4 border-b">
190
+ <div class="flex flex-wrap gap-2 mb-4">
191
+ <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Increase conversions</span>
192
+ <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Call to action</span>
193
+ <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Limited time</span>
194
+ <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Exclusive offer</span>
195
+ </div>
196
+
197
+ <div class="mb-4">
198
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tone:</label>
199
+ <div class="flex flex-wrap gap-2">
200
+ <span class="tone-option px-3 py-1 bg-blue-100 text-blue-800 rounded text-sm cursor-pointer">Formal</span>
201
+ <span class="tone-option px-3 py-1 bg-gray-100 rounded text-sm cursor-pointer">Informal</span>
202
+ <span class="tone-option px-3 py-1 bg-gray-100 rounded text-sm cursor-pointer">Persuasive</span>
203
+ <span class="tone-option px-3 py-1 bg-gray-100 rounded text-sm cursor-pointer">Friendly</span>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="space-y-4">
208
+ <div>
209
+ <input type="text" placeholder="Subject" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
210
+ </div>
211
+ <div>
212
+ <textarea rows="8" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Write your email here..."></textarea>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="p-4 bg-gray-50 flex justify-between items-center">
218
+ <div class="text-sm text-gray-500">
219
+ <i class="fas fa-magic mr-1"></i> AI Suggestions Available
220
+ </div>
221
+ <button class="px-4 py-2 bg-blue-600 text-white rounded text-sm font-medium flex items-center">
222
+ <i class="fas fa-paper-plane mr-2"></i> Send Email
223
+ </button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Templates Section -->
230
+ <div id="templates" class="py-12 bg-white">
231
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
232
+ <div class="lg:text-center mb-12">
233
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Templates</h2>
234
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
235
+ Professionally Designed Email Templates
236
+ </p>
237
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
238
+ Choose from our collection of customizable templates for every occasion.
239
+ </p>
240
+ </div>
241
+
242
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
243
+ <!-- Template 1 -->
244
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
245
+ <div class="p-4 bg-blue-600">
246
+ <h3 class="text-lg font-medium text-white">Sales Pitch</h3>
247
+ </div>
248
+ <div class="p-4">
249
+ <p class="text-gray-600 mb-4">Perfect for introducing your product or service to potential clients.</p>
250
+ <div class="flex justify-between items-center">
251
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Business</span>
252
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Template 2 -->
258
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
259
+ <div class="p-4 bg-green-600">
260
+ <h3 class="text-lg font-medium text-white">Newsletter</h3>
261
+ </div>
262
+ <div class="p-4">
263
+ <p class="text-gray-600 mb-4">Engage your audience with regular updates and valuable content.</p>
264
+ <div class="flex justify-between items-center">
265
+ <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Marketing</span>
266
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Template 3 -->
272
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
273
+ <div class="p-4 bg-purple-600">
274
+ <h3 class="text-lg font-medium text-white">Follow-Up</h3>
275
+ </div>
276
+ <div class="p-4">
277
+ <p class="text-gray-600 mb-4">Professional follow-up email after meetings or conversations.</p>
278
+ <div class="flex justify-between items-center">
279
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">Networking</span>
280
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Template 4 -->
286
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
287
+ <div class="p-4 bg-yellow-600">
288
+ <h3 class="text-lg font-medium text-white">Job Application</h3>
289
+ </div>
290
+ <div class="p-4">
291
+ <p class="text-gray-600 mb-4">Stand out when applying for jobs with this professional template.</p>
292
+ <div class="flex justify-between items-center">
293
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Career</span>
294
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Template 5 -->
300
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
301
+ <div class="p-4 bg-red-600">
302
+ <h3 class="text-lg font-medium text-white">Customer Feedback</h3>
303
+ </div>
304
+ <div class="p-4">
305
+ <p class="text-gray-600 mb-4">Request feedback from your customers to improve your service.</p>
306
+ <div class="flex justify-between items-center">
307
+ <span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">Relationships</span>
308
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Template 6 -->
314
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
315
+ <div class="p-4 bg-indigo-600">
316
+ <h3 class="text-lg font-medium text-white">Meeting Request</h3>
317
+ </div>
318
+ <div class="p-4">
319
+ <p class="text-gray-600 mb-4">Professionally request a meeting with colleagues or clients.</p>
320
+ <div class="flex justify-between items-center">
321
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">Productivity</span>
322
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="mt-10 text-center">
329
+ <button class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition duration-150 ease-in-out">
330
+ Browse All Templates
331
+ </button>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Topics Section -->
337
+ <div id="topics" class="py-12 bg-gray-50">
338
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
339
+ <div class="lg:text-center mb-12">
340
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Topics</h2>
341
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
342
+ Email Writing for Every Need
343
+ </p>
344
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
345
+ Get inspired with our categorized email topics and suggestions.
346
+ </p>
347
+ </div>
348
+
349
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
350
+ <!-- Topic 1 -->
351
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
352
+ <div class="p-5">
353
+ <div class="flex items-center">
354
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
355
+ <i class="fas fa-briefcase text-white"></i>
356
+ </div>
357
+ <div class="ml-4">
358
+ <h3 class="text-lg font-medium text-gray-900">Business & Entrepreneurship</h3>
359
+ </div>
360
+ </div>
361
+ <div class="mt-4">
362
+ <ul class="space-y-2">
363
+ <li class="flex items-start">
364
+ <div class="flex-shrink-0 text-blue-500">
365
+ <i class="fas fa-check"></i>
366
+ </div>
367
+ <p class="ml-2 text-sm text-gray-600">Investor pitches</p>
368
+ </li>
369
+ <li class="flex items-start">
370
+ <div class="flex-shrink-0 text-blue-500">
371
+ <i class="fas fa-check"></i>
372
+ </div>
373
+ <p class="ml-2 text-sm text-gray-600">Partnership proposals</p>
374
+ </li>
375
+ <li class="flex items-start">
376
+ <div class="flex-shrink-0 text-blue-500">
377
+ <i class="fas fa-check"></i>
378
+ </div>
379
+ <p class="ml-2 text-sm text-gray-600">Business updates</p>
380
+ </li>
381
+ </ul>
382
+ </div>
383
+ </div>
384
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
385
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Topic 2 -->
390
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
391
+ <div class="p-5">
392
+ <div class="flex items-center">
393
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
394
+ <i class="fas fa-bullhorn text-white"></i>
395
+ </div>
396
+ <div class="ml-4">
397
+ <h3 class="text-lg font-medium text-gray-900">Marketing & Advertising</h3>
398
+ </div>
399
+ </div>
400
+ <div class="mt-4">
401
+ <ul class="space-y-2">
402
+ <li class="flex items-start">
403
+ <div class="flex-shrink-0 text-green-500">
404
+ <i class="fas fa-check"></i>
405
+ </div>
406
+ <p class="ml-2 text-sm text-gray-600">Campaign announcements</p>
407
+ </li>
408
+ <li class="flex items-start">
409
+ <div class="flex-shrink-0 text-green-500">
410
+ <i class="fas fa-check"></i>
411
+ </div>
412
+ <p class="ml-2 text-sm text-gray-600">Product launches</p>
413
+ </li>
414
+ <li class="flex items-start">
415
+ <div class="flex-shrink-0 text-green-500">
416
+ <i class="fas fa-check"></i>
417
+ </div>
418
+ <p class="ml-2 text-sm text-gray-600">Brand collaborations</p>
419
+ </li>
420
+ </ul>
421
+ </div>
422
+ </div>
423
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
424
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Topic 3 -->
429
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
430
+ <div class="p-5">
431
+ <div class="flex items-center">
432
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
433
+ <i class="fas fa-chart-line text-white"></i>
434
+ </div>
435
+ <div class="ml-4">
436
+ <h3 class="text-lg font-medium text-gray-900">Sales & Lead Generation</h3>
437
+ </div>
438
+ </div>
439
+ <div class="mt-4">
440
+ <ul class="space-y-2">
441
+ <li class="flex items-start">
442
+ <div class="flex-shrink-0 text-purple-500">
443
+ <i class="fas fa-check"></i>
444
+ </div>
445
+ <p class="ml-2 text-sm text-gray-600">Cold outreach</p>
446
+ </li>
447
+ <li class="flex items-start">
448
+ <div class="flex-shrink-0 text-purple-500">
449
+ <i class="fas fa-check"></i>
450
+ </div>
451
+ <p class="ml-2 text-sm text-gray-600">Sales follow-ups</p>
452
+ </li>
453
+ <li class="flex items-start">
454
+ <div class="flex-shrink-0 text-purple-500">
455
+ <i class="fas fa-check"></i>
456
+ </div>
457
+ <p class="ml-2 text-sm text-gray-600">Discount offers</p>
458
+ </li>
459
+ </ul>
460
+ </div>
461
+ </div>
462
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
463
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Topic 4 -->
468
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
469
+ <div class="p-5">
470
+ <div class="flex items-center">
471
+ <div class="flex-shrink-0 bg-pink-500 rounded-md p-3">
472
+ <i class="fas fa-users text-white"></i>
473
+ </div>
474
+ <div class="ml-4">
475
+ <h3 class="text-lg font-medium text-gray-900">Relationships & Networking</h3>
476
+ </div>
477
+ </div>
478
+ <div class="mt-4">
479
+ <ul class="space-y-2">
480
+ <li class="flex items-start">
481
+ <div class="flex-shrink-0 text-pink-500">
482
+ <i class="fas fa-check"></i>
483
+ </div>
484
+ <p class="ml-2 text-sm text-gray-600">Thank you notes</p>
485
+ </li>
486
+ <li class="flex items-start">
487
+ <div class="flex-shrink-0 text-pink-500">
488
+ <i class="fas fa-check"></i>
489
+ </div>
490
+ <p class="ml-2 text-sm text-gray-600">Networking requests</p>
491
+ </li>
492
+ <li class="flex items-start">
493
+ <div class="flex-shrink-0 text-pink-500">
494
+ <i class="fas fa-check"></i>
495
+ </div>
496
+ <p class="ml-2 text-sm text-gray-600">Personal updates</p>
497
+ </li>
498
+ </ul>
499
+ </div>
500
+ </div>
501
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
502
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Topic 5 -->
507
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
508
+ <div class="p-5">
509
+ <div class="flex items-center">
510
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
511
+ <i class="fas fa-clock text-white"></i>
512
+ </div>
513
+ <div class="ml-4">
514
+ <h3 class="text-lg font-medium text-gray-900">Productivity & Time Management</h3>
515
+ </div>
516
+ </div>
517
+ <div class="mt-4">
518
+ <ul class="space-y-2">
519
+ <li class="flex items-start">
520
+ <div class="flex-shrink-0 text-yellow-500">
521
+ <i class="fas fa-check"></i>
522
+ </div>
523
+ <p class="ml-2 text-sm text-gray-600">Meeting requests</p>
524
+ </li>
525
+ <li class="flex items-start">
526
+ <div class="flex-shrink-0 text-yellow-500">
527
+ <i class="fas fa-check"></i>
528
+ </div>
529
+ <p class="ml-2 text-sm text-gray-600">Delegation emails</p>
530
+ </li>
531
+ <li class="flex items-start">
532
+ <div class="flex-shrink-0 text-yellow-500">
533
+ <i class="fas fa-check"></i>
534
+ </div>
535
+ <p class="ml-2 text-sm text-gray-600">Status updates</p>
536
+ </li>
537
+ </ul>
538
+ </div>
539
+ </div>
540
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
541
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
542
+ </div>
543
+ </div>
544
+
545
+ <!-- Topic 6 -->
546
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
547
+ <div class="p-5">
548
+ <div class="flex items-center">
549
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
550
+ <i class="fas fa-microchip text-white"></i>
551
+ </div>
552
+ <div class="ml-4">
553
+ <h3 class="text-lg font-medium text-gray-900">Technology & Innovation</h3>
554
+ </div>
555
+ </div>
556
+ <div class="mt-4">
557
+ <ul class="space-y-2">
558
+ <li class="flex items-start">
559
+ <div class="flex-shrink-0 text-indigo-500">
560
+ <i class="fas fa-check"></i>
561
+ </div>
562
+ <p class="ml-2 text-sm text-gray-600">Tech updates</p>
563
+ </li>
564
+ <li class="flex items-start">
565
+ <div class="flex-shrink-0 text-indigo-500">
566
+ <i class="fas fa-check"></i>
567
+ </div>
568
+ <p class="ml-2 text-sm text-gray-600">Feature announcements</p>
569
+ </li>
570
+ <li class="flex items-start">
571
+ <div class="flex-shrink-0 text-indigo-500">
572
+ <i class="fas fa-check"></i>
573
+ </div>
574
+ <p class="ml-2 text-sm text-gray-600">Bug reports</p>
575
+ </li>
576
+ </ul>
577
+ </div>
578
+ </div>
579
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
580
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
581
+ </div>
582
+ </div>
583
+
584
+ <!-- Topic 7 -->
585
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
586
+ <div class="p-5">
587
+ <div class="flex items-center">
588
+ <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
589
+ <i class="fas fa-heartbeat text-white"></i>
590
+ </div>
591
+ <div class="ml-4">
592
+ <h3 class="text-lg font-medium text-gray-900">Health & Wellness</h3>
593
+ </div>
594
+ </div>
595
+ <div class="mt-4">
596
+ <ul class="space-y-2">
597
+ <li class="flex items-start">
598
+ <div class="flex-shrink-0 text-red-500">
599
+ <i class="fas fa-check"></i>
600
+ </div>
601
+ <p class="ml-2 text-sm text-gray-600">Wellness tips</p>
602
+ </li>
603
+ <li class="flex items-start">
604
+ <div class="flex-shrink-0 text-red-500">
605
+ <i class="fas fa-check"></i>
606
+ </div>
607
+ <p class="ml-2 text-sm text-gray-600">Appointment reminders</p>
608
+ </li>
609
+ <li class="flex items-start">
610
+ <div class="flex-shrink-0 text-red-500">
611
+ <i class="fas fa-check"></i>
612
+ </div>
613
+ <p class="ml-2 text-sm text-gray-600">Health updates</p>
614
+ </li>
615
+ </ul>
616
+ </div>
617
+ </div>
618
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
619
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- Topic 8 -->
624
+ <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
625
+ <div class="p-5">
626
+ <div class="flex items-center">
627
+ <div class="flex-shrink-0 bg-teal-500 rounded-md p-3">
628
+ <i class="fas fa-money-bill-wave text-white"></i>
629
+ </div>
630
+ <div class="ml-4">
631
+ <h3 class="text-lg font-medium text-gray-900">Finance & Investment</h3>
632
+ </div>
633
+ </div>
634
+ <div class="mt-4">
635
+ <ul class="space-y-2">
636
+ <li class="flex items-start">
637
+ <div class="flex-shrink-0 text-teal-500">
638
+ <i class="fas fa-check"></i>
639
+ </div>
640
+ <p class="ml-2 text-sm text-gray-600">Investment updates</p>
641
+ </li>
642
+ <li class="flex items-start">
643
+ <div class="flex-shrink-0 text-teal-500">
644
+ <i class="fas fa-check"></i>
645
+ </div>
646
+ <p class="ml-2 text-sm text-gray-600">Payment reminders</p>
647
+ </li>
648
+ <li class="flex items-start">
649
+ <div class="flex-shrink-0 text-teal-500">
650
+ <i class="fas fa-check"></i>
651
+ </div>
652
+ <p class="ml-2 text-sm text-gray-600">Financial reports</p>
653
+ </li>
654
+ </ul>
655
+ </div>
656
+ </div>
657
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right">
658
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+
665
+ <!-- Testimonials Section -->
666
+ <div id="testimonials" class="py-12 bg-white">
667
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
668
+ <div class="lg:text-center mb-12">
669
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2>
670
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
671
+ What Our Users Say
672
+ </p>
673
+ </div>
674
+
675
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
676
+ <!-- Testimonial 1 -->
677
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-200">
678
+ <div class="flex items-center mb-4">
679
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
680
+ <div class="ml-4">
681
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
682
+ <p class="text-gray-500">Marketing Director</p>
683
+ </div>
684
+ </div>
685
+ <div class="text-gray-600">
686
+ <p>"EmailCraft Pro has transformed how we communicate with our clients. The templates and tone suggestions have helped us maintain a consistent brand voice across all our communications."</p>
687
+ </div>
688
+ <div class="mt-4 flex">
689
+ <i class="fas fa-star text-yellow-400"></i>
690
+ <i class="fas fa-star text-yellow-400"></i>
691
+ <i class="fas fa-star text-yellow-400"></i>
692
+ <i class="fas fa-star text-yellow-400"></i>
693
+ <i class="fas fa-star text-yellow-400"></i>
694
+ </div>
695
+ </div>
696
+
697
+ <!-- Testimonial 2 -->
698
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-200">
699
+ <div class="flex items-center mb-4">
700
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael Chen">
701
+ <div class="ml-4">
702
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
703
+ <p class="text-gray-500">Startup Founder</p>
704
+ </div>
705
+ </div>
706
+ <div class="text-gray-600">
707
+ <p>"As a non-native English speaker, I struggled with writing professional emails. EmailCraft Pro's suggestions and corrections have been invaluable for my business communications."</p>
708
+ </div>
709
+ <div class="mt-4 flex">
710
+ <i class="fas fa-star text-yellow-400"></i>
711
+ <i class="fas fa-star text-yellow-400"></i>
712
+ <i class="fas fa-star text-yellow-400"></i>
713
+ <i class="fas fa-star text-yellow-400"></i>
714
+ <i class="fas fa-star text-yellow-400"></i>
715
+ </div>
716
+ </div>
717
+
718
+ <!-- Testimonial 3 -->
719
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-200">
720
+ <div class="flex items-center mb-4">
721
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez">
722
+ <div class="ml-4">
723
+ <h4 class="text-lg font-medium text-gray-900">Emily Rodriguez</h4>
724
+ <p class="text-gray-500">HR Manager</p>
725
+ </div>
726
+ </div>
727
+ <div class="text-gray-600">
728
+ <p>"The time I save using EmailCraft Pro is incredible. What used to take me 30 minutes now takes 5. The keyword suggestions have significantly improved our email open rates."</p>
729
+ </div>
730
+ <div class="mt-4 flex">
731
+ <i class="fas fa-star text-yellow-400"></i>
732
+ <i class="fas fa-star text-yellow-400"></i>
733
+ <i class="fas fa-star text-yellow-400"></i>
734
+ <i class="fas fa-star text-yellow-400"></i>
735
+ <i class="fas fa-star text-yellow-400"></i>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <!-- Affiliate Section -->
743
+ <div class="py-12 bg-gray-50">
744
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
745
+ <div class="lg:text-center mb-12">
746
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Resources</h2>
747
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
748
+ Enhance Your Email Marketing
749
+ </p>
750
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
751
+ Recommended tools and courses to take your email game to the next level.
752
+ </p>
753
+ </div>
754
+
755
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
756
+ <!-- Affiliate 1 -->
757
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
758
+ <div class="p-5">
759
+ <div class="flex items-center">
760
+ <div class="flex-shrink-0 bg-orange-500 rounded-md p-3">
761
+ <i class="fas fa-envelope text-white"></i>
762
+ </div>
763
+ <div class="ml-4">
764
+ <h3 class="text-lg font-medium text-gray-900">Email Marketing Course</h3>
765
+ <p class="text-sm text-gray-500">by MarketingPro Academy</p>
766
+ </div>
767
+ </div>
768
+ <div class="mt-4">
769
+ <p class="text-gray-600">Master email marketing with this comprehensive course covering strategy, copywriting, and analytics.</p>
770
+ </div>
771
+ </div>
772
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200">
773
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Learn More</a>
774
+ </div>
775
+ </div>
776
+
777
+ <!-- Affiliate 2 -->
778
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
779
+ <div class="p-5">
780
+ <div class="flex items-center">
781
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
782
+ <i class="fas fa-chart-pie text-white"></i>
783
+ </div>
784
+ <div class="ml-4">
785
+ <h3 class="text-lg font-medium text-gray-900">Email Analytics Tool</h3>
786
+ <p class="text-sm text-gray-500">by DataTrack Solutions</p>
787
+ </div>
788
+ </div>
789
+ <div class="mt-4">
790
+ <p class="text-gray-600">Advanced analytics platform to track opens, clicks, and conversions from your email campaigns.</p>
791
+ </div>
792
+ </div>
793
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200">
794
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Learn More</a>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- Affiliate 3 -->
799
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
800
+ <div class="p-5">
801
+ <div class="flex items-center">
802
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
803
+ <i class="fas fa-robot text-white"></i>
804
+ </div>
805
+ <div class="ml-4">
806
+ <h3 class="text-lg font-medium text-gray-900">AI Writing Assistant</h3>
807
+ <p class="text-sm text-gray-500">by FutureWrite Tech</p>
808
+ </div>
809
+ </div>
810
+ <div class="mt-4">
811
+ <p class="text-gray-600">Enhance your writing with AI-powered suggestions for grammar, tone, and style improvements.</p>
812
+ </div>
813
+ </div>
814
+ <div class="px-5 py-3 bg-gray-50 border-t border-gray-200">
815
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Learn More</a>
816
+ </div>
817
+ </div>
818
+ </div>
819
+ </div>
820
+ </div>
821
+
822
+ <!-- CTA Section -->
823
+ <div class="gradient-bg text-white">
824
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
825
+ <div class="text-center">
826
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
827
+ Ready to transform your email writing?
828
+ </h2>
829
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
830
+ Join thousands of professionals who write better emails faster with EmailCraft Pro.
831
+ </p>
832
+ <div class="mt-8 flex justify-center">
833
+ <div class="inline-flex rounded-md shadow">
834
+ <button class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
835
+ Get Started Free
836
+ </button>
837
+ </div>
838
+ <div class="ml-3 inline-flex">
839
+ <button class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 hover:bg-blue-800 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
840
+ See Pricing
841
+ </button>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+ </div>
847
+
848
+ <!-- Footer -->
849
+ <footer class="bg-gray-800">
850
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
851
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
852
+ <div>
853
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
854
+ <ul class="mt-4 space-y-4">
855
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
856
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Templates</a></li>
857
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
858
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
859
+ </ul>
860
+ </div>
861
+ <div>
862
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
863
+ <ul class="mt-4 space-y-4">
864
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
865
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
866
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
867
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Community</a></li>
868
+ </ul>
869
+ </div>
870
+ <div>
871
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
872
+ <ul class="mt-4 space-y-4">
873
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
874
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
875
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
876
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
877
+ </ul>
878
+ </div>
879
+ <div>
880
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
881
+ <ul class="mt-4 space-y-4">
882
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
883
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
884
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
885
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li>
886
+ </ul>
887
+ </div>
888
+ </div>
889
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
890
+ <div class="flex space-x-6 md:order-2">
891
+ <a href="#" class="text-gray-400 hover:text-white">
892
+ <i class="fab fa-twitter"></i>
893
+ </a>
894
+ <a href="#" class="text-gray-400 hover:text-white">
895
+ <i class="fab fa-linkedin"></i>
896
+ </a>
897
+ <a href="#" class="text-gray-400 hover:text-white">
898
+ <i class="fab fa-facebook"></i>
899
+ </a>
900
+ <a href="#" class="text-gray-400 hover:text-white">
901
+ <i class="fab fa-instagram"></i>
902
+ </a>
903
+ </div>
904
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
905
+ &copy; 2023 EmailCraft Pro. All rights reserved.
906
+ </p>
907
+ </div>
908
+ </div>
909
+ </footer>
910
+
911
+ <script>
912
+ // Mobile menu toggle
913
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
914
+ const menu = document.getElementById('mobile-menu');
915
+ menu.classList.toggle('hidden');
916
+ });
917
+
918
+ // Tone selection
919
+ const toneOptions = document.querySelectorAll('.tone-option');
920
+ toneOptions.forEach(option => {
921
+ option.addEventListener('click', function() {
922
+ toneOptions.forEach(opt => {
923
+ opt.classList.remove('bg-blue-100', 'text-blue-800');
924
+ opt.classList.add('bg-gray-100');
925
+ });
926
+ this.classList.remove('bg-gray-100');
927
+ this.classList.add('bg-blue-100', 'text-blue-800');
928
+ });
929
+ });
930
+
931
+ // Keyword chip hover effect
932
+ const keywordChips = document.querySelectorAll('.keyword-chip');
933
+ keywordChips.forEach(chip => {
934
+ chip.addEventListener('mouseenter', function() {
935
+ this.classList.add('bg-blue-600', 'text-white');
936
+ this.classList.remove('bg-gray-200');
937
+ });
938
+ chip.addEventListener('mouseleave', function() {
939
+ this.classList.remove('bg-blue-600', 'text-white');
940
+ this.classList.add('bg-gray-200');
941
+ });
942
+ });
943
+
944
+ // Smooth scrolling for navigation links
945
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
946
+ anchor.addEventListener('click', function(e) {
947
+ e.preventDefault();
948
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
949
+ behavior: 'smooth'
950
+ });
951
+ });
952
+ });
953
+ </script>
954
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=serialcode24x7/mail-generate" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
955
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Design a modern, responsive website for an email writing platform that allows users to create, edit, and send professional emails. Incorporate features like: 1. *Topic suggestions*: Pre-defined topics like Business, Marketing, Sales, Relationships, and more. 2. *Email templates*: Customizable templates for various industries and purposes. 3. *Tone and style options*: Users can choose from formal, informal, persuasive, or friendly tones. 4. *Keyword suggestions*: AI-powered keyword suggestions to improve email effectiveness. *Topic sections to include*: 1. Business & Entrepreneurship 2. Marketing & Advertising 3. Sales & Lead Generation 4. Relationships & Networking 5. Productivity & Time Management 6. Technology & Innovation 7. Health & Wellness 8. Finance & Investment *Monetization strategy*: Integrate affiliate marketing or sponsored content related to email marketing tools, services, or courses. *Design requirements*: 1. Responsive design for desktop, tablet, and mobile devices 2. User-friendly interface with clear navigation 3. Prominent call-to-action for sign-up or login 4. Showcase sample emails and testimonials *Goals*: 1. Attract users looking for email writing inspiration 2. Provide valuable content and tools 3. Generate revenue through affiliate marketing or sponsored content" This prompt should give you a solid foundation for creating a functional and attractive website.