From 1cf3a05892e9ca7a530806cb92c2392e79759791 Mon Sep 17 00:00:00 2001
From: jorgeural <jorgeural88@gmail.com>
Date: Mon, 25 Feb 2019 14:04:12 +0100
Subject: [PATCH] Meetup section

---
 src/components/HomeMeetup/Index.vue | 78 +++++++++++++++++++++++++++++
 src/pages/index.vue                 |  7 ++-
 2 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/HomeMeetup/Index.vue

diff --git a/src/components/HomeMeetup/Index.vue b/src/components/HomeMeetup/Index.vue
new file mode 100644
index 0000000..47483af
--- /dev/null
+++ b/src/components/HomeMeetup/Index.vue
@@ -0,0 +1,78 @@
+<template>
+  <v-container class="home-meetup">
+    <v-layout
+      row
+      wrap
+      class="home-meetup__title-row text-xs-center">
+      <v-flex 
+        sm12
+        md2
+        class="home-meetup__icon-wrapper" >      
+        <i class="fab fa-meetup home-meetup__icon"/>
+      </v-flex>
+      <v-flex
+        sm12
+        md10>
+        <h2 class="home-meetup__title">No te pierdas nuestro próximo evento.</h2>
+        <h3 class="home-meetup__subtitle">Únete a ~3K personas en Meetup</h3>
+        <br>
+        <a
+          href="https://www.meetup.com/es/Open-Source-Weekends/?chapter_analytics_code=UA-86095652-1"
+          title="Únete al Meetup"
+          class="home-meetup__btn"
+          target="_black">únete al Meetup</a>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<style lang="stylus" scoped>
+.home-meetup
+
+  &__title-row
+    padding-left 20px
+    color #fff
+
+  &__title
+    font-size 40px
+    font-weight 100
+
+  &__subtitle
+    font-size 40px
+    // font-weight 100
+
+  &__icon-wrapper
+        justify-content center
+        align-content center
+        display flex
+
+  &__icon
+    font-size 180px
+
+  &__btn
+    &,
+    &:link,
+    &:visited
+      text-transform uppercase
+      text-decoration none
+      font-weight 600
+      margin-right 10px
+      background-color transparent
+      color #fff
+      padding 0.75em 1.25em
+      transition all .2s
+      border-radius 6px
+      border 1px solid rgba(255,255,255,0.5);
+      box-shadow 0 5px 10px rgba(#000, .2)
+    
+    &:hover
+      background-color #fff
+      color: #1c299d
+      box-shadow 0 10px 20px rgba(#000, .2)
+      backface-visibility hidded
+
+    &:active,
+    &:focus 
+      outline none;
+      box-shadow 0 5px 10px rgba(#000, .2)
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c45ff19..ee30a88 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -42,9 +42,9 @@
       <home-communities/>
     </section>
 
-    <!-- Slack -->
+    <!-- Meetup -->
     <section class="slack-section">
-      <home-slack/>
+      <home-meetup/>
     </section>
 
     <!-- Video -->
@@ -62,7 +62,9 @@
   import HomeTeam from '~/components/HomeTeam/Index.vue'
   import HomeCommunities from '~/components/HomeCommunities/Index.vue'
   import HomeSponsors from '~/components/HomeSponsors/Index.vue'
+  import HomeMeetup from '~/components/HomeMeetup/Index.vue'
   import HomeVideo from '~/components/HomeVideo/Index.vue'
+  
 
   import axios from 'axios'
 
@@ -95,6 +97,7 @@
       HomeTeam,
       HomeCommunities,
       HomeSponsors,
+      HomeMeetup,
       HomeVideo
     },
     data() {