DurianPy-Davao-Python-User-Group · Samshh · Apr 20, 2025 · Mar 31, 2025 · Apr 2, 2025 · Apr 2, 2025
diff --git a/app/code-of-conduct/page.tsx b/app/code-of-conduct/page.tsx
@@ -1,6 +1,6 @@
 export default function CodeOfConductPage() {
   return (
-    <main className="mt-20 bg-dark-green text-white min-h-[70vh] py-8 md:px-36 px-10 flex flex-col justify-center">
+    <main className="bg-dark-green text-white min-h-[70vh] py-8 md:px-36 px-10 flex flex-col justify-center">
       <h1 className="text-4xl md:text-6xl font-bold mb-8">
         Code of <span className="text-primary">Conduct</span>
       </h1>

diff --git a/app/contact/components/TestComponent.tsx b/app/contact/components/TestComponent.tsx
diff --git a/app/contact/components/YourDetails.tsx b/app/contact/components/YourDetails.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+export default function YourDetails() {
+  const [email, setEmail] = useState('');
+  const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
+  const [isValid, setIsValid] = useState(false);
+
+  useEffect(() => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const isFormValid =
+      emailRegex.test(email.trim()) &&
+      subject.trim().length > 0 &&
+      message.trim().length > 0;
+
+    setIsValid(isFormValid);
+  }, [email, subject, message]);
+
+  return (
+    <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">
+      <span className="text-[2.5rem] font-semibold text-white text-shadow-md">
+        Your details
+      </span>
+
+      {/* Email Input */}
+      <div className="mb-4">
+        <label
+          htmlFor="email"
+          className="block mb-2 font-semibold text-web-body-font "
+        >
+          Email
+        </label>
+        <Input
+          id="email"
+          type="text"
+          placeholder="Your Email"
+          className="w-full caret-white"
+          variant="contact-unfilled"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+      </div>
+
+      {/* Subject Input */}
+      <div className="mb-4">
+        <label
+          htmlFor="subject"
+          className="block mb-2 font-semibold text-web-body-font "
+        >
+          Subject
+        </label>
+        <Input
+          id="subject"
+          type="text"
+          placeholder="Message Subject"
+          className="w-full caret-white"
+          variant="contact-unfilled"
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+        />
+      </div>
+
+      {/* Message Textarea */}
+      <div className="mb-4">
+        <label
+          htmlFor="message"
+          className="block mb-2 font-semibold text-web-body-font "
+        >
+          Message
+        </label>
+        <textarea
+          id="message"
+          placeholder="Your Message"
+          className="w-full p-2 bg-transparent rounded text-base focus:outline-none caret-white text-web-body-font "
+          rows={4}
+          style={{ resize: 'none', maxHeight: '150px' }}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+      </div>
+
+      <Button
+        variant="footer"
+        className="max-w-[148px] text-dark-green"
+        disabled={!isValid}
+      >
+        Send
+      </Button>
+    </div>
+  );
+}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -1,10 +1,192 @@
-import TestComponent from './components/TestComponent';
+'use client';
+
+import useWindowWidth from '@/components/csr/useWindowWidth';
+import { Container } from '@/components/ui/container';
+import YourDetails from './components/YourDetails';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import {
+  faFacebook,
+  faDiscord,
+  faInstagram,
+  faLinkedin,
+  faGithub,
+  faYoutube,
+  faMeetup,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const socialLinks = [
+  { href: 'https://discord.gg/T7sTQRHFFy', icon: faDiscord },
+  { href: 'https://www.facebook.com/durianpy', icon: faFacebook },
+  { href: 'https://instagram.com/durianpy.dvo', icon: faInstagram },
+  { href: 'https://youtube.com/@DurianPy', icon: faYoutube },
+  {
+    href: 'https://github.com/DurianPy-Davao-Python-User-Group',
+    icon: faGithub,
+  },
+  { href: 'https://www.linkedin.com/company/durianpy', icon: faLinkedin },
+  {
+    href: 'https://www.meetup.com/durianpy-davao-python-user-group/',
+    icon: faMeetup,
+  },
+];
 
 export default function ContactPage() {
+  const width = useWindowWidth();
   return (
-    <main>
-      <h1 className="text-[10rem]">Contact Us</h1>
-      <TestComponent />
-    </main>
+    <div className="relative w-full flex align-center overflow-hidden">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="825"
+        height="813"
+        viewBox="0 0 825 813"
+        fill="none"
+        className="absolute top-0 left-0"
+      >
+        <g filter="url(#filter0_f_2582_874)">
+          <path
+            d="M605 31C605 341.384 351.145 593 38 593C-275.145 593 -529 341.384 -529 31C-529 -279.384 -275.145 -531 38 -531C351.145 -531 605 -279.384 605 31Z"
+            fill="url(#paint0_radial_2582_874)"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_2582_874"
+            x="-748.5"
+            y="-750.5"
+            width="1573"
+            height="1563"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="109.75"
+              result="effect1_foregroundBlur_2582_874"
+            />
+          </filter>
+          <radialGradient
+            id="paint0_radial_2582_874"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(37.9999 30.9999) rotate(90) scale(562 567)"
+          >
+            <stop stop-color="#009643" />
+            <stop offset="1" stop-color="#271E00" stop-opacity="0" />
+          </radialGradient>
+        </defs>
+      </svg>
+      <Container
+        className={`relative p-[64px] w-full justify-between max-x-7xl items-center flex gap-[46px] ${
+          width < 1024 ? 'flex-col' : 'flex-row'
+        }`}
+      >
+        <div
+          className={`flex flex-col gap-4 sm:gap-[80px] items-start justify-start ${
+            width < 1024
+              ? 'text-center justify-center sw-[531px] items-center'
+              : ''
+          }`}
+        >
+          <div className="flex flex-col gap-2 sm:gap-[20px] text-white sm:items-center lg:items-start">
+            <h1 className="text-web-title-font font-bold">Contact Us</h1>
+            <p className="text-web-body-font sm:max-w-[450px]">
+              Get in touch with us for any questions, concerns, or to learn more
+              about our organization and initiatives
+            </p>
+          </div>
+          <a
+            href="mailto:durianpy.davao@gmail.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`flex gap-2 sm:gap-[28px] ${
+              width < 768
+                ? 'flex-col items-center gap-[0px] '
+                : 'flex-row items-center'
+            }`}
+          >
+            <Image
+              src={'/assets/icons/email-us.svg'}
+              width={63}
+              height={63}
+              alt=""
+              className="sm:w-[63px] sm:h-[63px] w-[40px] h-[40px]"
+            />
+            <div className="flex flex-col text-white">
+              <p
+                className={`text-[#FFC201] leading-[49px] text-web-medium-font font-bold ${width < 1024 ? 'leading-[25px] mt-[5px] sm:leading-[45px]' : ''}`}
+              >
+                E-mail us
+              </p>
+              <p className="text-web-body-font">durianpy.davao@gmail.com</p>
+            </div>
+          </a>
+          <div className="flex flex-col gap-[10px]">
+            <p className="text-white text-button-hovered font-bold ">
+              Follow our social media
+            </p>
+            <div className="flex gap-[8px]">
+              {socialLinks.map(({ href, icon }, index) => (
+                <Link
+                  key={index}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group"
+                >
+                  <FontAwesomeIcon
+                    icon={icon}
+                    className="text-primary group-hover:text-[#FBFF00] transition-transform duration-300 group-hover:scale-110 
+             text-sm sm:text-xl sm:w-10 md:text-2xl sm:h-10"
+                  />
+                </Link>
+              ))}
+              {/* Latest Version of Medium Icon was not included in the package */}
+              <Link
+                href="https://medium.com/@durianpy.davao"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="33"
+                  height="33"
+                  viewBox="0 0 1024 1024"
+                  fill="none"
+                  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"
+                >
+                  <rect
+                    width="1024"
+                    height="1024"
+                    rx="179.649"
+                    fill="currentColor"
+                  />
+                  <path
+                    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"
+                    fill="#112018"
+                  />
+                  <path
+                    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"
+                    fill="#112018"
+                  />
+                </svg>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <YourDetails />
+      </Container>
+    </div>
   );
 }
diff --git a/components/navs/public/DesktopView.tsx b/components/navs/public/DesktopView.tsx
@@ -89,9 +89,7 @@ export default function DesktopView() {
       </Button>
       <Button
         variant={'navLink'}
-        onClick={() =>
-          redirectTo({ href: 'https://www.facebook.com/durianpy' })
-        }
+        onClick={() => router.push('/contact')}
         className={`${pathname === '/contact' ? 'text-primary border-primary' : ''}`}
       >
         Contact Us

diff --git a/components/navs/public/MobileView.tsx b/components/navs/public/MobileView.tsx
@@ -109,9 +109,7 @@ export default function MobileView() {
             </Button>
             <Button
               variant={'navLinkMobile'}
-              onClick={() =>
-                redirectTo({ href: 'https://www.facebook.com/durianpy' })
-              }
+              onClick={() => router.push('/contact')}
             >
               Contact Us
             </Button>

diff --git a/components/navs/public/Navbar.tsx b/components/navs/public/Navbar.tsx
@@ -9,7 +9,7 @@ export default function Navbar() {
   const width = useWindowWidth();
 
   return (
-    <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]">
+    <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]">
       <div className="max-w-7xl w-full flex justify-between items-center lg:gap-[169px]">
         <Image
           src="/assets/logo.svg"

diff --git a/components/ui/input.tsx b/components/ui/input.tsx
@@ -11,6 +11,8 @@ const inputVariants = cva(
         default:
           'border border-neutral-200 bg-white dark:bg-neutral-950 dark:border-neutral-800',
         underline: 'border-0 border-b border-neutral-200 bg-transparent ',
+        'contact-unfilled':
+          'bg-transparent border-b border-gray-300 p-0 placeholder:text-grey-300',
       },
     },
     defaultVariants: {