Initial commit with essential code files only

pages/_app.js

@@ -0,0 +1,15 @@
+import '../styles/globals.css'
+import { useEffect } from "react";
+import { init } from "@socialgouv/matomo-next";
+
+const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL;
+const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID;
+
+function MyApp({ Component, pageProps }) {
+  useEffect(() => {
+    init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
+  }, []);
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/api/hello.js

@@ -0,0 +1,26 @@
+import nodemailer from "nodemailer";
+
+export default function handler(req, res) {
+	let transporter = nodemailer.createTransport({
+		host: "mail.wastpol.pl",
+		port: 465,
+		secure: true,
+		auth: {
+			user: "kontakt@wastpol.pl",
+			pass: "jHP4oCaELy0EOhz5",
+		},
+	});
+
+	let info = transporter.sendMail({
+		from: `"${req.body.name} 🤡" <foo@example.com>`, // sender address
+		to: "kontakt@wastpol.pl", // list of receivers
+		subject: `Wiadomość od ${req.body.name}`, // Subject line
+		html: `<b>Treść:</b> ${req.body.msg}<br/>
+    <b>Dane do kontaktu:</b><br/>
+    <b>nr tel: </b>${req.body.tel}<br/>
+    <b>mail: </b>${req.body.mail}<br/><br/>
+    <i>Wiadomość wygenerowana automatycznie na stronie wastpol.pl</i>`, // html body
+	});
+
+	res.status(200).json({ msg: "Message Sent" });
+}

pages/elements/banner.js

@@ -0,0 +1,7 @@
+export default function Banner() {
+  return (
+    <div>
+      <img src="/logo.png"></img>
+    </div>
+  );
+}

pages/elements/links.js

@@ -0,0 +1,10 @@
+export default function Links() {
+  return (
+    <div className="flex items-center">
+      <p className="text-2xl pl-4 underline underline-offset-1 cursor-pointer">
+        Lorem
+      </p>
+      <p className="text-2xl pl-4 cursor-pointer">Dolor</p>
+    </div>
+  );
+}

pages/elements/main.js

@@ -0,0 +1,32 @@
+// import Image from "next/image";
+
+export default function Main() {
+  return (
+    <div className="flex px-48 py-12 ">
+      <div className="relative ">
+        <div className="absolute rounded-l-3xl h-full w-1/2 bg-slate-800 opacity-50 "></div>
+        <div className="absolute rounded-l-3xl h-full w-1/2 text-white p-12">
+          <h1 className="text-6xl py-4">Lorem Ipsum</h1>
+          <p className="text-2xl py-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+        <div
+          className="absolute rounded-xl bg-slate-300 right-20 bottom-20 px-3 py-2 cursor-pointer"
+          onClick={(e) => {
+            console.log(e.target.innerHTML);
+          }}
+        >
+          Więcej
+        </div>
+        <img src="/main.png" alt="Prąd" className="rounded-3xl"></img>
+      </div>
+    </div>
+  );
+}

pages/elements/second.js

@@ -0,0 +1,22 @@
+export default function Second() {
+	return (
+		<div className="flex py-12">
+			<div className="w-2/5">
+				<img src="/map.png" className="w-fit"></img>
+			</div>
+			<div className="w-3/5 px-8 text-right">
+				<h1 className="text-6xl py-4">Lorem Ipsum</h1>
+				<p className="text-2xl py-2">Lorem ipsum dolor sit amet,</p>
+				<p className="text-2xl py-2">consectetur adipiscing elit,</p>
+				<p className="text-2xl py-2">
+					eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</p>
+				<p className="text-2xl py-2">
+					quis nostrud exercitation ullamco laboris nisi ut
+				</p>
+				<p className="text-2xl py-2">aliquip ex ea commodo consequat.</p>
+			</div>
+			<div className="grow bg-slate-600 w-48 opacity-40"></div>
+		</div>
+	);
+}

pages/elements/third.js

@@ -0,0 +1,31 @@
+export default function Third() {
+	return (
+		<div className="flex px-48 py-12">
+			<div className="w-1/2 border-t-2 border-l-2 p-4">
+				<div className="flex justify-evenly">
+					<div className="">Lorem</div>
+					<div className="">Dolorem</div>
+				</div>
+				Sunt eiusmod voluptate anim sint minim id aliqua elit ipsum culpa.
+				Consectetur laborum duis duis laboris do aute aliquip adipisicing ut
+				tempor irure non nisi tempor. Cillum deserunt eu ea ipsum nostrud.
+				Nostrud adipisicing et quis mollit et culpa ea irure incididunt eiusmod
+				reprehenderit veniam eiusmod sint. Nisi ex exercitation velit sit ea ex.
+				Ullamco eu ea esse nulla commodo commodo irure. Aliqua nostrud eiusmod
+				et velit esse voluptate voluptate ipsum nisi laborum exercitation.
+			</div>
+			<div className="w-1/2 border-b-2 border-r-2 p-4">
+				<h2>20 Lat Doświadczenia</h2>
+				<p>
+					Głównym profilem działalności firmy jest projektowanie instalacji
+					elektrycznych oraz nadzór. Świadczymy również usługi w zakresie
+					audytów instalacji elektrycznych, umożliwiających wskazanie
+					konkretnych rozwiązań technicznych. Jako projektanci posiadający
+					wieloletnie doświadczenie, potwierdzone odpowiednimi uprawnieniami,
+					możemy Państwu zapewnić wykonywanie projektów na najwyższym poziomie
+					technicznym i w zadowalających terminach realizacji.
+				</p>
+			</div>
+		</div>
+	);
+}

pages/index.js

@@ -0,0 +1,34 @@
+import Head from "next/head";
+import Hero from "../components/templates/hero";
+import Navigation from "../components/templates/navigation";
+import Services from "../components/templates/services";
+import About from "../components/templates/about";
+import Contact from "../components/templates/contact";
+import Footer from "../components/templates/footer";
+
+export default function Home() {
+	return (
+		<div className="font-sans scroll-smooth antialiased">
+			<Head>
+				<title>Wastpol - Projektowanie i Realizacja | Instalacje Elektryczne Nowy Sącz</title>
+				<meta
+					name="description"
+					content="Wastpol - kompleksowe usługi elektryczne w Nowym Sączu. Projektowanie, realizacja, nadzory i pomiary instalacji elektrycznych. Ponad 20 lat doświadczenia, 4000+ zrealizowanych projektów."
+				/>
+				<meta name="keywords" content="projektowanie, realizacja instalacji elektrycznych, Nowy Sącz, Wastpol, sieci elektryczne, nadzory, pomiary, wykonawstwo elektryczne" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+				<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+			</Head>
+
+			<Navigation />
+			<Hero />
+			<Services />
+			<About />
+			<Contact />
+			<Footer />
+		</div>
+	);
+}

pages/rodo.js

@@ -0,0 +1,143 @@
+import Head from "next/head";
+import Navigation from "../components/templates/navigation";
+import Footer from "../components/templates/footer";
+
+export default function Rodo() {
+	const downloadRodo = () => {
+		const fileUrl = "./rozporzadzenie-rodo.pdf";
+		const link = document.createElement("a");
+		link.href = fileUrl;
+		link.download = "rozporzadzenie-rodo.pdf";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	};
+
+	const downloadRodoWastpol = () => {
+		const fileUrl = "./rodo-wastpol.pdf";
+		const link = document.createElement("a");
+		link.href = fileUrl;
+		link.download = "rodo-wastpol.pdf";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	};
+
+	return (
+		<div className="font-sans scroll-smooth antialiased">
+			<Head>
+				<title>RODO - Ochrona Danych Osobowych | Wastpol</title>
+				<meta
+					name="description"
+					content="Informacje dotyczące ochrony danych osobowych w firmie Wastpol zgodnie z RODO"
+				/>
+				<link rel="icon" href="/favicon.ico" />
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+				<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+			</Head>
+
+			<Navigation />
+			
+			{/* Hero Section for RODO */}
+			<div className="bg-gray-900 text-white py-20 mt-20">
+				<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+					<h1 className="text-4xl font-bold mb-4">
+						Ochrona Danych Osobowych
+					</h1>
+					<p className="text-xl text-gray-300">
+						Informacje dotyczące przetwarzania danych osobowych zgodnie z RODO
+					</p>
+				</div>
+			</div>
+
+			{/* Main Content */}
+			<div className="py-16 bg-gray-50">
+				<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="bg-white rounded-lg shadow-lg p-8 md:p-12">
+						<section className="mb-12">
+							<h2 className="text-3xl font-bold text-gray-900 mb-6">
+								RODO
+							</h2>
+							<p className="text-lg text-gray-600 leading-relaxed mb-8">
+								RODO czyli Rozporządzenie Parlamentu Europejskiego i Rady (UE)
+								2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób
+								fizycznych w związku z przetwarzaniem danych osobowych i w sprawie
+								swobodnego przepływu takich danych oraz uchylenia dyrektywy
+								95/46/WE (ogólne rozporządzenie o ochronie danych).
+							</p>
+							<button
+								className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-300 inline-flex items-center"
+								onClick={downloadRodo}
+							>
+								<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+								</svg>
+								Pobierz rozporządzenie
+							</button>
+						</section>
+
+						<section className="mb-12">
+							<h2 className="text-3xl font-bold text-gray-900 mb-6">
+								Inspektor Ochrony Danych
+							</h2>
+							<div className="bg-blue-50 border-l-4 border-blue-400 p-6 mb-6">
+								<p className="text-lg text-gray-700 leading-relaxed">
+									Powołaliśmy Inspektora Ochrony Danych, z którym mogą się Państwo
+									skontaktować w sprawach dotyczących ochrony danych osobowych.
+								</p>
+							</div>
+							
+							<div className="grid md:grid-cols-2 gap-6 mb-8">
+								<div className="flex items-start space-x-3">
+									<svg className="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+									</svg>
+									<div>
+										<h4 className="font-semibold text-gray-900">Email</h4>
+										<a href="mailto:biuro@wastpol.pl" className="text-blue-600 hover:text-blue-700 transition-colors">
+											biuro@wastpol.pl
+										</a>
+									</div>
+								</div>
+								
+								<div className="flex items-start space-x-3">
+									<svg className="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+									</svg>
+									<div>
+										<h4 className="font-semibold text-gray-900">Adres korespondencyjny</h4>
+										<p className="text-gray-600">
+											IOD PPHU WASTPOL<br />
+											33-300 Nowy Sącz<br />
+											Aleje Wolności 6
+										</p>
+									</div>
+								</div>
+							</div>
+						</section>
+
+						<section>
+							<p className="text-lg text-gray-600 leading-relaxed mb-8">
+								Aby dowiedzieć się więcej na temat przetwarzania danych w firmie
+								WASTPOL zapoznaj się z poniższym dokumentem.
+							</p>
+							<button
+								className="bg-gray-600 hover:bg-gray-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-300 inline-flex items-center"
+								onClick={downloadRodoWastpol}
+							>
+								<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+								</svg>
+								Klauzula informacyjna firmy WASTPOL
+							</button>
+						</section>
+					</div>
+				</div>
+			</div>
+
+			<Footer />
+		</div>
+	);
+}

pages/templates/content.js

@@ -0,0 +1,13 @@
+import Main from "../elements/main";
+import Second from "../elements/second";
+import Third from "../elements/third";
+
+export default function Content() {
+  return (
+    <div>
+      <Main />
+      <Second />
+      <Third />
+    </div>
+  );
+}

pages/templates/footer.js

@@ -0,0 +1,7 @@
+export default function Footer() {
+  return (
+    <div className="flex justify-center py-4">
+      <p>© Wastpol 2022</p>
+    </div>
+  );
+}

pages/templates/nav.js

@@ -0,0 +1,11 @@
+import Banner from "../elements/banner";
+import Links from "../elements/links";
+
+export default function Nav() {
+  return (
+    <div className="flex justify-between px-48 py-4">
+      <Banner />
+      <Links />
+    </div>
+  );
+}