Skip to content

Commit 0ef4143

Browse files
chelleDrCchelleDrC
committed
feat: Contact Us infos, edit: tailwindfile,global css
1 parent 23d7986 commit 0ef4143

7 files changed

Lines changed: 214 additions & 13 deletions

File tree

‎app/contact/components/YourDetails.tsx‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,58 @@
1+
import { Button } from '@/components/ui/button';
2+
import { Input } from '@/components/ui/input';
3+
14
export default function YourDetails() {
25
return (
3-
<div className="flex flex-col items-start justify-start max-w-[563px] w-full">
4-
asd
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">
7+
<span className="text-[2.5rem] font-semibold text-white text-shadow-md">
8+
Your details
9+
</span>
10+
11+
{/* Email Input */}
12+
<div className="mb-4">
13+
<label htmlFor="email" className="block mb-2 font-semibold">
14+
Email
15+
</label>
16+
<Input
17+
id="email"
18+
type="text"
19+
placeholder="Your Email"
20+
className="w-full caret-white"
21+
variant="contact-unfilled"
22+
/>
23+
</div>
24+
25+
{/* Subject Input */}
26+
<div className="mb-4">
27+
<label htmlFor="subject" className="block mb-2 font-semibold">
28+
Subject
29+
</label>
30+
<Input
31+
id="subject"
32+
type="text"
33+
placeholder="Message Subject"
34+
className="w-full caret-white"
35+
variant="contact-unfilled"
36+
/>
37+
</div>
38+
39+
{/* Message Textarea */}
40+
<div className="mb-4">
41+
<label htmlFor="message" className="block mb-2 font-semibold">
42+
Message
43+
</label>
44+
<textarea
45+
id="message"
46+
placeholder="Your Message"
47+
className="w-full p-2 bg-transparent rounded text-base focus:outline-none caret-white"
48+
rows={4}
49+
style={{ resize: 'none', maxHeight: '150px' }}
50+
/>
51+
</div>
52+
53+
<Button variant="footer" className="max-w-[148px] text-dark-green">
54+
Send
55+
</Button>
556
</div>
657
);
758
}

‎app/contact/page.tsx‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1+
'use client';
2+
3+
import useWindowWidth from '@/components/csr/useWindowWidth';
14
import { Container } from '@/components/ui/container';
25
import YourDetails from './components/YourDetails';
36
import Image from 'next/image';
47
import Link from 'next/link';
8+
59
import {
610
faFacebook,
711
faDiscord,
812
faInstagram,
913
faLinkedin,
1014
faGithub,
1115
faYoutube,
16+
faMeetup,
1217
} from '@fortawesome/free-brands-svg-icons';
1318
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
1419

@@ -22,9 +27,14 @@ const socialLinks = [
2227
icon: faGithub,
2328
},
2429
{ href: 'https://www.linkedin.com/company/durianpy', icon: faLinkedin },
30+
{
31+
href: 'https://www.meetup.com/durianpy-davao-python-user-group/',
32+
icon: faMeetup,
33+
},
2534
];
2635

