Merge pull request #10 from Teradata/test-vuejs-components

boton
Teradata · Feb 16, 2024 · 99a1aa1 · 99a1aa1
2 parents 0fabde4 + cdd9b3a
commit 99a1aa1
Showing 1 changed file with 47 additions and 3 deletions.
diff --git a/supplemental_ui/partials/landing.hbs b/supplemental_ui/partials/landing.hbs
@@ -1,12 +1,21 @@
-<div class="body">
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+
+
+<div class="body"  id="app">
   <main class="article">
     <div class="content landing">
       <div class="landing-container">
         <div class="call-to-action">
           <div class="call-to-action-text">
             <div class="header">Getting Started</div>
             <div class="short-description">Get quickly up to speed with Teradata Vantage. Learn about features. Find how-tos for common tasks. Explore sample source code.</div>
-            <div class="button-container"><a class="call-to-action-button" href="#getting-access-to-vantage">Get access to Teradata Vantage</a><a class="call-to-action-button-secondary" href="#browse-content">Browse content</a></div>
+            <div class="button-container">
+              <!-- Utiliza tu componente Vue -->
+                <button1></button1>
+                <button2></button2>
+        <!--      <a class="call-to-action-button" href="#getting-access-to-vantage">Get access to Teradata Vantage</a> 
+              <a class="call-to-action-button-secondary" href="#browse-content">Browse content</a>-->
+            </div>
             <div class="alternate-action">Prefer structured learning? Explore courses at <a href="https://teradata.com/University/Overview">Teradata University</a>.</div>
           </div>
         </div>
@@ -413,8 +422,43 @@
     </div>
   </main>
 </div>
-
+<template id="myComponent1">
+    <a href="https://www.teradata.com/experience" class="my-button">Contribute</a>
+  </template>
+<template id="myComponent2">
+  <a href="https://www.teradata.com/" class="my-button">Request</a>
+</template>
+<script>
+  // Crea e monta una instancia de Vue
+  new Vue({
+    el: '#app',
+    components: {
+      'button1': {
+        template: '#myComponent1'
+      },
+      'button2': {
+        template: '#myComponent2'
+      }
+    }
+  });
+</script>
 <style>
+.my-button{
+  color: #00233C;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 26px;
+  border-radius: 12px;
+  border: 1px solid #00233C;
+  padding: 16px;
+  height: 58px;
+}  
+.my-button:hover {
+  text-decoration: none;
+  background-color: #dfdddd;
+}  
 .call-to-action {
   margin-top: 20px;
 }