add basic job description

README.md

@@ -1,2 +1,3 @@
 # website4
-Next gen website for zinc.dev
+
+Next gen website for openobserve.ai

assets/css/main.css

@@ -10,8 +10,8 @@
   --theme-color-text-primary-dark: #ffffff;
   --nav-bar-top-margin: 6rem;
   --nav-height: 100px;
-  --theme-color-hero-highlight-text: #5960B2;
-  --swiper-navigation-color:#5960B2 ;
+  --theme-color-hero-highlight-text: #ED4725;
+  --swiper-navigation-color:#ED4725 ;
 
 }
 
@@ -24,6 +24,6 @@ body {
 }
 
 .highlight {
-  color: #5960B2;
+  color: #ED4725;
 }
 

blog/pages/blog/[slug].vue

@@ -7,9 +7,9 @@
     />
 
     <div
-      class="blog-content container mx-auto px-4 pb-8 mt-8 flex flex-col md:flex-row"
+      class=" container mx-auto px-4 pb-8 mt-8 flex flex-col md:flex-row"
     >
-      <article style="flex: 5" class="md:pr-8">
+      <article style="flex: 5" class="blog-content md:pr-8">
        <h1 class="text-4xl text-left text-black">{{ article.title }}</h1>
 
         <div
@@ -185,7 +185,7 @@ useHead({
 <style lang="postcss" scoped>
 :deep(.nuxt-content h1),
 .blog-content h1 {
-  @apply text-2xl md:text-4xl mb-4 text-theme-primary-600 font-medium;
+  @apply text-2xl md:text-4xl mb-4 text-black font-medium;
 }
 
 :deep(.nuxt-content h2),

blog/utils/getSiteMeta.ts

@@ -1,12 +1,12 @@
 const type = "website";
-const url = "https://zinc.dev";
+const url = "https://openobserve.ai";
 const title = "ZincLab Website";
 const description = "ZincLab Website";
 const mainImage = `/img/logo.png`;
 
 // Ref: https://redfern.dev/articles/adding-social-media-seo-meta-data-using-nuxt-content/
 
-export default (article:any) => {
+export default (article: any) => {
   return [
     {
       hid: "description",
@@ -37,7 +37,6 @@ export default (article:any) => {
       hid: "og:image",
       property: "og:image",
       content: (article && `/img/blog/${article.img}`) || mainImage,
-
     },
     {
       hid: "twitter:url",

components/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="">
     <div
-      class="w-full bg-cover bg-[url('/img/homepage/footerbg5.svg')] bg-no-repeat h-full"
+      class="w-full bg-cover bg-[url('/img/footerbg.png')] bg-no-repeat h-full "
     >
       <footer class="w-full body-font pt-20">
         <div
@@ -19,7 +19,7 @@
                 />
               </div>
             </nuxt-link>
-            <p class="lg:mt-1 text-sm text-white text-center md:text-left">
+            <p class="lg:mt-1 text-sm text-black text-center md:text-left">
               {{ footerData.address }}
             </p>
           </div>
@@ -30,36 +30,36 @@
               class="flex flex-col md:space-x-10 lg:space-x-28 space-y-6 md:space-y-0 md:flex-row"
             >
               <div class="w-full">
-                <div class="flex flex-col text-white">
+                <div class="flex flex-col text-black">
                   <h3 class="font-bold text-lg pb-2 text-center md:text-left">
                     {{ footerData.quickLink.title }}
                   </h3>
                 </div>
                 <ul>
                   <li
-                    class="list-none mb-2 text-white text-center md:text-left"
+                    class="list-none mb-2 text-black text-center md:text-left"
                     v-for="(item, index) in footerData.quickLink.content"
                   >
                     <nuxt-link
                       :href="item.link"
                       :target="item.target"
                       :key="index"
-                      class="text-center font-medium tetx-white text-sm md:text-sm hover:text-theme-secondary-300 transform duration-100 hover:underline hover:underline-offset-4"
+                      class="text-center font-medium tetx-white text-sm md:text-sm hover:text-theme-primary-500 transform duration-100 hover:underline hover:underline-offset-4"
                     >
                       {{ item.text }}
                     </nuxt-link>
                   </li>
                 </ul>
               </div>
               <div class="w-full">
-                <div class="flex flex-col text-white">
+                <div class="flex flex-col text-black">
                   <h3 class="font-bold text-xl pb-2 text-center md:text-left">
                     {{ footerData.docs.title }}
                   </h3>
                 </div>
                 <ul>
                   <li
-                    class="list-none mb-2 text-white text-center md:text-left"
+                    class="list-none mb-2 text-black text-center md:text-left"
                     v-for="(item, index) in footerData.docs.content"
                   >
                     <nuxt-link
@@ -68,20 +68,20 @@
                         item.text == 'Get Started For Free' ? '_blank' : ''
                       "
                       :key="index"
-                      class="font-medium text-sm hover:text-theme-secondary-300 transform duration-100 hover:underline hover:underline-offset-4"
+                      class="font-medium text-sm hover:text-theme-primary-500 transform duration-100 hover:underline hover:underline-offset-4"
                     >
                       {{ item.text }}
                     </nuxt-link>
                   </li>
                 </ul>
               </div>
               <div class="w-full">
-                <div class="flex flex-col space-y-2 text-white">
+                <div class="flex flex-col space-y-2 text-black">
                   <h3 class="font-bold text-xl text-center md:text-left">
                     {{ footerData.items.title }}
                   </h3>
                   <div
-                    class="flex justify-start hover:text-theme-secondary-300"
+                    class="flex justify-start hover:text-theme-primary-500"
                   >
                     <img
                       :src="footerData.items.emailicon"
@@ -96,7 +96,7 @@
                     >
                   </div>
                   <div
-                    class="flex justify-start hover:text-theme-secondary-300"
+                    class="flex justify-start hover:text-theme-primary-500"
                   >
                     <img
                       :src="footerData.items.callicon"
@@ -129,7 +129,7 @@
           </div>
         </div>
       </footer>
-      <div class="bg-white bg-opacity-5 text-white py-4 flex">
+      <div class="bg-theme-primary-200 bg-opacity-20 text-black py-4 flex">
         <div
           class="mx-auto w self-center px-4 text-center flex flex-col md:flex-row"
         >
@@ -145,7 +145,7 @@ const currentYear = computed(() => {
   return new Date().getFullYear();
 });
 const footerData = {
-  logo: "/img/logo/footerLogo.svg",
+  logo: "/img/logo/logo_horizontal.svg",
   address:
     "315, Montgomery St, 10th Floor, San Francisco, California,94104, United States of America",
   quickLink: {
@@ -173,8 +173,8 @@ const footerData = {
       },
       {
         text: "Knowledge Base",
-        link: "https://zinc.dev/kb",
-        target: "_blank"
+        link: "https://openobserve.ai/kb",
+        target: "_blank",
       },
     ],
   },
@@ -183,7 +183,7 @@ const footerData = {
     content: [
       {
         text: "Get Started For Free",
-        link: "https://observe.zinc.dev",
+        link: "https://observe.openobserve.ai",
       },
       {
         text: "Bug Bounty Program",
@@ -213,11 +213,11 @@ const footerData = {
   social: [
     {
       icon: "/img/github.svg",
-      link: "https://github.com/zinclabs/zincobserve",
+      link: "https://github.com/zinclabs/openobserve",
     },
     {
       icon: "/img/slack.svg",
-      link: "https://zincobserve.slack.com/",
+      link: "https://openobserve.slack.com/",
     },
     {
       icon: "/img/linkdin.svg",

components/GithubCount.vue

@@ -1,7 +1,14 @@
 <template>
- <!-- Place this tag where you want the button to render. -->
-<github-button href="https://github.com/zinclabs/zincobserve"  data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Star zinclabs/zincobserve on GitHub">Star</github-button>
+  <!-- Place this tag where you want the button to render. -->
+  <github-button
+    href="https://github.com/zinclabs/openobserve"
+    data-color-scheme="no-preference: light; light: light; dark: light;"
+    data-size="large"
+    data-show-count="true"
+    aria-label="Star zinclabs/openobserve on GitHub"
+    >Star</github-button
+  >
 </template>
 <script setup>
-import GithubButton from 'vue-github-button'
+import GithubButton from "vue-github-button";
 </script>

components/GithubForkCount.vue

@@ -1,8 +1,14 @@
 <template>
-<!-- Place this tag where you want the button to render. -->
-<github-button href="https://github.com/zinclabs/zincobserve/fork" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Fork zinclabs/zincobserve on GitHub">Fork</github-button>
+  <!-- Place this tag where you want the button to render. -->
+  <github-button
+    href="https://github.com/zinclabs/openobserve/fork"
+    data-color-scheme="no-preference: light; light: light; dark: light;"
+    data-size="large"
+    data-show-count="true"
+    aria-label="Fork zinclabs/openobserve on GitHub"
+    >Fork</github-button
+  >
 </template>
 <script setup>
-import GithubButton from 'vue-github-button'
-
+import GithubButton from "vue-github-button";
 </script>

components/Hiring.vue

@@ -1,25 +1,42 @@
 <template>
-    <Section v-if="data.jobs">
-        <SectionHeading :title='data.title' :subtitle="data.subtitle" />
-        <div class="container mx-auto px-4 ">
-            <div v-for="(item, index) in data.jobs">
+  <Section v-if="data.jobs.length > 0">
+    <SectionHeading :title="data.title" :subtitle="data.subtitle" />
+    <div
+      class="container mx-auto px-4 py-4 flex flex-col md:flex-row space-x-6"
+    >
+      <!-- <div v-for="(item, index) in data.jobs">
                 <div class="flex flex-row md:flex-row justify-items-center justify-between py-3">
                     <div class="font-bold text-lg md:text-xl py-2 text-black">&#9673; {{ item.title }} </div>
-                    <Button variant="primary" :to="item.btnLink" target="_blank">{{ item.btnText }}</Button>
+                    <Button variant="primary" :to="`/career/apply?job=${item.id}`">{{ item.btnText }}</Button>
                 </div>
                 <div v-if="item.description">
                     <div class="text-gray-600 mb-2">Job Description</div>
                     <div v-html="item.description"></div>
                 </div>
                 <hr class="border my-4">
-            </div>
+            </div> -->
+      <div
+        class="flex flex-col bg-white border border-theme-primary-300 p-4 shadow rounded-lg"
+        v-for="(item, index) in data.jobs"
+      >
+          <div class="font-bold text-lg md:text-xl py-2 text-black">
+            &#9673; {{ item.title }}
+          </div>
+          <div v-if="item.description" class="flex-1 mb-3">
+            <div class="text-gray-600 mb-2 flex-1">Job Description</div>
+            <div v-html="item.description" class="text-sm flex-1"></div>
+          </div>
+          <Button variant="primary" :to="`/careers/apply?job=${item.id}`" classes="text-center">{{
+            item.btnText
+          }}</Button>
         </div>
-    </Section>
+    </div>
+  </Section>
 </template>
 <script setup>
 defineProps({
-    data: {
-        type: Object
-    }
-})
-</script>
+  data: {
+    type: Object,
+  },
+});
+</script>

components/Numbers.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <SlideIn> -->
   <div
-    class="bg-gradient-to-tr from-theme-secondary-800 via-theme-secondary-500 to-theme-primary-500 w-full py-20"
+    class="bg-gradient-to-tr from-theme-primary-500 via-theme-primary-400 to-theme-primary-300 w-full py-20"
   >
     <div class="grid grid-cols-2 md:grid-cols-4 gap-4 container mx-auto px-4">
       <div class="py-2 md:py-10" v-for="(item, index) in items.items">

components/SubHeader.vue

@@ -1,33 +1,40 @@
 <template>
   <div v-if="subHeaderVisibility" class="nav bg-white text-black py-2">
-    <p class="nav-item"><nuxt-link to="/docs/zincsearch/configuration">Zinc Search</nuxt-link></p>
-    <p class="nav-item"><nuxt-link to="/docs/zincobserve/configuration">Zinc Observe</nuxt-link></p>
+    <p class="nav-item">
+      <nuxt-link to="/docs/zincsearch/configuration">Zinc Search</nuxt-link>
+    </p>
+    <p class="nav-item">
+      <nuxt-link to="/docs/openobserve/configuration">Zinc Observe</nuxt-link>
+    </p>
   </div>
 </template>
 <script setup>
-const route = useRoute()
+const route = useRoute();
 
-const subHeaderVisibility = ref(false)
+const subHeaderVisibility = ref(false);
 
-watch(() => route.path, () => {
-    console.log('route changed' + route.path)
-    if (route.path.startsWith('/docs')) {
-        subHeaderVisibility.value = true
+watch(
+  () => route.path,
+  () => {
+    console.log("route changed" + route.path);
+    if (route.path.startsWith("/docs")) {
+      subHeaderVisibility.value = true;
     } else {
-        subHeaderVisibility.value = false
+      subHeaderVisibility.value = false;
     }
-}, { immediate: true })
-
+  },
+  { immediate: true }
+);
 </script>
 <style scoped>
 .nav {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
 }
 
 .nav-item {
-    margin-left: 10px;
-    margin-right: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 </style>

components/common/FAQ/FaqItem.vue

@@ -1,12 +1,13 @@
 <template>
-    <div class="container mx-auto shadow rounded-lg bg-white border border-gray-100 text-black" >
-        <div class="flex justify-between items-center px-5 py-4">
+    <div class="container mx-auto shadow rounded-lg bg-white border border-gray-100 text-black py-4" >
+        <div class="flex justify-between items-center px-5">
             <div class=" text-sm md:text-xl font-semibold ">{{ item.question }}</div>
+
             <!-- <div v-if="clicked"><img src="/img/icons/Minus.svg" alt="minus icon" /></div>
             <span v-else> <img src="/img/icons/Plus.svg" alt="plusicon" /> </span> -->
         </div>
-        <div class="container mx-auto px-5 text-black">
-            <div className="text-base py-2 leading-relaxed tracking-wider" v-html="item.answer" ></div>
+        <div class="container mx-auto px-5 pt-3 text-black">
+            <div class="text-base leading-relaxed tracking-wider" v-html="item.answer" ></div>
         </div>
     </div>
 </template>