[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Pricing
   4   * Slug: twentytwentyfour/cta-pricing
   5   * Categories: call-to-action, services
   6   * Viewport width: 1400
   7   */
   8  ?>
   9  
  10  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Pricing Table', 'Name for the pricing pattern', 'twentytwentyfour' ); ?>"},"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
  11  <div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
  12      <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"border":{"radius":"16px"}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
  13      <div class="wp-block-group alignwide has-base-2-background-color has-background" style="border-radius:16px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)">
  14          <!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  15          <div class="wp-block-group alignwide">
  16              <!-- wp:heading {"textAlign":"center"} -->
  17              <h2 class="wp-block-heading has-text-align-center"><?php echo esc_html_x( 'Our Services', 'Sample heading for pricing pattern', 'twentytwentyfour' ); ?></h2>
  18              <!-- /wp:heading -->
  19  
  20              <!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.125rem"},"spacing":{"margin":{"top":"var:preset|spacing|10"}}}} -->
  21              <p class="has-text-align-center" style="margin-top:var(--wp--preset--spacing--10);font-size:1.125rem"><?php echo esc_html_x( 'We offer flexible options, which you can adapt to the different needs of each project.', 'Sample description for a pricing table', 'twentytwentyfour' ); ?></p>
  22              <!-- /wp:paragraph -->
  23          </div>
  24          <!-- /wp:group -->
  25  
  26          <!-- wp:spacer {"height":"var:preset|spacing|30"} -->
  27          <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  28          <!-- /wp:spacer -->
  29  
  30          <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|20"}}}} -->
  31          <div class="wp-block-columns alignwide">
  32              <!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast-3","width":"1px"}}}} -->
  33              <div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
  34                  <!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"padding":{"top":"1px"}}},"fontSize":"medium"} -->
  35                  <h4 class="wp-block-heading has-text-align-center has-medium-font-size" style="padding-top:1px">
  36                      <em><?php echo esc_html_x( 'Free', 'Sample heading for the first pricing level', 'twentytwentyfour' ); ?></em>
  37                  </h4>
  38                  <!-- /wp:heading -->
  39  
  40                  <!-- wp:heading {"textAlign":"center","level":5,"fontSize":"x-large"} -->
  41                  <h5 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html_x( '$0', 'Sample price for the first pricing level', 'twentytwentyfour' ); ?></h5>
  42                  <!-- /wp:heading -->
  43  
  44                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
  45                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
  46                  </div>
  47                  <!-- /wp:spacer -->
  48  
  49                  <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  50                  <div class="wp-block-group">
  51                      <!-- wp:paragraph {"align":"center"} -->
  52                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Access to 5 exclusive <em>Études Articles</em> per month.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
  53                      <!-- /wp:paragraph -->
  54  
  55                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
  56                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
  57                      <!-- /wp:separator -->
  58  
  59                      <!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
  60                      <p class="has-text-align-center has-contrast-2-color has-text-color has-link-color">
  61                          <s><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></s>
  62                      </p>
  63                      <!-- /wp:paragraph -->
  64  
  65                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
  66                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
  67                      <!-- /wp:separator -->
  68  
  69                      <!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
  70                      <p class="has-text-align-center has-contrast-2-color has-text-color has-link-color">
  71                          <s><?php echo wp_kses_post( _x( 'Exclusive access to the <em>Études</em> app for iOS and Android.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></s>
  72                      </p>
  73                      <!-- /wp:paragraph -->
  74                  </div>
  75                  <!-- /wp:group -->
  76  
  77                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
  78                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
  79                  </div>
  80                  <!-- /wp:spacer -->
  81  
  82                  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  83                  <div class="wp-block-buttons">
  84                      <!-- wp:button {"width":100,"className":"is-style-outline"} -->
  85                      <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
  86                          <a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'Subscribe', 'Button text for the first pricing level', 'twentytwentyfour' ); ?></a>
  87                      </div>
  88                      <!-- /wp:button -->
  89                  </div>
  90                  <!-- /wp:buttons -->
  91              </div>
  92              <!-- /wp:column -->
  93  
  94              <!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast","width":"2px"}}}} -->
  95              <div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast);border-top-width:2px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
  96                  <!-- wp:heading {"textAlign":"center","level":4} -->
  97                  <h4 class="wp-block-heading has-text-align-center">
  98                      <em><?php echo esc_html_x( 'Connoisseur', 'Sample heading for the second pricing level', 'twentytwentyfour' ); ?></em>
  99                  </h4>
 100                  <!-- /wp:heading -->
 101  
 102                  <!-- wp:heading {"textAlign":"center","level":5,"fontSize":"x-large"} -->
 103                  <h5 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html_x( '$12', 'Sample price for the second pricing level', 'twentytwentyfour' ); ?></h5>
 104                  <!-- /wp:heading -->
 105  
 106                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 107                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 108                  </div>
 109                  <!-- /wp:spacer -->
 110  
 111                  <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 112                  <div class="wp-block-group">
 113                      <!-- wp:paragraph {"align":"center"} -->
 114                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Access to 20 exclusive <em>Études Articles</em> per month.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 115                      <!-- /wp:paragraph -->
 116  
 117                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 118                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 119                      <!-- /wp:separator -->
 120  
 121                      <!-- wp:paragraph {"align":"center"} -->
 122                      <p class="has-text-align-center"><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></p>
 123                      <!-- /wp:paragraph -->
 124  
 125                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 126                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 127                      <!-- /wp:separator -->
 128  
 129                      <!-- wp:paragraph {"align":"center"} -->
 130                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Exclusive access to the <em>Études</em> app for iOS and Android.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 131                      <!-- /wp:paragraph -->
 132                  </div>
 133                  <!-- /wp:group -->
 134  
 135                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 136                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 137                  </div>
 138                  <!-- /wp:spacer -->
 139  
 140                  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
 141                  <div class="wp-block-buttons">
 142                      <!-- wp:button {"width":100,"className":"is-style-fill"} -->
 143                      <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill">
 144                          <a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'Subscribe', 'Button text for the second pricing level', 'twentytwentyfour' ); ?></a>
 145                      </div>
 146                      <!-- /wp:button -->
 147                  </div>
 148                  <!-- /wp:buttons -->
 149              </div>
 150              <!-- /wp:column -->
 151  
 152              <!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast-3","width":"1px"}}}} -->
 153              <div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
 154                  <!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"padding":{"top":"1px"}}},"fontSize":"medium"} -->
 155                  <h4 class="wp-block-heading has-text-align-center has-medium-font-size" style="padding-top:1px">
 156                      <em><?php echo esc_html_x( 'Expert', 'Sample heading for the third pricing level', 'twentytwentyfour' ); ?></em>
 157                  </h4>
 158                  <!-- /wp:heading -->
 159  
 160                  <!-- wp:heading {"textAlign":"center","level":5,"fontSize":"x-large"} -->
 161                  <h5 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html_x( '$28', 'Sample price for the third pricing level', 'twentytwentyfour' ); ?></h5>
 162                  <!-- /wp:heading -->
 163  
 164                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 165                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 166                  </div>
 167                  <!-- /wp:spacer -->
 168  
 169                  <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 170                  <div class="wp-block-group">
 171                      <!-- wp:paragraph {"align":"center"} -->
 172                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Exclusive, unlimited access to <em>Études Articles</em>.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 173                      <!-- /wp:paragraph -->
 174  
 175                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 176                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 177                      <!-- /wp:separator -->
 178  
 179                      <!-- wp:paragraph {"align":"center"} -->
 180                      <p class="has-text-align-center"><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></p>
 181                      <!-- /wp:paragraph -->
 182  
 183                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 184                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 185                      <!-- /wp:separator -->
 186  
 187                      <!-- wp:paragraph {"align":"center"} -->
 188                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Exclusive access to the <em>Études</em> app for iOS and Android', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 189                      <!-- /wp:paragraph -->
 190                  </div>
 191                  <!-- /wp:group -->
 192  
 193                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 194                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 195                  </div>
 196                  <!-- /wp:spacer -->
 197  
 198                  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
 199                  <div class="wp-block-buttons">
 200                      <!-- wp:button {"width":100,"className":"is-style-outline"} -->
 201                      <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
 202                          <a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'Subscribe', 'Button text for the third pricing level', 'twentytwentyfour' ); ?></a>
 203                      </div>
 204                      <!-- /wp:button -->
 205                  </div>
 206                  <!-- /wp:buttons -->
 207              </div>
 208              <!-- /wp:column -->
 209          </div>
 210          <!-- /wp:columns -->
 211      </div>
 212      <!-- /wp:group -->
 213  </div>
 214  <!-- /wp:group -->