Merge pull request #18905 from overleaf/jel-plans-faq

[web] Add new plans FAQ to light touch redesign variant

GitOrigin-RevId: a4140a09c94e0374792acb789b4f36ad104841f2
This commit is contained in:
Jessica Lawshe 2024-06-17 09:19:13 -05:00 committed by Copybot
parent 6e084f389a
commit 092e49d6ec
4 changed files with 289 additions and 85 deletions

View file

@ -49,7 +49,7 @@ block content
include ./plans/_university_info
include ./plans/_faq
include ./plans/_faq_new
.row.row-spaced-large
.col-md-12

View file

@ -0,0 +1,60 @@
include ./_plans_faq_tabs
include ../../_mixins/eyebrow
- var managingYourSubscription = 'managingYourSubscription'
- var overleafIndividualPlans = 'overleafIndividualPlans'
- var overleafGroupPlans = 'overleafGroupPlans'
.plans-faq
.row.row-spaced-extra-large
.col-md-12.faq-heading-container
h2.faq-heading
+eyebrow(translate("frequently_asked_questions"))
| #{translate("your_questions_answered")}
.row.plans-faq-header-section
.col-xs-12.website-redesign-ol-tabs
ul.nav.nav-tabs
li.active(role="presentation")
a(
role="tab"
data-toggle="tab"
href='#' + managingYourSubscription
aria-controls=managingYourSubscription
)
| #{translate('managing_your_subscription')}
li(role="presentation")
a(
role="tab"
data-toggle="tab"
href='#' + overleafIndividualPlans
aria-controls=overleafIndividualPlans
)
| #{translate('overleaf_individual_plans')}
li(role="presentation")
a(
role="tab"
data-toggle="tab"
href='#' + overleafGroupPlans
aria-controls=overleafGroupPlans
)
| #{translate('overleaf_group_plans')}
.row.plans-faq-questions-section
.col-xs-12.faq-questions-container
.tab-content
.tab-pane.active(
role="tabpanel"
id=managingYourSubscription
data-ol-faq-tab-content=managingYourSubscription
)
+managingYourSubscription()
.tab-pane(
role="tabpanel"
id=overleafIndividualPlans
data-ol-faq-tab-content=overleafIndividualPlans
)
+overleafIndividualPlans()
.tab-pane(
role="tabpanel"
id=overleafGroupPlans
data-ol-faq-tab-content=overleafGroupPlans
)
+overleafGroupPlans()

View file

@ -0,0 +1,141 @@
mixin managingYourSubscription()
.accordions-container
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ1" aria-expanded="false" aria-controls="managingYourSubscriptionQ1")
| Can I change plans or cancel later?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="managingYourSubscriptionQ1")
.custom-accordion-body
span Yes, you can do this at any time by going to
strong Account>Subscription
span when logged in to Overleaf. You can change plans, switch between monthly and annual billing options, or cancel to downgrade to the free plan. When canceling, your subscription will continue until the end of the billing period.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ2" aria-expanded="false" aria-controls="managingYourSubscriptionQ2")
| If I change or cancel my Overleaf plan, will I lose my projects?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="managingYourSubscriptionQ2")
.custom-accordion-body
| No. Changing or canceling your plan wont affect your projects, the only change will be to the features available to you. You can see which features are available only on paid plans in the comparison table.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ3" aria-expanded="false" aria-controls="managingYourSubscriptionQ3")
| Can I pay by invoice or purchase order?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="managingYourSubscriptionQ3")
.custom-accordion-body
| This is possible when youre purchasing a group subscription for five or more people, or a site license. For individual subscriptions, we can only accept payment online via credit card, debit card, or PayPal.
mixin overleafIndividualPlans()
.accordions-container
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ1" aria-expanded="false" aria-controls="overleafIndividualPlansQ1")
| How does the free trial work?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafIndividualPlansQ1")
.custom-accordion-body
span You get full access to your chosen plan during your 7-day free trial, and theres no obligation to continue beyond the trial. Your card will be charged at the end of your trial unless you cancel before then. To cancel, go to
strong Account>Subscription
span when logged in to Overleaf (the trial will continue for the full 7 days).
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ2" aria-expanded="false" aria-controls="overleafIndividualPlansQ2")
| Whats a collaborator on an Overleaf individual subscription?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafIndividualPlansQ2")
.custom-accordion-body
| A collaborator is someone you invite to work with you on a project. So, for example, on our Standard plan you can have up to 10 people collaborating with you on any given project.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ3" aria-expanded="false" aria-controls="overleafIndividualPlansQ3")
| The individual Standard plan has 10 project collaborators, does it mean that 10 people will be upgraded?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafIndividualPlansQ3")
.custom-accordion-body
span No. Only the subscribers account will be upgraded. An individual Standard subscription allows you to invite 10 people per project to edit the project with you. Your collaborators can access features such as the full document history and extended compile time, but
strong only
span for the project(s) theyre working on with you. If your collaborators want access to those features on their own projects, they will need to purchase their own subscription. (If you work with the same people regularly, you might find a group subscription more cost effective.)
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ4" aria-expanded="false" aria-controls="overleafIndividualPlansQ4")
| Do collaborators also have access to the editing and collaboration features Ive paid for?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafIndividualPlansQ4")
.custom-accordion-body
span If you have an Overleaf subscription, then your project collaborators will have access to features like real-time track changes and document history, but
strong only
span for the project(s) theyre working on with you. If your collaborators want access to those features on their own projects, they will need to purchase their own subscription. (If you work with the same people regularly, you might find a group subscription more cost effective.)
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ5" aria-expanded="false" aria-controls="overleafIndividualPlansQ5")
| Can I purchase an individual plan on behalf of someone else?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafIndividualPlansQ5")
.custom-accordion-body
| Individual subscriptions must be purchased by the account that will be the end user. If you want to purchase a plan for someone else, youll need to provide them with relevant payment details to enable them to make the purchase.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ6" aria-expanded="false" aria-controls="overleafIndividualPlansQ6")
| Who is eligible for the Student plan?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafIndividualPlansQ6")
.custom-accordion-body
| As the name suggests, the Student plan is only for students at educational institutions. This includes graduate students.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ7" aria-expanded="false" aria-controls="overleafIndividualPlansQ7")
| Can I transfer an individual subscription to someone else?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafIndividualPlansQ7")
.custom-accordion-body
| No. Individual plans cant be transferred.
mixin overleafGroupPlans()
.accordions-container
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1")
| Whats the difference between users and collaborators on an Overleaf group subscription?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafGroupPlansQ1")
.custom-accordion-body
div On any of our group plans, the number of users refers to the number of people you can invite to join your group. All of these people will have access to the plans paid-for features across all their projects, such as real-time track changes and document history.
div.mt-2 Collaborators are people that your group users may invite to work with them on their projects. So, for example, if you have the Group Standard plan, the users in your group can invite up to 10 people to work with them on a project. And if you have the Group Professional plan, your users can invite as many people to work with them as they want.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ2" aria-expanded="false" aria-controls="overleafGroupPlansQ2")
| Is an Overleaf Group plan more cost effective?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafGroupPlansQ2")
.custom-accordion-body
| Our Group subscriptions allow you to purchase access to our premium features for multiple people. Theyre easy to manage, help save on paperwork, and reduce the cost of purchasing multiple subscriptions separately.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ3" aria-expanded="false" aria-controls="overleafGroupPlansQ3")
| Who is eligible for the educational discount?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafGroupPlansQ3")
.custom-accordion-body
| The educational discount for group subscriptions is for students or faculty who are using Overleaf primarily for teaching.
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ4" aria-expanded="false" aria-controls="overleafGroupPlansQ4")
| Can I add more users to my group subscription at a later date?
span.custom-accordion-icon
i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
.collapse(id="overleafGroupPlansQ4")
.custom-accordion-body
| Yes. To add more users to your subscription youll need to
a.inline-green-link(href="/contact") contact us.

