Skip to content

Commit 667ec2c

Browse files
orama254orama254
authored
Merge pull request #102 from devKiratu/feature/contact-us-section
[feature] create contact us section (Form UI)
2 parents 8a41fe4 + 482856a commit 667ec2c

10 files changed

Lines changed: 174 additions & 3 deletions

File tree

‎public/img/mail-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/img/message-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/ContactUs/ContactUs.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { useEffect, useState } from 'react';
2+
import DesktopVersion from './DesktopVersion';
3+
import MobileVersion from './MobileVersion';
4+
5+
export default function ContactUs() {
6+
const [screenWidth, setScreenWidth] = useState<number | null>(null);
7+
8+
const breakpoint = 1024;
9+
10+
useEffect(() => {
11+
setScreenWidth(window.innerWidth);
12+
13+
const handleResize = () => setScreenWidth(window.innerWidth);
14+
15+
window.addEventListener('resize', handleResize);
16+
17+
return () => window.removeEventListener('resize', handleResize);
18+
}, []);
19+
20+
if (!screenWidth) return null;
21+
22+
return (
23+
<section id="contact-us" className="min-h-screen bg-white pb-20">
24+
<h2 className="font-montserrat text-base uppercase w-fit mx-auto py-5">
25+
Contact us
26+
</h2>
27+
{screenWidth < breakpoint ? <MobileVersion /> : <DesktopVersion />}
28+
</section>
29+
);
30+
}

‎src/components/ContactUs/DesktopVersion.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
3+
export default function DesktopVersion() {
4+
return (
5+
<>
6+
<h1 className="hidden lg:block font-montserrat text-[32px] font-[900] w-fit mx-auto py-4">
7+
Have an interesting idea we should discuss?
8+
</h1>
9+
<div className="w-3/4 lg:bg-[#CEEDF4BF] mx-auto pt-[74px] pb-[46px] rounded-[10px]">
10+
<form className="mx-auto w-2/4">
11+
<label
12+
htmlFor="name"
13+
className="block mb-2 text-xs text-black/[0.44] font-dmSans"
14+
>
15+
Name
16+
</label>
17+
<input
18+
id="name"
19+
type={'text'}
20+
placeholder={'Jane Doe'}
21+
className="border border-[#CEEDF4] w-full rounded-lg px-4 py-3 mb-5 placeholder-[#7E7979] outline-none font-montserrat text-base"
22+
required
23+
/>
24+
<label
25+
htmlFor="email"
26+
className="block mb-2 text-xs text-black/[0.44] font-dmSans"
27+
>
28+
Email
29+
</label>
30+
<input
31+
id="email"
32+
type={'email'}
33+
placeholder={'you@example.com'}
34+
className="border border-[#CEEDF4] w-full rounded-lg px-4 py-3 mb-5 outline-none placeholder-[#7E7979] font-montserrat text-base"
35+
required
36+
/>
37+
<label
38+
htmlFor="message"
39+
className="block mb-2 text-xs text-black/[0.44] font-dmSans"
40+
>
41+
Message
42+
</label>
43+
<textarea
44+
id="message"
45+
placeholder="Hello, I'm getting in touch ..."
46+
className="border border-[#CEEDF4] w-full rounded-lg px-4 py-[22px] mb-9 h-[178px] resize-none outline-none placeholder-[#7E7979] font-montserrat text-base"
47+
required
48+
/>
49+
{/*//TODO: replace this button with the app button component */}
50+
<button
51+
type="submit"
52+
className="block rounded-md p-2 my-2 w-[247px] h-14 mx-auto bg-[#EC0505] text-white font-bold font-montserrat"
53+
>
54+
Send Message
55+
</button>
56+
</form>
57+
</div>
58+
</>
59+
);
60+
}

