plans.pug 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. extends ../layout
  2. include _plans_page_mixins
  3. include _plans_page_tables
  4. block vars
  5. - metadata = { viewport: true }
  6. block head-scripts
  7. script(type='text/javascript').
  8. window.recomendedCurrency = '#{recomendedCurrency}';
  9. window.abCurrencyFlag = '#{abCurrencyFlag}';
  10. window.groupPlans = !{StringHelper.stringifyJsonForScript(groupPlans)};
  11. block content
  12. .content.content-alt.content-page
  13. .plans(ng-controller="PlansController")
  14. .container(ng-cloak)
  15. .row
  16. .col-md-12
  17. .page-header.centered.plans-header.text-centered
  18. h1.text-capitalize(ng-non-bindable) #{translate('get_instant_access_to')} #{settings.appName}
  19. .row
  20. .col-md-8.col-md-offset-2
  21. p.text-centered #{translate("sl_benefits_plans")}
  22. .row.top-switch
  23. .col-md-6.col-md-offset-3
  24. +plan_switch('card')
  25. .col-md-2.text-right
  26. +currency_dropdown
  27. div(ng-show="showPlans")
  28. .row
  29. .col-md-10.col-md-offset-1
  30. .row
  31. .card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
  32. .col-md-4
  33. .card.card-first
  34. .card-header
  35. h2 #{translate("personal")}
  36. h5.tagline #{translate("tagline_personal")}
  37. .circle #{translate("free")}
  38. +features_free
  39. .col-md-4
  40. .card.card-highlighted
  41. .best-value
  42. strong #{translate('best_value')}
  43. .card-header
  44. h2 #{translate("collaborator")}
  45. h5.tagline #{translate("tagline_collaborator")}
  46. .circle
  47. +price_collaborator
  48. +features_collaborator
  49. .col-md-4
  50. .card.card-last
  51. .card-header
  52. h2 #{translate("professional")}
  53. h5.tagline #{translate("tagline_professional")}
  54. .circle
  55. +price_professional
  56. +features_professional
  57. .card-group.text-centered(ng-if="ui.view == 'student'")
  58. .col-md-4
  59. .card.card-first
  60. .card-header
  61. h2 #{translate("personal")}
  62. h5.tagline #{translate("tagline_personal")}
  63. .circle #{translate("free")}
  64. +features_free
  65. .col-md-4
  66. .card.card-highlighted
  67. +card_student_annual
  68. .col-md-4
  69. .card.card-last
  70. +card_student_monthly
  71. .row.row-spaced-large.text-centered
  72. .col-xs-12
  73. i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true")  
  74. span.sr-only Mastercard accepted
  75. i.fa.fa-cc-visa.fa-2x(aria-hidden="true")  
  76. span.sr-only Visa accepted
  77. i.fa.fa-cc-amex.fa-2x(aria-hidden="true")  
  78. span.sr-only Amex accepted
  79. i.fa.fa-cc-paypal.fa-2x(aria-hidden="true")  
  80. span.sr-only Paypal accepted
  81. div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'{{trial_len}}'})}
  82. br
  83. div.text-centered #{translate('subject_to_additional_vat')}<br/> #{translate('select_country_vat')}
  84. .row.row-spaced-large
  85. .col-md-8.col-md-offset-2
  86. .card.text-centered
  87. .card-header
  88. h2 #{translate('looking_multiple_licenses')}
  89. span #{translate('reduce_costs_group_licenses')}
  90. br
  91. br
  92. a.btn.btn-default(
  93. href="#groups"
  94. ng-click="openGroupPlanModal()"
  95. ) #{translate('find_out_more')}
  96. div
  97. .row.row-spaced-large
  98. .col-sm-12
  99. .page-header.plans-header.plans-subheader.text-centered
  100. h2 #{translate('compare_plan_features')}
  101. .row
  102. .col-md-6.col-md-offset-3
  103. +plan_switch('table')
  104. .col-md-3.text-right
  105. +currency_dropdown
  106. .row(event-tracking="features-table-viewed" event-tracking-ga="subscription-funnel" event-tracking-trigger="scroll" event-tracking-send-once="true" event-tracking-label=`exp-{{plansVariant}}`)
  107. .col-sm-12(ng-if="ui.view != 'student'")
  108. +table_premium
  109. .col-sm-12(ng-if="ui.view == 'student'")
  110. +table_student
  111. include _plans_quotes
  112. include _plans_faq
  113. .row.row-spaced-large
  114. .col-md-12
  115. .plans-header.plans-subheader.text-centered
  116. h2.header-with-btn #{translate('still_have_questions')}
  117. button.btn.btn-default.btn-header.text-capitalize(
  118. ng-controller="ContactGeneralModal"
  119. ng-click="openModal()"
  120. ) #{translate('get_in_touch')}
  121. != moduleIncludes("contactModalGeneral", locals)
  122. .row.row-spaced
  123. include _modal_group_inquiry
  124. include _modal_group_purchase