View file

@ -400,6 +400,93 @@
}
}
// ------------------------------------------------------------------
// ------------------------------------------------------------------
// These comments will be deleted before merging this PR
// Below is the styling for plans cards on mobile screen
.mobile-plans-card-container {
width: 100%;
.mt-spacing-06 {
margin-top: @spacing-06;
}
.highlighted-plans-card {
border: 2px solid @green-50 !important;
}
.mobile-plans-card {
padding: @spacing-09;
border: 2px solid @neutral-20;
width: 100%; // might need max-width
border-radius: 8px;
display: flex;
flex-direction: column;
.plans-name {
color: @neutral-90;
font-size: @font-size-05; // 20px
font-weight: 600;
line-height: @line-height-04;
}
.old-price {
padding: @spacing-04 0 0 0;
color: @neutral-40;
font-size: @font-size-04; // 18px
font-weight: 600;
line-height: @line-height-05;
margin-bottom: -@spacing-04;
}
.price-container {
display: flex;
align-items: baseline;
.price {
color: @neutral-90;
font-size: @font-size-08; // 36px
font-weight: 600;
line-height: @line-height-07;
margin-right: @spacing-03;
}
}
.light-gray-text {
color: @neutral-70;
font-size: @font-size-02; // 14px
line-height: @line-height-02;
}
.description {
.green-round-background {
width: 20px;
height: 20px;
}
.bullets {
list-style-type: none;
padding-left: 0;
margin-bottom: unset;
li {
display: flex;
margin-top: @spacing-05;
}
}
.cta-buy-now {
width: 100%;
margin-top: @spacing-08;
line-height: @line-height-03;
}
}
}
}
// ------------------------------------------------------------------
// ------------------------------------------------------------------
}
.plans-faq {
.faq-heading-container {
text-align: center;
@ -501,88 +588,4 @@
}
}
}
// ------------------------------------------------------------------
// ------------------------------------------------------------------
// These comments will be deleted before merging this PR
// Below is the styling for plans cards on mobile screen
.mobile-plans-card-container {
width: 100%;
.mt-spacing-06 {
margin-top: @spacing-06;
}
.highlighted-plans-card {
border: 2px solid @green-50 !important;
}
.mobile-plans-card {
padding: @spacing-09;
border: 2px solid @neutral-20;
width: 100%; // might need max-width
border-radius: 8px;
display: flex;
flex-direction: column;
.plans-name {
color: @neutral-90;
font-size: @font-size-05; // 20px
font-weight: 600;
line-height: @line-height-04;
}
.old-price {
padding: @spacing-04 0 0 0;
color: @neutral-40;
font-size: @font-size-04; // 18px
font-weight: 600;
line-height: @line-height-05;
margin-bottom: -@spacing-04;
}
.price-container {
display: flex;
align-items: baseline;
.price {
color: @neutral-90;
font-size: @font-size-08; // 36px
font-weight: 600;
line-height: @line-height-07;
margin-right: @spacing-03;
}
}
.light-gray-text {
color: @neutral-70;
font-size: @font-size-02; // 14px
line-height: @line-height-02;
}
.description {
.green-round-background {
width: 20px;
height: 20px;
}
.bullets {
list-style-type: none;
padding-left: 0;
margin-bottom: unset;
li {
display: flex;
margin-top: @spacing-05;
}
}
.cta-buy-now {
width: 100%;
margin-top: @spacing-08;
line-height: @line-height-03;
}
}
}
}
// ------------------------------------------------------------------
// ------------------------------------------------------------------
}