Admin/wastpol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
RKWojs
2025-12-03 13:05:11 +01:00
commit 35329c2626
29 changed files with 6627 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.babel.rc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["next/babel"]
}

3
.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["next/babel"]
}

3
.eslintrc.json Normal file
View File

@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}

100
.gitignore vendored Normal file
View File

@@ -0,0 +1,100 @@
# 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
# Images (if large, consider git lfs)
*.jpg
*.png
public/images/
# IDE
.vscode/
.idea/
# OS
Thumbs.db
# Logs
*.log
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# nyc test coverage
.nyc_output
# Dependency directories
jspm_packages/
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Serverless directories
.serverless
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

34
README.md Normal file
View File

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

78
components/templates/contact.js Normal file
View 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
View 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
View 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
View 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">
&nbsp; Ponad 4000 zrealizowanych projektów
<br />
&nbsp; 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>
</>
);
}

3
next.config.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
reactStrictMode: true,
}

5816
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "strona",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@socialgouv/matomo-next": "^1.3.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"
}
}

15
pages/_app.js Normal file
View File

@@ -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

26
pages/api/hello.js Normal file
View File

@@ -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" });
}

7
pages/elements/banner.js Normal file
View File

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

10
pages/elements/links.js Normal file
View File

@@ -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>
);
}

32
pages/elements/main.js Normal file
View File

@@ -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>
);
}

22
pages/elements/second.js Normal file
View File

@@ -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>
);
}

31
pages/elements/third.js Normal file
View File

@@ -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>
);
}

28
pages/index.js Normal file
View File

@@ -0,0 +1,28 @@
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import Main from "../components/templates/main";
import Second from "../components/templates/second";
import Location from "../components/templates/location";
import Contact from "../components/templates/contact";
export default function Home() {
return (
<div className="font-default scroll-smooth">
<Head>
<title>Wastpol</title>
<meta
name="description"
content="Biuro projektowe Wastpol w Nowym Sączu"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Main />
<Second />
<Location />
{/* <Contact /> */}
<div className="bg-slate-100 p-16 text-slate-400">© Wastpol 2022</div>
</div>
);
}

13
pages/templates/content.js Normal file
View File

@@ -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>
);
}

7
pages/templates/footer.js Normal file
View File

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

11
pages/templates/nav.js Normal file
View File

@@ -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>
);
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

4
public/vercel.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

116
styles/Home.module.css Normal file
View File

@@ -0,0 +1,116 @@
.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;
}
}

20
styles/globals.css Normal file
View File

@@ -0,0 +1,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}

15
tailwind.config.js Normal file
View File

@@ -0,0 +1,15 @@
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
fontFamily: { default: ["Montserrat"] },
extend: {
backgroundImage: {
main: "url('main.jpg')",
},
},
},
plugins: [],
};