klear-vision-web/contact.html at main · kharigardner/klear-vision-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Contact Klear Vision Solutions for expert consulting services">
    <title>Contact Us | Klear Vision Solutions</title>
    <link rel="icon" type="image/png" href="images/icon.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="compiled_sass/main.css">
    <script defer src="js/loadComponents.js"></script>
    <script defer src="js/contactFormHandler.js"></script>
</head>
<body>
    <div id="header"></div>
    <main>
        <section id="contact-hero">
            <div class="content-container">
                <div class="text-section">
                    <h1>Let's Connect</h1>
                    <p class="lead">Ready to transform your business? We're here to help you achieve your goals.</p>
                </div>
            </div>
        </section>

        <section id="contact-content">
            <div class="contact-grid">
                <div class="contact-form-container">
                    <h2>Send us a Message</h2>
                    <form id="contactForm" class="contact-form">
                        <div class="form-group">
                            <label for="name">Full Name *</label>
                            <input type="text" id="name" name="name" required
                                   placeholder="John Doe">
                        </div>

                        <div class="form-group">
                            <label for="company">Company</label>
                            <input type="text" id="company" name="company"
                                   placeholder="Your Company Name">
                        </div>

                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" name="email" required
                                   placeholder="you@company.com">
                        </div>

                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" name="phone"
                                   placeholder="(555) 123-4567"
                                   pattern="[\(]\d{3}[\)] \d{3}[\-]\d{4}">
                        </div>

                        <div class="form-group">
                            <label for="service">Service of Interest</label>
                            <select id="service" name="service">
                                <option value="">Select a Service</option>
                                <option value="strategic-planning">Strategic Planning</option>
                                <option value="operations">Operations Optimization</option>
                                <option value="change-management">Change Management</option>
                                <option value="training">Training & Development</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="message">Message *</label>
                            <textarea id="message" name="message" required
                                    placeholder="Tell us about your project or inquiries..."
                                    rows="5"></textarea>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Send Message</button>
                        </div>
                    </form>
                </div>

                <div class="contact-info">
                    <div class="contact-method">
                        <i class="fas fa-map-marker-alt"></i>
                        <h3>Visit Us</h3>
                        <p>123 Business Ave<br>Chicago, IL 60601</p>
                    </div>

                    <div class="contact-method">
                        <i class="fas fa-phone"></i>
                        <h3>Call Us</h3>
                        <p>(555) 123-4567</p>
                    </div>

                    <div class="contact-method">
                        <i class="fas fa-envelope"></i>
                        <h3>Email Us</h3>
                        <p>info@klearvision.com</p>
                    </div>

                    <div class="social-links">
                        <h3>Connect With Us</h3>
                        <div class="social-icons">
                            <a href="https://linkedin.com/company/klearvision" target="_blank" aria-label="LinkedIn">
                                <i class="fab fa-linkedin"></i>
                            </a>
                            <a href="https://twitter.com/klearvision" target="_blank" aria-label="Twitter">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="https://facebook.com/klearvision" target="_blank" aria-label="Facebook">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="map-section">
            <div class="map-container">
                <!-- Add your map embed code here -->
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2970.232977942651!2d-87.63245568455913!3d41.88661087922374!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880e2cbf24c50b3d%3A0x7b6dc89b0d2bfb3e!2sChicago%2C%20IL!5e0!3m2!1sen!2sus!4v1651521526789!5m2!1sen!2sus"
                    width="100%"
                    height="400"
                    style="border:0;"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </section>
    </main>
    <div id="footer"></div>
    <script>
        loadComponent('header', './components/header.html');
        loadComponent('footer', './components/footer.html');
    </script>
</body>
</html>