Skip to content

Commit

Permalink
Merge pull request #156 from Kashyap1ankit/feat/san-28
Browse files Browse the repository at this point in the history 
revamed the contact page
  • Loading branch information
@dinxsh
dinxsh authored Dec 21, 2024
2 parents 029c641 + 4d50783 commit 59e7873
Show file tree
Hide file tree
Showing 7 changed files with 249 additions and 99 deletions.
80 changes: 5 additions & 75 deletions app/contact/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,13 @@
"use client";

import { Card, CardContent } from "../../@/components/ui/card";
import { Input } from "../../@/components/ui/input";
import { Label } from "../../@/components/ui/label";
import { Textarea } from "../../@/components/ui/textarea";
import { Button } from "../../@/components/ui/button";

const contactdetails = [
{
title: "Email",
content: "[email protected]",
},
{
title: "Phone",
content: "+1 (800) 123 XX21",
},
{
title: "Support",
content: "[email protected]",
},
];
import ContactLeftComp from "../../components/Contatct/Contact-left";
import ContactRightComp from "../../components/Contatct/Contact-right";

export default function ContactPage() {
return (
<div className="min-h-[70vh] grid md:grid-cols-2 gap-10 items-center justify-center pt-10 px-10 lg:px-[5%] xl:px-[15%] transition-all">
<div className="flex flex-col items-start gap-10">
<div className="flex flex-col gap-4">
<h1 className="text-4xl font-medium tracking-tight transition-all">
Contact us
</h1>

<h6 className="text-foreground/80 max-w-md tracking-tight">
We are always looking for ways to improve our products and services.
Contact us and let us know how we can help you.
</h6>
</div>

<div className="flex flex-col gap-4">
{contactdetails.map((item, idx) => (
<div key={idx} className="">
<h1 className="">{item.title}</h1>
<p className="text-sm text-foreground/80">{item.content}</p>
</div>
))}
</div>
</div>

<div className="w-full flex flex-col items-center lg:p-10">
<Card className="w-full p-5">
<CardContent className="w-full md:py-5">
<form className="flex flex-col gap-10">
<div>
<Label>Full Name</Label>

<Input className="mt-2" />
</div>

<div>
<Label>Email Address</Label>

<Input className="mt-2" />
</div>

<div>
<Label>Message</Label>

<Textarea rows={3} className="mt-2" />
</div>

<Button
// variant="outline"
className="w-1/3"
>
Submit
</Button>
</form>
</CardContent>
</Card>
</div>
<div className=" w-11/12 mx-auto border border-neutral-700 rounded-sm flex flex-row justify-evenly md:max-w-7xl">
<ContactLeftComp className={"hidden sm:block md:w-1/2"} />
<ContactRightComp className={"w-full md:w-1/2"} />
</div>
);
}
46 changes: 46 additions & 0 deletions components/Contatct/Contact-left.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import cn from "classnames";
import Image from "next/image";
import Link from "next/link";
import { socialLinks } from "../Footer";

export default function ContactLeftComp({ className }) {
return (
<div className={cn(className, "relative ")}>
<Image
width={500}
height={500}
src={"/contact.jpg"}
alt="Contact-img"
className="z-[-1] absolute h-full w-full "
/>
<div className="p-4 md:p-8 xl:p-12 flex flex-col justify-end gap-6 h-full">
<div className="flex gap-2 items-center">
<Image
width={1000}
height={1000}
src={"/assets/logo.jpg"}
alt="Contact-img"
className="w-8 md:w-12 rounded-full"
/>
<p className="font-bold text-black text-3xl md:text-4xl lg:text-5xl">
Sanity Gaming
</p>
</div>
<p className="text-gray-500 md:w-3/4">
The Go-To Esports Platform at the intersection of esports and mental
well-being
</p>

<div className="flex gap-4">
{socialLinks.map((e, i) => {
return (
<Link href={e.link} key={i}>
<e.icon className="invert size-6" />
</Link>
);
})}
</div>
</div>
</div>
);
}
165 changes: 165 additions & 0 deletions components/Contatct/Contact-right.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
"use form";