2736
export default function ContactPage() {
37+
const width = useWindowWidth();
2838
return (
2939
<>
3040
<svg
@@ -76,8 +86,16 @@ export default function ContactPage() {
7686
</radialGradient>
7787
</defs>
7888
</svg>
79-
<Container className="relative min-h-screen justify-center items-center flex gap-[46px]">
80-
<div className="flex flex-col gap-[80px] items-start justify-start">
89+
<Container
90+
className={`relative min-h-screen justify-center items-center flex gap-[46px] ${
91+
width < 1024 ? 'flex-col' : 'flex-row'
92+
}`}
93+
>
94+
<div
95+
className={`flex flex-col gap-[80px] items-start justify-start ${
96+
width < 1024 ? 'text-center w-[531px] items-center' : ''
97+
}`}
98+
>
8199
<div className="flex flex-col gap-[20px] text-white">
82100
<h1 className="text-web-title-font font-bold">Contact Us</h1>
83101
<p className="text-web-body-font">
@@ -93,14 +111,14 @@ export default function ContactPage() {
93111
alt=""
94112
/>
95113
<div className="flex flex-col text-white">
96-
<p className="text-[#FFC201] leading-[49px] text-web-medium-font font-bold">
114+
<p className="text-[#FFC201] leading-[49px] text-web-medium-font font-bold text-left">
97115
E-mail us
98116
</p>
99117
<p className="text-web-body-font">durianpy.davao@gmail.com</p>
100118
</div>
101119
</div>
102120
<div className="flex flex-col gap-[10px]">
103-
<p className="text-white text-button-hovered font-bold">
121+
<p className="text-white text-button-hovered font-bold ">
104122
Follow our social media
105123
</p>
106124
<div className="flex gap-[8px]">
@@ -119,6 +137,37 @@ export default function ContactPage() {
119137
/>
120138
</Link>
121139
))}
140+
{/* Latest Version of Medium Icon was not included in the package */}
141+
<Link
142+
href="https://medium.com/@durianpy.davao"
143+
target="_blank"
144+
rel="noopener noreferrer"
145+
className="group"
146+
>
147+
<svg
148+
xmlns="http://www.w3.org/2000/svg"
149+
width="33"
150+
height="33"
151+
viewBox="0 0 1024 1024"
152+
fill="none"
153+
className="w-[16px] h-[16px] sm:w-[24px] sm:h-[24px] sm:mb-1 md:w-[40px] md:h-[40px] text-primary group-hover:text-[#FBFF00] transition-transform duration-300 group-hover:scale-110"
154+
>
155+
<rect
156+
width="1024"
157+
height="1024"
158+
rx="179.649"
159+
fill="currentColor"
160+
/>
161+
<path
162+
d="M1024 704.736V797.736C1018.16 798.3 1012.16 798.588 1006 798.588C896.061 798.588 834.166 707.016 831.497 592.432C831.418 588.002 831.448 583.6 831.546 579.228C831.606 576.501 831.714 573.783 831.852 571.075C831.921 569.628 831.989 568.269 832.098 566.753C832.206 565.236 832.315 563.72 832.443 562.204C836.401 511.613 852.687 466.594 879.568 433.284C896.267 412.606 916.334 396.852 939.09 386.316C959.078 376.253 987.17 370.699 1010.07 370.699H1011.06C1015.4 370.699 1019.71 370.844 1024 371.13V396.717C1019.45 395.47 1014.58 394.801 1009.4 394.715C963.086 395.67 935.486 451.145 932.049 528.007H1024V549.669H929.972L929.942 549.689C925.703 624.579 966.692 687.87 1024 704.736Z"
163+
fill="#112018"
164+
/>
165+
<path
166+
d="M836.115 244.625L836.923 244.448V238.195H672.014L518.891 598.084L365.768 238.195H188.059V244.448L188.857 244.625C218.957 251.419 234.239 261.551 234.239 298.091V725.872C234.239 762.412 218.898 772.544 188.798 779.338L188 779.516V785.788H308.57V779.535L307.773 779.358C277.672 772.564 262.39 762.432 262.39 725.892V322.905L459.093 785.788H470.249L672.683 309.996V736.457C670.104 765.317 654.96 774.228 627.705 780.382L626.897 780.569V786.773H836.923V780.569L836.115 780.382C808.831 774.228 793.322 765.317 790.743 736.457L790.605 298.091H790.743C790.743 261.551 806.024 251.419 836.115 244.625Z"
167+
fill="#112018"
168+
/>
169+
</svg>
170+
</Link>
122171
</div>
123172
</div>
124173
</div>

‎components/ui/input.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ const inputVariants = cva(
1111
default:
1212
'border border-neutral-200 bg-white dark:bg-neutral-950 dark:border-neutral-800',
1313
underline: 'border-0 border-b border-neutral-200 bg-transparent ',
14+
'contact-unfilled':
15+
'bg-transparent border-b border-gray-300 p-0 placeholder:text-grey-300',
1416
},
1517
},
1618
defaultVariants: {

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
"react-countup": "^6.5.3",
3535
"react-dom": "^18",
3636
"tailwind-merge": "^3.0.1",
37-
"tailwindcss-animate": "^1.0.7"
37+
"tailwindcss-animate": "^1.0.7",
38+
"tailwindcss-gradients": "^3.0.0"
3839
},
3940
"devDependencies": {
4041
"@types/node": "^20",

‎styles/globals.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,25 @@ body {
3030
@apply bg-opacity-50;
3131
}
3232

33+
/* Change Autocomplete styles in Chrome*/
34+
input:-webkit-autofill,
35+
input:-webkit-autofill:hover,
36+
input:-webkit-autofill:focus,
37+
textarea:-webkit-autofill,
38+
textarea:-webkit-autofill:hover,
39+
textarea:-webkit-autofill:focus,
40+
select:-webkit-autofill,
41+
select:-webkit-autofill:hover,
42+
select:-webkit-autofill:focus {
43+
border-bottom: 1px solid #ffffff;
44+
-webkit-text-fill-color: rgb(255, 255, 255);
45+
-webkit-box-shadow: 0 0 0px 1000px #25334100 inset;
46+
box-shadow: 0 0 0px 1000px #25334100 inset;
47+
transition: background-color 5000s ease-in-out 0s;
48+
color: white;
49+
}
50+
51+
3352
:root {
3453
--radius: 0.5rem;
3554
/* font-size: 16px; */

‎tailwind.config.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const config: Config = {
3636
'button-hovered': 'var(--button-hovered)',
3737
},
3838
backgroundImage: {
39+
'radial-custom': 'radial-gradient(at top right, #FFC201 0%, #1A3E2A 84%)',
3940
'gradient-ltr-lightgreen-transparent':
4041
'linear-gradient(to right, #36FF90,rgba(115, 115, 115, 0))',
4142
'gradient-utd-lightgreen-darkgreen':
@@ -96,8 +97,18 @@ const config: Config = {
9697
},
9798
},
9899
},
99-
// eslint-disable-next-line @typescript-eslint/no-require-imports
100-
plugins: [require('tailwindcss-animate')],
100+
plugins: [
101+
require('tailwindcss-animate'),
102+
function (pluginApi: { addUtilities: (utilities: Record<string, any>) => void }) {
103+
const { addUtilities } = pluginApi;
104+
addUtilities({
105+
".text-shadow-sm": { textShadow: "1px 1px 2px rgba(0, 0, 0, 0.3)" },
106+
".text-shadow-md": { textShadow: "2px 2px 4px rgba(0, 0, 0, 0.4)" },
107+
".text-shadow-lg": { textShadow: "3px 3px 6px rgba(0, 0, 0, 0.5)" },
108+
".text-shadow-xl": { textShadow: "4px 4px 8px rgba(0, 0, 0, 0.6)" },
109+
});
110+
},
111+
],
101112
};
102113

103114
export default config;

0 commit comments

Comments
 (0)