litecharmsshop/Shop/Components/Pages/Contact.razor

@page "/contact"

<section class="contact-view">
    <div class="contact-header">
        <h1>Let’s Build <span class="highlight">Something Great.</span></h1>
        <p>Whether you have a specific project in mind or need strategic technical advice, we're ready to help.</p>
    </div>

    <div class="contact-grid">
        <!-- Contact Information -->
        <div class="contact-info-panel">
            <div class="info-group">
                <div class="info-item">
                    <h3>Direct Line</h3>
                    <p>+27 87 265 0198</p>
                </div>
                <div class="info-item">
                    <h3>Email</h3>
                    <p>contact@litecharms.co.za</p>
                </div>
                <div class="info-item">
                    <h3>Location</h3>
                    <p>Midrand, Johannesburg</p>
                    <p class="sub-text">High-Tech Hub, Northern Suburbs</p>
                </div>
            </div>

            <div class="community-section">
                <h3>Direct Enquiries</h3>
                <div class="community-links">
                    <a href="https://discord.com/" target="_blank" class="community-btn discord">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
                            <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.71,32.65-1.82,56.6.39,80.21a105.73,105.73,0,0,0,32.17,16.15,77.7,77.7,0,0,0,6.89-11.11,68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1,105.25,105.25,0,0,0,32.19-16.14c2.64-27.38-4.52-51.06-19.1-72.13ZM42.45,65.69C36.18,65.69,31,60,31,53s5.07-12.71,11.41-12.71,11.52,5.76,11.41,12.71C53.86,60,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5.07-12.71,11.44-12.71,11.51,5.76,11.44,12.71C96.13,60,91.17,65.69,84.69,65.69Z" />
                        </svg>
                        Discord
                    </a>
                    <a href="https://litecharmsworkspace.slack.com/" target="_blank" class="community-btn slack">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523 2.527 2.527 0 0 1-2.522-2.523 2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.27 0a2.528 2.528 0 0 1 2.521-2.52 2.528 2.528 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.833 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.833 5.042a2.528 2.528 0 0 1-2.521-2.52A2.527 2.527 0 0 1 8.833 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.833zm0 1.27a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.833a2.528 2.528 0 0 1 2.522-2.521h6.311zm10.125 3.815a2.528 2.528 0 0 1 2.52 2.52 2.528 2.528 0 0 1-2.52 2.523h-2.522v-2.523a2.528 2.528 0 0 1 2.522-2.52zm-1.27 0a2.528 2.528 0 0 1-2.521 2.52 2.528 2.528 0 0 1-2.521-2.52V3.833A2.528 2.528 0 0 1 15.167 1.31a2.528 2.528 0 0 1 2.521 2.522v6.313zM15.167 18.958a2.528 2.528 0 0 1 2.521 2.522A2.527 2.527 0 0 1 15.167 24a2.528 2.528 0 0 1-2.522-2.52v-2.522h2.522zm0-1.27a2.528 2.528 0 0 1-2.522-2.521 2.528 2.528 0 0 1 2.522-2.521h6.311a2.528 2.528 0 0 1 2.522 2.521 2.528 2.528 0 0 1-2.522 2.521h-6.311z" />
                        </svg>
                        Slack
                    </a>
                </div>
            </div>
            
            <div class="availability-badge">
                <span class="pulse-dot"></span>
                Currently accepting new projects for 2026
            </div>
        </div>

        <!-- Contact Form Container -->
        <div class="form-container">
            <EditForm Model="Input" OnValidSubmit="SendEmailAsync" class="contact-form">
                <DataAnnotationsValidator />
                
                <div class="form-group">
                    <label>Full Name</label>
                    <InputText @bind-Value="Input.FullName" placeholder="e.g. Sbanibani Mabaso" />
                    <ValidationMessage For="@(() => Input.FullName)" />
                </div>

                <div class="form-group">
                    <label>Work Email</label>
                    <InputText @bind-Value="Input.EmailAddress" placeholder="name@company.co.za" />
                    <ValidationMessage For="@(() => Input.EmailAddress)" />
                </div>

                <div class="form-group">
                    <label>Interest</label>
                    <InputSelect @bind-Value="Input.EmailSubject">
                        <option value="" disabled selected>Select an option...</option>
                        <option>Software Development</option>
                        <option>Cloud/Kubernetes Infrastructure</option>
                        <option>Ecommerce Solutions</option>
                        <option>Strategic Consulting</option>
                        <option>Other</option>
                    </InputSelect>
                    <ValidationMessage For="@(() => Input.EmailSubject)" />
                </div>

                <div class="form-group">
                    <label>Message</label>
                    <InputTextArea @bind-Value="Input.Message" placeholder="Tell us about your project..." rows="4" />
                    <ValidationMessage For="@(() => Input.Message)" />
                </div>

                <button type="submit" class="btn-submit">Send Message</button>
            </EditForm>
        </div>
    </div>
</section>