import cn from "classnames";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod";

import { Button } from "../../@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "../../@/components/ui/form";
import { Input } from "../../@/components/ui/input";
import { Mail, PhoneCall, UserRoundCog } from "lucide-react";
import { Textarea } from "../../@/components/ui/textarea";
import { BiSupport } from "react-icons/bi";
import Link from "next/link";
import { socialLinks } from "../Footer";

const formSchema = z.object({
fullName: z
.string({ message: "Full name is required" })
.min(3, { message: "Make it little longer" }),
email: z
.string({ message: "Email is required" })
.email({ message: "Invalid email type" }),
message: z
.string({ message: "Give some sort of message" })
.min(3, { message: "Make it little longer" }),
});

export default function ContactRightComp({ className }) {
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: {
fullName: "",
email: "",
message: "",
},
});

async function handleFormSubmission(data) {
try {
console.log(data);
} catch (error) {
console.log(error);
}
}
return (
<div className={cn(className, "bg-black p-4 md:p-12 ")}>
<p className="text-2xl font-bold tracking-wider ">GET IN TOUCH</p>
<p className="text-gray-400">
24/7 We will answer your questions and problems
</p>

<Form {...form}>
<form
onSubmit={form.handleSubmit(handleFormSubmission)}
className="mt-12 flex flex-col gap-4"
>
<FormField
control={form.control}
name="fullName"
render={({ field }) => (
<FormItem>
<FormLabel className="text-gray-300 font-bold">
Full Name
</FormLabel>
<FormControl>
<div className="flex gap-2 items-center border-2 border-neutral-700 rounded-md px-4">
<UserRoundCog className="size-4" />
<Input
placeholder="Sanity Gaming"
{...field}
className="outline-0 border-0"
/>
</div>
</FormControl>

<FormMessage className="text-red-500" />
</FormItem>
)}
/>

<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel className="text-gray-300 font-bold">
Email Address
</FormLabel>
<FormControl>
<div className="flex gap-2 items-center border-2 border-neutral-700 rounded-md px-4">
<Mail className="size-4" />
<Input
placeholder="[email protected]"
{...field}
className="outline-0 border-0"
/>
</div>
</FormControl>

<FormMessage className="text-red-500" />
</FormItem>
)}
/>

<FormField
control={form.control}
name="message"
render={({ field }) => (
<FormItem>
<FormLabel className="text-gray-300 font-bold">
Message
</FormLabel>
<FormControl>
<Textarea
placeholder="Hello, i want to connect with you guys for promotion ."
{...field}
className="outline-0 border-2 border-neutral-700 resize-none h-44 no-scrollbar"
/>
</FormControl>

<FormMessage className="text-red-500" />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>

<div className="mt-8 flex flex-wrap gap-4">
<div className="flex gap-2 items-center text-gray-400 text-sm">
<PhoneCall className="size-4" />
<p>+1 (800) 123 XX21</p>
</div>

<div className="flex gap-2 items-center text-gray-400 text-sm">
<BiSupport className="size-4" />
<p>[email protected]</p>
</div>

<div className="flex gap-2 items-center text-gray-400 text-sm">
<Mail className="size-4" />
<p>[email protected]</p>
</div>
</div>

<div className="sm:hidden justify-center mt-8 flex flex-wrap gap-4">
{socialLinks.map((e, i) => {
return (
<Link href={e.link} key={i}>
<e.icon className=" size-4" />
</Link>
);
})}
</div>
</div>
);
}
2 changes: 1 addition & 1 deletion components/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React from "react";
import Link from "next/link";
import { FaDiscord, FaInstagram, FaLinkedin, FaYoutube } from "react-icons/fa";

const socialLinks = [
export const socialLinks = [
{
title: "instagram",
icon: FaInstagram,
Expand Down
Loading

0 comments on commit 59e7873

Please sign in to comment.