About google cloud community day section into home page.

gdgcloudindia · May 21, 2024 · 1390195 · 1390195
1 parent 8a8f68f
commit 1390195
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 44 deletions.
diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
@@ -93,8 +93,11 @@ export default {
     ...mapMutations(["toggleDrawer"]),
     onClick(e, item) {
       e.stopPropagation();
-      if (item.to || !item.href) return;
-      this.$vuetify.goTo(item.href);
+      // if (item.to || !item.href) return;
+      // this.$vuetify.goTo(item.href);
+      let elmnt = document.getElementById(item.text.toLowerCase());
+      elmnt.scrollIntoView(false);
+      e.currentTarget.className='google-font v-tab--active v-tab';
     },
     getRouteName() {
       if (

diff --git a/src/components/home/About.vue b/src/components/home/About.vue
@@ -1,45 +1,31 @@
 <template>
   <v-container fluid class="py-10 ma-0">
     <v-row justify="center" align="center" >
-      <v-col md="6" cols="12" class="py-7 text-center" > 
-        <v-img
-          class="white"
-          style="width:90%;border-radius: 15px;"
-          :src="require('@/assets/img/about-new-one.png')"
-        >
-          <template v-slot:placeholder>
-            <v-row class="fill-height ma-0" align="center" justify="center">
-              <v-progress-circular
-                indeterminate
-                color="white"
-              ></v-progress-circular>
-            </v-row>
-          </template>
-        </v-img>
-      </v-col>
-      <v-col md="6" cols="12" class="py-7" > 
-        <p class="google-font" style="font-size: 110%;line-height: 1.22;font-weight:300;line-height: 1.6;">
-          Each Google Cloud Community Days event brings you an opportunity to learn about Cloud Technology and Google Cloud Certifications from the industry experts.
-        </p>
-
-        <p class="google-font" style="font-size: 110%;line-height: 1.22;font-weight:300;line-height: 1.6;">
-          Our experts will tell you how Google Cloud Platform and Google Cloud Certifications can help you in accelerating your career by boosting your knowledge.
-          <br><br>
-          You’ll also stand a chance to win exciting prizes and heavy discounts coupons on Google Cloud Certifications at any Google Cloud Community Days event you become a part of.
-        </p>
-
-        <v-btn
-          depressed
-          rel="noreferrer"
-          large
-          color="primary"
-          outlined
-          style="text-transform: capitalize;"
-          href="https://developers.google.com/community/gdg"
-          class="google-font mr-3 mb-3"
-          target="_blank"
-          >Learn More About GDG Program</v-btn
-        >
+      <v-col md="10" cols="12" class="py-7 text-center" > 
+        <v-card style="background-color: #fff;" class="card-wrapper">
+                <p class="google-font" style="font-size: 30px;color:#000;line-height: 1.22;font-weight:300;line-height: 1.6;">
+           What is <span style="font-weight: 600;">Google Cloud Community Day?</span>
+          </p>  
+
+          <p class="google-font" style="font-size: 110%;color:#000;line-height: 1.22;font-weight:300;line-height: 1.6;">
+            <span style="color:#076EFF">#GoogleCloudCommunityDays</span> - is a comprehensive series of community-led flagship events orchestrated by Google Developer Groups Cloud communities across India. These meticulously organised gatherings are tailored to equip attendees with the knowledge and skills necessary to excel in Google Cloud Certifications and to expand their proficiency in Cloud technologies. The events feature interactive sessions, workshops, and expert-led discussions aimed at empowering participants to harness the full potential of Google Cloud services and solutions. 
+            <br><br>
+            Additionally, these events provide an excellent opportunity for networking with like-minded professionals and industry experts in the Cloud computing domain.
+          </p>
+          <div>
+            <v-btn
+            depressed
+            rel="noreferrer"
+            large
+            color="#FBBC04"
+            style="text-transform: capitalize;border-radius: 10px;width:100%;border:2px solid #000;font-weight: 600;"
+            href="https://gdg.community.dev/"
+            class="google-font mr-3 mb-3"
+            target="_blank"
+            >Find a event near you to attend</v-btn
+          >
+          </div>
+            </v-card>
       </v-col>
     </v-row>
    </v-container>

diff --git a/src/components/home/Certifications.vue b/src/components/home/Certifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="ma-0 google-font text-white">
+  <v-container id="certifications" fluid class="ma-0 google-font text-white">
     <div class="certifications-header">
     <h6 style="font-size: 25px; font-weight: 400">
       Accelerate your career growth with

diff --git a/src/router/index.js b/src/router/index.js
@@ -122,6 +122,15 @@ Vue.use(VueRouter)
       color: 'white'
     }
   },
+  //   {
+  //   path: '/certifications',
+  //   name: 'Certifications',
+  //   component: () => import(/* webpackChunkName: "speakers" */ '../components/home/Certifications.vue'),
+  //   meta: {
+  //     title: 'Certifications | Google Cloud Community Days India',
+  //     color: 'white'
+  //   }
+  // },
 
   // {
   //   path: '/coc',

diff --git a/src/store/index.js b/src/store/index.js
@@ -15,6 +15,15 @@ export default new Vuex.Store({
           showToolbar: true,
           showBottomNav: true,
         },
+      },
+        {
+        text: "Certifications",
+        to: "/certifications",
+        icon: 'mdi-format-float-left',
+        meta: {
+          showToolbar: true,
+          showBottomNav: true,
+        },
       },
       // {
       //   text: "Schedule",

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -16,6 +16,16 @@
 
         </v-col>
       </v-row>
+    </v-container>
+    <div class="home-about-wrapper">
+      <v-row align="center" justify="center" class="mt-0 pt-0">
+        <v-col md="10" lg="10" sm="12" class="my-4" >
+          <About class="mt-md-8 mb-md-0 my-xs-0 py-xs-0"/>
+        </v-col>
+      </v-row>
+
+    </div>
+    <v-container fluid class="mt-0 py-0">
 
       <!-- style="background:#f8f9fa" -->
       <!-- style="background:#0cad4d" -->
@@ -34,7 +44,7 @@
       </v-row> -->
 
       <!-- Certifications -->
-      <v-row align="center" justify="center" class="py-0 my-0" style="background: #000">
+      <v-row align="center" justify="center" class="spacing-wrapper" style="background: #000">
         <v-col md="10" lg="10" sm="12" class="py-0 my-0">
           <Certifications class="mt-md-8 mb-md-0 my-xs-0 py-xs-0" />
         </v-col>
@@ -71,7 +81,7 @@ export default {
     //ChapterCards:() => import("@/components/home/ChapterCards"),
     // Countdown:()=> import("@/components/home/Countdown"),
     // YoutubeLinks:()=> import("@/components/home/YoutubeLinks"),
-    // About:()=> import("@/components/home/About"),
+    About:()=> import("@/components/home/About"),
     // DevFestMoments: () => import("@/components/home/DevFestMoments"),
     FollowUs: () => import("@/components/home/follow"),
     Certifications: () => import("@/components/home/Certifications"),
@@ -84,3 +94,22 @@ export default {
   },
 };
 </script>
+<style>
+.home-about-wrapper {
+  background: url('../assets/img/about-theme.svg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 450px;
+}
+.spacing-wrapper {
+  padding-top: 12rem !important;
+}
+@media only screen and (max-width: 668px) {
+  .home-about-wrapper {
+    height: auto;
+  }
+  .spacing-wrapper {
+    padding-top: 2rem !important;
+  }
+}
+</style>