1 files changed, 73 insertions, 0 deletions
diff --git a/components/JoinUs.vue b/components/JoinUs.vue
new file mode 100644
index 0000000..f534d22
--- /dev/null
+++ b/components/JoinUs.vue
@@ -0,0 +1,73 @@
+<template>
+  <section class="joinus">
+    <div class="heading">
+      <div class="title">
+        <div class="text">Rozpocznij swoją harcerską przygodę!</div>
+      </div>
+      <div class="button">
+        <router-link to="/kontakt">Dołącz do nas!</router-link>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.joinus {
+  width: 100%;
+
+  padding: 80px 20%;
+
+  background: #dddddd;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.heading {
+  width: 900px;
+  padding: 100px 0;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  background-color: #340c0e;
+  color: #ffffff;
+
+  width: 260px;
+  height: 85px;
+  margin-bottom: 20px;
+
+  text-align: left;
+}
+
+.title .text {
+  margin: 0;
+  padding: 10px;
+  font-size: 24px;
+}
+
+.button {
+  background-color: #507b34;
+  padding: 10px;
+  max-width: 150px;
+}
+
+.button a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+@media (max-width: 500px) {
+  .heading {
+    margin: 0;
+    align-items: center;
+  }
+
+  .joinus {
+    padding: 80px 20px;
+  }
+}
+</style>
\ No newline at end of file