anchor/page-plans.php at main · anchorhost/anchor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?php
/* Template Name: Plans */
get_header();
?>

<section class="section">
	<div class="container">
		<div class="pricing-header">
			<h1>Simple, transparent pricing</h1>
			<p>All plans include free migration, automated updates, nightly backups, and personal support.</p>
		</div>

		<div class="billing-toggle">
			<button class="active" data-term="month">Monthly</button>
			<button data-term="quarter">Quarterly</button>
			<button data-term="year">Yearly</button>
		</div>

		<div class="pricing-grid">
			<!-- Basic -->
			<div class="pricing-card">
				<h3>Basic</h3>
				<div class="price" data-monthly="20">$20</div>
				<div class="price-period">per month</div>
				<ul class="specs">
					<li>1 site</li>
					<li>10 GB storage</li>
					<li>100k pageviews/year</li>
				</ul>
				<a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>" class="btn btn--secondary">Get Started</a>
			</div>

			<!-- Standard -->
			<div class="pricing-card featured">
				<h3>Standard</h3>
				<div class="price" data-monthly="50">$50</div>
				<div class="price-period">per month</div>
				<ul class="specs">
					<li>3 sites</li>
					<li>15 GB storage</li>
					<li>500k pageviews/year</li>
				</ul>
				<a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>" class="btn btn--primary">Get Started</a>
			</div>

			<!-- Business -->
			<div class="pricing-card">
				<h3>Business</h3>
				<div class="price" data-monthly="100">$100</div>
				<div class="price-period">per month</div>
				<ul class="specs">
					<li>8 sites</li>
					<li>20 GB storage</li>
					<li>1M pageviews/year</li>
				</ul>
				<a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>" class="btn btn--secondary">Get Started</a>
			</div>

			<!-- Agency -->
			<div class="pricing-card">
				<h3>Agency</h3>
				<div class="price" data-monthly="200">$200</div>
				<div class="price-period">per month</div>
				<ul class="specs">
					<li>20 sites</li>
					<li>30 GB storage</li>
					<li>2M pageviews/year</li>
				</ul>
				<a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>" class="btn btn--secondary">Get Started</a>
			</div>
		</div>

		<!-- Add-ons -->
		<div class="addons-section">
			<h3>Add-ons</h3>
			<div class="addons-grid">
				<div class="addon-card">
					<div class="addon-price">$12.50<small>/mo</small></div>
					<div class="addon-label">per additional site</div>
				</div>
				<div class="addon-card">
					<div class="addon-price">$10<small>/mo</small></div>
					<div class="addon-label">per 10 GB storage</div>
				</div>
				<div class="addon-card">
					<div class="addon-price">$100<small>/mo</small></div>
					<div class="addon-label">per 1M pageviews/year</div>
				</div>
			</div>
		</div>

		<!-- Included Features -->
		<div class="included-features">
			<h3>All plans include</h3>
			<ul class="included-grid">
				<li>Automated updates</li>
				<li>Nightly backups</li>
				<li>Security scanning</li>
				<li>Managed hosting</li>
				<li>HTTPS everywhere</li>
				<li>Free migration</li>
				<li>Premium themes</li>
				<li>Premium plugins</li>
				<li>Personal support</li>
			</ul>
		</div>

		<p class="text-center text-muted" style="margin-top: var(--space-2xl);">Need a custom configuration? <a href="<?php echo esc_url( home_url( '/hosting-plan-calculator/' ) ); ?>">Try the plan calculator</a></p>
	</div>
</section>

<?php get_footer(); ?>