Add form on contacts page

This commit is contained in:
ariari04 2024-08-31 10:41:26 +06:00
parent 77ae883510
commit 7eedb5ec39
2 changed files with 106 additions and 6 deletions

View File

@ -1,14 +1,16 @@
import { Container, Title } from "@/shared/ui";
import Img from "./assets/Container (1).png";
import Image from "next/image";
// import ContactForm from "@/widgets/forms/ContactForm";
export default function Contacts() {
return (
<section className="bg-[#FAFCFF]">
<Container className="pt-[111px]">
<Image src={Img} alt="map" />
<section className="flex items-center justify-between mb-[152px]">
<Container className="py-[100px] ">
<iframe
className="w-full h-[403px] object-cover"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d365.45703047807825!2d74.58569311654689!3d42.88009923942027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9b187c8ff21%3A0xa3266b2f825613d5!2sTransparency%20International%20Kyrgyzstan!5e0!3m2!1sru!2skg!4v1716976752985!5m2!1sru!2skg"
></iframe>
<section className="flex items-center justify-between mb-[152px] mt-[64px]">
<div className="max-w-[384px] max-h-[106px] flex flex-col items-center px-7">
<Title text="Адрес" className="font-extrabold mb-2" />
<p className="text-grey-text">
@ -25,6 +27,104 @@ export default function Contacts() {
</div>
</section>
{/* <ContactForm /> */}
<form className="w-[480px] my-0 mx-auto">
<div className="flex items-center flex-col mt-[96px] mb-[96px]">
<h1 className="text-gray-900 text-[36px]">Мы на связи</h1>
<div className="flex flex-col items-center gap-6 mt-[64px]">
<div className="flex gap-8 w-full">
<div className="w-[224px] flex flex-col">
<label htmlFor="firstName" className="mb-[6px]">
Имя
</label>
<input
type="text"
name="firstName"
className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
placeholder="Имя"
id="firstName"
required
/>
</div>
<div className="w-[224px] flex flex-col">
<label htmlFor="lastName" className="mb-[6px]">
Фамилия
</label>
<input
type="text"
name="lastName"
className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
placeholder="Фамилия"
id="lastName"
required
/>
</div>
</div>
<div className="w-full">
<label htmlFor="email" className="mb-[6px]">
Email
</label>
<input
type="text"
name="email"
placeholder="user@gmail.com"
className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
id="email"
/>
</div>
<div className="w-full">
<label htmlFor="phoneNumber" className="mb-[6px]">
Номер телефона
</label>
<input
type="text"
name="phoneNumber"
className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
placeholder="+996"
id="phoneNumber"
required
/>
</div>
<div className="w-full">
<label htmlFor="message" className="mb-[6px]">
Сообщение
</label>
<textarea
className="h-[120px] resize-none w-full bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
id="message"
name="message"
required
></textarea>
</div>
<div className="w-full">
<input
className="border-none"
type="checkbox"
id="consentCheckbox"
name="consent"
required
/>
<label
htmlFor="consentCheckbox"
className="text-[#667085] ml-[10px]"
>
Я согласен (-на) на обработку моих личных данных
</label>
</div>
<div className="w-full">
<button
type="submit"
className="bg-blue text-white w-full h-[48px] rounded-md "
>
Отправить сообщение
</button>
</div>
</div>
</div>
</form>
</Container>
</section>
);

View File

@ -4,7 +4,7 @@ import React from "react";
const Tenders = () => {
return (
<div className="bg-[#E4F1FB]">
<div className="bg-[#FAFCFF]">
<Container>
<Title
text="Тендеры"