Skip to content

Commit

Permalink
Merge pull request #175 from komal-agarwal5/main
Browse files Browse the repository at this point in the history 
Contact Us Redesigned
  • Loading branch information
@Abidsyed25
Abidsyed25 authored Jul 20, 2024
2 parents 2955cbd + c33b1b0 commit ef7de49
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 97 deletions.
Binary file added app/contact/contact.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
253 changes: 156 additions & 97 deletions app/contact/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
"use client";

import * as z from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Nav } from "@/components/Nav";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import homeIcon from './homeicon.png'; // Ensure this path is correct
import Footer from '@/components/Footer';
import homeIcon from "./homeicon.png"; // Ensure this path is correct
import Footer from "@/components/Footer";
import contact from "./contact.jpg";
import { FaFacebookF, FaTwitter, FaGoogle, FaLinkedinIn } from "react-icons/fa";
import "@fortawesome/fontawesome-free/css/all.min.css";

// Define the form schema using zod
const formSchema = z.object({
Expand All @@ -33,19 +35,6 @@ export default function Contact() {
},
});

// Disable scrolling on mount
useEffect(() => {
const disableScroll = () => {
document.body.style.overflow = 'hidden';
};
disableScroll();

// Re-enable scrolling when component unmounts
return () => {
document.body.style.overflow = 'visible';
};
}, []);

