Skip to content

Commit

Permalink
feat: contact page
Browse files Browse the repository at this point in the history
  • Loading branch information
loicmathieu committed Apr 11, 2023
1 parent 2985258 commit 394a35b
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 0 deletions.
1 change: 1 addition & 0 deletions assets/styles/_variable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ $purple-13: #9124FA;
$purple-14: #AA50FF;
$purple-15: #9022FA;
$purple-16: #281A35;
$purple-17: #9327FB;

$enable-reduced-motion: false;

Expand Down
94 changes: 94 additions & 0 deletions components/contact/Header.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<template>
<div class="container-fluid">
<div class="hero container">
<div class="row">
<div class="col-md-6 get-in-touch">
<h2>GET IN TOUCH</h2>
<h1>Contact Us</h1>
<h2>If you have questions, inquiries, or feedback about Kestra, we're looking to hear from you.</h2>
</div>
<div class="col-md-6">
<h3>Reach Out to Us</h3>
<form>
<div class="row">
<div class="form-group col-md-6">
<label for="firstName">First Name *</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="form-group col-md-6">
<label for="lastName">Last Name *</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="company">Company</label>
<input type="text" class="form-control" id="company">
</div>
<div class="form-group col-md-6">
<label for="email">Email *</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="form-group">
<label for="message">Message *</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="checkbox consent">
<label for="newsletterConsent">
<input type="checkbox" id="newsletterConsent">&nbsp;&nbsp;I agree to receive Kestra's newsletter with updates, news, and insights. I can unsubscribe at any time.
</label>
</div>
<div class="checkbox consent">
<label for="personalDataConsent">
<input type="checkbox" id="personalDataConsent">&nbsp;&nbsp;I consent to the processing of my personal data in accordance with Kestra's Privacy Policy and GDPR requirements. *
</label>
</div>
<button type="submit" class="btn btn-primary me-2">Submit</button>
</form>
<p class="mandatory-fields">* Mandatory fields</p>
</div>
</div>
</div>
</div>
</template>

<script>
import Console from "vue-material-design-icons/Console.vue"
import Email from "vue-material-design-icons/Email.vue"
export default {
components: {Console, Email}
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variable";
.container-fluid {
background: $purple-8;
.form-group {
margin-bottom: 10px;
}
.checkbox {
margin-bottom: 10px;
}
.consent {
font-size: small;
}
.mandatory-fields {
color: $purple-17;
font-size: small;
}
.get-in-touch {
background: url("/landing/company/frame-645.png") no-repeat top right;
padding-left: calc($spacer * 4);
padding-right: calc($spacer * 4);
}
}
</style>
78 changes: 78 additions & 0 deletions components/contact/Slack.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<template>
<div class="container">
<Section
title="Slack community"
subtitle="Orchestrate Success Together"
baseline="Join the slack to share ideas and best practices, get help with technical questions, and discuss Kestra with other developers (and even the founders)."
>

<div class="row card-group card-centered mb-2">
<div class="col-md-4 mb-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="card-icon">
<TooltipQuestion />
</span>
<h5 class="card-title">
Ask a question
</h5>
<p class="card-text">Get stuck with the documentation, We're here to help!</p>
<p class="channel">#help</p>
</div>
</div>
</div>

<div class="col-md-4 mb-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="card-icon">
<HandWave />
</span>
<h5 class="card-title">Introduce yourself</h5>
<p class="card-text">Welcome to the Kestra community! Let's introduce ourselves!</p>
<p class="channel">#introductions</p>
</div>
</div>
</div>

<div class="col-md-4 mb-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="card-icon">
<MessageAlert />
</span>
<h5 class="card-title">Share Feedback</h5>
<p class="card-text">Discussions about the product, including your feedback, ideas, and dreams.</p>
<p class="channel">#feedback-and-requests</p>
</div>
</div>
</div>
</div>
<div class="text-center ">
<a href="https://api.kestra.io/v1/communities/slack/redirect" class="btn btn-lg btn-primary me-2" target="_blank">
Join our slack
</a>
</div>
</Section>
</div>
</template>

<script>
import Section from '../../components/layout/Section.vue';
import TooltipQuestion from "vue-material-design-icons/TooltipQuestion.vue";
import HandWave from "vue-material-design-icons/HandWave.vue";
import MessageAlert from "vue-material-design-icons/MessageAlert.vue";
export default {
components: {Section, TooltipQuestion, HandWave, MessageAlert}
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variable";
.card-body {
.channel {
color: $purple-14;
}
}
</style>
8 changes: 8 additions & 0 deletions pages/company/contact.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<ContactHeader />
<ContactSlack />
</template>

<script setup>
</script>
Binary file added public/landing/company/frame-645.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 394a35b

Please sign in to comment.