Skip to content

Commit

Permalink
feat(resources): new partner page
Browse files Browse the repository at this point in the history
* created partners-page-ui

* fixed issues as per comments

* removed select and added input in partners form and added animation to cards instead of kestra

* fix(): small changes

* done some text change and renamed frame 922.svg

* Change image url

---------

Co-authored-by: YannC <[email protected]>
  • Loading branch information
mageexcel and Skraye authored Sep 7, 2023
1 parent db89e27 commit dffdbfb
Show file tree
Hide file tree
Showing 28 changed files with 9,758 additions and 4,774 deletions.
5 changes: 5 additions & 0 deletions assets/styles/_variable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,12 @@ $purple-9: 0px 12.972px 39.7269px rgba(90, 0, 176, 0.1);
$purple-10: #150E1C;
$purple-11: #332C3B;
$purple-12: #432A71;
$purple-13: #e5e4f7;
$purple-14: #8e20f9;
$purple-15: #9237fb;
$purple-16: #281A35;
$purple-17: #F5F5FF;
$purple-18: #7E719F;
$purple-19: conic-gradient(from 90deg at 50% 50%, #BE79FF 0deg, #7136F6 360deg);
$purple-20: #291E39;
$purple-21: #A42DCD;
Expand Down
10 changes: 10 additions & 0 deletions components/layout/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,15 @@
</p>
</NuxtLink>
</li>
<li>
<NuxtLink class="dropdown-item" href="/kestra-partners" @click="globalClick(true)">
<Handshake />
<p>
<span>Partners</span><br/>
Elevate your Kestra use through our partner ecosystem
</p>
</NuxtLink>
</li>
<li>
<NuxtLink class="dropdown-item" href="/faq" @click="globalClick(true)">
<AccountGroup/>
Expand Down Expand Up @@ -256,6 +265,7 @@
import Security from "vue-material-design-icons/Security.vue"
import PostOutline from "vue-material-design-icons/PostOutline.vue"
import AccountGroup from "vue-material-design-icons/AccountGroup.vue"
import Handshake from "vue-material-design-icons/Handshake.vue"
import AccountStarOutline from "vue-material-design-icons/AccountStarOutline.vue"
import Segment from "vue-material-design-icons/Segment.vue"
import Magnify from "vue-material-design-icons/Magnify.vue"
Expand Down
163 changes: 163 additions & 0 deletions components/partners/BecomeAPartner.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<template>
<div class="container-fluid">
<div class="hero hero-sm container">
<div class="row justify-content-center mb-4">
<div class="col-md-10 col-lg-7 text-center">
<h3 data-aos="fade-left">Become a Partner</h3>
<p>If you are interested in becoming a Kestra partner, please contact us with any questions.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<div class="card-text">
<form ref="becomeAPartner" @submit="checkForm" class="needs-validation" novalidate data-aos="fade-left">
<div class="row mb-3">
<div class="form-group col-md-6 has-error">
<label for="firstName" class="mb-1"
>First Name *</label
>
<input
type="text"
class="form-control"
id="firstName"
required
/>
</div>
<div class="form-group col-md-6">
<label for="lastName" class="mb-1"
>Last Name *</label
>
<input
type="text"
class="form-control"
id="lastName"
required
/>
</div>
</div>
<div class="form-group mb-3">
<label for="companyMail" class="mb-1"
>Company Mail *</label
>
<input
type="email"
class="form-control"
id="companyMail"
required
/>
</div>
<div class="form-group mb-3">
<label for="jobTitle" class="mb-1"
>
Job Title
</label>
<input
type="text"
class="form-control"
id="jobTitle"
required
/>
</div>
<div class="form-group mb-4">
<label for="howToIntegrateKestraPartnerShip" class="mb-1"
>
How would you integrate Kestra partnership program?
</label
>
<input
type="text"
class="form-control"
id="howToIntegrateKestraPartnerShip"
required
/>
</div>
<div class="d-flex justify-content-center mb-4">
<button
type="submit"
class="btn btn-primary contact-us py-3 px-4"
data-aos="zoom-in"
>
Contact Us
</button>
</div>
<div class="text-center">
<p class="mandatory-fields mt-2">* Mandatory fields</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script setup>
const hubSpotUrl = "https://api.hsforms.com/submissions/v3/integration/submit/27220195/77f32ae3-0f49-404a-a28d-6dfe92c8bc78";
const checkForm = function (){
e.preventDefault()
e.stopPropagation()
const form = this.$refs.becomeAPartner;
const route = useRoute();
if (form.checkValidity()) {
form.classList.add('was-validated')
const formData = {
fields: [{
objectTypeId: "0-1",
name: "firstname",
value: form.firstName.value
},
{
objectTypeId: "0-1",
name: "lastname",
value: form.lastName.value
},
{
objectTypeId: "0-1",
name: "companyMail",
value: form.companyMail.value
},
{
objectTypeId: "0-1",
name: "jobTitle",
value: form.jobTitle.value
},
{
objectTypeId: "0-1",
name: "howToIntegrateKestraPartnerShip",
value: form.howToIntegrateKestraPartnerShip.value
}],
context: {
pageUri: route.path,
pageName: route.path
}
}
fetch(hubSpotUrl, {method: "POST", body: JSON.stringify(formData), headers: {"Content-Type": "application/json"}})
.then((_) => {
form.reset()
form.classList.remove('was-validated')
})
}
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variable";
.container-fluid {
background: $purple-13;
.form-group {
margin-bottom: 10px;
}
.mandatory-fields {
color: $purple-15;
font-size: small;
}
}
</style>
111 changes: 111 additions & 0 deletions components/partners/BetterTogether.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<template>
<div class="container">
<Section
title="Reasons to integrate with Kestra"
subtitle="Better together"
>
<div class="row">
<div class="col-md-4 testimonials-item">
<TestimonialsItem
:item="testimonialData[0]"
data-aos="fade-left"
/>
</div>
<div class="col-md-4 testimonials-item">
<TestimonialsItem
:item="testimonialData[1]"
data-aos="zoom-in"
/>
</div>
<div class="col-md-4 testimonials-item">
<TestimonialsItem
:item="testimonialData[2]"
data-aos="fade-right"
/>
</div>
</div>
</Section>
</div>
</template>

<script>
import Section from "../layout/Section.vue";
import TestimonialsItem from "../home/TestimonialsItem.vue";
export default {
components: { Section, TestimonialsItem },
data() {
return {
testimonialData: [
{
profile: "/partners/Chris-Tata.svg",
message:
"Airbyte and Kestra share a common vision: to simplify data pipeline creation. This partnership brings together the strengths of two leading data management companies, so our customers can get the most out of their data and achieve their business goals.",
name: "Chris Tata",
designation: "Head of Partnerships @ Airbyte",
alt: "Picture of Chris Tata",
},
{
profile: "/partners/Adrian-Brudaru.svg",
message:
"Kestra and dlt share a vision of simplifying data pipeline creation. Thanks to Kestra's and dlt's declarative interface, you can deploy existing pipelines in seconds or build new ones in minutes, complete with self healing schemas and lineage to increase robustness and trust.",
name: "Adrian Brudaru",
designation: "Co-Founder @ dlthub",
alt: "Picture of Adrian Brudaru",
},
{
profile: "/partners/Charles-Letaillieur.svg",
message:
"Kestra offers an elegant solution to the pain points we face in the data transformation projects of our customers: monitoring, management and maintenance of large-scale data flows.What sets Kestra apart is not only its open-source community but also its seamless integration with modern data stack tools like Airbyte and Restack. We are genuinely thrilled to engage Kestra.",
name: "Charles Letaillieur",
designation: "Senior Manager @ Converteo",
alt: "Picture of Charles Letaillieur",
},
],
};
},
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variable";
.row {
align-items: center;
justify-content: center;
}
:deep(.card-body) {
padding: calc($spacer * 2);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 420px;
&:before {
content: "";
font-size: 10rem;
color: var(--bs-primary);
position: absolute;
margin-top: -3.5rem;
margin-left: -0.5rem;
}
p {
margin-top: calc($spacer * 3.5);
}
.footer {
img {
border-radius: 50%;
float: left;
margin-right: $spacer;
}
span {
font-size: $font-size-sm;
float: left;
}
}
}
</style>
33 changes: 33 additions & 0 deletions components/partners/Headers.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<template>
<div class="position-relative container-fluid d-flex justify-content-center">
<div class="position-relative">
<img src="/partners/Frame922.svg" alt="Frame 922">
<div class="logo position-absolute start-50 translate-middle">
<img src="/partners/Badge_Kestra_Technology_Partner.svg" alt="Badge_Kestra_Technology_Partner">
</div>
</div>
<div class="description position-absolute start-50 translate-middle text-center w-50">
<h2>Kestra Partner <br><span>Ecosystem</span></h2>
<span>Whether you are building something new, upgrading the existing, or replatforming from the old, you can trust these partners to make your journey a successful one.</span><br>
<button class="btn btn-primary mt-4">Become a partner</button>
</div>
</div>
</template>

<style scoped lang="scss">
@import "../../assets/styles/variable";
.container-fluid {
background: $purple-17;
padding-bottom: 3rem;
.logo {
top: 245px;
}
.description {
top: 75%;
}
h2 span {
font-weight: 100;
}
}
</style>
Loading

1 comment on commit dffdbfb

@vercel
Copy link

@vercel vercel bot commented on dffdbfb Sep 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

kestra-io – ./

kestra-io-kestra.vercel.app
kestra-io.vercel.app
kestra-io-git-main-kestra.vercel.app

Please sign in to comment.