Skip to content

Commit be3366f

Browse files
sa-fw-ansa-fw-an
committedMar 13, 2025··
Contact Us Page Developed
1 parent 3f1ff1a commit be3366f

File tree

6 files changed

+225
-88
lines changed

6 files changed

+225
-88
lines changed
 

‎package-lock.json

+9-62
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/Icons/chat.svg

+4
Loading

‎public/assets/Icons/email.svg

+4
Loading

‎public/assets/Icons/mail.svg

+4
Loading

‎public/assets/Icons/phone.svg

+4
Loading

‎src/pages/About/ContactUs.tsx

+200-26
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,213 @@
1+
import React from 'react';
2+
import { socialLinks } from '@/constants/Footer';
13
import Header from '@/sections/Header';
24
import Footer from '@/sections/Footer';
35

4-
const ContactUs = () => {
6+
const ContactUs: React.FC = () => {
57
return (
6-
<div>
8+
<>
79
<Header />
8-
<main className="container mx-auto p-4">
9-
<h1 className="text-4xl font-bold text-center my-8">Contact Us</h1>
10-
<p className="text-lg text-gray-700">
11-
Have questions or want to get involved? Reach out to us!
12-
</p>
13-
<form className="mt-6 max-w-md mx-auto">
14-
<div className="mb-4">
15-
<label className="block text-gray-700">Name</label>
16-
<input type="text" className="w-full p-2 border rounded" />
10+
<div className="min-h-screen bg-gray-50">
11+
{/* Hero Section */}
12+
<section className="relative overflow-hidden py-16 md:py-24 bg-gradient-to-r from-blue-900 to-indigo-900">
13+
<div className="absolute inset-0 overflow-hidden">
14+
<svg
15+
className="absolute w-full h-full opacity-5"
16+
viewBox="0 0 100 100"
17+
preserveAspectRatio="none"
18+
aria-hidden="true"
19+
>
20+
<defs>
21+
<pattern
22+
id="grid"
23+
width="8"
24+
height="8"
25+
patternUnits="userSpaceOnUse"
26+
>
27+
<path
28+
d="M 8 0 L 0 0 0 8"
29+
fill="none"
30+
stroke="white"
31+
strokeWidth="0.5"
32+
/>
33+
</pattern>
34+
</defs>
35+
<rect x="0" y="0" width="100%" height="100%" fill="url(#grid)" />
36+
</svg>
1737
</div>
18-
<div className="mb-4">
19-
<label className="block text-gray-700">Email</label>
20-
<input type="email" className="w-full p-2 border rounded" />
38+
39+
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
40+
<div className="max-w-3xl">
41+
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight">
42+
Contact <span className="text-blue-200">Sugar Labs</span>
43+
</h1>
44+
<div className="w-20 h-1 bg-blue-400 mb-6"></div>
45+
<p className="text-base md:text-lg text-gray-200 max-w-2xl leading-relaxed">
46+
We'd love to hear from you. Here's how you can reach our team of
47+
educational innovators.
48+
</p>
49+
</div>
2150
</div>
22-
<div className="mb-4">
23-
<label className="block text-gray-700">Message</label>
24-
<textarea className="w-full p-2 border rounded" rows={4} />
51+
</section>
52+
53+
{/* Main Content */}
54+
<section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
55+
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">
56+
{/* Contact Information Card */}
57+
<div className="lg:col-span-7 bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 transition-shadow duration-300 hover:shadow-lg">
58+
<div className="p-6 md:p-8 lg:p-10">
59+
<h2 className="text-2xl font-bold text-gray-800 mb-8 flex items-center">
60+
<span className="w-1.5 h-6 bg-blue-600 mr-3 rounded-sm"></span>
61+
How to Reach Us
62+
</h2>
63+
64+
<div className="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-6 lg:gap-x-8">
65+
{/* Mail Address */}
66+
<ContactMethod
67+
iconSrc="assets/Icons/mail.svg"
68+
title="By Mail"
69+
description={
70+
<address className="mt-2 not-italic text-gray-600 leading-relaxed text-sm">
71+
Sugar Labs
72+
<br />
73+
2028 E Ben White Blvd <b>STE 240 PMB 1271</b>
74+
<br />
75+
AUSTIN, TX 78741
76+
<br />
77+
USA
78+
</address>
79+
}
80+
/>
81+
82+
{/* Phone */}
83+
<ContactMethod
84+
iconSrc="assets/Icons/phone.svg"
85+
title="By Phone"
86+
description={
87+
<a
88+
href="tel:+16177024088"
89+
className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
90+
>
91+
+1 (617) 702-4088
92+
</a>
93+
}
94+
/>
95+
96+
{/* Email */}
97+
<ContactMethod
98+
iconSrc="assets/Icons/email.svg"
99+
title="By Email"
100+
description={
101+
<a
102+
href="mailto:info@sugarlabs.org"
103+
className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
104+
>
105+
info@sugarlabs.org
106+
</a>
107+
}
108+
/>
109+
110+
{/* Matrix Chat */}
111+
<ContactMethod
112+
iconSrc="assets/Icons/chat.svg"
113+
title="Via Matrix Chat"
114+
description={
115+
<a
116+
href="https://wiki.sugarlabs.org/go/Matrix"
117+
className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
118+
target="_blank"
119+
rel="noopener noreferrer"
120+
>
121+
wiki.sugarlabs.org/go/Matrix
122+
</a>
123+
}
124+
/>
125+
</div>
126+
</div>
127+
</div>
128+
129+
{/* Social Connect Card */}
130+
<div className="lg:col-span-5 rounded-xl overflow-hidden shadow-md">
131+
<div className="bg-gradient-to-br from-gray-800 via-gray-850 to-gray-900 p-6 md:p-8 lg:p-10">
132+
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
133+
<span className="w-1.5 h-6 bg-blue-500 mr-3 rounded-sm"></span>
134+
Connect With The Community
135+
</h2>
136+
137+
<p className="text-gray-300 text-sm leading-relaxed mb-8">
138+
Join our global community of educators, developers, and
139+
learners who are passionate about bringing educational
140+
software to children around the world.
141+
</p>
142+
143+
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
144+
{socialLinks.map((social) => (
145+
<a
146+
key={social.href}
147+
href={social.href}
148+
target="_blank"
149+
rel="noopener noreferrer"
150+
aria-label={`Visit our ${social.name} page`}
151+
className="group flex flex-col items-center"
152+
>
153+
<div className="flex items-center justify-center w-12 h-12 bg-white/10 group-hover:bg-white/20 rounded-lg backdrop-blur-sm transition-all duration-300 ease-in-out mb-2 border border-gray-700/50 shadow-sm group-hover:shadow-blue-500/10 group-hover:shadow-md">
154+
<img
155+
src={social.icon}
156+
alt=""
157+
width={20}
158+
height={20}
159+
className="filter brightness-0 invert opacity-90"
160+
aria-hidden="true"
161+
/>
162+
</div>
163+
<span className="text-xs text-gray-300 group-hover:text-gray-200 transition-colors duration-200">
164+
{social.name}
165+
</span>
166+
</a>
167+
))}
168+
</div>
169+
</div>
170+
171+
<div className="bg-gray-800 p-5 md:p-6 border-t border-gray-700/50">
172+
<h3 className="text-xs uppercase font-bold text-gray-300 tracking-wider mb-2">
173+
Follow Our Progress
174+
</h3>
175+
<p className="text-xs text-gray-400 leading-relaxed">
176+
Stay updated with our latest developments and educational
177+
initiatives.
178+
</p>
179+
</div>
180+
</div>
25181
</div>
26-
<button
27-
type="submit"
28-
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
29-
>
30-
Send Message
31-
</button>
32-
</form>
33-
</main>
182+
</section>
183+
</div>
34184
<Footer />
35-
</div>
185+
</>
36186
);
37187
};
38188

189+
interface ContactMethodProps {
190+
iconSrc: string;
191+
title: string;
192+
description: React.ReactNode;
193+
}
194+
195+
const ContactMethod: React.FC<ContactMethodProps> = ({
196+
iconSrc,
197+
title,
198+
description,
199+
}) => (
200+
<div className="flex items-start">
201+
<div className="flex-shrink-0 p-3 bg-blue-50 rounded-lg text-blue-600 border border-blue-100">
202+
<img src={iconSrc} alt="" className="h-5 w-5" aria-hidden="true" />
203+
</div>
204+
<div className="ml-4">
205+
<h3 className="text-sm font-bold text-gray-800 uppercase tracking-wider">
206+
{title}
207+
</h3>
208+
{description}
209+
</div>
210+
</div>
211+
);
212+
39213
export default ContactUs;

0 commit comments

Comments
 (0)
Please sign in to comment.