Skip to content

Commit

Permalink
Merge branch 'do-unification-in-contact-page' of https://github.com/c…
Browse files Browse the repository at this point in the history
  • Loading branch information
cp-ashish-k committed Dec 12, 2023
2 parents 6eadf81 + 4710db2 commit 8729f06
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 71 deletions.
28 changes: 17 additions & 11 deletions nuxt-frontend/assets/css/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -189,52 +189,58 @@
}

.header-1 {
@apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.15rem] text-[2rem] leading-[2.6rem] md:text-[2.875rem] md:leading-[3.688rem] xl:text-[3.75rem] xl:leading-[4.875rem];
@apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.15rem] text-[2rem] leading-[2.6rem] lg:text-[3.75rem] lg:leading-[4.875rem];
}

.header-2 {
@apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.12rem] text-[1.5rem] leading-[2.25rem] md:text-[2.25rem] md:leading-[2.938rem] xl:text-[3rem] xl:leading-[3.9rem];
@apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.12rem] text-[1.5rem] leading-[2.25rem] lg:text-[3rem] lg:leading-[3.9rem];
}

.header-3 {
@apply font-opensans-semibold tracking-[-0.08rem] text-[1.25rem] leading-[1.875rem] md:text-[1.625rem] md:leading-[2.313rem] xl:text-[2rem] xl:leading-[3rem];
@apply font-opensans-semibold tracking-[-0.08rem] text-[1.25rem] leading-[1.875rem] lg:text-[2rem] lg:leading-[3rem];
}

.sub-h1-regular {
@apply text-[1.125rem] leading-[1.688rem] md:text-[1.313rem] md:leading-[1.813rem] xl:text-[1.5rem] xl:leading-[2.25rem] font-inter-regular;
@apply text-[1.125rem] leading-[1.688rem] lg:text-[1.5rem] lg:leading-[2.25rem] font-inter-regular;
}

.sub-h1-semibold {
@apply text-[1.125rem] leading-[1.688rem] md:text-[1.313rem] md:leading-[1.813rem] xl:text-[1.5rem] xl:leading-[2.25rem] font-inter-semibold;
@apply text-[1.125rem] leading-[1.688rem] lg:text-[1.5rem] lg:leading-[2.25rem] font-inter-semibold;
}

.sub-h2-medium {
@apply xl:text-[1.375rem] xl:leading-[2.063rem] font-inter-medium;
@apply lg:text-[1.375rem] lg:leading-[2.063rem] font-inter-medium;
}

.sub-h3-regular {
@apply text-base xl:text-[1.25rem] xl:leading-[1.875rem] font-inter-regular;
@apply text-base lg:text-[1.25rem] lg:leading-[1.875rem] font-inter-regular;
}

.sub-h3-medium {
@apply text-base xl:text-[1.25rem] xl:leading-[1.875rem] font-inter-medium;
@apply text-base lg:text-[1.25rem] lg:leading-[1.875rem] font-inter-medium;
}

.sub-h3-semibold {
@apply text-base xl:text-[1.25rem] xl:leading-[1.875rem] font-inter-semibold;
@apply text-base lg:text-[1.25rem] lg:leading-[1.875rem] font-inter-semibold;
}

.sub-h4-regular {
@apply font-inter-regular text-[0.75rem] leading-[1.125rem] xl:text-[1.125rem] xl:leading-[1.688rem];
@apply font-inter-regular text-[0.75rem] leading-[1.125rem] lg:text-[1.125rem] lg:leading-[1.688rem];
}

.sub-h4-semibold {
@apply font-inter-semibold text-[0.75rem] leading-[1.125rem] xl:text-[1.125rem] xl:leading-[1.688rem];
@apply font-inter-semibold text-[0.75rem] leading-[1.125rem] lg:text-[1.125rem] lg:leading-[1.688rem];
}

