email_temp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client Proposal Email - Preview</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #0a0e27;
            padding: 20px 0;
        }
        .wrapper { background-color: #0a0e27; }
        .container { 
            max-width: 600px;
            margin: 0 auto;
            background: linear-gradient(135deg, #1a1f3a 0%, #16213e 100%);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(124, 58, 237, 0.1);
            border: 1px solid rgba(124, 58, 237, 0.2);
        }
        
        /* Header Section */
        .header {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
            padding: 40px 30px;
            text-align: center;
            color: white;
            border-bottom: 3px solid #5b21b6;
        }
        .header h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }
        .header p {
            font-size: 14px;
            opacity: 0.95;
            font-weight: 300;
        }
        
        /* Main Content */
        .content {
            padding: 40px 30px;
            color: #e5e7eb;
        }
        .greeting {
            font-size: 16px;
            margin-bottom: 25px;
            line-height: 1.6;
        }
        .greeting strong {
            color: #7c3aed;
            font-weight: 600;
        }
        
        /* Service Sections */
        .services {
            margin: 30px 0;
        }
        .service-group {
            margin-bottom: 25px;
        }
        .service-title {
            color: #7c3aed;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        .service-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 10px;
            text-align: center;
            line-height: 24px;
        }
        .service-list {
            list-style: none;
            padding-left: 34px;
            margin-bottom: 15px;
        }
        .service-list li {
            padding: 6px 0;
            color: #d1d5db;
            font-size: 14px;
            line-height: 1.5;
        }
        .service-list li:before {
            content: "▸ ";
            color: #7c3aed;
            font-weight: bold;
            margin-right: 8px;
            margin-left: -18px;
        }
        
        /* Portfolio Section */
        .portfolio {
            background: rgba(124, 58, 237, 0.1);
            border-left: 4px solid #7c3aed;
            padding: 20px;
            border-radius: 6px;
            margin: 25px 0;
        }
        .portfolio h3 {
            color: #7c3aed;
            font-size: 14px;
            margin-bottom: 12px;
            font-weight: 700;
        }
        .portfolio-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .portfolio-link {
            color: #60a5fa;
            text-decoration: none;
            font-size: 14px;
            padding: 8px 12px;
            background: rgba(124, 58, 237, 0.15);
            border-radius: 4px;
            transition: all 0.3s ease;
            display: block;
        }
        .portfolio-link:hover {
            background: rgba(124, 58, 237, 0.25);
            color: #7c3aed;
        }
        
        /* CTA Section */
        .cta-section {
            margin: 30px 0;
            text-align: center;
        }
        .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
            color: white;
            padding: 14px 40px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
        }
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
        }
        
        /* Contact Info */
        .contact-info {
            background: rgba(124, 58, 237, 0.05);
            padding: 20px;
            border-radius: 6px;
            margin: 25px 0;
            font-size: 13px;
            color: #d1d5db;
        }
        .contact-info p {
            margin: 8px 0;
        }
        .contact-label {
            color: #7c3aed;
            font-weight: 600;
        }
        
        /* Footer */
        .footer {
            background: rgba(0, 0, 0, 0.3);
            padding: 30px 30px;
            text-align: center;
            border-top: 1px solid rgba(124, 58, 237, 0.2);
        }
        .footer-text {
            color: #9ca3af;
            font-size: 13px;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        /* Social Links */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }
        .social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(124, 58, 237, 0.2);
            border: 1px solid rgba(124, 58, 237, 0.3);
            border-radius: 50%;
            color: #7c3aed;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        .social-link:hover {
            background: #7c3aed;
            color: white;
            border-color: #7c3aed;
        }
        
        /* Location Badge */
        .location-badge {
            display: inline-block;
            background: #7c3aed;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            margin-top: 15px;
        }
        
        /* Divider */
        .divider {
            height: 1px;
            background: rgba(124, 58, 237, 0.2);
            margin: 20px 0;
        }
        
        /* Preview Info */
        .preview-info {
            background: #7c3aed;
            color: white;
            padding: 15px 30px;
            text-align: center;
            font-size: 12px;
            max-width: 600px;
            margin: 20px auto;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="preview-info">
        📧 EMAIL TEMPLATE PREVIEW - This is how your proposal email will look in client inboxes
    </div>
    
    <div class="wrapper">
        <div class="container">
            <!-- Header -->
            <div class="header">
                <h1>Joshua</h1>
                <p>Web Developer & Data Scientist</p>
            </div>
            
            <!-- Main Content -->
            <div class="content">
                <p class="greeting">
                    Hi <strong>John</strong>, 👋
                </p>
                
                <p style="color: #d1d5db; font-size: 14px; line-height: 1.7; margin-bottom: 20px;">
                    I hope this message finds you well. I'm Joshua, a freelance web developer and data scientist based in Kampala, Uganda. I specialize in transforming complex business challenges into intelligent, scalable solutions that drive real results.
                </p>
                
                <!-- Services Section -->
                <div class="services">
                    <!-- Web Development -->
                    <div class="service-group">
                        <div class="service-title">
                            <span class="service-icon">💻</span>
                            Web Development
                        </div>
                        <ul class="service-list">
                            <li><strong>High-End Modern Websites</strong> - Custom-built, responsive designs with cutting-edge technology</li>
                            <li><strong>WordPress Development</strong> - Professional WordPress sites with custom plugins and optimization</li>
                            <li><strong>Web Applications</strong> - Full-stack development using modern frameworks (React, Vue, etc.)</li>
                            <li><strong>E-Commerce Solutions</strong> - Secure, scalable online stores with payment integration</li>
                            <li><strong>SEO Optimization</strong> - Fast-loading, search-engine optimized websites</li>
                        </ul>
                    </div>
                    
                    <div class="divider"></div>
                    
                    <!-- Data Science & Analytics -->
                    <div class="service-group">
                        <div class="service-title">
                            <span class="service-icon">📊</span>
                            Data Science & Analytics
                        </div>
                        <ul class="service-list">
                            <li><strong>Data Analytics</strong> - Actionable insights from your business data</li>
                            <li><strong>Machine Learning</strong> - Predictive models and intelligent automation</li>
                            <li><strong>Data Engineering</strong> - ETL pipelines and data infrastructure</li>
                            <li><strong>Business Intelligence</strong> - Dashboards and reporting systems</li>
                            <li><strong>Data Visualization</strong> - Interactive visualizations that tell your story</li>
                        </ul>
                    </div>
                    
                    <div class="divider"></div>
                    
                    <!-- Additional IT Services -->
                    <div class="service-group">
                        <div class="service-title">
                            <span class="service-icon">⚙️</span>
                            Additional IT Services
                        </div>
                        <ul class="service-list">
                            <li>API Development & Integration</li>
                            <li>Cloud Solutions (AWS, Google Cloud)</li>
                            <li>Database Design & Optimization</li>
                            <li>Technical Consulting</li>
                        </ul>
                    </div>
                </div>
                
                <!-- Portfolio Section -->
                <div class="portfolio">
                    <h3>📁 View My Work</h3>
                    <div class="portfolio-links">
                        <a href="#" class="portfolio-link">→ Full Portfolio & Projects</a>
                        <a href="#" class="portfolio-link">→ Featured Web Development Projects</a>
                        <a href="#" class="portfolio-link">→ Data Science Case Studies</a>
                    </div>
                </div>
                
                <!-- CTA Section -->
                <div class="cta-section">
                    <p style="color: #d1d5db; font-size: 14px; margin-bottom: 15px;">
                        Ready to discuss how I can help your company succeed?
                    </p>
                    <a href="mailto:joshua@email.com" class="cta-button">Get in Touch</a>
                </div>
                
                <!-- Contact Information -->
                <div class="contact-info">
                    <p><span class="contact-label">📧 Email:</span> joshua@email.com</p>
                    <p><span class="contact-label">📱 Phone:</span> +256-700-000-000</p>
                    <p><span class="contact-label">📍 Location:</span> Kampala, Uganda</p>
                </div>
                
            </div>
            
            <!-- Footer -->
            <div class="footer">
                <p class="footer-text">
                    Let's connect! I'd love to hear about your project and explore how we can work together to bring your vision to life.
                </p>
                
                <div class="social-links">
                    <a href="#" class="social-link" title="LinkedIn">in</a>
                    <a href="#" class="social-link" title="GitHub">gh</a>
                    <a href="#" class="social-link" title="Twitter">𝕏</a>
                    <a href="#" class="social-link" title="Instagram">📷</a>
                    <a href="#" class="social-link" title="Portfolio">🌐</a>
                </div>
                
                <div class="location-badge">
                    ✓ Based in Kampala, Uganda
                </div>
                
                <p class="footer-text" style="margin-top: 20px; font-size: 11px; opacity: 0.7;">
                    © 2026 Joshua | Web Developer & Data Scientist<br>
                    Available for freelance projects | Open to collaboration
                </p>
            </div>
        </div>
    </div>
</body>
</html>