feat: contact page (#14)

CoderDojoAlbaIulia · Jan 26, 2024 · 20b8b5a · 20b8b5a
1 parent 80621ad
commit 20b8b5a
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 2 deletions.
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -25,7 +25,7 @@ import Button from "./Button.astro";
             copiii (“ninjas” - între 7 și 17 ani) învață programare de la voluntari
             (“mentors”) din comunitatea locală. Dojo-ul din Alba Iulia este o inițiativă
             a <a href="https://ai3.ro/">AI3</a>, primul cluster de IT din
-            județul Alba..
+            județul Alba.
           </p>
           <Button
             href="/regulament"

diff --git a/src/data.js b/src/data.js
@@ -2,7 +2,7 @@ export const navLinks = [
   { index: 1, name: "Acasă", href: "/" },
   { index: 2, name: "Blog", href: "/blog/" },
   { index: 3, name: "Despre", href: "/despre/" },
-  { index: 4, name: "Contact", href: "/#contact" },
+  { index: 4, name: "Contact", href: "/contact/" },
 ];
 
 export const sponsors = [

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -0,0 +1,132 @@
+---
+import Pattern from "../components/Pattern.astro";
+import Layout from "../layouts/Layout.astro";
+import Map from "../components/Map";
+import Button from "../components/Button.astro";
+---
+
+<Layout title="Contact">
+  <div
+    class="relative isolate overflow-hidden bg-white lg:pt-60 px-6 py-12 sm:py-32 lg:overflow-visible lg:px-0"
+  >
+    <div class="absolute inset-0 -z-10 overflow-hidden">
+      <svg
+        class="absolute left-[max(50%,25rem)] lg:top-48 h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-200 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)]"
+        aria-hidden="true"
+      >
+        <defs>
+          <pattern
+            id="e813992c-7d03-4cc4-a2bd-151760b470a0"
+            width="200"
+            height="200"
+            x="50%"
+            y="-1"
+            patternUnits="userSpaceOnUse"
+          >
+            <path
+              d="M100 200V.5M.5 .5H200"
+              fill="none"
+            ></path>
+          </pattern>
+        </defs>
+        <svg
+          x="50%"
+          y="-1"
+          class="overflow-visible fill-gray-50"
+        >
+          <path
+            d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+            stroke-width="0"
+          ></path>
+        </svg>
+        <rect
+          width="100%"
+          height="100%"
+          stroke-width="0"
+          fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
+        ></rect>
+      </svg>
+    </div>
+    <div
+      class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-0"
+    >
+      <div
+        class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"
+      >
+        <div class="lg:pr-4">
+          <div class="lg:max-w-lg">
+            <h1
+              class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
+            >
+              Contactează-ne
+            </h1>
+            <p class="mt-6 text-lg leading-8 text-gray-800">
+              Dojo-ul are loc în fiecare Joi de la ora 16:00 pe <a
+                href="https://maps.app.goo.gl/rguUaLxb9ctmKuMg6"
+                >strada Gladiolelor numărul 3A</a
+              >, dar asigură-te că urmărești <a
+                href="https://www.facebook.com/groups/1609746875954975/"
+                >grupul de facebook</a
+              > pentru modificări de program.
+            </p>
+            <Button
+              href="https://forms.gle/4fqArMANeztCBgSr7"
+              text="Înscrie-te"
+            />
+            <ul
+              role="list"
+              class="space-y-4 text-gray-600 list-disc px-4 pt-10"
+            >
+              <li>
+                Asigură-te că ai citit <a href="/regulament/">regulamentul</a>.
+              </li>
+              <li>
+                Poți să devii mentor dacă ai fost ninja la vreun CoderDojo
+                existent sau dacă ești membru <a
+                  class="text-accent"
+                  href="https://ai3.ro/"
+                  >AI3</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex items-start lg:-ml-12 lg:-mt-12 lg:p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
+      >
+        <Map client:idle />
+      </div>
+      <div
+        class="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"
+      >
+        <div class="lg:pr-4">
+          <div class="max-w-xl text-base leading-7 text-gray-700 lg:max-w-lg">
+            <p class="text-base tracking-wide leading-7">
+              Pentru orice situație deosebită, copilul este încurajat să se
+              adreseze mentorilor și, dacă simte, tutorelui/părintelui. <br
+              />Oricând se pot contacta și următorii mentori:
+              <ol class="list-disc text-gray-600 px-4 pt-2">
+                <li>
+                  Claudiu Ceia - mentor fondator: <a
+                    class="text-accent"
+                    href="tel:+40774453197"
+                    >+40 774 453 197</a
+                  >
+                </li>
+                <li>
+                  Adrian Roșian - mentor, voluntar oficial: <a
+                    class="text-accent"
+                    href="tel:+40751152808"
+                    >+40 751 152 808</a
+                  >
+                </li>
+              </ol>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Pattern />
+</Layout>