Skip to content

Commit c8a6304

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #144 from recodehive/copilot/fix-117
Add professional Contact Us page with form and contact information
2 parents 27d3be2 + 4641bca commit c8a6304

File tree

3 files changed

+266
-1
lines changed

3 files changed

+266
-1
lines changed

‎src/css/custom.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,4 +146,13 @@
146146
justify-content: flex-start !important;
147147
margin: 0 !important;
148148
padding: 0 !important;
149+
}
150+
151+
/* Gradient text utility */
152+
.gradient-text {
153+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
154+
background-clip: text;
155+
-webkit-background-clip: text;
156+
-webkit-text-fill-color: transparent;
157+
color: transparent;
149158
}

‎src/pages/contact-us/index.tsx‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import React from "react";
2+
import Layout from "@theme/Layout";
3+
import { Mail, MapPin, Phone, Clock } from "lucide-react";
4+
5+
const ContactUs: React.FC = () => {
6+
return (
7+
<Layout
8+
title="Contact Us"
9+
description="Get in touch with the RecodeHive team. We're here to help with your questions, feedback, and collaboration opportunities."
10+
>
11+
<div className="min-h-screen bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800">
12+
<div className="max-w-6xl mx-auto px-6 py-16">
13+
{/* Header Section */}
14+
<div className="text-center mb-16">
15+
<h1 className="text-4xl md:text-5xl font-bold gradient-text mb-6">
16+
Get In Touch
17+
</h1>
18+
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
19+
Have questions, feedback, or want to collaborate? We'd love to hear from you.
20+
Reach out to us and we'll get back to you as soon as possible.
21+
</p>
22+
</div>
23+
24+
<div className="grid md:grid-cols-2 gap-12">
25+
{/* Contact Information */}
26+
<div className="space-y-8">
27+
<div>
28+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
29+
Contact Information
30+
</h2>
31+
32+
<div className="space-y-6">
33+
{/* Email */}
34+
<div className="flex items-start space-x-4">
35+
<div className="bg-blue-100 dark:bg-blue-900/30 p-3 rounded-lg">
36+
<Mail className="w-6 h-6 text-blue-600 dark:text-blue-400" />
37+
</div>
38+
<div>
39+
<h3 className="font-semibold text-gray-900 dark:text-white">Email</h3>
40+
<a
41+
href="mailto:[email protected]"
42+
className="text-blue-600 dark:text-blue-400 hover:underline"
43+
>
44+
[email protected]
45+
</a>
46+
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
47+
General inquiries and support
48+
</p>
49+
</div>
50+
</div>
51+
52+
{/* Response Time */}
53+
<div className="flex items-start space-x-4">
54+
<div className="bg-green-100 dark:bg-green-900/30 p-3 rounded-lg">
55+
<Clock className="w-6 h-6 text-green-600 dark:text-green-400" />
56+
</div>
57+
<div>
58+
<h3 className="font-semibold text-gray-900 dark:text-white">Response Time</h3>
59+
<p className="text-gray-600 dark:text-gray-300">
60+
Within 24-48 hours
61+
</p>
62+
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
63+
We'll get back to you promptly
64+
</p>
65+
</div>
66+
</div>
67+
68+
{/* Location */}
69+
<div className="flex items-start space-x-4">
70+
<div className="bg-purple-100 dark:bg-purple-900/30 p-3 rounded-lg">
71+
<MapPin className="w-6 h-6 text-purple-600 dark:text-purple-400" />
72+
</div>
73+
<div>
74+
<h3 className="font-semibold text-gray-900 dark:text-white">Location</h3>
75+
<p className="text-gray-600 dark:text-gray-300">
76+
Online & Global
77+
</p>
78+
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
79+
Serving developers worldwide
80+
</p>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
86+
{/* Additional Information */}
87+
<div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 p-6 rounded-xl">
88+
<h3 className="font-bold text-gray-900 dark:text-white mb-3">
89+
What we can help you with:
90+
</h3>
91+
<ul className="space-y-2 text-gray-600 dark:text-gray-300">
92+
<li className="flex items-center space-x-2">
93+
<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
94+
<span>Learning resources and tutorials</span>
95+
</li>
96+
<li className="flex items-center space-x-2">
97+
<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
98+
<span>Technical support and guidance</span>
99+
</li>
100+
<li className="flex items-center space-x-2">
101+
<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
102+
<span>Collaboration opportunities</span>
103+
</li>
104+
<li className="flex items-center space-x-2">
105+
<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
106+
<span>Partnership inquiries</span>
107+
</li>
108+
<li className="flex items-center space-x-2">
109+
<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
110+
<span>Content suggestions and feedback</span>
111+
</li>
112+
</ul>
113+
</div>
114+
</div>
115+
116+
{/* Contact Form */}
117+
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
118+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
119+
Send us a message
120+
</h2>
121+
122+
<form className="space-y-6">
123+
<div className="grid md:grid-cols-2 gap-4">
124+
<div>
125+
<label htmlFor="firstName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
126+
First Name
127+
</label>
128+
<input
129+
type="text"
130+
id="firstName"
131+
name="firstName"
132+
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
133+
placeholder="Your first name"
134+
required
135+
/>
136+
</div>
137+
<div>
138+
<label htmlFor="lastName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
139+
Last Name
140+
</label>
141+
<input
142+
type="text"
143+
id="lastName"
144+
name="lastName"
145+
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
146+
placeholder="Your last name"
147+
required
148+
/>
149+
</div>
150+
</div>
151+
152+
<div>
153+
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
154+
Email Address
155+
</label>
156+
<input
157+
type="email"
158+
id="email"
159+
name="email"
160+
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
161+
placeholder="[email protected]"
162+
required
163+
/>
164+
</div>
165+
166+
<div>
167+
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
168+
Subject
169+
</label>
170+
<select
171+
id="subject"
172+
name="subject"
173+
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
174+
required
175+
>
176+
<option value="">Select a subject</option>
177+
<option value="general">General Inquiry</option>
178+
<option value="support">Technical Support</option>
179+
<option value="collaboration">Collaboration</option>
180+
<option value="partnership">Partnership</option>
181+
<option value="feedback">Feedback</option>
182+
<option value="other">Other</option>
183+
</select>
184+
</div>
185+
186+
<div>
187+
<label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
188+
Message
189+
</label>
190+
<textarea
191+
id="message"
192+
name="message"
193+
rows={6}
194+
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white resize-none"
195+
placeholder="Tell us more about your inquiry..."
196+
required
197+
></textarea>
198+
</div>
199+
200+
<button
201+
type="submit"
202+
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-[1.02] shadow-lg"
203+
>
204+
Send Message
205+
</button>
206+
</form>
207+
</div>
208+
</div>
209+
210+
{/* Additional Resources */}
211+
<div className="mt-16 text-center">
212+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">
213+
Other Ways to Connect
214+
</h2>
215+
<div className="grid md:grid-cols-3 gap-6">
216+
<a
217+
href="/community"
218+
className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
219+
>
220+
<div className="text-blue-600 dark:text-blue-400 text-2xl mb-3">📚</div>
221+
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Community</h3>
222+
<p className="text-gray-600 dark:text-gray-400 text-sm">
223+
Join our community and connect with fellow developers
224+
</p>
225+
</a>
226+
227+
<a
228+
href="/docs"
229+
className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
230+
>
231+
<div className="text-green-600 dark:text-green-400 text-2xl mb-3">📖</div>
232+
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Documentation</h3>
233+
<p className="text-gray-600 dark:text-gray-400 text-sm">
234+
Explore our comprehensive learning resources
235+
</p>
236+
</a>
237+
238+
<a
239+
href="/blogs"
240+
className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
241+
>
242+
<div className="text-purple-600 dark:text-purple-400 text-2xl mb-3">✍️</div>
243+
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Blog</h3>
244+
<p className="text-gray-600 dark:text-gray-400 text-sm">
245+
Read our latest articles and tutorials
246+
</p>
247+
</a>
248+
</div>
249+
</div>
250+
</div>
251+
</div>
252+
</Layout>
253+
);
254+
};
255+
256+
export default ContactUs;

‎src/theme/Footer/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ const Footer: React.FC = () => {
160160
</li>
161161
<li>
162162
<Link
163-
to="/community"
163+
to="/contact-us"
164164
className="mb-3 inline-block text-base text-gray-300 hover:text-[--ifm-color-primary]"
165165
>
166166
Contact Us

0 commit comments

Comments
 (0)