contact page
This commit is contained in:
VividTruthKeeper
parent
4f0c52a977
commit
e2d60dc631
|
|
@ -15,6 +15,7 @@ import Rating from "./pages/Rating";
|
|||
import Profile from "./pages/Profile";
|
||||
import EventItem from "./pages/EventItem";
|
||||
import Structure from "./pages/Structure";
|
||||
import Contacts from "./pages/Contact";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
|
|
@ -28,6 +29,7 @@ const App = () => {
|
|||
<Route path="/profile" element={<Profile />} />
|
||||
<Route path="/event" element={<EventItem />} />
|
||||
<Route path="/structure" element={<Structure />} />
|
||||
<Route path="/contact" element={<Contacts />} />
|
||||
</Routes>
|
||||
</div>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
// Modules
|
||||
|
||||
// Images
|
||||
import board from "../../images/board.jpg";
|
||||
|
||||
// Icons
|
||||
import forward from "../../icons/arrow-forward.svg";
|
||||
import email from "../../icons/email-black.svg";
|
||||
import phone from "../../icons/phone-gray.svg";
|
||||
import pin from "../../icons/pin.svg";
|
||||
import fb from "../../icons/facebook-gray.svg";
|
||||
import yt from "../../icons/youtube-gray.svg";
|
||||
import ig from "../../icons/instagram-grey.svg";
|
||||
import twitter from "../../icons/twitter-gray.svg";
|
||||
|
||||
const ContactForm = () => {
|
||||
return (
|
||||
<form
|
||||
className="contact-form"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<div className="contact-form-left">
|
||||
<div className="contact-img">
|
||||
<img src={board} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-form-right">
|
||||
<div className="contact-form-right-top">
|
||||
<div className="contact-title">
|
||||
<div className="contact-title-inner">
|
||||
<div className="contact-icon">
|
||||
<img src={forward} alt="" />
|
||||
</div>
|
||||
<h3>Свяжитесь с нами</h3>
|
||||
</div>
|
||||
<div className="contact-icon">
|
||||
<img src={email} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-form-right-middle">
|
||||
<div className="contact-form-link">
|
||||
<a
|
||||
className="contact-form-link-left"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="tel:+99312468787"
|
||||
>
|
||||
<div className="link-icon">
|
||||
<img src={phone} alt="" />
|
||||
</div>
|
||||
<span>+993 12 46-87-87</span>
|
||||
</a>
|
||||
<div className="contact-form-link-right">
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={ig} alt="" />
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={twitter} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-form-link">
|
||||
<div className="contact-form-link-left">
|
||||
<div className="link-icon">
|
||||
<img src={pin} alt="" />
|
||||
</div>
|
||||
<span>Atatürk köçesi 80, Aşgabat 744000, Туркменистан</span>
|
||||
</div>
|
||||
<div className="contact-form-link-right">
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={yt} alt="" />
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={fb} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-form-right-bottom">
|
||||
<div className="input-blocks-wrapper">
|
||||
<div className="input-block">
|
||||
<label htmlFor="name">Имя</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Аман Аманов"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="email">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="aman@gmail.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="text">Чем мы можем помочь вам?</label>
|
||||
<textarea
|
||||
name="text"
|
||||
id="text"
|
||||
rows={15}
|
||||
placeholder="Расскажите нам о вашей проблеме..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button">Отправить сообщение</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
|
|
@ -38,8 +38,12 @@ const Nav = () => {
|
|||
>
|
||||
<Link to={"/rating"}>Рейтинг</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/"}>Контакты</Link>
|
||||
<li
|
||||
className={
|
||||
location.pathname.includes("contact") ? "active" : ""
|
||||
}
|
||||
>
|
||||
<Link to={"/contact"}>Контакты</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.33317 18.6667H28.0998L22.0498 25.9333C21.9098 26.1019 21.8042 26.2963 21.7393 26.5056C21.6744 26.7149 21.6513 26.935 21.6715 27.1532C21.7121 27.5939 21.9261 28.0004 22.2665 28.2833C22.6069 28.5662 23.0457 28.7023 23.4864 28.6617C23.9271 28.6211 24.3336 28.407 24.6165 28.0667L32.9498 18.0667C33.0059 17.9871 33.056 17.9036 33.0998 17.8167C33.0998 17.7333 33.1832 17.6833 33.2165 17.6C33.292 17.4089 33.3316 17.2055 33.3332 17C33.3316 16.7945 33.292 16.5911 33.2165 16.4C33.2165 16.3167 33.1332 16.2667 33.0998 16.1833C33.056 16.0964 33.0059 16.0129 32.9498 15.9333L24.6165 5.93333C24.4598 5.74519 24.2636 5.59389 24.0418 5.49019C23.82 5.38649 23.578 5.33293 23.3332 5.33333C22.9437 5.33257 22.5664 5.4682 22.2665 5.71666C22.0977 5.85658 21.9582 6.02841 21.856 6.22233C21.7537 6.41624 21.6907 6.62842 21.6706 6.84671C21.6505 7.06501 21.6736 7.28513 21.7387 7.49447C21.8038 7.70381 21.9095 7.89825 22.0498 8.06666L28.0998 15.3333H8.33317C7.89114 15.3333 7.46722 15.5089 7.15466 15.8215C6.8421 16.134 6.6665 16.558 6.6665 17C6.6665 17.442 6.8421 17.8659 7.15466 18.1785C7.46722 18.4911 7.89114 18.6667 8.33317 18.6667Z" fill="#1C1717"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M31.729 6.66685H8.57488C7.25898 6.66685 5.99698 7.19364 5.0665 8.13132C4.13602 9.069 3.61328 10.3408 3.61328 11.6669V28.3335C3.61328 29.6596 4.13602 30.9314 5.0665 31.8691C5.99698 32.8067 7.25898 33.3335 8.57488 33.3335H31.729C33.0449 33.3335 34.3069 32.8067 35.2374 31.8691C36.1679 30.9314 36.6906 29.6596 36.6906 28.3335V11.6669C36.6906 10.3408 36.1679 9.069 35.2374 8.13132C34.3069 7.19364 33.0449 6.66685 31.729 6.66685ZM30.6209 10.0002L20.1519 17.9169L9.68297 10.0002H30.6209ZM31.729 30.0002H8.57488C8.13625 30.0002 7.71558 29.8246 7.40542 29.512C7.09526 29.1995 6.92101 28.7755 6.92101 28.3335V12.0835L19.1596 21.3335C19.4459 21.5499 19.7941 21.6669 20.1519 21.6669C20.5098 21.6669 20.858 21.5499 21.1443 21.3335L33.3829 12.0835V28.3335C33.3829 28.7755 33.2086 29.1995 32.8985 29.512C32.5883 29.8246 32.1676 30.0002 31.729 30.0002Z" fill="#1C1717"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 968 B |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_131_674)">
|
||||
<path d="M29.5545 15C29.5545 6.97266 23.048 0.46875 15.0175 0.46875C6.98696 0.46875 0.480469 6.97266 0.480469 15C0.480469 22.2527 5.79644 28.2645 12.7461 29.3555V19.2006H9.0532V15H12.7461V11.7984C12.7461 8.15684 14.9149 6.14531 18.2367 6.14531C19.8276 6.14531 21.4911 6.42891 21.4911 6.42891V10.0031H19.6576C17.8522 10.0031 17.2889 11.1234 17.2889 12.2725V15H21.3206L20.6758 19.2006H17.2889V29.3555C24.2385 28.2645 29.5545 22.2527 29.5545 15Z" fill="#7D7D7D"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_131_674">
|
||||
<rect width="30.0119" height="30" fill="white" transform="translate(0.0117188)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 744 B |
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="1920" height="751" viewBox="0 0 1920 751" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_129_662)">
|
||||
<rect width="1920" height="751" fill="#01815E"/>
|
||||
<path d="M1758.38 -61.4384C1931.47 -217.794 2005.42 -261.628 2020.75 -264C2054.9 -246.664 2124.06 -205.093 2127.56 -177.501C2131.94 -143.011 2161.52 -61.4384 2196.03 72.6902C2230.54 206.819 2223.42 175.066 2227.8 282.369C2232.18 389.672 2164.26 730.742 2052.52 753.188C1940.78 775.634 1840.55 783.298 1614.88 753.188C1389.21 723.077 943.342 675.995 879.256 628.366C815.17 580.737 881.447 509.566 983.875 302.625C1086.3 95.6837 1125.19 175.066 1371.13 175.066C1617.07 175.066 1542.03 134.006 1758.38 -61.4384Z" fill="url(#paint0_linear_129_662)" fill-opacity="0.46"/>
|
||||
<path d="M169.616 701.438C-3.47058 857.794 -77.416 901.628 -92.7528 904C-126.896 886.664 -196.057 845.093 -199.563 817.501C-203.945 783.01 -233.523 701.438 -268.031 567.31C-302.539 433.181 -295.418 464.934 -299.8 357.631C-304.182 250.328 -236.262 -90.7416 -124.522 -113.188C-12.7825 -135.634 87.4546 -143.298 313.125 -113.188C538.795 -83.0771 984.658 -35.9951 1048.74 11.6342C1112.83 59.2636 1046.55 130.434 944.125 337.375C841.697 544.316 802.807 464.934 556.871 464.934C310.934 464.934 385.975 505.994 169.616 701.438Z" fill="url(#paint1_linear_129_662)" fill-opacity="0.46"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_129_662" x1="1959.89" y1="-107.425" x2="1181.39" y2="660.516" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00853929" stop-color="#2AF598"/>
|
||||
<stop offset="1" stop-color="#01815E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_129_662" x1="-31.8938" y1="747.425" x2="746.605" y2="-20.5162" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00853929" stop-color="#2AF598"/>
|
||||
<stop offset="1" stop-color="#01815E"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_129_662">
|
||||
<rect width="1920" height="751" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.0125 8.26172C11.2845 8.26172 8.27744 11.2676 8.27744 14.9941C8.27744 18.7207 11.2845 21.7266 15.0125 21.7266C18.7406 21.7266 21.7476 18.7207 21.7476 14.9941C21.7476 11.2676 18.7406 8.26172 15.0125 8.26172ZM15.0125 19.3711C12.6034 19.3711 10.6338 17.4082 10.6338 14.9941C10.6338 12.5801 12.5975 10.6172 15.0125 10.6172C17.4276 10.6172 19.3912 12.5801 19.3912 14.9941C19.3912 17.4082 17.4217 19.3711 15.0125 19.3711ZM23.5941 7.98633C23.5941 8.85938 22.8907 9.55664 22.0231 9.55664C21.1497 9.55664 20.4522 8.85352 20.4522 7.98633C20.4522 7.11914 21.1556 6.41602 22.0231 6.41602C22.8907 6.41602 23.5941 7.11914 23.5941 7.98633ZM28.0548 9.58008C27.9552 7.47656 27.4745 5.61328 25.9329 4.07812C24.3971 2.54297 22.5331 2.0625 20.4287 1.95703C18.2599 1.83398 11.7593 1.83398 9.59046 1.95703C7.49198 2.05664 5.62795 2.53711 4.08633 4.07227C2.5447 5.60742 2.0699 7.4707 1.96439 9.57422C1.8413 11.7422 1.8413 18.2402 1.96439 20.4082C2.06404 22.5117 2.5447 24.375 4.08633 25.9102C5.62795 27.4453 7.48611 27.9258 9.59046 28.0312C11.7593 28.1543 18.2599 28.1543 20.4287 28.0312C22.5331 27.9316 24.3971 27.4512 25.9329 25.9102C27.4687 24.375 27.9493 22.5117 28.0548 20.4082C28.1779 18.2402 28.1779 11.748 28.0548 9.58008ZM25.2529 22.7344C24.7957 23.8828 23.9106 24.7676 22.7558 25.2305C21.0266 25.916 16.9235 25.7578 15.0125 25.7578C13.1016 25.7578 8.99257 25.9102 7.26923 25.2305C6.12034 24.7734 5.23522 23.8887 4.77215 22.7344C4.08633 21.0059 4.24459 16.9043 4.24459 14.9941C4.24459 13.084 4.09219 8.97656 4.77215 7.25391C5.22936 6.10547 6.11448 5.2207 7.26923 4.75781C8.99843 4.07227 13.1016 4.23047 15.0125 4.23047C16.9235 4.23047 21.0325 4.07812 22.7558 4.75781C23.9047 5.21484 24.7899 6.09961 25.2529 7.25391C25.9387 8.98242 25.7805 13.084 25.7805 14.9941C25.7805 16.9043 25.9387 21.0117 25.2529 22.7344Z" fill="#7D7D7D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 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="M17.4 22.0001C13.3173 21.9948 9.40331 20.3706 6.5164 17.4837C3.62949 14.5968 2.00529 10.6828 2 6.60011C2 5.38012 2.48464 4.21009 3.34731 3.34742C4.20998 2.48476 5.38 2.00011 6.6 2.00011C6.85834 1.99815 7.11625 2.02159 7.37 2.07011C7.61531 2.10641 7.85647 2.1667 8.09 2.25011C8.25425 2.30774 8.40061 2.40725 8.51461 2.53879C8.62861 2.67033 8.7063 2.82934 8.74 3.00011L10.11 9.00011C10.1469 9.16298 10.1425 9.33249 10.0971 9.4932C10.0516 9.6539 9.96671 9.80067 9.85 9.92011C9.72 10.0601 9.71 10.0701 8.48 10.7101C9.46499 12.871 11.1932 14.6063 13.35 15.6001C14 14.3601 14.01 14.3501 14.15 14.2201C14.2694 14.1034 14.4162 14.0185 14.5769 13.9731C14.7376 13.9276 14.9071 13.9232 15.07 13.9601L21.07 15.3301C21.2353 15.3685 21.3881 15.4483 21.5141 15.562C21.64 15.6757 21.735 15.8196 21.79 15.9801C21.8744 16.2175 21.938 16.4617 21.98 16.7101C22.0202 16.9614 22.0403 17.2156 22.04 17.4701C22.0216 18.6849 21.5233 19.8431 20.654 20.6918C19.7847 21.5405 18.6149 22.0108 17.4 22.0001ZM6.6 4.00011C5.91125 4.00275 5.25146 4.27752 4.76443 4.76455C4.27741 5.25157 4.00263 5.91136 4 6.60011C4.00265 10.1532 5.41528 13.56 7.92769 16.0724C10.4401 18.5848 13.8469 19.9975 17.4 20.0001C18.0888 19.9975 18.7485 19.7227 19.2356 19.2357C19.7226 18.7487 19.9974 18.0889 20 17.4001V17.0701L15.36 16.0001L15.07 16.5501C14.62 17.4201 14.29 18.0501 13.45 17.7101C11.7929 17.117 10.2887 16.1621 9.04673 14.915C7.80477 13.6678 6.85622 12.1597 6.27 10.5001C5.91 9.72011 6.59 9.36011 7.45 8.91011L8 8.64011L6.93 4.00011H6.6Z" fill="#7D7D7D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C9.89206 1.99989 7.86926 2.83176 6.37124 4.31479C4.87323 5.79782 4.02108 7.81216 4 9.92C4 15.4 11.05 21.5 11.35 21.76C11.5311 21.9149 11.7616 22.0001 12 22.0001C12.2384 22.0001 12.4689 21.9149 12.65 21.76C13 21.5 20 15.4 20 9.92C19.9789 7.81216 19.1268 5.79782 17.6288 4.31479C16.1307 2.83176 14.1079 1.99989 12 2ZM12 19.65C10.33 18.06 6 13.65 6 9.92C6 8.3287 6.63214 6.80258 7.75736 5.67736C8.88258 4.55214 10.4087 3.92 12 3.92C13.5913 3.92 15.1174 4.55214 16.2426 5.67736C17.3679 6.80258 18 8.3287 18 9.92C18 13.62 13.67 18.06 12 19.65Z" fill="#7D7D7D"/>
|
||||
<path d="M12 6C11.3078 6 10.6311 6.20527 10.0555 6.58986C9.47993 6.97444 9.03133 7.52107 8.76642 8.16061C8.50152 8.80015 8.4322 9.50388 8.56725 10.1828C8.7023 10.8618 9.03564 11.4854 9.52513 11.9749C10.0146 12.4644 10.6383 12.7977 11.3172 12.9327C11.9961 13.0678 12.6999 12.9985 13.3394 12.7336C13.9789 12.4687 14.5256 12.0201 14.9101 11.4445C15.2947 10.8689 15.5 10.1922 15.5 9.5C15.5 8.57174 15.1313 7.6815 14.4749 7.02513C13.8185 6.36875 12.9283 6 12 6ZM12 11C11.7033 11 11.4133 10.912 11.1666 10.7472C10.92 10.5824 10.7277 10.3481 10.6142 10.074C10.5007 9.79994 10.4709 9.49834 10.5288 9.20736C10.5867 8.91639 10.7296 8.64912 10.9393 8.43934C11.1491 8.22956 11.4164 8.0867 11.7074 8.02882C11.9983 7.97094 12.2999 8.00065 12.574 8.11418C12.8481 8.22771 13.0824 8.41997 13.2472 8.66665C13.412 8.91332 13.5 9.20333 13.5 9.5C13.5 9.89782 13.342 10.2794 13.0607 10.5607C12.7794 10.842 12.3978 11 12 11Z" fill="#7D7D7D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_131_672)">
|
||||
<path d="M26.9386 8.88961C26.9577 9.1561 26.9577 9.42264 26.9577 9.68912C26.9577 17.8172 20.7687 27.1828 9.45709 27.1828C5.97219 27.1828 2.73489 26.1738 0.0117188 24.4226C0.506857 24.4797 0.982885 24.4988 1.49707 24.4988C4.37253 24.4988 7.01956 23.528 9.13334 21.8719C6.42922 21.8147 4.16309 20.0445 3.38231 17.6079C3.76321 17.665 4.14404 17.703 4.54399 17.703C5.09622 17.703 5.64851 17.6269 6.16263 17.4937C3.34427 16.9226 1.23042 14.448 1.23042 11.4594V11.3833C2.04925 11.8402 3.00148 12.1257 4.01069 12.1637C2.35394 11.0596 1.26853 9.17514 1.26853 7.04315C1.26853 5.90104 1.57316 4.85408 2.1064 3.94037C5.13426 7.67133 9.68558 10.1078 14.7891 10.3744C14.6939 9.91752 14.6367 9.44168 14.6367 8.96578C14.6367 5.57742 17.3789 2.81731 20.7876 2.81731C22.5586 2.81731 24.1582 3.55969 25.2818 4.75893C26.6719 4.49244 28.0049 3.97846 29.1856 3.27416C28.7285 4.70186 27.7574 5.9011 26.4815 6.66246C27.7193 6.52928 28.919 6.18656 30.0235 5.71072C29.1858 6.92895 28.1383 8.01393 26.9386 8.88961Z" fill="#7D7D7D"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_131_672">
|
||||
<rect width="30.0119" height="30" fill="white" transform="translate(0.0117188)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.6385 8.12932C28.3112 6.89755 27.347 5.92745 26.1227 5.59823C23.9036 5 15.0052 5 15.0052 5C15.0052 5 6.10691 5 3.88774 5.59823C2.66346 5.9275 1.69922 6.89755 1.37195 8.12932C0.777344 10.362 0.777344 15.0202 0.777344 15.0202C0.777344 15.0202 0.777344 19.6784 1.37195 21.9111C1.69922 23.1429 2.66346 24.0726 3.88774 24.4018C6.10691 25 15.0052 25 15.0052 25C15.0052 25 23.9035 25 26.1227 24.4018C27.347 24.0726 28.3112 23.1429 28.6385 21.9111C29.2331 19.6784 29.2331 15.0202 29.2331 15.0202C29.2331 15.0202 29.2331 10.362 28.6385 8.12932ZM12.095 19.2495V10.7909L19.5322 15.0203L12.095 19.2495Z" fill="#7D7D7D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 724 B |
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
// Modules
|
||||
|
||||
// Icons
|
||||
import bg from "../icons/green-bg.svg";
|
||||
|
||||
// Components
|
||||
import ContactForm from "../components/contact/ContactForm";
|
||||
|
||||
const Contacts = () => {
|
||||
return (
|
||||
<main className="contact">
|
||||
<div className="contact-bg">
|
||||
<img src={bg} alt="" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="contact-inner">
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contacts;
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
.contact {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact-inner {
|
||||
padding: 8rem 0 16rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact-bg {
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 75.1rem;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.contact-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-right {
|
||||
padding: 5rem 3rem 5rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2.4rem;
|
||||
}
|
||||
|
||||
.contact-title-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.4rem;
|
||||
|
||||
h3 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contact-form-link-left {
|
||||
display: flex;
|
||||
gap: 1.6rem;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
.contact-form-link-right {
|
||||
display: flex;
|
||||
gap: 2.4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-form-right-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.contact-form-right-bottom,
|
||||
.input-blocks-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rem;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
@include button-std(0.5rem, 2.4rem, true);
|
||||
}
|
||||
}
|
||||
|
||||
.input-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
|
||||
label {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
outline: none;
|
||||
color: #000;
|
||||
resize: none;
|
||||
padding: 1.6rem;
|
||||
border: 0.2rem solid #7d7d7d;
|
||||
border-radius: 0.5rem;
|
||||
@include transition-std;
|
||||
|
||||
&:focus {
|
||||
@include transition-std;
|
||||
border: 0.2rem solid $base-green;
|
||||
color: $base-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,10 +25,9 @@
|
|||
}
|
||||
|
||||
.search-button {
|
||||
@include button-std(0, 1.7rem, $scaled: false);
|
||||
height: 100%;
|
||||
min-width: 24rem;
|
||||
padding: 1.7rem 0;
|
||||
background: $base-green;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -41,3 +41,25 @@ $hover-green: #0e654e;
|
|||
transform: scale(1);
|
||||
@include transition-std();
|
||||
}
|
||||
|
||||
@mixin button-std($border-radius, $padding, $scaled) {
|
||||
padding: $padding;
|
||||
border-radius: $border-radius;
|
||||
background: $base-green;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
|
||||
@if $scaled {
|
||||
@include button-start;
|
||||
|
||||
&:active {
|
||||
@include button-end;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-green;
|
||||
@include transition-std;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,3 +12,4 @@
|
|||
@import "./profile";
|
||||
@import "./event-item";
|
||||
@import "./structure";
|
||||
@import "./contact";
|
||||
|
|
|
|||
Loading…
Reference in New Issue