Skip to content

Commit 196d8ed

Browse files
SamshhJodi
Samshh
authored and
Jodi
committed
fix: responsiveness and spacings
1 parent a930d2a commit 196d8ed

6 files changed

Lines changed: 51 additions & 24 deletions

File tree

‎app/code-of-conduct/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function CodeOfConductPage() {
22
return (
3-
<main className="mt-20 bg-dark-green text-white min-h-[70vh] py-8 md:px-36 px-10 flex flex-col justify-center">
3+
<main className="bg-dark-green text-white min-h-[70vh] py-8 md:px-36 px-10 flex flex-col justify-center">
44
<h1 className="text-4xl md:text-6xl font-bold mb-8">
55
Code of <span className="text-primary">Conduct</span>
66
</h1>

‎app/contact/components/YourDetails.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
1+
import { useEffect, useState } from 'react';
12
import { Button } from '@/components/ui/button';
23
import { Input } from '@/components/ui/input';
34

45
export default function YourDetails() {
6+
const [email, setEmail] = useState('');
7+
const [subject, setSubject] = useState('');
8+
const [message, setMessage] = useState('');
9+
const [isValid, setIsValid] = useState(false);
10+
11+
useEffect(() => {
12+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
13+
const isFormValid =
14+
emailRegex.test(email.trim()) &&
15+
subject.trim().length > 0 &&
16+
message.trim().length > 0;
17+
18+
setIsValid(isFormValid);
19+
}, [email, subject, message]);
20+
521
return (
6-
<div className="flex flex-col justify-between gap-auto max-w-[563px] p-10 w-full h-[calc(100vh-100px)] max-h-[738px] mt-[79px] rounded-[50px] bg-radial-custom text-white">
22+
<div className="flex flex-col justify-between gap-auto max-w-[563px] p-10 w-full h-[calc(100vh-100px)] max-h-[738px] rounded-[50px] bg-radial-custom text-white">
723
<span className="text-[2.5rem] font-semibold text-white text-shadow-md">
824
Your details
925
</span>
@@ -22,6 +38,8 @@ export default function YourDetails() {
2238
placeholder="Your Email"
2339
className="w-full caret-white"
2440
variant="contact-unfilled"
41+
value={email}
42+
onChange={(e) => setEmail(e.target.value)}
2543
/>
2644
</div>
2745

@@ -39,6 +57,8 @@ export default function YourDetails() {
3957
placeholder="Message Subject"
4058
className="w-full caret-white"
4159
variant="contact-unfilled"
60+
value={subject}
61+
onChange={(e) => setSubject(e.target.value)}
4262
/>
4363
</div>
4464

@@ -56,10 +76,16 @@ export default function YourDetails() {
5676
className="w-full p-2 bg-transparent rounded text-base focus:outline-none caret-white text-web-body-font "
5777
rows={4}
5878
style={{ resize: 'none', maxHeight: '150px' }}
79+
value={message}
80+
onChange={(e) => setMessage(e.target.value)}
5981
/>
6082
</div>
6183

62-
<Button variant="footer" className="max-w-[148px] text-dark-green">
84+
<Button
85+
variant="footer"
86+
className="max-w-[148px] text-dark-green"
87+
disabled={!isValid}
88+
>
6389
Send
6490
</Button>
6591
</div>

‎app/contact/page.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const socialLinks = [
3636
export default function ContactPage() {
3737
const width = useWindowWidth();
3838
return (
39-
<>
39+
<div className="relative w-full flex align-center overflow-hidden">
4040
<svg
4141
xmlns="http://www.w3.org/2000/svg"
4242
width="825"
@@ -87,45 +87,50 @@ export default function ContactPage() {
8787
</defs>
8888
</svg>
8989
<Container
90-
className={`relative min-h-screen justify-center items-center flex gap-[46px] ${
91-
width < 1024 ? 'flex-col mt-[100px]' : 'flex-row'
90+
className={`relative p-[64px] w-full min-h-screen justify-between max-x-7xl items-center flex gap-[46px] ${
91+
width < 1024 ? 'flex-col' : 'flex-row'
9292
}`}
9393
>
9494
<div
95-
className={`flex flex-col gap-[80px] items-start justify-start ${
95+
className={`flex flex-col gap-4 sm:gap-[80px] items-start justify-start ${
9696
width < 1024
9797
? 'text-center justify-center sw-[531px] items-center'
9898
: ''
9999
}`}
100100
>
101-
<div className="flex flex-col gap-[20px] text-white sm:items-center lg:items-start">
101+
<div className="flex flex-col gap-2 sm:gap-[20px] text-white sm:items-center lg:items-start">
102102
<h1 className="text-web-title-font font-bold">Contact Us</h1>
103-
<p className="text-web-body-font sm:w-[300px]">
103+
<p className="text-web-body-font sm:max-w-[450px]">
104104
Get in touch with us for any questions, concerns, or to learn more
105105
about our organization and initiatives
106106
</p>
107107
</div>
108-
<div
109-
className={`flex gap-[28px] ${
110-
width < 1024 ? 'flex-col items-center gap-[0px] ' : 'flex-row'
108+
<a
109+
href="mailto:durianpy.davao@gmail.com"
110+
target="_blank"
111+
rel="noopener noreferrer"
112+
className={`flex gap-2 sm:gap-[28px] ${
113+
width < 768
114+
? 'flex-col items-center gap-[0px] '
115+
: 'flex-row items-center'
111116
}`}
112117
>
113118
<Image
114119
src={'/assets/icons/email-us.svg'}
115120
width={63}
116121
height={63}
117122
alt=""
118-
className=""
123+
className="sm:w-[63px] sm:h-[63px] w-[40px] h-[40px]"
119124
/>
120125
<div className="flex flex-col text-white">
121126
<p
122-
className={`text-[#FFC201] leading-[49px] text-web-medium-font font-bold ${width < 1024 ? 'leading-[25px] mt-[5px] md:leading-[45px]' : ''}`}
127+
className={`text-[#FFC201] leading-[49px] text-web-medium-font font-bold ${width < 1024 ? 'leading-[25px] mt-[5px] sm:leading-[45px]' : ''}`}
123128
>
124129
E-mail us
125130
</p>
126131
<p className="text-web-body-font">durianpy.davao@gmail.com</p>
127132
</div>
128-
</div>
133+
</a>
129134
<div className="flex flex-col gap-[10px]">
130135
<p className="text-white text-button-hovered font-bold ">
131136
Follow our social media
@@ -142,7 +147,7 @@ export default function ContactPage() {
142147
<FontAwesomeIcon
143148
icon={icon}
144149
className="text-primary group-hover:text-[#FBFF00] transition-transform duration-300 group-hover:scale-110
145-
text-md sm:text-xl md:w-10 md:text-2xl md:h-10"
150+
text-sm sm:text-xl sm:w-10 md:text-2xl sm:h-10"
146151
/>
147152
</Link>
148153
))}
@@ -182,6 +187,6 @@ export default function ContactPage() {
182187
</div>
183188
<YourDetails />
184189
</Container>
185-
</>
190+
</div>
186191
);
187192
}

‎components/navs/public/DesktopView.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,7 @@ export default function DesktopView() {
8989
</Button>
9090
<Button
9191
variant={'navLink'}
92-
onClick={() =>
93-
redirectTo({ href: 'https://www.facebook.com/durianpy' })
94-
}
92+
onClick={() => router.push('/contact')}
9593
className={`${pathname === '/contact' ? 'text-primary border-primary' : ''}`}
9694
>
9795
Contact Us

‎components/navs/public/MobileView.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,7 @@ export default function MobileView() {
109109
</Button>
110110
<Button
111111
variant={'navLinkMobile'}
112-
onClick={() =>
113-
redirectTo({ href: 'https://www.facebook.com/durianpy' })
114-
}
112+
onClick={() => router.push('/contact')}
115113
>
116114
Contact Us
117115
</Button>

‎components/navs/public/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Navbar() {
99
const width = useWindowWidth();
1010

1111
return (
12-
<nav className="bg-gradient-utd-green-transparent backdrop-blur-sm h-[79px] px-[16px] fixed w-full top-0 z-50 flex justify-center items-center rounded-b-[20px]">
12+
<nav className="bg-gradient-utd-green-transparent backdrop-blur-sm h-[79px] px-[16px] sticky w-full top-0 z-50 flex justify-center items-center rounded-b-[20px]">
1313
<div className="max-w-7xl w-full flex justify-between items-center lg:gap-[169px]">
1414
<Image
1515
src="/assets/logo.svg"

0 commit comments

Comments
 (0)