Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EmailCraft Pro | Professional Email Writing Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6B73FF 0%, #000DFF 50%, #2B32B2 100%); | |
| } | |
| .topic-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .template-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| background-color: #f8fafc; | |
| } | |
| .nav-link:hover { | |
| color: #3b82f6; | |
| } | |
| .tone-option:hover { | |
| background-color: #e0e7ff; | |
| } | |
| .keyword-chip:hover { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| @media (max-width: 768px) { | |
| .hero-text { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-envelope-open-text text-blue-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">EmailCraft Pro</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <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> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <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"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden sm:hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <div class="mt-4 pl-3"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="hero-text text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Write Emails That Get Results | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl"> | |
| AI-powered email writing platform that helps you craft professional, effective emails in minutes. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <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"> | |
| Start Writing Free | |
| </button> | |
| <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"> | |
| See Templates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Everything you need to write better emails | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <!-- Feature 1 --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Topic Suggestions</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Get inspired with pre-defined topics across business, marketing, sales, and more to kickstart your email. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Professional Templates</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Choose from hundreds of customizable templates for various industries and purposes. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-volume-up"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Tone & Style Options</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Adjust your email's tone from formal to friendly with our tone selector. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-key"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Keyword Suggestions</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| AI-powered keyword recommendations to improve your email's effectiveness. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Editor Preview --> | |
| <div class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Editor</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Powerful Email Editor | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden"> | |
| <div class="p-4 bg-gray-100 border-b flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-white rounded text-sm font-medium">New Email</button> | |
| <button class="px-3 py-1 bg-white rounded text-sm font-medium">Save Draft</button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm font-medium">Send</button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Increase conversions</span> | |
| <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Call to action</span> | |
| <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Limited time</span> | |
| <span class="keyword-chip px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">Exclusive offer</span> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tone:</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="tone-option px-3 py-1 bg-blue-100 text-blue-800 rounded text-sm cursor-pointer">Formal</span> | |
| <span class="tone-option px-3 py-1 bg-gray-100 rounded text-sm cursor-pointer">Informal</span> | |
| <span class="tone-option px-3 py-1 bg-gray-100 rounded text-sm cursor-pointer">Persuasive</span> | |
| <span class="tone-option px-3 py-1 bg-gray-100 rounded text-sm cursor-pointer">Friendly</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <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"> | |
| </div> | |
| <div> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-magic mr-1"></i> AI Suggestions Available | |
| </div> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded text-sm font-medium flex items-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> Send Email | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Templates Section --> | |
| <div id="templates" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Templates</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Professionally Designed Email Templates | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Choose from our collection of customizable templates for every occasion. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Template 1 --> | |
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-4 bg-blue-600"> | |
| <h3 class="text-lg font-medium text-white">Sales Pitch</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Perfect for introducing your product or service to potential clients.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Business</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 2 --> | |
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-4 bg-green-600"> | |
| <h3 class="text-lg font-medium text-white">Newsletter</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Engage your audience with regular updates and valuable content.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Marketing</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 3 --> | |
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-4 bg-purple-600"> | |
| <h3 class="text-lg font-medium text-white">Follow-Up</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Professional follow-up email after meetings or conversations.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">Networking</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 4 --> | |
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-4 bg-yellow-600"> | |
| <h3 class="text-lg font-medium text-white">Job Application</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Stand out when applying for jobs with this professional template.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Career</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 5 --> | |
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-4 bg-red-600"> | |
| <h3 class="text-lg font-medium text-white">Customer Feedback</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Request feedback from your customers to improve your service.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">Relationships</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 6 --> | |
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-4 bg-indigo-600"> | |
| <h3 class="text-lg font-medium text-white">Meeting Request</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Professionally request a meeting with colleagues or clients.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">Productivity</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Use Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <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"> | |
| Browse All Templates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Topics Section --> | |
| <div id="topics" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Topics</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Email Writing for Every Need | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Get inspired with our categorized email topics and suggestions. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Topic 1 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-briefcase text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Business & Entrepreneurship</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Investor pitches</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Partnership proposals</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-blue-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Business updates</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| <!-- Topic 2 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-bullhorn text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Marketing & Advertising</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Campaign announcements</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Product launches</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Brand collaborations</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| <!-- Topic 3 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-chart-line text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Sales & Lead Generation</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-purple-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Cold outreach</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-purple-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Sales follow-ups</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-purple-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Discount offers</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| <!-- Topic 4 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-pink-500 rounded-md p-3"> | |
| <i class="fas fa-users text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Relationships & Networking</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-pink-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Thank you notes</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-pink-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Networking requests</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-pink-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Personal updates</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| <!-- Topic 5 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Productivity & Time Management</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-yellow-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Meeting requests</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-yellow-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Delegation emails</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-yellow-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Status updates</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| <!-- Topic 6 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-microchip text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Technology & Innovation</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-indigo-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Tech updates</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-indigo-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Feature announcements</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-indigo-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Bug reports</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| <!-- Topic 7 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> | |
| <i class="fas fa-heartbeat text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Health & Wellness</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-red-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Wellness tips</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-red-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Appointment reminders</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-red-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Health updates</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| <!-- Topic 8 --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-teal-500 rounded-md p-3"> | |
| <i class="fas fa-money-bill-wave text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Finance & Investment</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-teal-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Investment updates</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-teal-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Payment reminders</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-teal-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-600">Financial reports</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200 text-right"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Examples</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Section --> | |
| <div id="testimonials" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What Our Users Say | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4> | |
| <p class="text-gray-500">Marketing Director</p> | |
| </div> | |
| </div> | |
| <div class="text-gray-600"> | |
| <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> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael Chen"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4> | |
| <p class="text-gray-500">Startup Founder</p> | |
| </div> | |
| </div> | |
| <div class="text-gray-600"> | |
| <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> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Emily Rodriguez</h4> | |
| <p class="text-gray-500">HR Manager</p> | |
| </div> | |
| </div> | |
| <div class="text-gray-600"> | |
| <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> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Affiliate Section --> | |
| <div class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Resources</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Enhance Your Email Marketing | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Recommended tools and courses to take your email game to the next level. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Affiliate 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-orange-500 rounded-md p-3"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Email Marketing Course</h3> | |
| <p class="text-sm text-gray-500">by MarketingPro Academy</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">Master email marketing with this comprehensive course covering strategy, copywriting, and analytics.</p> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Learn More</a> | |
| </div> | |
| </div> | |
| <!-- Affiliate 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-chart-pie text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Email Analytics Tool</h3> | |
| <p class="text-sm text-gray-500">by DataTrack Solutions</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">Advanced analytics platform to track opens, clicks, and conversions from your email campaigns.</p> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Learn More</a> | |
| </div> | |
| </div> | |
| <!-- Affiliate 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">AI Writing Assistant</h3> | |
| <p class="text-sm text-gray-500">by FutureWrite Tech</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">Enhance your writing with AI-powered suggestions for grammar, tone, and style improvements.</p> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-50 border-t border-gray-200"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl"> | |
| Ready to transform your email writing? | |
| </h2> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl"> | |
| Join thousands of professionals who write better emails faster with EmailCraft Pro. | |
| </p> | |
| <div class="mt-8 flex justify-center"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <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"> | |
| Get Started Free | |
| </button> | |
| </div> | |
| <div class="ml-3 inline-flex"> | |
| <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"> | |
| See Pricing | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Templates</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> | |
| © 2023 EmailCraft Pro. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Tone selection | |
| const toneOptions = document.querySelectorAll('.tone-option'); | |
| toneOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| toneOptions.forEach(opt => { | |
| opt.classList.remove('bg-blue-100', 'text-blue-800'); | |
| opt.classList.add('bg-gray-100'); | |
| }); | |
| this.classList.remove('bg-gray-100'); | |
| this.classList.add('bg-blue-100', 'text-blue-800'); | |
| }); | |
| }); | |
| // Keyword chip hover effect | |
| const keywordChips = document.querySelectorAll('.keyword-chip'); | |
| keywordChips.forEach(chip => { | |
| chip.addEventListener('mouseenter', function() { | |
| this.classList.add('bg-blue-600', 'text-white'); | |
| this.classList.remove('bg-gray-200'); | |
| }); | |
| chip.addEventListener('mouseleave', function() { | |
| this.classList.remove('bg-blue-600', 'text-white'); | |
| this.classList.add('bg-gray-200'); | |
| }); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |