commit 8e9b0ef8a82e5e255bc95e95dfe5870cd743a45e Author: RKWojs Date: Fri Jul 18 16:13:09 2025 +0200 Initial commit with essential code files only diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..87285e6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel +.env \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..b12f3e3 --- /dev/null +++ b/README.md @@ -0,0 +1,34 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/components/templates/about.js b/components/templates/about.js new file mode 100644 index 0000000..0724dbd --- /dev/null +++ b/components/templates/about.js @@ -0,0 +1,135 @@ +export default function About() { + return ( +
+
+
+ {/* Content */} +
+

+ O firmie Wastpol +

+ +
+

+ Jesteśmy firmą oferującą kompleksowe usługi elektryczne z ponad 20-letnim + doświadczeniem. Realizujemy pełen zakres prac - od projektowania przez + wykonawstwo po nadzory i pomiary instalacji elektrycznych. +

+ +

+ Przez lata naszej działalności zaprojektowaliśmy i zrealizowaliśmy ponad 4000 + projektów dla klientów w całej Polsce. Nasze doświadczenie obejmuje zarówno + instalacje domowe, jak i złożone projekty przemysłowe i infrastrukturalne. +

+
+ + {/* Key Features */} +
+
+
+ + + +
+
+

Doświadczenie

+

Ponad 20 lat na rynku

+
+
+ +
+
+ + + +
+
+

Kompleksowość

+

Od projektu do realizacji

+
+
+ +
+
+ + + +
+
+

Terminowość

+

Dotrzymujemy ustalonych terminów

+
+
+ +
+
+ + + +
+
+

Zespół

+

Wykwalifikowani specjaliści

+
+
+
+ + {/* CTA */} +
+ +
+
+ + {/* Stats & Image */} +
+ {/* Main Image */} +
+ Wastpol - realizacje projektów +
+
+

Kompleksowe realizacje

+

Projektowanie i wykonawstwo od 2002 roku

+
+
+ + {/* Achievement Stats */} +
+

Nasze osiągnięcia

+ +
+
+
4000+
+
Zrealizowanych projektów
+
+
+
20+
+
Lat doświadczenia
+
+
+
500+
+
Zadowolonych klientów
+
+
+
100%
+
Terminowych realizacji
+
+
+
+
+
+
+
+ ); +} diff --git a/components/templates/contact.js b/components/templates/contact.js new file mode 100644 index 0000000..14aade3 --- /dev/null +++ b/components/templates/contact.js @@ -0,0 +1,217 @@ +import { useState } from "react"; + +export default function Contact() { + const [formData, setFormData] = useState({ + name: "", + email: "", + phone: "", + message: "" + }); + + const handleChange = (e) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value + }); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + // Here you would typically send the form data to your backend + console.log("Form submitted:", formData); + alert("Dziękujemy za wiadomość! Skontaktujemy się z Państwem wkrótce."); + setFormData({ name: "", email: "", phone: "", message: "" }); + }; + + return ( +
+
+ {/* Header */} +
+

+ Skontaktuj się z nami +

+

+ Masz pytania o nasze usługi? Potrzebujesz wyceny? + Skontaktuj się z nami - chętnie pomożemy! +

+
+ +
+ {/* Contact Information */} +
+
+

+ Nasze Biuro +

+ +
+
+
+ + + + +
+
+

Adres

+

+ Aleje Wolności 6
+ II piętro
+ 33-300 Nowy Sącz +

+
+
+ +
+
+ + + +
+ +
+ +
+
+ + + +
+ +
+ +
+
+ + + +
+
+

Godziny pracy

+

+ Pon - Pt: 8:00 - 16:00
+ Sob - Nd: Zamknięte +

+
+
+
+
+ + {/* Map */} +
+ Mapa lokalizacji Wastpol +
+
+ + {/* Contact Form */} +
+

+ Wyślij wiadomość +

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+

+ * Pola wymagane. Twoje dane są bezpieczne i nie będą przekazywane osobom trzecim. +

+
+
+
+
+
+ ); +} diff --git a/components/templates/footer.js b/components/templates/footer.js new file mode 100644 index 0000000..e951d98 --- /dev/null +++ b/components/templates/footer.js @@ -0,0 +1,112 @@ +export default function Footer() { + const currentYear = new Date().getFullYear(); + + return ( + + ); +} diff --git a/components/templates/hero.js b/components/templates/hero.js new file mode 100644 index 0000000..dd16a6d --- /dev/null +++ b/components/templates/hero.js @@ -0,0 +1,81 @@ +export default function Hero() { + const scrollToSection = (sectionId) => { + const element = document.getElementById(sectionId); + if (element) { + element.scrollIntoView({ behavior: "smooth" }); + } + }; + + return ( +
+ {/* Background Image */} +
+
+
+ + {/* Content */} +
+

+ Projektowanie + i Realizacja + Instalacji Elektrycznych +

+ +

+ Kompleksowe usługi elektryczne - od projektu po pełną realizację. + Ponad 20 lat doświadczenia, zaufało nam już ponad 4000 klientów. +

+ +
+ + +
+ + {/* Stats */} +
+
+
20+
+
Lat doświadczenia
+
+
+
4000+
+
Projektów
+
+
+
100%
+
Zadowolenia
+
+
+
24/7
+
Wsparcie
+
+
+
+ + {/* Scroll indicator */} +
+ +
+
+ ); +} diff --git a/components/templates/location.js b/components/templates/location.js new file mode 100644 index 0000000..b71c8bb --- /dev/null +++ b/components/templates/location.js @@ -0,0 +1,37 @@ +export default function Contact() { + return ( +
+
+ +
+
+

Nasze Biuro

+
    +

    Aleje Wolności 6

    +

    II piętro

    +

    33-300 Nowy Sącz

    +
+

+

Kontakt

+ +
+
+
+ ); +} diff --git a/components/templates/main.js b/components/templates/main.js new file mode 100644 index 0000000..aaa6cb1 --- /dev/null +++ b/components/templates/main.js @@ -0,0 +1,26 @@ +export default function Main() { + return ( +
+
+ logo +
+ +

+ O nas +

+ + +

+ Kontakt +

+ + +

+ 18 442 02 44 +

+ +
+
+
+ ); +} diff --git a/components/templates/navigation.js b/components/templates/navigation.js new file mode 100644 index 0000000..d3c2fba --- /dev/null +++ b/components/templates/navigation.js @@ -0,0 +1,130 @@ +import { useState, useEffect } from "react"; + +export default function Navigation() { + const [isScrolled, setIsScrolled] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 10); + }; + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const scrollToSection = (sectionId) => { + const element = document.getElementById(sectionId); + if (element) { + element.scrollIntoView({ behavior: "smooth" }); + } + setIsMobileMenuOpen(false); + }; + + return ( + + ); +} diff --git a/components/templates/second.js b/components/templates/second.js new file mode 100644 index 0000000..7d58658 --- /dev/null +++ b/components/templates/second.js @@ -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 ( + <> +
+ Prąd +

+   Ponad 4000 zrealizowanych projektów +
+   20 lat doświadczenia +

+
+ +
+
  • { + setPhoto(1); + }} + className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500" + > + + + + +

    Sieci

    +
    • +
  • { + setPhoto(2); + }} + className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500" + > + + + +

    Instalacje

    +
    • +
  • { + setPhoto(3); + }} + className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500" + > + + + + +

    Nadzory

    +
    • +
  • { + setPhoto(4); + }} + className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500" + > + + + +

    Pomiary

    +
    • +
    + + ); +} diff --git a/components/templates/services.js b/components/templates/services.js new file mode 100644 index 0000000..77a619f --- /dev/null +++ b/components/templates/services.js @@ -0,0 +1,166 @@ +import { useState } from "react"; + +export default function Services() { + const [activeService, setActiveService] = useState(0); + + const services = [ + { + id: 0, + title: "Projektowanie i Realizacja Sieci", + description: "Kompleksowe usługi od projektu po wykonanie sieci elektroenergetycznych niskiego i średniego napięcia", + icon: ( + + + + ), + image: "/images/1.jpg", + features: [ + "Projektowanie sieci napowietrznych i kablowych", + "Wykonawstwo sieci elektrycznych", + "Budowa stacji transformatorowych", + "Realizacja przyłączy elektroenergetycznych" + ] + }, + { + id: 1, + title: "Instalacje Elektryczne", + description: "Pełen zakres usług - projektowanie i montaż instalacji elektrycznych w obiektach mieszkalnych i przemysłowych", + icon: ( + + + + ), + image: "/images/2.jpg", + features: [ + "Projektowanie i montaż oświetlenia", + "Instalacje gniazd wtykowych", + "Wykonanie systemów alarmowych", + "Realizacja automatyki budynkowej" + ] + }, + { + id: 2, + title: "Nadzory Inwestorskie", + description: "Profesjonalny nadzór nad realizacją inwestycji elektrycznych na każdym etapie wykonania", + icon: ( + + + + + ), + image: "/images/3.jpg", + features: [ + "Nadzór autorski projektów", + "Nadzór inwestorski realizacji", + "Kontrola jakości wykonania", + "Odbiory techniczne i rozruch" + ] + }, + { + id: 3, + title: "Pomiary i Ekspertyzy", + description: "Kompleksowe pomiary elektryczne, ekspertyzy techniczne i certyfikacja instalacji", + icon: ( + + + + ), + image: "/images/4.jpg", + features: [ + "Pomiary rezystancji uziemień", + "Pomiary ochronne instalacji", + "Ekspertyzy i audyty techniczne", + "Protokoły pomiarowe i certyfikaty" + ] + } + ]; + + return ( +
    +
    + {/* Header */} +
    +

    + Nasze Usługi +

    +

    + Oferujemy kompleksowe usługi elektryczne - od projektowania przez realizację + po nadzory i pomiary. Każdy projekt wykonujemy z najwyższą starannością od A do Z. +

    +
    + +
    + {/* Services List */} +
    + {services.map((service, index) => ( +
    setActiveService(index)} + > +
    +
    + {service.icon} +
    +
    +

    + {service.title} +

    +

    + {service.description} +

    +
    +
    +
    + ))} +
    + + {/* Service Details */} +
    +
    + {services[activeService].title} +
    +
    +

    + {services[activeService].title} +

    +
    +
    + +
    +

    + {services[activeService].description} +

    + +

    + Zakres usług: +

    +
      + {services[activeService].features.map((feature, index) => ( +
    • + + + + {feature} +
      • + ))} +
    +
    +
    +
    +
    +
    + ); +} diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..eb70d94 --- /dev/null +++ b/next.config.js @@ -0,0 +1,4 @@ +module.exports = { + reactStrictMode: true, + +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f2d9819 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "strona", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "export": "next build && next export", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@socialgouv/matomo-next": "^1.4.0", + "axios": "^0.26.1", + "next": "12.0.10", + "nodemailer": "^6.7.3", + "react": "17.0.2", + "react-dom": "17.0.2" + }, + "devDependencies": { + "autoprefixer": "^10.4.2", + "eslint": "8.8.0", + "eslint-config-next": "12.0.10", + "postcss": "^8.4.6", + "tailwindcss": "^3.0.19" + } +} diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..5f655e8 --- /dev/null +++ b/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 +} + +export default MyApp diff --git a/pages/api/hello.js b/pages/api/hello.js new file mode 100644 index 0000000..a548e67 --- /dev/null +++ b/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} 🤡" `, // sender address + to: "kontakt@wastpol.pl", // list of receivers + subject: `Wiadomość od ${req.body.name}`, // Subject line + html: `Treść: ${req.body.msg}
    + Dane do kontaktu:
    + nr tel: ${req.body.tel}
    + mail: ${req.body.mail}

    + Wiadomość wygenerowana automatycznie na stronie wastpol.pl`, // html body + }); + + res.status(200).json({ msg: "Message Sent" }); +} diff --git a/pages/elements/banner.js b/pages/elements/banner.js new file mode 100644 index 0000000..2d9186b --- /dev/null +++ b/pages/elements/banner.js @@ -0,0 +1,7 @@ +export default function Banner() { + return ( +
    + +
    + ); +} diff --git a/pages/elements/links.js b/pages/elements/links.js new file mode 100644 index 0000000..4df456c --- /dev/null +++ b/pages/elements/links.js @@ -0,0 +1,10 @@ +export default function Links() { + return ( +
    +

    + Lorem +

    +

    Dolor

    +
    + ); +} diff --git a/pages/elements/main.js b/pages/elements/main.js new file mode 100644 index 0000000..490052f --- /dev/null +++ b/pages/elements/main.js @@ -0,0 +1,32 @@ +// import Image from "next/image"; + +export default function Main() { + return ( +
    +
    +
    +
    +

    Lorem Ipsum

    +

    + 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. +

    +
    +
    { + console.log(e.target.innerHTML); + }} + > + Więcej +
    + Prąd +
    +
    + ); +} diff --git a/pages/elements/second.js b/pages/elements/second.js new file mode 100644 index 0000000..7818cf8 --- /dev/null +++ b/pages/elements/second.js @@ -0,0 +1,22 @@ +export default function Second() { + return ( +
    +
    + +
    +
    +

    Lorem Ipsum

    +

    Lorem ipsum dolor sit amet,

    +

    consectetur adipiscing elit,

    +

    + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +

    + quis nostrud exercitation ullamco laboris nisi ut +

    +

    aliquip ex ea commodo consequat.

    +
    +
    +
    + ); +} diff --git a/pages/elements/third.js b/pages/elements/third.js new file mode 100644 index 0000000..6194761 --- /dev/null +++ b/pages/elements/third.js @@ -0,0 +1,31 @@ +export default function Third() { + return ( +
    +
    +
    +
    Lorem
    +
    Dolorem
    +
    + 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. +
    +
    +

    20 Lat Doświadczenia

    +

    + 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. +

    +
    +
    + ); +} diff --git a/pages/index.js b/pages/index.js new file mode 100644 index 0000000..5172c80 --- /dev/null +++ b/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 ( +
    + + Wastpol - Projektowanie i Realizacja | Instalacje Elektryczne Nowy Sącz + + + + + + + + + + + + + + +
    +
    + ); +} diff --git a/pages/rodo.js b/pages/rodo.js new file mode 100644 index 0000000..2a174d4 --- /dev/null +++ b/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 ( +
    + + RODO - Ochrona Danych Osobowych | Wastpol + + + + + + + + + + {/* Hero Section for RODO */} +
    +
    +

    + Ochrona Danych Osobowych +

    +

    + Informacje dotyczące przetwarzania danych osobowych zgodnie z RODO +

    +
    +
    + + {/* Main Content */} +
    +
    +
    +
    +

    + RODO +

    +

    + 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). +

    + +
    + +
    +

    + Inspektor Ochrony Danych +

    +
    +

    + Powołaliśmy Inspektora Ochrony Danych, z którym mogą się Państwo + skontaktować w sprawach dotyczących ochrony danych osobowych. +

    +
    + +
    +
    + + + + +
    + +
    + + + + +
    +

    Adres korespondencyjny

    +

    + IOD PPHU WASTPOL
    + 33-300 Nowy Sącz
    + Aleje Wolności 6 +

    +
    +
    +
    +
    + +
    +

    + Aby dowiedzieć się więcej na temat przetwarzania danych w firmie + WASTPOL zapoznaj się z poniższym dokumentem. +

    + +
    +
    +
    +
    + +
    +
    + ); +} diff --git a/pages/templates/content.js b/pages/templates/content.js new file mode 100644 index 0000000..dc56a36 --- /dev/null +++ b/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 ( +
    +
    + + +
    + ); +} diff --git a/pages/templates/footer.js b/pages/templates/footer.js new file mode 100644 index 0000000..647af01 --- /dev/null +++ b/pages/templates/footer.js @@ -0,0 +1,7 @@ +export default function Footer() { + return ( +
    +

    © Wastpol 2022

    +
    + ); +} diff --git a/pages/templates/nav.js b/pages/templates/nav.js new file mode 100644 index 0000000..e43b89a --- /dev/null +++ b/pages/templates/nav.js @@ -0,0 +1,11 @@ +import Banner from "../elements/banner"; +import Links from "../elements/links"; + +export default function Nav() { + return ( +
    + + +
    + ); +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..56cd11b Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..8d75360 Binary files /dev/null and b/public/logo.png differ diff --git a/public/logo_2.png b/public/logo_2.png new file mode 100644 index 0000000..ab4e120 Binary files /dev/null and b/public/logo_2.png differ diff --git a/public/vercel.svg b/public/vercel.svg new file mode 100644 index 0000000..fbf0e25 --- /dev/null +++ b/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css new file mode 100644 index 0000000..b0744a8 --- /dev/null +++ b/styles/Home.module.css @@ -0,0 +1,117 @@ + +.container { + padding: 0 2rem; +} + +.main { + min-height: 100vh; + padding: 4rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.footer { + display: flex; + flex: 1; + padding: 2rem 0; + border-top: 1px solid #eaeaea; + justify-content: center; + align-items: center; +} + +.footer a { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; +} + +.title a { + color: #0070f3; + text-decoration: none; +} + +.title a:hover, +.title a:focus, +.title a:active { + text-decoration: underline; +} + +.title { + margin: 0; + line-height: 1.15; + font-size: 4rem; +} + +.title, +.description { + text-align: center; +} + +.description { + margin: 4rem 0; + line-height: 1.5; + font-size: 1.5rem; +} + +.code { + background: #fafafa; + border-radius: 5px; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; +} + +.grid { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + max-width: 800px; +} + +.card { + margin: 1rem; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; + max-width: 300px; +} + +.card:hover, +.card:focus, +.card:active { + color: #0070f3; + border-color: #0070f3; +} + +.card h2 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; +} + +.logo { + height: 1em; + margin-left: 0.5rem; +} + +@media (max-width: 600px) { + .grid { + width: 100%; + flex-direction: column; + } +} diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 0000000..68a7cff --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,57 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); +@tailwind base; +@tailwind components; +@tailwind utilities; + +html { + scroll-behavior: smooth; +} + +body { + padding: 0; + margin: 0; + font-family: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + line-height: 1.6; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #888; + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +/* Smooth transitions for all interactive elements */ +button, a, input, textarea { + transition: all 0.3s ease; +} + +/* Focus styles for accessibility */ +button:focus, +a:focus, +input:focus, +textarea:focus { + outline: 2px solid #3b82f6; + outline-offset: 2px; +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..3abc4df --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,34 @@ +module.exports = { + content: [ + "./pages/**/*.{js,ts,jsx,tsx}", + "./components/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + fontFamily: { + 'sans': ['Inter', 'system-ui', 'sans-serif'], + }, + backgroundImage: { + main: "url('/main.jpg')", + }, + colors: { + blue: { + 50: '#eff6ff', + 100: '#dbeafe', + 200: '#bfdbfe', + 300: '#93c5fd', + 400: '#60a5fa', + 500: '#3b82f6', + 600: '#2563eb', + 700: '#1d4ed8', + 800: '#1e40af', + 900: '#1e3a8a', + } + }, + animation: { + 'bounce': 'bounce 1s infinite', + } + }, + }, + plugins: [], +};