Skip to content

Commit 59f80a2

Browse files
sadeepabandarasadeepabandara
authored
feat: Update contact page and navbar (#23)
* feat: Update contact page and navbar * fix: Apos missing issue * fix: Use props in contact page
1 parent 783c67d commit 59f80a2

29 files changed

+844
-19
lines changed

‎package-lock.json

Lines changed: 42 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@emailjs/browser": "^3.11.0",
1213
"@nextui-org/react": "^2.1.13",
1314
"@sanity/image-url": "^1.0.2",
1415
"@sanity/vision": "^3.16.7",
@@ -17,8 +18,11 @@
1718
"framer-motion": "^10.16.4",
1819
"next": "^13.5.6",
1920
"next-sanity": "^5.5.4",
21+
"next-themes": "^0.2.1",
2022
"react": "latest",
2123
"react-dom": "latest",
24+
"react-icons": "^4.11.0",
25+
"react-toastify": "^9.1.3",
2226
"sanity": "^3.16.7",
2327
"styled-components": "5.2"
2428
},

‎public/NCS-logo-color.png

529 KB
Loading

‎public/logo.png

438 KB
Loading

‎src/app/about/layout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function AboutLayout({
2+
children,
3+
}: {
4+
children: React.ReactNode;
5+
}) {
6+
return (
7+
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
8+
<div className="inline-block max-w-lg text-center justify-center">
9+
{children}
10+
</div>
11+
</section>
12+
);
13+
}

‎src/app/about/page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function AboutPage() {
2+
return (
3+
<div>
4+
<h1 className="text-center text-4xl font-bold">About</h1>
5+
</div>
6+
);
7+
}

‎src/app/blog/layout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function BlogLayout({
2+
children,
3+
}: {
4+
children: React.ReactNode;
5+
}) {
6+
return (
7+
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
8+
<div className="inline-block max-w-lg text-center justify-center">
9+
{children}
10+
</div>
11+
</section>
12+
);
13+
}

‎src/app/blog/page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function BlogPage() {
2+
return (
3+
<div>
4+
<h1 className="text-center text-4xl font-bold">Blog</h1>
5+
</div>
6+
);
7+
}

‎src/app/contact/layout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function ContactLayout({
2+
children,
3+
}: {
4+
children: React.ReactNode;
5+
}) {
6+
return (
7+
<section className='flex flex-col items-center justify-center gap-4 py-8 md:py-10'>
8+
<div className='justify-center inline-block max-w-lg text-center md:max-w-4xl'>
9+
{children}
10+
</div>
11+
</section>
12+
);
13+
}

