Initial commit
This commit is contained in:
78
components/templates/contact.js
Normal file
78
components/templates/contact.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import axios from "axios";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function Form() {
|
||||
const [message, setMessage] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [mail, setMail] = useState("");
|
||||
const [tel, setTel] = useState("");
|
||||
const sendMail = (e) => {
|
||||
e.preventDefault();
|
||||
axios
|
||||
.post("/api/hello", {
|
||||
msg: message,
|
||||
name: name,
|
||||
mail: mail,
|
||||
tel: tel,
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log(response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-row px-48 justify-around">
|
||||
<form className="flex flex-col py-12">
|
||||
<input
|
||||
name="name"
|
||||
placeholder="Imię"
|
||||
className="border border-slate-300 h-8 w-[32rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
}}
|
||||
></input>
|
||||
|
||||
<span className="flex flex-row w-[32rem]">
|
||||
<input
|
||||
name="phone"
|
||||
placeholder="Telefon"
|
||||
className="mr-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
||||
onChange={(e) => {
|
||||
setTel(e.target.value);
|
||||
}}
|
||||
></input>
|
||||
<input
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
className="ml-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
||||
onChange={(e) => {
|
||||
setMail(e.target.value);
|
||||
}}
|
||||
></input>
|
||||
</span>
|
||||
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Wiadomość"
|
||||
className="border border-slate-300 h-64 w-[32rem] mt-4 px-4 py-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
||||
onChange={(e) => {
|
||||
setMessage(e.target.value);
|
||||
}}
|
||||
></textarea>
|
||||
<button
|
||||
className="bg-red-500 text-gray-100 font-medium mt-4 px-3 py-3 w-[32rem] ring-0 ring-offset-2 ring-red-500 transition ease-in-out duration-200 hover:ring-2 hover:bg-rose-600"
|
||||
onClick={(e) => {
|
||||
sendMail(e);
|
||||
}}
|
||||
>
|
||||
Wyślij
|
||||
</button>
|
||||
</form>
|
||||
<div className="grid place-content-center">
|
||||
<img src="/images/envelope.png" className="w-96 p-16"></img>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
components/templates/location.js
Normal file
42
components/templates/location.js
Normal file
@@ -0,0 +1,42 @@
|
||||
export default function Contact() {
|
||||
return (
|
||||
<div className="flex py-12" id="kontakt">
|
||||
<div className="w-3/5">
|
||||
<img src="/map.png" className="w-fit"></img>
|
||||
</div>
|
||||
<div className="w-3/5 px-8 my-auto text-right">
|
||||
<h2 className="text-4xl py-4">Nasze Biuro</h2>
|
||||
<ul className="list-none">
|
||||
<p className="text-2xl py-2">Aleje Wolności 6</p>
|
||||
<p className="text-2xl py-2">II piętro</p>
|
||||
<p className="text-2xl py-2">33-300 Nowy Sącz</p>
|
||||
</ul>
|
||||
<br></br>
|
||||
<h3 className="text-4xl py-4">Kontakt</h3>
|
||||
<ul className="list-none">
|
||||
<li className="text-2xl py-2">
|
||||
<a href="tel:504066513" >
|
||||
504 066 513
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-2xl py-2">
|
||||
<a href="tel:18 442 02 44">
|
||||
18 442 02 44
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-2xl py-2">
|
||||
<a href="tel:515775020">
|
||||
515 775 020
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-2xl py-2">
|
||||
<a href="mailto:biuro@wastpol.pl">
|
||||
biuro@wastpol.pl
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="grow bg-slate-600 w-48 opacity-40"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
components/templates/main.js
Normal file
26
components/templates/main.js
Normal file
@@ -0,0 +1,26 @@
|
||||
export default function Main() {
|
||||
return (
|
||||
<div className="h-screen w-full bg-main bg-cover bg-center text-white mb-12">
|
||||
<div className="flex justify-between px-36 py-8 items-center">
|
||||
<img src="./logo.png" alt="logo" className="h-16"></img>
|
||||
<div className="flex items-center">
|
||||
<a href="#onas">
|
||||
<h2 className="text-2xl ml-8 bg-gray-900 bg-opacity-20 px-3 py-2 hover:bg-opacity-10 border-white border-opacity-0 border-b-2 hover:border-opacity-100 transition-all">
|
||||
O nas
|
||||
</h2>
|
||||
</a>
|
||||
<a href="#kontakt">
|
||||
<h2 className="text-2xl ml-8 bg-gray-900 bg-opacity-20 px-3 py-2 hover:bg-opacity-10 border-white border-opacity-0 border-b-2 hover:border-opacity-100 transition-all">
|
||||
Kontakt
|
||||
</h2>
|
||||
</a>
|
||||
<a href="tel:504066513">
|
||||
<h2 className="text-2xl ml-8 bg-gray-900 bg-opacity-20 px-3 py-2 hover:bg-opacity-10 border-white border-opacity-0 border-b-2 hover:border-opacity-100 transition-all">
|
||||
504 066 513
|
||||
</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
131
components/templates/second.js
Normal file
131
components/templates/second.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import { useState, useEffect } from "react";
|
||||
export default function Second() {
|
||||
const [photo, setPhoto] = useState(0);
|
||||
useEffect(() => {
|
||||
document.getElementById("jobPhoto");
|
||||
jobPhoto.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
jobPhoto.src = `/images/${photo}.jpg`;
|
||||
setTimeout(() => {
|
||||
jobPhoto.style.opacity = 1;
|
||||
}, 100);
|
||||
}, 150);
|
||||
|
||||
console.log(jobPhoto);
|
||||
}, [photo]);
|
||||
return (
|
||||
<>
|
||||
<div className="reative px-8 py-12 h-[26rem]" id="onas">
|
||||
<img
|
||||
src={`/images/0.jpg`}
|
||||
alt="Prąd"
|
||||
className="absolute right-0 object-cover h-80 w-2/3 transition-all duration-700 opacity-25"
|
||||
id="jobPhoto"
|
||||
></img>
|
||||
<h2 className="absolute text-6xl border-l-4 border-red-500">
|
||||
Ponad 4000 zrealizowanych projektów
|
||||
<br />
|
||||
20 lat doświadczenia
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="list-none flex px-8 py-12 justify-around text-3xl">
|
||||
<li
|
||||
onMouseEnter={() => {
|
||||
setPhoto(1);
|
||||
}}
|
||||
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
|
||||
>
|
||||
<svg
|
||||
className="w-16 h-16 m-auto"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<h3 className="">Sieci</h3>
|
||||
</li>
|
||||
<li
|
||||
onMouseEnter={() => {
|
||||
setPhoto(2);
|
||||
}}
|
||||
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
|
||||
>
|
||||
<svg
|
||||
className="w-16 h-16 m-auto"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
|
||||
/>
|
||||
</svg>
|
||||
<h3>Instalacje</h3>
|
||||
</li>
|
||||
<li
|
||||
onMouseEnter={() => {
|
||||
setPhoto(3);
|
||||
}}
|
||||
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
|
||||
>
|
||||
<svg
|
||||
className="w-16 h-16 m-auto"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
<h3>Nadzory</h3>
|
||||
</li>
|
||||
<li
|
||||
onMouseEnter={() => {
|
||||
setPhoto(4);
|
||||
}}
|
||||
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
|
||||
>
|
||||
<svg
|
||||
className="w-16 h-16 m-auto"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
<h3>Pomiary</h3>
|
||||
</li>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user