// Handle form submission
const handleSubmit = (values: z.infer<typeof formSchema>) => {
console.log(values);
Expand All @@ -60,15 +49,19 @@ export default function Contact() {
if (form.watch("feedbackType") === "other") {
return (
<div className="flex flex-col">
<label htmlFor="otherFeedback" className="font-semibold">Other Feedback</label>
<label htmlFor="otherFeedback" className="font-semibold">
Other Feedback
</label>
<textarea
id="otherFeedback"
placeholder="Enter your feedback here"
{...form.register("otherFeedback")}
className="p-2 border rounded resize-none text-black"
/>
{form.formState.errors.otherFeedback && (
<p className="text-red-500">{form.formState.errors.otherFeedback.message}</p>
<p className="text-red-500">
{form.formState.errors.otherFeedback.message}
</p>
)}
</div>
);
Expand All @@ -77,97 +70,163 @@ export default function Contact() {
};

const homeIconStyle: React.CSSProperties = {
position: 'absolute',
top: '4rem', // Adjust as needed for positioning
left: '1rem', // Adjust as needed for positioning
width: '2.5rem',
cursor: 'pointer'
position: "absolute",
top: "4rem", // Adjust as needed for positioning
left: "1rem", // Adjust as needed for positioning
width: "2.5rem",
cursor: "pointer",
};

return (
<div className="relative">
<Nav />
<main className="p-4 sm:p-20 flex w-full flex-col items-center justify-between">
<Nav/>
<div className="w-full container mx-auto p-6 max-w-[48rem]">
<Link href="/" passHref>
<Image src={homeIcon} alt="Home" style={homeIconStyle} width={50} height={50} />
<Image
src={homeIcon}
alt="Home"
style={homeIconStyle}
width={50}
height={50}
/>
</Link>
<p className="text-4xl font-extrabold py-5">
Scrap<span className="bg-[#a8e4a0] rounded px-2">Quest</span>
<p className="text-4xl font-extrabold text-center">
Contact<span className="bg-[#a8e4a0] rounded px-2">Us</span>
</p>
<div className="flex w-full flex-col items-center p-4 sm:p-10">
<p className="pt-5 text-xl sm:text-2xl">Facing an Issue? Fill up the form below 👇</p>
<div className="flex w-full flex-col items-center justify-between pt-5 px-4 pb-4 sm:px-25 sm:pb-25 min-h-screen">
<form onSubmit={form.handleSubmit(handleSubmit)} className="w-full max-w-md flex flex-col gap-4">
<div className="flex flex-col">
<label htmlFor="name" className="font-semibold">Full Name</label>
<input
id="name"
type="text"
placeholder="John Doe"
{...form.register("name")}
className="p-2 border rounded text-black"
/>
{form.formState.errors.name && (
<p className="text-red-500">{form.formState.errors.name.message}</p>
)}
</div>

<div className="flex flex-col">
<label htmlFor="email" className="font-semibold">Email Address</label>
<input
id="email"
type="email"
placeholder="johndoe@example.com"
{...form.register("email")}
className="p-2 border rounded text-black"
/>
{form.formState.errors.email && (
<p className="text-red-500">{form.formState.errors.email.message}</p>
)}
</div>
<p className="pt-5 text-xl sm:text-2xl text-center">
Facing an Issue? Fill up the form below 👇
</p>
<main className="flex flex-col sm:flex-row items-center justify-center bg-zinc-900 border-2 mt-10 p-6 sm:p-0">
<div className="flex flex-col items-center">
<div className="flex-shrink-0 mb-6 sm:mb-0 sm:ml-10">
<Image src={contact} height={650} width={410} alt="contact" />
</div>
<div className="social-media flex justify-center mt-6 sm:mt-16 text-center sm:ml-5">
<a
href="https://www.facebook.com"
className="social-icon mx-2 hover:text-blue-400"
>
<FaFacebookF className="w-5 h-5" />
</a>
<a
href="https://www.twitter.com"
className="social-icon mx-2 hover:text-blue-400"
>
<FaTwitter className="w-5 h-5" />
</a>
<a
href="https://www.gmail.com"
className="social-icon mx-2 hover:text-blue-400"
>
<FaGoogle className="w-5 h-5" />
</a>
<a
href="https://www.linkedin.com"
className="social-icon mx-2 hover:text-blue-400"
>
<FaLinkedinIn className="w-5 h-5" />
</a>
</div>
</div>
<div className="flex w-full flex-col items-center p-4 sm:p-10">
<div className="flex w-full flex-col items-center justify-between pt-5 px-4 pb-4 sm:px-25 sm:pb-25">
<form
onSubmit={form.handleSubmit(handleSubmit)}
className="w-full max-w-md flex flex-col gap-4"
>
<div className="flex flex-col">
<label htmlFor="name" className="font-semibold">
Full Name
</label>
<input
id="name"
type="text"
placeholder="John Doe"
{...form.register("name")}
className="p-2 border rounded text-black"
/>
{form.formState.errors.name && (
<p className="text-red-500">
{form.formState.errors.name.message}
</p>
)}
</div>

<div className="flex flex-col">
<label htmlFor="feedbackType" className="font-semibold">Type of Feedback</label>
<select
id="feedbackType"
{...form.register("feedbackType")}
className="p-2 border rounded text-black"
>
<option value="">Select...</option>
<option value="question">Question</option>
<option value="suggestion">Suggestion</option>
<option value="issue">Issue</option>
<option value="other">Other</option>
</select>
{form.formState.errors.feedbackType && (
<p className="text-red-500">{form.formState.errors.feedbackType.message}</p>
)}
</div>
<div className="flex flex-col">
<label htmlFor="email" className="font-semibold">
Email Address
</label>
<input
id="email"
type="email"
placeholder="johndoe@example.com"
{...form.register("email")}
className="p-2 border rounded text-black"
/>
{form.formState.errors.email && (
<p className="text-red-500">
{form.formState.errors.email.message}
</p>
)}
</div>

{renderOtherFeedbackInput()}
<div className="flex flex-col">
<label htmlFor="feedbackType" className="font-semibold">
Type of Feedback
</label>
<select
id="feedbackType"
{...form.register("feedbackType")}
className="p-2 border rounded text-black"
>
<option value="">Select...</option>
<option value="question">Question</option>
<option value="suggestion">Suggestion</option>
<option value="issue">Issue</option>
<option value="other">Other</option>
</select>
{form.formState.errors.feedbackType && (
<p className="text-red-500">
{form.formState.errors.feedbackType.message}
</p>
)}
</div>

<div className="flex flex-col">
<label htmlFor="issue" className="font-semibold">Issue</label>
<textarea
id="issue"
placeholder="Tell us a little bit about your issue in detail here"
className="p-2 border rounded resize-none text-black"
{...form.register("issue")}
/>
{form.formState.errors.issue && (
<p className="text-red-500">{form.formState.errors.issue.message}</p>
)}
</div>
<button type="submit" className="p-2 bg-blue-500 text-white rounded hover:bg-blue-800"><b>SUBMIT</b></button>
{renderOtherFeedbackInput()}

</form>
{isSubmitted && (
<p className="mt-4 text-green-500">Form submitted successfully!</p>
)}
<div className="flex flex-col">
<label htmlFor="issue" className="font-semibold">
Issue
</label>
<textarea
id="issue"
placeholder="Tell us a little bit about your issue in detail here"
className="p-2 border rounded resize-none text-black"
{...form.register("issue")}
/>
{form.formState.errors.issue && (
<p className="text-red-500">
{form.formState.errors.issue.message}
</p>
)}
</div>
<button
type="submit"
className="p-2 bg-blue-500 text-white rounded hover:bg-blue-800"
>
<b>SUBMIT</b>
</button>
</form>
{isSubmitted && (
<p className="mt-4 text-green-500">
Form submitted successfully!
</p>
)}
</div>
</div>
</div>
</main>
<Footer/>
</main>
</div>
<Footer />
</div>
);
}

0 comments on commit ef7de49

Please sign in to comment.