‎src/app/contact/page.tsx

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
'use client';
2+
3+
import React, { useRef } from 'react';
4+
import { motion } from 'framer-motion';
5+
import { BsArrowRight } from 'react-icons/bs';
6+
import {
7+
HiOutlineMapPin,
8+
HiOutlineEnvelope,
9+
HiOutlinePhone,
10+
} from 'react-icons/hi2';
11+
import { ToastContainer, toast } from 'react-toastify';
12+
import { fadeIn } from '../../utils/variants';
13+
import emailjs from '@emailjs/browser';
14+
import 'react-toastify/dist/ReactToastify.css';
15+
import Map from '../../components/map';
16+
import Box from '../../components/box';
17+
18+
export default function ContactPage() {
19+
const ref: any = useRef();
20+
21+
const handleSubmit = (e: React.FormEvent) => {
22+
e.preventDefault();
23+
24+
const formData = new FormData(ref.current);
25+
const requiredFields = ['user_name', 'user_email', 'subject', 'message'];
26+
let isFormValid = true;
27+
28+
requiredFields.forEach((field) => {
29+
const value = formData.get(field);
30+
if (!value || '') {
31+
toast.error(`Please fill in ${field} field.`, {
32+
theme: 'dark',
33+
});
34+
isFormValid = false;
35+
}
36+
});
37+
38+
if (!isFormValid) {
39+
return;
40+
}
41+
42+
emailjs
43+
.sendForm(
44+
'service_ap4wbtw',
45+
'template_grf4xdq',
46+
ref.current,
47+
'dStWJXq6rdaw4xHWs'
48+
)
49+
.then(
50+
() => {
51+
toast.success('Message sent successfully!', {
52+
theme: 'dark',
53+
});
54+
55+
ref.current.reset();
56+
},
57+
() => {
58+
toast.error('Something went wrong!', {
59+
theme: 'dark',
60+
});
61+
}
62+
);
63+
};
64+
65+
return (
66+
<>
67+
<div className='w-full h-full px-6 md:px-0'>
68+
<div className='container flex items-center justify-center h-full mx-auto text-center md:py-4 xl:text-left'>
69+
<div className='flex flex-col w-full max-w-[700px]'>
70+
<motion.h2
71+
variants={fadeIn('up', 0.2)}
72+
initial='hidden'
73+
animate='show'
74+
exit='hidden'
75+
className='mb-12 text-center text-[32px] md:text-[48px] leading-tight font-semibold'
76+
>
77+
Let&apos;s <span className='text-[#1E50FF]'>connect.</span>
78+
</motion.h2>
79+
80+
<motion.form
81+
ref={ref}
82+
variants={fadeIn('up', 0.4)}
83+
initial='hidden'
84+
animate='show'
85+
exit='hidden'
86+
onSubmit={handleSubmit}
87+
className='flex flex-col flex-1 w-full gap-6 mx-auto'
88+
>
89+
<div className='flex w-full gap-x-6'>
90+
<input
91+
type='text'
92+
name='user_name'
93+
placeholder='Name'
94+
className='h-[52px] pl-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light'
95+
/>
96+
<input
97+
type='email'
98+
name='user_email'
99+
placeholder='Email'
100+
className='h-[52px] pl-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light'
101+
/>
102+
</div>
103+
<input
104+
type='text'
105+
name='subject'
106+
placeholder='Subject'
107+
className='h-[52px] pl-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light'
108+
/>
109+
<textarea
110+
name='message'
111+
cols={30}
112+
rows={10}
113+
placeholder='Message'
114+
className='h-[180px] resize-none p-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light'
115+
></textarea>
116+
<button
117+
type='submit'
118+
className='border rounded-full h-[52px] border-white/50 max-w-[170px] px-8 transition-all duration-300 flex items-center justify-center overflow-hidden hover:border-[#1E50FF] group'
119+
>
120+
<span className='group-hover:-translate-y-[120%] group-hover:opacity-0 transition-all duration-500'>
121+
Let&apos;s talk
122+
</span>
123+
<BsArrowRight className='-translate-y-[120%] opacity-0 group-hover:flex group-hover:-translate-y-0 group-hover:opacity-100 transition-all duration-300 absolute text-[22px]' />
124+
</button>
125+
<ToastContainer />
126+
</motion.form>
127+
</div>
128+
</div>
129+
</div>
130+
<div className='flex flex-col gap-8 my-12 lg:flex-row gap-x-48'>
131+
<div className='w-full h-full lg:w-1/2'>
132+
<Map />
133+
</div>
134+
<motion.div
135+
variants={fadeIn('left', 1)}
136+
initial='hidden'
137+
animate='show'
138+
exit='hidden'
139+
className='w-full h-full pt-2 lg:w-1/2'
140+
>
141+
<Box
142+
icon={<HiOutlineMapPin />}
143+
name={'Address'}
144+
para={'120/5 Vidya Mawatha, Colombo 00700'}
145+
/>
146+
<Box
147+
icon={<HiOutlineEnvelope />}
148+
name={'Email'}
149+
para={'[email protected]'}
150+
/>
151+
<Box icon={<HiOutlinePhone />} name={'Phone'} para={'+94712691003'} />
152+
</motion.div>
153+
</div>
154+
</>
155+
);
156+
}

‎src/app/events/layout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function EventsLayout({
2+
children,
3+
}: {
4+
children: React.ReactNode;
5+
}) {
6+
return (
7+
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
8+
<div className="inline-block max-w-lg text-center justify-center">
9+
{children}
10+
</div>
11+
</section>
12+
);
13+
}

‎src/app/events/page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function EventsPage() {
2+
return (
3+
<div>
4+
<h1 className="text-center text-4xl font-bold">Events</h1>
5+
</div>
6+
);
7+
}

0 commit comments

Comments
 (0)