gosha forms personalization
parent
2da5a6928d
commit
378ed477ab
Binary file not shown.
|
After Width: | Height: | Size: 727 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.35921 13.9603L12.3286 7.08507C12.6274 6.58588 13.1105 6.22418 13.6737 6.07804C14.2368 5.93191 14.8349 6.01304 15.3387 6.30394C15.8426 6.59484 16.2118 7.07218 16.3669 7.63295C16.5219 8.19373 16.4502 8.79296 16.1673 9.30135L10.9598 18.3353C10.7164 18.769 10.3894 19.15 9.99767 19.4562C9.60595 19.7625 9.15732 19.988 8.6778 20.1196C8.19828 20.2512 7.69741 20.2863 7.20422 20.2229C6.71103 20.1595 6.23533 19.9989 5.8047 19.7502C5.37406 19.5016 4.99707 19.17 4.69556 18.7746C4.39405 18.3791 4.17402 17.9278 4.04824 17.4467C3.92246 16.9657 3.89342 16.4644 3.96281 15.972C4.0322 15.4796 4.19863 15.0059 4.45246 14.5783L9.70129 5.4871C10.4124 4.29553 11.5639 3.43167 12.9068 3.08223C14.2497 2.73279 15.6762 2.92585 16.8779 3.61966C18.0797 4.31348 18.9601 5.45233 19.3289 6.79005C19.6978 8.12777 19.5254 9.55691 18.849 10.7685L13.9442 19.264" stroke="#92E727" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -0,0 +1,192 @@
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
Input,
|
||||||
|
Modal,
|
||||||
|
ModalContent,
|
||||||
|
ModalHeader,
|
||||||
|
ModalBody,
|
||||||
|
ModalFooter,
|
||||||
|
useDisclosure,
|
||||||
|
Link
|
||||||
|
} from "@nextui-org/react";
|
||||||
|
import ChevronBannerIcon from "@/../public/banner_arr_btn.svg.svg"
|
||||||
|
import ClampIcon from "../../../public/clamp.svg"
|
||||||
|
|
||||||
|
|
||||||
|
const FormCustomization = () => {
|
||||||
|
const {isOpen, onOpen, onOpenChange} = useDisclosure();
|
||||||
|
return (
|
||||||
|
<form className="bg-gray-4 rounded-[30px] p-20 text-white flex flex-col">
|
||||||
|
<h2><i>Cоздать продукт «под себя»</i></h2>
|
||||||
|
<p>Опишите нам задачи для создания вашего продукта</p>
|
||||||
|
<div className="mb-5">
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="ФИО"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Город"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-wrap items-end md:flex-nowrap md:mb-0 gap-4">
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="email"
|
||||||
|
label="E-mail"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="tel"
|
||||||
|
label="Телефон"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Описание задачи (тестовое)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pt-5 pb-5">
|
||||||
|
<div className="flex flex-wrap flex-row gap-2">
|
||||||
|
<ClampIcon/>
|
||||||
|
<div className="flex flex-wrap flex-col font-semibold">
|
||||||
|
<Link
|
||||||
|
isExternal
|
||||||
|
onPress={onOpen}
|
||||||
|
color="primary"
|
||||||
|
underline={"hover"}
|
||||||
|
>
|
||||||
|
Добавить документ
|
||||||
|
</Link>
|
||||||
|
<span className="text-sm font-light">
|
||||||
|
Общий объём файлов не более 5 Мб
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
placement="bottom-center"
|
||||||
|
>
|
||||||
|
<ModalContent className="bg-black-2">
|
||||||
|
{(onClose) => (
|
||||||
|
<>
|
||||||
|
<ModalHeader className="flex flex-col gap-1 text-white">Прикрепите файл</ModalHeader>
|
||||||
|
<ModalBody>
|
||||||
|
<Input
|
||||||
|
type="file"
|
||||||
|
/>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<Button color="danger" variant="flat" onPress={onClose}>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
<Button color="primary" onPress={onClose}>
|
||||||
|
Прикрепить
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap flex-row justify-between gap-5">
|
||||||
|
<Checkbox defaultSelected color={"primary"}
|
||||||
|
className={"[&_span:last-child]:!text-white [&_span:last-child]:text-subtitle-5 [&_span:last-child]:leading-normal"}>Нажимая
|
||||||
|
кнопку «Отправить отклик», я даю согласие на
|
||||||
|
<Link className={"text-primary text-sm"}
|
||||||
|
underline={"hover"}
|
||||||
|
href={"https://tehnohimgrupp.ru/upload/Согласие на ОПД Технохим.pdf"}>
|
||||||
|
обработку моих персональных данных
|
||||||
|
</Link>
|
||||||
|
</Checkbox>
|
||||||
|
<Button className="text-black text-xl font-extrabold h-[70px] uppercase flex flex-wrap gap-10"
|
||||||
|
color={"primary"} endContent={<ChevronBannerIcon className={"stroke-[3px] stroke-black"}/>}><i>Отправить
|
||||||
|
отклик</i></Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FormCustomization
|
||||||
|
|
@ -0,0 +1,247 @@
|
||||||
|
import {Button, Checkbox, Input, RadioGroup, Radio,Link} from "@nextui-org/react";
|
||||||
|
|
||||||
|
import ChevronBannerIcon from "@/../public/banner_arr_btn.svg.svg"
|
||||||
|
|
||||||
|
|
||||||
|
const FormPersonalization = () => {
|
||||||
|
return (
|
||||||
|
<form className="bg-gray-4 rounded-[30px] p-20 text-white flex flex-col">
|
||||||
|
<h2><i>Обратиться в Научно-Технический Центр (НТЦ) ООО «ТД Технохим Групп»</i></h2>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Полное название компании"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Юридический адрес"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-wrap items-end md:flex-nowrap md:mb-0 gap-4">
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="ИНН"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Почтовый адрес"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Ваши ФИО"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Ваша должность, звание"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="text"
|
||||||
|
label="Вид деятельности"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="tel"
|
||||||
|
label="Ваш рабочий телефон"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: [
|
||||||
|
"bg-transparent",
|
||||||
|
"h-[65px]",
|
||||||
|
"border-gray-3",
|
||||||
|
],
|
||||||
|
label: [
|
||||||
|
"group[data-filled-within=true] group-data-[filled-within=true]:-translate-y-[60px] group-data-[filled-within=true]:text-[#FFFFFF]",
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
variant={"bordered"}
|
||||||
|
color={"primary"}
|
||||||
|
isRequired
|
||||||
|
errorMessage="Поле обязательно для заполнения"
|
||||||
|
labelPlacement="outside"
|
||||||
|
type="email"
|
||||||
|
label="Ваш рабочий Email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap flex-col gap-5 mb-10 mt-10">
|
||||||
|
<RadioGroup
|
||||||
|
color={"primary"}
|
||||||
|
>
|
||||||
|
<Radio
|
||||||
|
classNames={{
|
||||||
|
label: [
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
value="niokr">
|
||||||
|
Запрос на сотрудничество (НИОКР)
|
||||||
|
</Radio>
|
||||||
|
<Radio
|
||||||
|
classNames={{
|
||||||
|
label: [
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
value="edu">
|
||||||
|
Обучение
|
||||||
|
</Radio>
|
||||||
|
<Radio
|
||||||
|
classNames={{
|
||||||
|
label: [
|
||||||
|
"text-white",
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
value="another">
|
||||||
|
Иные вопросы
|
||||||
|
</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap flex-row justify-between gap-5">
|
||||||
|
<Checkbox defaultSelected color={"primary"}
|
||||||
|
className={"[&_span:last-child]:!text-white [&_span:last-child]:text-subtitle-5 [&_span:last-child]:leading-normal"}>Нажимая кнопку «Оформить заказ», я даю согласие на
|
||||||
|
<Link className={"text-primary text-sm"}
|
||||||
|
underline={"hover"}
|
||||||
|
href={"https://tehnohimgrupp.ru/upload/Согласие на ОПД Технохим.pdf"}>
|
||||||
|
обработку моих персональных данных
|
||||||
|
</Link>
|
||||||
|
</Checkbox>
|
||||||
|
<Button className="text-black text-xl font-extrabold h-[70px] uppercase flex flex-wrap gap-10"
|
||||||
|
color={"primary"} endContent={<ChevronBannerIcon className={"stroke-[3px] stroke-black"}/>}><i>Отправить
|
||||||
|
вопрос</i></Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FormPersonalization
|
||||||
Loading…
Reference in New Issue