initial commit

martinjirku · Oct 15, 2023 · 24f15eb · 24f15eb
1 parent 8474cc1
commit 24f15eb
Show file tree

Hide file tree

Showing 14 changed files with 278 additions and 176 deletions.
diff --git a/.env.example b/.env.example
@@ -1,2 +1,3 @@
 DATABASE_URL="file:./data.db?connection_limit=1"
-SESSION_SECRET="super-duper-s3cret"
+SESSION_SECRET="5c95f3f3875ca0a5534b3397b0d24771e360ba892095af503083d8eac87b770f"
+
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ node_modules
 /cypress/videos
 /prisma/data.db
 /prisma/data.db-journal
+
+.vscode/
diff --git a/app/components/icons.tsx b/app/components/icons.tsx
@@ -0,0 +1,95 @@
+import type { FC } from "react";
+
+interface SvgProps {
+  className?: string | undefined;
+  dimension?: number | undefined;
+}
+export const Phone: FC<SvgProps> = ({ className, dimension }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={dimension ?? 24}
+    viewBox="0 -960 960 960"
+    width={dimension ?? 24}
+    className={`${className} inline-block`}
+  >
+    <title></title>
+    <path d="M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z" />
+  </svg>
+);
+
+export const Mail: FC<SvgProps> = ({ className, dimension }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={dimension ?? 24}
+    viewBox="0 -960 960 960"
+    width={dimension ?? 24}
+    className={`${className} inline-block`}
+  >
+    <title></title>
+    <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z" />
+  </svg>
+);
+
+export const Bank: FC<SvgProps> = ({ className, dimension }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={dimension ?? 24}
+    viewBox="0 -960 960 960"
+    width={dimension ?? 24}
+    className={`${className} inline-block`}
+  >
+    <title></title>
+    <path d="M200-280v-280h80v280h-80Zm240 0v-280h80v280h-80ZM80-120v-80h800v80H80Zm600-160v-280h80v280h-80ZM80-640v-80l400-200 400 200v80H80Zm178-80h444-444Zm0 0h444L480-830 258-720Z" />
+  </svg>
+);
+
+export const Home: FC<SvgProps> = ({ className, dimension }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={dimension ?? 24}
+    viewBox="0 -960 960 960"
+    width={dimension ?? 24}
+    className={`${className} inline-block`}
+  >
+    <title></title>
+    <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
+  </svg>
+);
+
+export const Signature: FC<SvgProps> = ({ className, dimension }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={dimension ?? 24}
+    viewBox="0 -960 960 960"
+    width={dimension ?? 24}
+    className={`${className} inline-block`}
+  >
+    <title></title>
+    <path d="M563-491q73-54 114-118.5T718-738q0-32-10.5-47T679-800q-47 0-83 79.5T560-541q0 14 .5 26.5T563-491ZM120-120v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80ZM136-280l-56-56 64-64-64-64 56-56 64 64 64-64 56 56-64 64 64 64-56 56-64-64-64 64Zm482-40q-30 0-55-11.5T520-369q-25 14-51.5 25T414-322l-28-75q28-10 53.5-21.5T489-443q-5-22-7.5-48t-2.5-56q0-144 57-238.5T679-880q52 0 85 38.5T797-734q0 86-54.5 170T591-413q7 7 14.5 10.5T621-399q26 0 60.5-33t62.5-87l73 34q-7 17-11 41t1 42q10-5 23.5-17t27.5-30l63 49q-26 36-60 58t-63 22q-21 0-37.5-12.5T733-371q-28 25-57 38t-58 13Z" />
+  </svg>
+);
+
+export const Facebook: FC<SvgProps> = ({ className, dimension }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={dimension ?? 24}
+    viewBox="0 0 24 24"
+    width={dimension ?? 24}
+    className={`${className} inline-block`}
+  >
+    <rect fill="none" height="24" width="24" />
+    <path d="M22,12c0-5.52-4.48-10-10-10S2,6.48,2,12c0,4.84,3.44,8.87,8,9.8V15H8v-3h2V9.5C10,7.57,11.57,6,13.5,6H16v3h-2 c-0.55,0-1,0.45-1,1v2h3v3h-3v6.95C18.05,21.45,22,17.19,22,12z" />
+  </svg>
+);
+
+export const Instagram: FC<SvgProps> = ({ className, dimension }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 50 50"
+    height={dimension ?? 24}
+    width={dimension ?? 24}
+    className={`${className} inline-block`}
+  >
+    <path d="M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z" />
+  </svg>
+);
diff --git a/app/components/layout.tsx b/app/components/layout.tsx
@@ -0,0 +1,166 @@
+import { Link } from "@remix-run/react";
+import type { LinkProps } from "@remix-run/react";
+import type { FC, PropsWithChildren } from "react";
+
+import {
+  Phone,
+  Mail,
+  Bank,
+  Home,
+  Signature,
+  Facebook,
+  Instagram,
+} from "./icons";
+
+interface MenuItemProps {
+  to: LinkProps["to"];
+}
+const MenuItem: FC<PropsWithChildren<MenuItemProps>> = ({ children, to }) => {
+  return (
+    <li className="inline-block align-middle relative rounded-md transition-colors ease-out-in delay-50 duration-200 bg-indigo-400 hover:bg-indigo-500 hover:opacity-90">
+      <Link className="py-4 px-4 inline-block w-full h-full" to={to}>
+        {children}
+      </Link>
+    </li>
+  );
+};
+
+interface LyoutProps {
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+}
+export const Layout: FC<PropsWithChildren<LyoutProps>> = ({
+  className,
+  style,
+  children,
+}) => {
+  return (
+    <div className="h-screen flex flex-col">
+      <header className="w-full bg-indigo-400 sticky top-0 shadow-lg">
+        <nav className="flex justify-around py-6" aria-label="Hlavné">
+          <ul className="flex gap-6 text-cyan-50">
+            <MenuItem to="/">Domov</MenuItem>
+            <MenuItem to="/o-nas">O nás</MenuItem>
+            <MenuItem to="/kontakt">Kontakt</MenuItem>
+            <MenuItem to="/podpora">Podporte nás</MenuItem>
+          </ul>
+        </nav>
+      </header>
+      <main className={`${className} flex-grow`} style={style}>
+        {children}
+      </main>
+      <footer className="w-full flex pt-10 px-6 pb-16 content-center justify-around bg-neutral-900 h-min-40 text-indigo-200">
+        <div className="grid grid-cols-4 gap-4">
+          <address className="col-span-4 md:col-span-2 not-italic font-thin text-sm">
+            <h2 className="font-bold leading-10 underline underline-offset-4">
+              Materské centrum MAMINA o.z.
+            </h2>
+            <span className="inline-block">
+              Tatranská 10, 97411 Banská Bystrica{" "}
+            </span>
+            <br />
+            <span className="inline-block">
+              <a href="tel:+421950492901">
+                <Phone className="fill-indigo-100 mr-2" dimension={16} />
+                +421950 492 901 - Darina Baksová (predpôrodné kurzy)
+              </a>
+            </span>
+            <br />
+            <span>
+              <a href="mailto:[email protected]">
+                <Mail className="fill-indigo-100 mr-2" dimension={16} />
+                [email protected]
+              </a>
+            </span>
+            <br />
+            <h1 className="font-bold leading-10 underline underline-offset-4 inline-block mt-5">
+              Oslavy
+            </h1>
+            <br />
+            <span>
+              <a href="mailto:[email protected]">
+                <Mail className="fill-indigo-100 mr-2" dimension={16} />
+                [email protected]
+              </a>
+            </span>
+            <br />
+            <span>
+              <a href="tel:+421904102740">
+                <Phone className="fill-indigo-100 mr-2" dimension={16} />
+                +421904 102 740 - Zuzka Zemanová
+              </a>
+            </span>
+          </address>
+          <div className="col-span-4 md:col-span-1 font-thin text-sm">
+            <h1 className="font-bold leading-10 underline underline-offset-4">
+              Fakturačné údaje
+            </h1>
+            <span>
+              <Home className="fill-indigo-100 mr-2" dimension={16} />
+              Tatranská 10, 97411 Banská Bystrica
+            </span>
+            <br />
+            <span>IČO: 37956825</span>
+            <br />
+            <span>DIČ: 2022358239</span>
+            <br />
+            <span>
+              <Bank className="fill-indigo-100 mr-2" dimension={16} /> SK62 8330
+              0000 0023 0190 0933
+            </span>
+            <br />
+            <h1 className="inline-block mt-3 font-bold leading-10 underline underline-offset-4">
+              Štatutárka
+            </h1>
+            <br />
+            <span>Mária Krajčová</span>
+            <br />
+            <span>
+              <a href="mailto:[email protected]">
+                <Mail className="fill-indigo-100 mr-2" dimension={16} />
+                [email protected]
+              </a>
+            </span>
+          </div>
+          <div className="col-span-4 md:col-span-1 mt-2 md:mt-0 font-thin text-sm flex justify-start items-center flex-col">
+            <div className="flex-grow-0 flex justify-around items-center pb-5">
+              <a
+                href="https://www.facebook.com/MaterskeCentrumMamina/"
+                aria-label="Facebook stránka Materského centra MAMINA"
+                target="_blank"
+                rel="noreferrer"
+                title="Facebook stránka Materského centra MAMINA"
+              >
+                <Facebook
+                  className="fill-indigo-100 mr-2 hover:animate-pulse"
+                  dimension={42}
+                />
+              </a>
+              <a
+                href="https://www.facebook.com/MaterskeCentrumMamina/"
+                aria-label="Instagram stránka Materského centra MAMINA"
+                target="_blank"
+                rel="noreferrer"
+                title="Instagram stránka Materského centra MAMINA"
+              >
+                <Instagram
+                  className="fill-indigo-100 mr-2 hover:animate-pulse"
+                  dimension={42}
+                />
+              </a>
+            </div>
+            <div className="w-full flex-grow flex items-center justify-center mt-10 md:mt-0">
+              <div
+                className="px-5 py-3 bg-slate-800 rounded-md  hover:animate-spin hover:cursor-pointer"
+                style={{ animationIterationCount: 1 }}
+              >
+                <Signature className="fill-indigo-100 mr-2" dimension={16} />{" "}
+                Vytvoril MJ
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
diff --git a/app/images/color-pencils-8127500_1280.jpg b/app/images/color-pencils-8127500_1280.jpg
diff --git a/app/images/color-pencils-8127500_1920.jpg b/app/images/color-pencils-8127500_1920.jpg
diff --git a/app/images/color-pencils-8127500_640.jpg b/app/images/color-pencils-8127500_640.jpg
diff --git a/app/images/crayons-1445053_1280.jpg b/app/images/crayons-1445053_1280.jpg
diff --git a/app/images/crayons-1445053_1920.jpg b/app/images/crayons-1445053_1920.jpg
diff --git a/app/images/crayons-1445053_640.jpg b/app/images/crayons-1445053_640.jpg