‎src/components/ContactUs/MobileVersion.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import Image from 'next/image';
2+
import React from 'react';
3+
import mailIcon from '../../../public/img/mail-icon.svg';
4+
import messageIcon from '../../../public/img/message-icon.svg';
5+
6+
export default function MobileVersion() {
7+
return (
8+
<>
9+
<h1 className="text-black font-robotoMono text-4xl w-fit mx-auto py-4 font-bold">
10+
Let's talk React
11+
</h1>
12+
<form className="w-4/5 mx-auto md:w-2/3">
13+
<label
14+
htmlFor="name"
15+
className="border border-black w-full rounded-md p-2 my-2 flex"
16+
>
17+
<input
18+
id="name"
19+
type={'text'}
20+
placeholder={'Name'}
21+
className=" placeholder-[#7E7979] outline-none flex-grow ml-8 font-robotoMono text-base"
22+
required
23+
/>
24+
</label>
25+
<label
26+
htmlFor="email"
27+
className="border border-black w-full rounded-md p-2 my-2 flex"
28+
>
29+
<Image
30+
src={mailIcon}
31+
alt=""
32+
width={25}
33+
height={25}
34+
color="#7E7979"
35+
className="inline-block"
36+
/>
37+
<input
38+
id="email"
39+
type={'email'}
40+
placeholder={'Email'}
41+
className="inline-block ml-2 outline-none flex-grow placeholder-[#7E7979] font-robotoMono text-base"
42+
required
43+
/>
44+
</label>
45+
<label className="border border-black w-full rounded-md p-2 my-2 flex items-start">
46+
<Image
47+
src={messageIcon}
48+
width={25}
49+
height={25}
50+
className="inline-block "
51+
alt=""
52+
/>
53+
<textarea
54+
placeholder="Message"
55+
className=" inline-block ml-2 h-[270px] resize-none outline-none flex-grow placeholder-[#7E7979] font-robotoMono text-base "
56+
required
57+
></textarea>
58+
</label>
59+
{/*//TODO: replace this button with the app button component */}
60+
<button
61+
type="submit"
62+
className="border-2 border-[#12A04E] w-full rounded-md p-2 my-2 font-montserrat font-bold text-[#12A04E]"
63+
>
64+
Send Message
65+
</button>
66+
</form>
67+
</>
68+
);
69+
}

‎src/components/ContactUs/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ContactUs';

‎src/pages/_document.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ class MyDocument extends Document {
6262
crossOrigin="true"
6363
/>
6464
<link
65-
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&display=swap"
65+
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&family=Roboto+Mono:wght@400;700&family=DM+Sans&display=swap"
6666
rel="stylesheet"
6767
/>
6868
</Head>

‎src/pages/contact/index.page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22
import Head from 'next/head';
3+
import ContactUs from '../../components/ContactUs';
34

45
export default function ContactPage() {
56
return (
67
<>
78
<Head>
89
<title>Reactjs Developer Community in Kenya - Contact</title>
910
</Head>
10-
<main className="flex justify-center items-center min-h-screen">
11-
<h1 className="text-white">Contact page will be here</h1>
11+
<main className="min-h-screen bg-white">
12+
<ContactUs />
1213
</main>
1314
</>
1415
);

‎src/pages/index.page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Image from 'next/image';
33
import logo from '../../public/reactdevske.svg';
44
import Events from '../components/Events/Events';
55
import AboutUs from '../components/about-us/about-us';
6+
import ContactUs from '../components/ContactUs';
67

78
export default function Home() {
89
return (
@@ -54,6 +55,7 @@ export default function Home() {
5455
<AboutUs />
5556
</div>
5657
<Events />
58+
<ContactUs />
5759
</main>
5860
</div>
5961
);

‎tailwind.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ module.exports = {
88
},
99
fontFamily: {
1010
montserrat: ['Montserrat', 'sans-serif'],
11+
robotoMono: ['Robot Mono', 'monospace'],
12+
dmSans: ['DM Sans', 'sans-serif'],
1113
},
1214
},
1315
},

0 commit comments

Comments
 (0)