feat(website): create contact us page

libs/website/feature/contactpage/constants/types/contact.constants.ts

@@ -0,0 +1,8 @@
+import type { FormData } from '../types/contact.types'
+
+export const DEFAULT_FORM_DATA: FormData = {
+  name: '',
+  email: '',
+  subject: '',
+  message: '',
+}

libs/website/feature/contactpage/constants/types/contact.types.ts

@@ -0,0 +1,13 @@
+export interface FormData {
+  name: string
+  email: string
+  subject: string
+  message: string
+}
+
+export interface FormErrors {
+  name?: string
+  email?: string
+  subject?: string
+  message?: string
+}

libs/website/feature/contactpage/contactFormValidation.ts

@@ -0,0 +1,48 @@
+export interface FormData {
+  name: string
+  email: string
+  subject: string
+  message: string
+}
+
+export interface FormErrors {
+  name?: string
+  email?: string
+  subject?: string
+  message?: string
+}
+
+export function validateForm(values: FormData): FormErrors {
+  const errors: FormErrors = {}
+
+  /* Name validation */
+  if (!values.name.trim()) {
+    errors.name = 'Name is required'
+  }
+  else if (values.name.length < 2) {
+    errors.name = 'Name must be at least 2 characters'
+  }
+  /* Email validation */
+  if (!values.email) {
+    errors.email = 'Email is required'
+  }
+  else if (!/^[\w.%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+    errors.email = 'Invalid email address'
+  }
+  /* Subject validation */
+  if (!values.subject.trim()) {
+    errors.subject = 'Subject is required'
+  }
+  else if (values.subject.length < 3) {
+    errors.subject = 'Subject must be at least 3 characters'
+  }
+  /* Message validation */
+  if (!values.message.trim()) {
+    errors.message = 'Message is required'
+  }
+  else if (values.message.length < 10) {
+    errors.message = 'Message must be at least 10 characters'
+  }
+
+  return errors
+}

libs/website/feature/contactpage/index.tsx

@@ -0,0 +1,62 @@
+import cuHackingLogo from '@cuhacking/shared/assets/logos/cuHacking/cuhacking-logo-1.svg'
+import { GlassmorphicCard } from '@cuhacking/shared/ui/src/cuHacking/components/glassmorphic-card'
+import React, { useEffect, useState } from 'react'
+import { ContactForm } from './ui/ContactForm'
+import { ContactHero } from './ui/ContactHero'
+import { StatusMessage } from './ui/StatusMessage'
+
+export function ContactPage(): React.JSX.Element {
+  const [submitStatus, setSubmitStatus] = useState<'success' | 'error' | null>(null)
+
+  // hiding message after 3 seconds
+  useEffect(() => {
+    if (submitStatus) {
+      const timer = setTimeout(() => {
+        setSubmitStatus(null)
+      }, 3000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [submitStatus])
+
+  const handleSubmit = (status: 'success' | 'error') => {
+    setSubmitStatus(null)
+    setTimeout(() => {
+      setSubmitStatus(status)
+    }, 100)
+  }
+
+  return (
+    <div id="contactpage" className="flex justify-center w-full bg-black text-white min-h-screen">
+      <div className="w-full max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14">
+        <GlassmorphicCard className="flex flex-col md:flex-row gap-8 justify-between w-full h-auto p-8">
+          <div className="flex flex-col gap-y-6 md:w-2/3">
+            {/* Hero */}
+            <ContactHero />
+
+            {/* Status Message */}
+            {submitStatus && (
+              <div className="transition-all duration-300 ease-in-out">
+                <StatusMessage type={submitStatus} />
+              </div>
+            )}
+
+            {/* Form */}
+            <ContactForm
+              onSubmit={handleSubmit}
+            />
+          </div>
+
+          {/* Logo */}
+          <GlassmorphicCard className="flex items-center justify-center p-6 md:w-1/3">
+            <img
+              src={cuHackingLogo}
+              alt="cuHacking Logo"
+              className="w-48 md:w-56 lg:w-64 transition-transform duration-300 hover:scale-110"
+            />
+          </GlassmorphicCard>
+        </GlassmorphicCard>
+      </div>
+    </div>
+  )
+}

libs/website/feature/contactpage/ui/ContactForm.tsx

@@ -0,0 +1,128 @@
+import type { FormData, FormErrors } from '../types/contact.types'
+import React, { useState } from 'react'
+import { validateForm } from '../contactFormValidation'
+
+interface ContactFormProps {
+  onSubmit: (status: 'success' | 'error') => void
+}
+
+export function ContactForm({ onSubmit }: ContactFormProps): React.JSX.Element {
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    email: '',
+    subject: '',
+    message: '',
+  })
+
+  const [errors, setErrors] = useState<FormErrors>({})
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    const { name, value } = e.target
+
+    setFormData((prev: FormData) => ({
+      ...prev,
+      [name]: value,
+    }))
+
+    // Cleaning errors as user types
+    if (errors[name as keyof FormErrors]) {
+      setErrors((prev: FormErrors) => ({
+        ...prev,
+        [name]: undefined,
+      }))
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault()
+
+    const validationErrors = validateForm(formData)
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors)
+      return
+    }
+
+    setIsLoading(true)
+
+    try {
+      await new Promise<void>((resolve) => {
+        setTimeout(resolve, 1500)
+      })
+      onSubmit('success')
+      setFormData({ name: '', email: '', subject: '', message: '' })
+    }
+    catch (error) {
+      console.error('Submission error:', error)
+      onSubmit('error')
+    }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-y-6">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-y-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          {/* Name */}
+          <input
+            type="text"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            className={`p-3 bg-gray-900 rounded-lg text-white focus:outline-none focus:ring-2 ${
+              errors.name ? 'ring-2 ring-red-500' : 'focus:ring-green-500'
+            }`}
+            placeholder="Your Name"
+          />
+          <input
+            type="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+            className={`p-3 bg-gray-900 rounded-lg text-white focus:outline-none focus:ring-2 ${
+              errors.email ? 'ring-2 ring-red-500' : 'focus:ring-green-500'
+            }`}
+            placeholder="Your Email"
+          />
+        </div>
+
+        {/* Subject */}
+        <input
+          type="text"
+          name="subject"
+          value={formData.subject}
+          onChange={handleChange}
+          className={`p-3 bg-gray-900 rounded-lg text-white focus:outline-none focus:ring-2 ${
+            errors.subject ? 'ring-2 ring-red-500' : 'focus:ring-green-500'
+          }`}
+          placeholder="Subject"
+        />
+
+        {/* Message */}
+        <textarea
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          className={`p-3 bg-gray-900 rounded-lg text-white focus:outline-none focus:ring-2 ${
+            errors.message ? 'ring-2 ring-red-500' : 'focus:ring-green-500'
+          }`}
+          rows={5}
+          placeholder="Your Message"
+        />
+
+        {/* Submit Button */}
+        <button
+          type="submit"
+          className="py-3 px-8 bg-green-500 text-black rounded-lg font-semibold hover:bg-green-600 w-full sm:w-auto"
+          disabled={isLoading}
+        >
+          {isLoading ? 'Sending...' : 'Send Message'}
+        </button>
+      </form>
+    </div>
+  )
+}

libs/website/feature/contactpage/ui/ContactHero.tsx

@@ -0,0 +1,17 @@
+import { TerminalText } from '@cuhacking/shared/ui/src/cuHacking/components/terminal-text'
+import React from 'react'
+
+export function ContactHero(): React.JSX.Element {
+  return (
+    <div className="mb-8">
+      <h1 className="text-3xl font-bold mb-3 pl-3 sm:pl-8">
+        Contact Us
+      </h1>
+      <p className="text-lg pl-5 sm:pl-10">
+        <TerminalText>
+          Feel free to ask us anything! We’re here to help.
+        </TerminalText>
+      </p>
+    </div>
+  )
+}

libs/website/feature/contactpage/ui/StatusMessage.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+interface StatusMessageProps {
+  type: 'success' | 'error'
+}
+
+export function StatusMessage({ type }: StatusMessageProps): React.JSX.Element {
+  return (
+    <div
+      className={`p-4 rounded-lg flex items-center gap-2 ${
+        type === 'success'
+          ? 'bg-green-500/20 border border-green-500/50 text-green-400'
+          : 'bg-red-500/20 border border-red-500/50 text-red-400'
+      }`}
+    >
+      {/* Icon */}
+      <span className="text-xl">
+        {type === 'success' ? '✅' : '❌'}
+      </span>
+
+      {/* Message */}
+      <p className="font-medium">
+        {type === 'success'
+          ? 'Message sent successfully!'
+          : 'Failed to send message. Please try again.'}
+      </p>
+    </div>
+  )
+}

libs/website/pages/home.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import { ContactPage } from '../feature/contactpage'
 import { EventSection } from '../feature/events'
 import { FAQSection } from '../feature/faq'
 import { MissionSection, WelcomeSection } from '../feature/introduction'
 import { SponsorshipSection } from '../feature/sponsorship'
+
 import { Layout } from '../layouts/base'
 
 export function Home() {
@@ -13,6 +15,7 @@ export function Home() {
       <EventSection />
       <SponsorshipSection />
       <FAQSection />
+      <ContactPage />
     </Layout>
   )
 }

libs/website/shared/ui/navigation/navbar/constants/navbar.constants.ts

@@ -14,6 +14,7 @@ const links = [
   { name: 'EVENTS', link: '/#events' },
   { name: 'SPONSORS', link: '/#sponsors' },
   { name: 'FAQ', link: '/#faq' },
+  { name: 'CONTACT US', link: '/#contactpage' },
 ]
 
 const socials = [