contact.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Contact Us | Da-Coders-135</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Get in touch with Da-Coders-135 for your software development needs.">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <style>
        .contact-form-container {
            max-width: 700px;
            margin: 3rem auto;
            background: white;
            padding: 2.5rem;
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #1e293b;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e2e8f0;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }

        .submit-btn {
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: white;
            padding: 0.875rem 2rem;
            border: none;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 6px rgba(30, 58, 138, 0.3);
            width: 100%;
        }

        .submit-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(30, 58, 138, 0.4);
        }

        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .form-message {
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 0.5rem;
            display: none;
        }

        .form-message.success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #10b981;
        }

        .form-message.error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #ef4444;
        }

        .mailto-fallback {
            text-align: center;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid #e2e8f0;
        }

        .mailto-fallback p {
            color: #64748b;
            margin-bottom: 1rem;
        }
    </style>
</head>

<body>
    <header>
        <div class="header-content">
            <img src="logo.png" alt="Da-coders-135 Logo" class="logo">
            <div class="header-text">
                <h1>Da-Coders-135</h1>
                <p>Elite Software Development Team</p>
            </div>
        </div>
    </header>

    <!-- Navigation -->
    <nav class="main-nav">
        <ul>
            <li><a href="index.html" class="nav-link">Home</a></li>
            <li><a href="about.html" class="nav-link">About</a></li>
            <li><a href="services.html" class="nav-link">Services</a></li>
            <li><a href="samples.html" class="nav-link">Portfolio</a></li>
            <li><a href="contact.html" class="nav-link active">Contact</a></li>
        </ul>
    </nav>

    <main>
        <section id="contact">
            <h2>Ready to Transform Your Ideas?</h2>
            <div class="contact-hero">
                <p class="contact-headline">Let's discuss how we can accelerate your project and deliver exceptional
                    results.
                </p>
                <div class="contact-benefits">
                    <div class="benefit-item">
                        <span class="benefit-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" fill="#3b82f6" />
                            </svg>
                        </span>
                        <span class="benefit-text">Fast turnaround times</span>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M12 2L9 9 2 10.5 7 15.5 5.5 22 12 18.5 18.5 22 17 15.5 22 10.5 15 9z"
                                    fill="#3b82f6" />
                            </svg>
                        </span>
                        <span class="benefit-text">Premium quality code</span>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M17 11c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5c0-2.3-4.7-3.5-7-3.5z"
                                    fill="#3b82f6" />
                                <path d="M17 13c-1 0-1.8.2-2.5.5.8.8 1.5 1.8 1.5 3V19h6v-2.5c0-2.3-2.7-3.5-5-3.5z"
                                    fill="#3b82f6" />
                            </svg>
                        </span>
                        <span class="benefit-text">Transparent communication</span>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M12 2L4 6v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V6l-8-4z" fill="#3b82f6" />
                            </svg>
                        </span>
                        <span class="benefit-text">100% confidentiality</span>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="contact-form-container">
                <h3 style="margin-bottom: 1.5rem; color: #1e293b;">Get Free Consultation</h3>
                <form id="contactForm">
                    <div class="form-group">
                        <label for="name">Full Name *</label>
                        <input type="text" id="name" name="name" required>
                    </div>

                    <div class="form-group">
                        <label for="email">Email Address *</label>
                        <input type="email" id="email" name="email" required>
                    </div>

                    <div class="form-group">
                        <label for="projectType">Project Type *</label>
                        <select id="projectType" name="projectType" required>
                            <option value="">Select project type...</option>
                            <option value="Backend API">Backend API Development</option>
                            <option value="Interactive App">Interactive Application</option>
                            <option value="DevOps">DevOps & Integration</option>
                            <option value="Full Stack">Full Stack Solution</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="timeline">Preferred Timeline</label>
                        <input type="text" id="timeline" name="timeline" placeholder="e.g., 2-3 months">
                    </div>

                    <div class="form-group">
                        <label for="budget">Budget Range</label>
                        <input type="text" id="budget" name="budget" placeholder="e.g., $10,000 - $20,000">
                    </div>

                    <div class="form-group">
                        <label for="message">Project Details *</label>
                        <textarea id="message" name="message" required
                            placeholder="Tell us about your project, requirements, and goals..."></textarea>
                    </div>

                    <button type="submit" class="submit-btn" id="submitBtn">
                        Send Request
                    </button>

                    <div class="form-message" id="formMessage"></div>
                </form>

                <!-- Mailto Fallback -->
                <div class="mailto-fallback">
                    <p>Or email us directly:</p>
                    <a href="mailto:darren77theone@gmail.com?subject=Project Inquiry - Contract Work&body=Hi Da-Coders-135,%0D%0A%0D%0AI'm interested in discussing a project with your team.%0D%0A%0D%0AProject Type: [Please describe]%0D%0ATimeline: [Your preferred timeline]%0D%0ABudget Range: [Your budget range]%0D%0A%0D%0APlease let me know your availability for a consultation.%0D%0A%0D%0AThank you!"
                        class="contact-link primary">darren77theone@gmail.com</a>
                </div>
            </div>

            <div class="contact-guarantee">
                <div class="guarantee-badge">
                    <span class="guarantee-icon">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="10" fill="#3b82f6" />
                            <path d="M8 12l3 3 5-5" stroke="white" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" fill="none" />
                        </svg>
                    </span>
                    <div class="guarantee-text">
                        <strong>Our Guarantee:</strong> If you're not completely satisfied with our initial consultation
                        and project
                        proposal, we'll refund your time with a detailed technical roadmap at no cost.
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        &copy; 2025 Da-coders-135. All Rights Reserved.
    </footer>

    <!-- EmailJS SDK -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>

    <!-- Contact Form Script -->
    <script type="module" src="js/contact-form.js"></script>

    <script>
        // Navigation active state
        document.addEventListener('DOMContentLoaded', function () {
            const currentPage = window.location.pathname.split('/').pop() || 'index.html';
            document.querySelectorAll('.main-nav a').forEach(link => {
                if (link.getAttribute('href') === currentPage) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });
        });
    </script>

</body>

</html>