inmake/estate-landing-page
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2023-04-19 19:23:32 +05:00
parent 784f57966a
commit 6ff2629b80
10 changed files with 248 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package.json
+1
View File
@@ -11,6 +11,7 @@
"dependencies": {
"@react-three/drei": "^9.62.2",
"@react-three/fiber": "^8.12.0",
"@react-three/postprocessing": "^2.7.1",
"framer-motion": "^10.11.6",
"ky": "^0.33.3",
"react": "^18.2.0",
client/src/App.tsx
+107 -70
View File
@@ -2,7 +2,7 @@ import "./App.css";
import { Canvas } from "@react-three/fiber";
import { FormEvent, Suspense, useEffect, useRef, useState } from "react";
import PieChart from "./components/PieChart/PieChart";
import { Model } from "./components/govno";
import { Model } from "./components/VRHemlet";
import Calc from "./components/Calc";
import Slider from "./components/Slider/Slider";
import Map from "./components/Map";
@@ -10,6 +10,7 @@ import { motion } from "framer-motion";
import InputMask from "react-input-mask";
import api from "./utils/api";
import { OrbitControls, PerspectiveCamera, Wireframe } from "@react-three/drei";
import ComplexCard from "./components/ComplexCard";
function App() {
const parallaxRef = useRef<HTMLDivElement>(null);
@@ -19,6 +20,9 @@ function App() {
const [company, setCompany] = useState<string>("");
const [phone, setPhone] = useState<string>("");
const [isShowMoreComplexCards, setIsShowMoreComplexCards] =
useState<boolean>(false);
function handleScroll() {
if (parallaxRef.current) {
parallaxRef.current.style.transform = `translateY(${
@@ -179,11 +183,11 @@ function App() {
<ambientLight intensity={0.5} />
<directionalLight color="white" position={[-3, 1, 5]} />
<Model />
<OrbitControls
{/* <OrbitControls
enablePan={true}
enableZoom={true}
enableRotate={true}
/>
/> */}
</Suspense>
</Canvas>
</div>
@@ -204,7 +208,7 @@ function App() {
</div>
</div>
<div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
<div className="space-y-16 my-32">
<div className="space-y-16">
<div className="grid lg:grid-cols-2 gap-6">
<div className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
Анализируем
@@ -420,10 +424,10 @@ function App() {
</div>
</div>
</div>
<div className="relative">
<div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
<div className="lg:grid grid-cols-2 gap-8 items-center">
<div className="space-y-16 my-16">
<div className="relative overflow-hidden" style={{ marginTop: 0 }}>
<div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl ">
<div className="lg:grid grid-cols-2 gap-8 items-center ">
<div className="space-y-16">
<p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
Инструмент продаж поможет вам продавать удаленно
</p>
@@ -459,15 +463,15 @@ function App() {
</i>
</button>
</div>
<div className="lg:block hidden translate-y-20">
<Map />
</div>
</div>
</div>
<div className="">
<Map />
</div>
</div>
<div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
<div className="space-y-16 my-32">
<div className="space-y-16">
<div className="grid lg:grid-cols-2 gap-6">
<div className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
Можем оценить
@@ -495,75 +499,108 @@ function App() {
</div>
<div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
<div className="space-y-8 my-32">
<div className="space-y-16">
<div className="lg:flex flex-col items-center space-y-8">
<p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl lg:w-1/2 text-gradient">
Релевантный опыт
</p>
</div>
<div className="lg:grid grid-cols-4 block">
<div className="col-span-1 text-9xl lg:block hidden">MAP</div>
{/* <div className="col-span-1 text-9xl lg:block hidden">MAP</div> */}
<div className="col-span-3 space-y-4">
<div className="flex sm:flex-row flex-col bg-[#1C1D21] hover:bg-[#2E3038] rounded-xl transition-colors cursor-pointer">
<div className="col-span-1">
<img
src="/images/cards/card_1.jpg"
alt=""
className="sm:w-[264px] sm:h-[160px] w-full rounded-xl"
<ComplexCard
image="/images/cards/card_1.jpg"
name="ЖК «Life Резиденция»"
location="Россия, Тюмень"
/>
<ComplexCard
image={"/images/cards/card_2.jpg"}
name="МФК «Re:volution towers»"
location="Россия, Екатеринбург"
/>
<ComplexCard
image={"/images/cards/card_3.jpg"}
name="Iskan Abu Dhabi"
location="ОАЭ, Абу-Даби"
/>
<ComplexCard
image={"/images/cards/card_4.jpg"}
name="ЖК «Авторский квартал Машаров»"
location="Россия, Тюмень"
/>
{isShowMoreComplexCards && (
<>
<ComplexCard
image={"/images/cards/card_5.jpg"}
name="ЖК «Айвазовский»"
location="Россия, Тюмень"
/>
</div>
<div className="xl:col-span-3 col-span-2 flex items-center">
<div className="sm:p-6 p-4 space-y-2">
<p className="font-gilroy 2xl:text-3xl sm:text-2xl text-xl">
ЖК «Авторский квартал Машаров»
</p>
<p className="2xl:text-lg sm:text-base text-xs text-[#73788C]">
Россия, Тюмень
</p>
</div>
</div>
</div>
<div className="flex sm:flex-row flex-col bg-[#1C1D21] hover:bg-[#2E3038] rounded-xl transition-colors cursor-pointer">
<div className="col-span-1">
<img
src="/images/cards/card_1.jpg"
alt=""
className="sm:w-[264px] sm:h-[160px] w-full rounded-xl"
<ComplexCard
image={"/images/cards/card_6.jpg"}
name="ЖК «Графика»"
location="Россия, Санкт-Петербург"
/>
</div>
<div className="xl:col-span-3 col-span-2 flex items-center">
<div className="sm:p-6 p-4 space-y-2">
<p className="font-gilroy 2xl:text-3xl sm:text-2xl text-xl">
ЖК «Авторский квартал Машаров»
</p>
<p className="2xl:text-lg sm:text-base text-xs text-[#73788C]">
Россия, Тюмень
</p>
</div>
</div>
</div>
<ComplexCard
image={"/images/cards/card_7.jpg"}
name="ЖК «4you»"
location="Россия, Екатеринбург"
/>
<ComplexCard
image={"/images/cards/card_8.jpg"}
name="ЖК «Уральский»"
location="Россия, Екатеринбург"
/>
<ComplexCard
image={"/images/cards/card_9.jpg"}
name="ЖК «Новая Атмосфера»"
location="Россия, Брянск"
/>
<ComplexCard
image={"/images/cards/card_10.jpg"}
name="ЖК «Тринити»"
location="Россия, Екатеринбург"
/>
<ComplexCard
image={"/images/cards/card_11.jpg"}
name="ЖК «Дом на Опалихинской»"
location="Россия, Екатеринбург"
/>
<ComplexCard
image={"/images/cards/card_12.jpg"}
name="ЖК «Свой Круг»"
location="Россия, Тюмень"
/>
<ComplexCard
image={"/images/cards/card_13.jpg"}
name="ЖК «Александровский»"
location="Россия, Нижний Тагил"
/>
</>
)}
{/* <div className=" "> */}
<button className="2xl:text-xl flex items-center justify-center space-x-2 opacity-95 hover:opacity-100 transition-opacity lg:w-auto w-full">
<span>Показать больше</span>
<svg
width="29"
height="29"
viewBox="0 0 29 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{!isShowMoreComplexCards && (
<button
className="2xl:text-xl flex items-center justify-center space-x-2 opacity-95 hover:opacity-100 transition-opacity lg:w-auto w-full"
onClick={() => setIsShowMoreComplexCards(true)}
>
<path
d="M22.8 10.8L14.4 19.2L6.00001 10.8"
stroke="#F2F2F2"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
{/* </div> */}
<span>Показать больше</span>
<svg
width="29"
height="29"
viewBox="0 0 29 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.8 10.8L14.4 19.2L6.00001 10.8"
stroke="#F2F2F2"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
)}
</div>
</div>
</div>
client/src/components/Calc.tsx
+43 -173
View File
@@ -2,6 +2,7 @@ import React, { ChangeEvent, useEffect, useState } from "react";
import SearchableSelect from "./SearchableSelect";
import RangeSlider from "./RangeSlider";
import ky from "ky";
import { motion } from "framer-motion";
function Calc() {
const [regions, setRegions] = useState<any[]>([]);
@@ -16,6 +17,8 @@ function Calc() {
const [profitPerMonth, setProfitPerMonth] = useState<number>();
const [implementationTime, setImplementationTime] = useState<number>();
const [avgAreaInComplex, setAvgAreaInComplex] = useState<number>(10000);
const [implementationTimeCase, setImplementationTimeCase] =
useState<string>("");
async function getRegions() {
const result: [] = await ky.get("http://localhost:3000/regions").json();
@@ -76,170 +79,25 @@ function Calc() {
averagePrice,
]);
useEffect(() => {
if (implementationTime) {
const lastIndex = Number(implementationTime.toString().at(-1));
if (lastIndex === 1) {
setImplementationTimeCase("месяц");
} else if (lastIndex > 1 && lastIndex < 5) {
setImplementationTimeCase("месяца");
} else if ((lastIndex > 4 && lastIndex < 15) || lastIndex === 0) {
setImplementationTimeCase("месяцев");
}
}
}, [implementationTime]);
useEffect(() => {
getRegions();
}, []);
return (
// <div className="grid grid-cols-4 gap-8">
// <div className="col-span-1 space-y-10">
// <div className="space-y-4">
// <div className="space-y-2">
// <label htmlFor="" className="text-[#C5C7CE]">
// Регион
// </label>
// <SearchableSelect
// placeholder={"Выберите город"}
// options={regions}
// handleSelect={(option) => selectRegion(option.id)}
// />
// </div>
// <p className="text-sm text-[#73788C]">
// Данные будут установлены в соответсвии со средними показателями по
// выбранному региону
// </p>
// </div>
// <div className="space-y-2">
// <label htmlFor="" className="text-[#C5C7CE]">
// Очных консультаций в месяц
// </label>
// <input
// type="text"
// pattern="^[0-9]+$"
// className="px-5 py-3.5 border border-transparent outline-none focus:border-[#BC75FF] transition-colors rounded w-full bg-[#23242A]"
// value={consultsPerMonth}
// onChange={handleChangeConsultsPerMonth}
// />
// </div>
// <div className="space-y-2">
// <label htmlFor="" className="text-[#C5C7CE]">
// Площадь жилья в комплексе (м2)
// </label>
// <input
// type="text"
// pattern="^[0-9]+$"
// className="px-5 py-3.5 border border-transparent outline-none focus:border-[#BC75FF] transition-colors rounded w-full bg-[#23242A]"
// value={totalHousingAreaInComplex}
// onChange={handleChangeTotalArea}
// />
// </div>
// <div className="space-y-2">
// <label htmlFor="" className="text-[#C5C7CE]">
// Средняя площадь квартиры
// </label>
// <RangeSlider
// min={1}
// max={100}
// defaultValue={averageApartmentArea}
// onChange={(value) => setAverageApartmentArea(value)}
// />
// </div>
// <div className="space-y-2">
// <label htmlFor="" className="text-[#C5C7CE]">
// Средняя стоимость 1 м2
// </label>
// <RangeSlider
// min={30000}
// max={300000}
// defaultValue={averagePrice}
// onChange={(value) => setAveragePrice(value)}
// />
// </div>
// </div>
// <div className="col-span-3">
// <div className="bg-[#1C1D21] h-full rounded-lg p-12 space-y-12">
// <div className="space-y-8">
// <div className="space-y-2">
// <p className="text-[#C5C7CE]">
// Консультации, закончившиеся бронью
// </p>
// <div className="text-2xl flex justify-between font-gilroy">
// <span>{consultsInBooking}</span>
// <span>{!isEnabled ? "30" : "45"}%</span>
// </div>
// <div className="h-8 bg-[#2E3038] rounded">
// <div
// className={[
// "h-full bg-[#798FFF] rounded transition-all",
// !isEnabled ? "w-[30%]" : "w-[45%]",
// ].join(" ")}
// ></div>
// </div>
// <div className="flex justify-between text-sm text-[#73788C]">
// <span>0</span>
// <span>50</span>
// <span>100</span>
// </div>
// </div>
// <div className="space-y-2">
// <p className="text-[#C5C7CE]">Продажи</p>
// <div className="text-2xl flex justify-between font-gilroy">
// <span>{consultsInSales}</span>
// <span>{!isEnabled ? "10" : "20"}%</span>
// </div>
// <div className="h-8 bg-[#2E3038] rounded">
// <div
// className={[
// "h-full bg-[#798FFF] rounded transition-all",
// !isEnabled ? "w-[10%]" : "w-[20%]",
// ].join(" ")}
// ></div>
// </div>
// <div className="flex justify-between text-sm text-[#73788C]">
// <span>0</span>
// <span>50</span>
// <span>100</span>
// </div>
// </div>
// </div>
// <div className="space-y-8">
// <p className="text-3xl font-gilroy">Результаты расчета</p>
// <div className="flex space-x-8">
// <div className="space-y-4">
// <p className="space-x-2 text-gradient">
// <span className="text-6xl font-gilroy">{implementationTime}</span>
// <span className="text-xl font-bold">месяцев</span>
// </p>
// <p>
// На{" "}
// <span className="text-gradient font-bold">
// 12 месяцев
// </span>{" "}
// вы сократили
// <br />
// срок реализации проекта
// </p>
// </div>
// <div className="space-y-4">
// <p className="space-x-2 text-gradient">
// <span className="text-6xl font-gilroy">{profitPerMonth}</span>
// <span className="text-xl font-bold">млн. руб.</span>
// </p>
// <p>
// На{" "}
// <span className="text-gradient font-bold">
// 37,8 млн. руб.
// </span>{" "}
// в месяц вы заработали больше
// <br /> с помощью нашего инструмента продаж
// </p>
// </div>
// </div>
// </div>
// <button
// className="px-8 py-4 rounded-full bg-[#373943]"
// onClick={toggleIsEnabled}
// >
// {!isEnabled ? "Включить" : "Отключить"} инструмент
// </button>
// </div>
// </div>
// </div>
<div className="lg:grid xl:grid-cols-3 lg:grid-cols-2 2xl:gap-12 lg:gap-6 lg:space-y-0 space-y-12">
<div className="space-y-4">
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
@@ -256,7 +114,9 @@ function Calc() {
<div className="bg-[#1C1D21] 2xl:p-6 p-4 space-y-4 rounded">
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
<p className="2xl:text-base text-sm text-[#C5C7CE]">
Средняя площадь жилья в комплексе
Средняя площадь
<br />
жилья в комплексе
</p>
<p className="space-x-2">
<span className="text-5xl font-gilroy">{avgAreaInComplex}</span>
@@ -266,7 +126,9 @@ function Calc() {
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
<p className="2xl:text-base text-sm text-[#C5C7CE]">
Средняя площадь квартиры
Средняя площадь
<br />
квартиры
</p>
<p className="space-x-2">
<span className="text-5xl font-gilroy">
@@ -278,7 +140,9 @@ function Calc() {
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
<p className="2xl:text-base text-sm text-[#C5C7CE]">
Средняя стоимость одного м2
Средняя стоимость
<br />
одного м2
</p>
<p className="space-x-2">
<span className="text-5xl font-gilroy">{averagePrice}</span>
@@ -369,36 +233,42 @@ function Calc() {
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
Результаты расчета
</p>
<div className="xl:space-y-4 xl:block grid grid-cols-2">
<div className="space-y-2">
<p className="text-lg text-[#C5C7CE] pb-4">Срок реализации</p>
<div className="xl:space-y-4 xl:block grid lg:grid-cols-2 gap-4">
<div className="space-y-2 lg:border-t-2 border-[#2E3038] pt-4">
<p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
Срок реализации
</p>
<p
className={[
"text-7xl font-gilroy transition-all",
"2xl:text-7xl sm:text-6xl text-5xl font-gilroy transition-all",
isEnabled && "text-gradient",
].join(" ")}
>
{implementationTime}
</p>
<p className="text-xl text-[#C5C7CE]">месяцa</p>
<p className="2xl:text-xl text-[#C5C7CE]">
{implementationTimeCase}
</p>
</div>
<div className="space-y-2">
<p className="text-lg text-[#C5C7CE] pb-4">Месячный доход</p>
<div className="space-y-2 border-t-2 border-[#2E3038] pt-4">
<p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
Месячный доход
</p>
<p
className={[
"text-7xl font-gilroy transition-all",
"2xl:text-7xl sm:text-6xl text-5xl font-gilroy transition-all",
isEnabled && "text-gradient",
].join(" ")}
>
{profitPerMonth}
</p>
<p className="text-xl text-[#C5C7CE]">млн. р.</p>
<p className="2xl:text-xl text-[#C5C7CE]">млн. р.</p>
</div>
</div>
<div className="xl:w-auto w-1/2">
<div className="xl:w-auto md:w-1/2 w-full">
<button
className={[
"w-full text-xl py-4 px-8 rounded-full xl:mt-0 mt-10",
"w-full 2xl:text-xl py-4 px-8 rounded-full xl:mt-0 mt-10",
!isEnabled ? "bg-gradient" : "bg-[#23242A]",
].join(" ")}
onClick={() => setIsEnabled(!isEnabled)}
client/src/components/ComplexCard.tsx
+32
View File
@@ -0,0 +1,32 @@
import React from "react";
interface IComplexCard {
image: string;
name: string;
location: string;
}
function ComplexCard({ image, name, location }: IComplexCard) {
return (
// <div className="flex sm:flex-row flex-col bg-[#1C1D21] hover:bg-[#2E3038] rounded-xl transition-colors cursor-pointer">
<div className="flex sm:flex-row flex-col bg-[#1C1D21] rounded-xl transition-colors">
<div className="col-span-1">
<img
src={image}
alt=""
className="sm:w-[264px] sm:h-[160px] min-w-[264px] w-full rounded-xl"
/>
</div>
<div className="xl:col-span-3 col-span-2 flex items-center">
<div className="sm:p-6 p-4 space-y-2">
<p className="font-gilroy 2xl:text-3xl sm:text-2xl text-xl">{name}</p>
<p className="2xl:text-lg sm:text-base text-xs text-[#73788C]">
{location}
</p>
</div>
</div>
</div>
);
}
export default ComplexCard;
client/src/components/Map.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ function Map() {
ref={pathRef}
width="1236"
height="1124"
viewBox="0 0 1236 1124"
// viewBox="0 0 1236 1124"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
client/src/components/VRHemlet.tsx
+1 -2
View File
@@ -29,10 +29,9 @@ export function Model(props: any) {
name="SM_VRHelmet"
geometry={nodes.SM_VRHelmet.geometry}
material={materials.M_Plastic_White}
>
{/* <meshBasicMaterial transparent={true} opacity={0.5} forceSinglePass={true} /> */}
<Wireframe />
{/* <Wireframe /> */}
</mesh>
</group>
</group>
client/yarn.lock
+21 -1
View File
@@ -265,6 +265,16 @@
suspend-react "^0.0.8"
zustand "^3.7.1"
"@react-three/postprocessing@^2.7.1":
version "2.7.1"
resolved "https://registry.yarnpkg.com/@react-three/postprocessing/-/postprocessing-2.7.1.tgz#b042c974266ff3ce00139766fdd43b39aeaa65ae"
integrity sha512-FhmQB7INWKaecxq8u155cpbPWM2AM9SDazGmHMsW1r0IZy5aqsI1IWCxA+jJD1V7p6y0zXabssEqZ7JaANkiig==
dependencies:
postprocessing "^6.30.1"
react-merge-refs "^1.1.0"
screen-space-reflections "2.5.0"
three-stdlib "^2.8.11"
"@swc/core-darwin-arm64@1.3.44":
version "1.3.44"
resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.44.tgz#e0f5eb9d962c4e6192531c2e3b8c11f55faf1b89"
@@ -1047,6 +1057,11 @@ postcss@^8.0.9, postcss@^8.4.21:
picocolors "^1.0.0"
source-map-js "^1.0.2"
postprocessing@^6.30.1:
version "6.30.2"
resolved "https://registry.yarnpkg.com/postprocessing/-/postprocessing-6.30.2.tgz#8cfb5561bfce63c983fae5d2cd8efa5bbd04fe6d"
integrity sha512-Vt77s5DkHyUOV4bmk10J46DHJLglBfIo9ARPI0o62UIAx9omANfuPJTKiLVoYlC1ApkV9y3ldBDipF3IldB7YA==
potpack@^1.0.1:
version "1.0.2"
resolved "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz"
@@ -1229,6 +1244,11 @@ scheduler@^0.23.0:
dependencies:
loose-envify "^1.1.0"
screen-space-reflections@2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/screen-space-reflections/-/screen-space-reflections-2.5.0.tgz#2a6ea982da96f9c35f34a361b2555439f9fbb1f6"
integrity sha512-fWSDMhJS0xwD3LTxRRch7Lb9NzxsR66sCmtDmAA7i+OGnghUrBBsrha85ng7StnCBaLq/BKmZ97dLxWd1XgWdQ==
source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@@ -1327,7 +1347,7 @@ three-mesh-bvh@^0.5.23:
resolved "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.5.23.tgz"
integrity sha512-nyk+MskdyDgECqkxdv57UjazqqhrMi+Al9PxJN6yFtx1CTW4r0eCQ27FtyYKY5gCIWhxjtNfWYDPVy8lzx6LkA==
three-stdlib@^2.21.8:
three-stdlib@^2.21.8, three-stdlib@^2.8.11:
version "2.21.8"
resolved "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.21.8.tgz"
integrity sha512-kqisiKvO4mSy59v5vWqBQSH8famLxp7Z51LxpMJI9GwDxqODaW02rhIwmjYDEzZWNFpjZpoDHVGbdpeHf8h3SA==
server/app.js
+35 -1
View File
@@ -3,6 +3,7 @@ import cors from "cors";
import ky from "ky";
import mongoose from "mongoose";
import Mail from "./models/Mail.js";
import nodemailer from "nodemailer";
const app = express();
const port = 3000;
@@ -66,9 +67,42 @@ app.get("/region/:id", async (req, res) => {
});
app.post("/mail", async (req, res) => {
console.log(req.body);
const { fullname, email, company, phone } = req.body;
await Mail.create(req.body);
// mx0.graff.tech
let testAccount = await nodemailer.createTestAccount();
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: "mail.netangels.ru",
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: "test@graff.tech", // generated ethereal user
pass: "ZmL0pKiDFWUyCDMq", // generated ethereal password
},
});
// send mail with defined transport object
let info = await transporter.sendMail({
from: `${email}`, // sender address
to: "info@graff.tech", // list of receivers
subject: fullname, // Subject line
text: `${company} ${phone}`, // plain text body
html: `${company} ${phone}`, // html body
});
console.log(info);
// console.log("Message sent: %s", info.messageId);
// Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>
// Preview only available when sending through an Ethereal account
// console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
// Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
res.send({ ok: 1 });
});
server/package.json
+2 -1
View File
@@ -11,7 +11,8 @@
"cors": "^2.8.5",
"express": "^4.18.2",
"ky": "^0.33.3",
"mongoose": "^7.0.4"
"mongoose": "^7.0.4",
"nodemailer": "^6.9.1"
},
"devDependencies": {
"nodemon": "^2.0.22"
server/yarn.lock
+5
View File
@@ -498,6 +498,11 @@ negotiator@0.6.3:
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
nodemailer@^6.9.1:
version "6.9.1"
resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.1.tgz#8249d928a43ed85fec17b13d2870c8f758a126ed"
integrity sha512-qHw7dOiU5UKNnQpXktdgQ1d3OFgRAekuvbJLcdG5dnEo/GtcTHRYM7+UfJARdOFU9WUQO8OiIamgWPmiSFHYAA==
nodemon@^2.0.22:
version "2.0.22"
resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.22.tgz#182c45c3a78da486f673d6c1702e00728daf5258"