.primary-btn {
@apply h-12 mx-auto flex w-max items-center rounded-xl py-3 px-6 text-center;
}
.primary-color {
@apply text-[#FF9472];
}
.secondary-color {
@apply text-[#F2709C];
}
}

@tailwind utilities;
Binary file added nuxt-frontend/assets/images/guaranty-badge.webp
Binary file not shown.
83 changes: 83 additions & 0 deletions nuxt-frontend/components/contact/Guaranty.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<template>
<div class="container">
<div
class="rounded-xl border bg-[#F8F8F8] shadow-[0px_2px_35px_rgba(0,0,0,0.12)] mt-16 lg:my-28 px-4 py-8 lg:py-14 mb-16 3xl:mb-[23rem]"
>
<div class="flex flex-row items-center lg:items-end gap-1">
<img
:src="badge"
class="w-[56px] lg:w-[108px] h-[51px] lg:h-[99px] ml-[-5px] lg:ml-0 lg:mt-[-35px]"
alt="badge-image"
/>
<p
class="sub-h3-semibold lg:sub-h1-semibold w-full lg:text-center lg:w-[82%] lg:mb-[-0.5rem] lg:ml-6"
>
In two weeks — at any time, if you feel you won't get the results you
want, you don't have to pay a penny.
</p>
</div>
<div
class="flex flex-col sub-h3-medium text-black-core/[0.60] lg:px-14 mt-6"
>
<div v-for="benefit in benefits" class="mt-4" :key="benefit">
<span v-html="benefit.title"></span>
</div>
</div>
</div>
</div>
</template>
<script>
import badge from "@/assets/images/guaranty-badge.webp";
export default {
data() {
return {
badge,
benefits: [
{
title: ` We don't want you to decide yes or no today... We want you to make a
fully informed decision, that is all.
<span class="sub-h3-semibold text-black-core/[0.87]"
>The only way you can make a fully informed decision is on the
inside, not the outside.</span
>
So you get on the ride with us and see if everything we say on this
website is true and valuable to you.`,
},
{
title: `Then, if it is, that's when you decide to keep it. If not, no hard
feelings. By working with us for two weeks, you will be able to make
an informed decision that this isn't for you. But you can't make that
decision right now for the same reason you don't buy a car without a
test drive.`,
},
{
title: `And remember,
<span class="sub-h3-semibold text-black-core/[0.87]"
>whether it's 79 minutes or 79 hours from now, if you ain't happy,
we ain't happy.</span
>
For any reason whatsoever, if you want your money back you can get it
because we only want to keep your money if you're happy.`,
},
{
title: `All you have to do is
<span class="sub-h3-semibold text-black-core/[0.87]"
>just tell us "This isn't for me" and you got it, No Questions
Asked.</span
>
And our response times to any support request average 59min over a
daytime period.`,
},
{
title: `You can only make such a guarantee when you're confident that what you
have is the real deal and we are damn confident that when you sign up
with us you're getting exactly what you need to
<span class="sub-h3-semibold text-black-core/[0.87]"
>GROW YOUR BUSINESS.</span
>`,
},
],
};
},
};
</script>
48 changes: 23 additions & 25 deletions nuxt-frontend/components/contact/NewContactForm.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<template>
<div class="container my-[50px] lg:mt-0 md:w-full">
<div class="mt-10 lg:mt-0 md:w-full">
<form>
<div
class="rounded-2xl border border-slate-200 bg-white shadow-[0px_0px_45px_rgba(0,0,0,0.1)]"
class="rounded-2xl border bg-white shadow-[0px_0px_45px_rgba(0,0,0,0.1)]"
>
<div class="pt-5 pb-20 px-8 lg:px-12">
<div>
<div class="relative mb-5 md:mb-5 pt-8 text-left">
<div class="pt-5 pb-12 px-8">
<div class="flex flex-col gap-5">
<div class="relative pt-8 text-left">
<input
type="text"
id="username"
class="block peer mx-0 w-full rounded-none border-b border-slate-400 bg-transparent px-0 transition ease-in-out appearance-none text-[1rem] md:text-[1.375rem] font-inter-regular leading-[1.21rem] md:leading-[2.0625rem] text-black-core placeholder-black-core/[.6] focus:outline-none active:outline-none"
class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] focus:outline-none active:outline-none"
name="username"
required
autocomplete="given-username"
Expand All @@ -24,16 +24,16 @@
/>
<label
for="username"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] font-inter-regular text-[1rem] md:text-[1.375rem] leading-[1.21rem] md:leading-[2.0625rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-black-core peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>Your name</label
>
<span v-if="showNameValidationError" class="error text-red-600"
>Name is required</span
>
</div>
<div class="relative mb-5 md:mb-5 pt-8 text-left">
<div class="relative pt-8 text-left">
<input
class="block peer mx-0 w-full rounded-none border-b border-slate-400 bg-transparent px-0 transition ease-in-out appearance-none text-[1rem] md:text-[1.375rem] font-inter-regular leading-[1.21rem] md:leading-[2.0625rem] text-black-core placeholder-black-core/[.6] focus:outline-none active:outline-none"
class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] focus:outline-none active:outline-none"
type="text"
name="email"
id="email"
Expand All @@ -50,7 +50,7 @@
/>
<label
for="email"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] font-inter-regular text-[1rem] md:text-[1.375rem] leading-[1.21rem] md:leading-[2.0625rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-black-core/[0.6] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>Your email</label
>
<span v-if="showEmailValidationError" class="error text-red-600"
Expand All @@ -62,9 +62,9 @@
>Please enter valid email address</span
>
</div>
<div class="relative md:col-span-2 mb-5 md:mb-5 pt-8 text-left">
<div class="relative pt-8 text-left">
<textarea
class="block peer mx-0 w-full min-h-[50px] md:min-h-[90px] rounded-none border-b border-slate-400 bg-transparent px-0 transition ease-in-out appearance-none text-[1rem] md:text-[1.375rem] font-inter-regular leading-[1.21rem] md:leading-[2.0625rem] text-black-core placeholder-black-core/[.6] focus:outline-none active:outline-none"
class="block peer mx-0 w-full pb-1 min-h-[50px] md:min-h-[90px] rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] placeholder-black-core/[.6] focus:outline-none active:outline-none"
id="project"
name="project"
rows="3"
Expand All @@ -82,7 +82,7 @@
></textarea>
<label
for="project"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] font-inter-regular text-[1rem] md:text-[1.375rem] leading-[1.21rem] md:leading-[2.0625rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-black-core peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>Tell us about your project</label
>
<span
Expand All @@ -91,9 +91,9 @@
>This field is required</span
>
</div>
<div class="relative md:col-span-2 pt-6 md:pt-8 text-left">
<div class="relative pt-6 md:pt-8 text-left">
<input
class="block peer mx-0 w-full rounded-none border-b border-slate-400 bg-transparent px-0 transition ease-in-out appearance-none text-[1rem] md:text-[1.375rem] font-inter-regular text-black-core placeholder-black-core/[.6] focus:outline-none active:outline-none"
class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] focus:outline-none active:outline-none"
type="text"
name="reference"
id="reference"
Expand All @@ -109,7 +109,7 @@
/>
<label
for="reference"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] font-inter-regular text-[1rem] md:text-[1.375rem] leading-[1.21rem] md:leading-[2.0625rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-black-core peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>How did you find us?</label
>
<span
Expand All @@ -121,7 +121,7 @@
<div class="relative pt-8">
<div ref="invest-list" class="flex">
<button
class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b border-slate-400 bg-none px-0 font-inter-regular text-[1rem] md:text-[1.375rem] leading-[1.21rem] md:leading-[2.0625rem] whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-core/[0.6]"
class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b border-black/[0.08] bg-none px-0 sub-h3-regular whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-core/[0.6]"
type="button"
id="invest"
name="invest"
Expand All @@ -130,7 +130,7 @@
>
<label
for="invest"
class="absolute top-8 md:top-8 left-0 text-black-core/[0.6] transform duration-300 placeholder:!text-black-core/[0.6]"
class="absolute top-8 left-0 text-black-core/[0.6] transform duration-300 placeholder:!text-black-core/[0.6]"
:class="[
floatable
? '-translate-y-4 xl:-translate-y-[0.5rem] origin-[0] scale-75'
Expand Down Expand Up @@ -173,13 +173,11 @@
>This field is required</span
>
</div>
<div
class="mt-8 text-base font-inter-regular text-black-core/[0.87]"
>
<div class="mt-8 sub-h4-regular text-black-core/[0.87]">
We sign NDA for all of our projects.
</div>
</div>
<div class="flex justify-center py-5 lg:py-8">
<div class="flex justify-center py-8">
<img
v-if="showLoader"
:src="loaderImage"
Expand All @@ -198,7 +196,7 @@
class="flex text-center text-red-600"
:class="
errorMessage == 'Invalid Recaptcha score'
? '!mt-2 md:!-mt-2 !mr-4 sm:!mr-16 md:!mr-12 lg:!mr-10 xl:!mr-[2.8rem] 2xl:!mr-14 '
? '!mt-2 !mr-4 sm:!mr-16 md:!mr-12 lg:!mr-10 xl:!mr-[2.8rem] 2xl:!mr-14 '
: ''
"
>{{ errorMessage }}</span
Expand All @@ -207,10 +205,10 @@
<button
id="submit"
ref="recaptcha"
class="absolute top-[-13px] sm:-top-5 right-[-122px] md:right-[-170px] w-max rounded-full py-2.5 md:py-5 px-20 md:px-28 text-center gradient-btn consultation-btn"
class="absolute top-[-13px] sm:-top-5 right-[-110px] md:right-[-70px] w-max py-2.5 px-20 md:px-8 text-center gradient-btn consultation-btn"
@click.prevent="submitForm()"
>
<span>Submit</span>
<span class="sub-h3-semibold lg:sub-h5-semibold">Submit</span>
</button>
</div>
</div>
Expand Down
Loading

0 comments on commit 8729f06

Please sign in to comment.