Estimates page & menu fix
This commit is contained in:
Fraxle
+620
@@ -0,0 +1,620 @@
|
||||
<?php
|
||||
// Estimates and pricing page
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Spells & Pricing - Fraxle.net</title>
|
||||
<meta name="description" content="Transparent pricing for web design, tech support and ongoing maintenance from Fraxle.net - friendly digital services for small businesses in Oxfordshire and beyond.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
/* ---- Pricing page specific styles ---- */
|
||||
|
||||
/* Mini hero */
|
||||
.pricing-hero {
|
||||
background: linear-gradient(145deg, var(--purple-deep) 0%, var(--purple-mid) 55%, #5B21B6 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 140px 0 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.pricing-hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.pricing-hero-content .hero-eyebrow { margin-bottom: 16px; }
|
||||
.pricing-hero-title {
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(2.4rem, 5vw, 3.8rem);
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pricing-hero-title span {
|
||||
background: linear-gradient(135deg, var(--orange), var(--gold));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.pricing-hero-lead {
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.pricing-hero-wave {
|
||||
position: absolute;
|
||||
bottom: -1px; left: 0; right: 0;
|
||||
z-index: 3;
|
||||
line-height: 0;
|
||||
}
|
||||
.pricing-hero-wave svg { display: block; width: 100%; height: 80px; }
|
||||
|
||||
/* Nav active state */
|
||||
.nav-links a.nav-active {
|
||||
background: rgba(251,191,36,0.15) !important;
|
||||
border-color: rgba(251,191,36,0.3) !important;
|
||||
color: var(--gold) !important;
|
||||
}
|
||||
|
||||
/* Pricing card grid */
|
||||
.pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.pricing-grid--2col {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 800px;
|
||||
margin: 28px auto 0;
|
||||
}
|
||||
|
||||
/* Base pricing card */
|
||||
.pricing-card {
|
||||
background: rgba(255,255,255,0.07);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: var(--radius);
|
||||
padding: 36px 32px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.pricing-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--gold), var(--orange));
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition);
|
||||
transform-origin: left;
|
||||
}
|
||||
.pricing-card:hover {
|
||||
background: rgba(255,255,255,0.11);
|
||||
border-color: rgba(255,255,255,0.22);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
}
|
||||
.pricing-card:hover::after { transform: scaleX(1); }
|
||||
|
||||
/* Popular highlight */
|
||||
.pricing-card--popular {
|
||||
border-color: var(--gold);
|
||||
background: rgba(251,191,36,0.07);
|
||||
}
|
||||
.pricing-card--popular::before {
|
||||
content: '\2736 Most Popular';
|
||||
position: absolute;
|
||||
top: 16px; right: 16px;
|
||||
background: linear-gradient(135deg, var(--gold), var(--orange));
|
||||
color: var(--white);
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 12px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.pricing-card--popular:hover {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 8px 40px rgba(251,191,36,0.18);
|
||||
}
|
||||
|
||||
/* Card elements */
|
||||
.pricing-emoji {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.pricing-name {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.pricing-price {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.55rem;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.pricing-price span {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.45);
|
||||
}
|
||||
.pricing-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
margin: 16px 0;
|
||||
}
|
||||
.pricing-includes-label {
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pricing-includes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.pricing-includes li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
font-size: 0.88rem;
|
||||
color: rgba(255,255,255,0.75);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.pricing-includes li::before {
|
||||
content: '\2736';
|
||||
color: var(--gold);
|
||||
font-size: 0.6rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.pricing-tagline {
|
||||
font-size: 0.83rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
font-style: italic;
|
||||
line-height: 1.55;
|
||||
margin-top: auto;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
/* Wizard's Bench - wide card */
|
||||
.bench-card {
|
||||
background: rgba(255,255,255,0.07);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: var(--radius);
|
||||
padding: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 48px;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: box-shadow var(--transition), background var(--transition);
|
||||
}
|
||||
.bench-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--teal), var(--purple-bright));
|
||||
}
|
||||
.bench-card:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
}
|
||||
.bench-emoji { font-size: 3rem; margin-bottom: 16px; line-height: 1; }
|
||||
.bench-name {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.bench-rate {
|
||||
font-family: var(--font-head);
|
||||
font-size: 2.8rem;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bench-rate span {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.45);
|
||||
}
|
||||
.bench-desc {
|
||||
color: rgba(255,255,255,0.6);
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.75;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Protection Charms / ward cards */
|
||||
.ward-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.ward-card {
|
||||
background: rgba(255,255,255,0.07);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: var(--radius);
|
||||
padding: 36px 32px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
|
||||
}
|
||||
.ward-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--gold), var(--orange));
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ward-card:hover {
|
||||
background: rgba(255,255,255,0.11);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
}
|
||||
.ward-card:hover::after { transform: scaleX(1); }
|
||||
.ward-card--mid {
|
||||
border-color: rgba(124,58,237,0.55);
|
||||
background: rgba(124,58,237,0.09);
|
||||
}
|
||||
.ward-card--top {
|
||||
border-color: var(--gold);
|
||||
background: rgba(251,191,36,0.06);
|
||||
}
|
||||
.ward-card--top:hover { border-color: var(--gold); }
|
||||
.ward-tier {
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ward-name {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ward-price {
|
||||
font-family: var(--font-head);
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
line-height: 1.15;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ward-price span {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* CTA strip */
|
||||
.pricing-cta {
|
||||
background: linear-gradient(145deg, var(--purple-deep) 0%, #2D1860 100%);
|
||||
padding: 90px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pricing-cta::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 500px; height: 500px;
|
||||
background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, transparent 70%);
|
||||
top: -200px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.pricing-cta-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.pricing-cta .section-lead { margin-bottom: 36px; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.pricing-grid { grid-template-columns: 1fr 1fr; }
|
||||
.pricing-grid--2col { grid-template-columns: 1fr 1fr; max-width: 100%; margin-top: 28px; }
|
||||
.bench-card { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
|
||||
.ward-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.pricing-grid { grid-template-columns: 1fr; }
|
||||
.pricing-grid--2col { grid-template-columns: 1fr; }
|
||||
.bench-rate { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===================== NAV ===================== -->
|
||||
<header class="site-header" id="site-header">
|
||||
<nav class="nav-container">
|
||||
<a href="index.php" class="nav-logo">
|
||||
<span class="logo-icon">🧙</span>
|
||||
<span class="logo-text">Fraxle<span class="logo-dot">.net</span></span>
|
||||
</a>
|
||||
<ul class="nav-links" id="nav-links">
|
||||
<li><a href="index.php#services">Services</a></li>
|
||||
<li><a href="index.php#about">About</a></li>
|
||||
<li><a href="index.php#projects">Projects</a></li>
|
||||
<li><a href="estimates.php" class="nav-active">Estimates</a></li>
|
||||
<li><a href="index.php#contact" class="btn nav-cta">Get in Touch</a></li>
|
||||
</ul>
|
||||
<button class="nav-hamburger" id="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- ===================== HERO ===================== -->
|
||||
<section class="pricing-hero">
|
||||
<div class="hero-orbs">
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="orb orb-3"></div>
|
||||
</div>
|
||||
<div class="pricing-hero-content">
|
||||
<p class="hero-eyebrow">✦ Transparent Pricing ✦</p>
|
||||
<h1 class="pricing-hero-title">Spells & <span>Pricing</span></h1>
|
||||
<p class="pricing-hero-lead">Clear, honest estimates for websites, tech support and ongoing care. No hidden fees - just magic at a fair price.</p>
|
||||
</div>
|
||||
<div class="pricing-hero-wave">
|
||||
<svg viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
||||
<path d="M0,40 C300,80 900,0 1440,50 L1440,80 L0,80 Z" fill="#251D70"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== WEBSITE PACKAGES ===================== -->
|
||||
<section class="section-pad" style="background:#251D70;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<p class="section-eyebrow">Website Design</p>
|
||||
<h2 class="section-title">Choose Your Spell</h2>
|
||||
<p class="section-lead">From a simple first presence to a full ecommerce empire - there is a package for every ambition.</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-grid">
|
||||
<!-- The First Spark -->
|
||||
<div class="pricing-card reveal">
|
||||
<div class="pricing-emoji">🌱</div>
|
||||
<div class="pricing-name">The First Spark</div>
|
||||
<div class="pricing-price">From £250</div>
|
||||
<hr class="pricing-divider">
|
||||
<p class="pricing-includes-label">Includes</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>Up to 5 pages</li>
|
||||
<li>Mobile-friendly design</li>
|
||||
<li>Contact form</li>
|
||||
<li>Basic SEO setup</li>
|
||||
<li>WordPress website</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">Perfect for businesses taking their first steps into the digital realm.</p>
|
||||
</div>
|
||||
|
||||
<!-- The Enchanted Workshop -->
|
||||
<div class="pricing-card reveal">
|
||||
<div class="pricing-emoji">✨</div>
|
||||
<div class="pricing-name">The Enchanted Workshop</div>
|
||||
<div class="pricing-price">£750 <span>- £1,500</span></div>
|
||||
<hr class="pricing-divider">
|
||||
<p class="pricing-includes-label">Includes</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>Custom design</li>
|
||||
<li>Blog or news section</li>
|
||||
<li>Photo galleries</li>
|
||||
<li>Social media integration</li>
|
||||
<li>Analytics setup</li>
|
||||
<li>Search engine optimisation</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">For businesses ready to expand their reach and establish a stronger online presence.</p>
|
||||
</div>
|
||||
|
||||
<!-- The Arcane Forge - Most Popular -->
|
||||
<div class="pricing-card pricing-card--popular reveal">
|
||||
<div class="pricing-emoji">🔮</div>
|
||||
<div class="pricing-name">The Arcane Forge</div>
|
||||
<div class="pricing-price">£1,500 <span>- £3,000</span></div>
|
||||
<hr class="pricing-divider">
|
||||
<p class="pricing-includes-label">Includes</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>Advanced page layouts</li>
|
||||
<li>Custom functionality</li>
|
||||
<li>Enhanced forms</li>
|
||||
<li>Third-party integrations</li>
|
||||
<li>Performance optimisation</li>
|
||||
<li>Training and support</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">When a standard website simply won't contain your ambitions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-grid pricing-grid--2col">
|
||||
<!-- The Merchant's Portal -->
|
||||
<div class="pricing-card reveal">
|
||||
<div class="pricing-emoji">🛒</div>
|
||||
<div class="pricing-name">The Merchant's Portal</div>
|
||||
<div class="pricing-price">£3,000 <span>- £5,000</span></div>
|
||||
<hr class="pricing-divider">
|
||||
<p class="pricing-includes-label">Includes</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>Shopify or WooCommerce</li>
|
||||
<li>Product catalogue setup</li>
|
||||
<li>Payment gateways</li>
|
||||
<li>Shipping configuration</li>
|
||||
<li>Customer account features</li>
|
||||
<li>Store management training</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">Everything needed to open your digital marketplace.</p>
|
||||
</div>
|
||||
|
||||
<!-- The Grand Emporium -->
|
||||
<div class="pricing-card reveal">
|
||||
<div class="pricing-emoji">⚡</div>
|
||||
<div class="pricing-name">The Grand Emporium</div>
|
||||
<div class="pricing-price">£5,000 <span>- £7,500+</span></div>
|
||||
<hr class="pricing-divider">
|
||||
<p class="pricing-includes-label">Includes</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>Multi-category stores</li>
|
||||
<li>Subscription products</li>
|
||||
<li>Advanced customer accounts</li>
|
||||
<li>Automation and workflows</li>
|
||||
<li>Marketing integrations</li>
|
||||
<li>Bespoke functionality</li>
|
||||
<li>Launch support</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">For businesses seeking a digital flagship rather than a simple online shop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== WIZARD'S BENCH ===================== -->
|
||||
<section class="section-pad" style="background:#3B2DA8;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<p class="section-eyebrow">Ad-hoc Support</p>
|
||||
<h2 class="section-title">The Wizard's Bench</h2>
|
||||
<p class="section-lead">For those unexpected gremlins that find their way into websites, email systems and office technology.</p>
|
||||
</div>
|
||||
<div class="bench-card reveal">
|
||||
<div class="bench-left">
|
||||
<div class="bench-emoji">🛠️</div>
|
||||
<div class="bench-name">The Wizard's Bench</div>
|
||||
<div class="bench-rate">£40 <span>/ hour</span></div>
|
||||
<p class="bench-desc">Technical support billed by the hour. Minimum one hour applies. Remote support available - no call-out charge for remote sessions.</p>
|
||||
</div>
|
||||
<div class="bench-right">
|
||||
<p class="pricing-includes-label">Services include</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>WordPress troubleshooting</li>
|
||||
<li>Shopify assistance</li>
|
||||
<li>Email issues</li>
|
||||
<li>Domain and DNS management</li>
|
||||
<li>Website repairs</li>
|
||||
<li>General digital support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== PROTECTION CHARMS ===================== -->
|
||||
<section class="section-pad" style="background:#251D70;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<p class="section-eyebrow">Ongoing Care</p>
|
||||
<h2 class="section-title">Protection Charms</h2>
|
||||
<p class="section-lead">Monthly plans to keep your website healthy, secure and performing at its best.</p>
|
||||
</div>
|
||||
<div class="ward-grid">
|
||||
<!-- Minor Ward -->
|
||||
<div class="ward-card reveal">
|
||||
<p class="ward-tier">Tier 1</p>
|
||||
<p class="ward-name">Minor Ward</p>
|
||||
<div class="ward-price">£10 <span>/ month</span></div>
|
||||
<hr class="pricing-divider">
|
||||
<ul class="pricing-includes">
|
||||
<li>WordPress updates</li>
|
||||
<li>Security monitoring</li>
|
||||
<li>Monthly backups</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Greater Ward -->
|
||||
<div class="ward-card ward-card--mid reveal">
|
||||
<p class="ward-tier">Tier 2</p>
|
||||
<p class="ward-name">Greater Ward</p>
|
||||
<div class="ward-price">£25 <span>/ month</span></div>
|
||||
<hr class="pricing-divider">
|
||||
<p class="pricing-includes-label">Everything in Minor Ward, plus</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>Monthly health checks</li>
|
||||
<li>Priority email support</li>
|
||||
<li>Performance monitoring</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Merchant's Ward -->
|
||||
<div class="ward-card ward-card--top reveal">
|
||||
<p class="ward-tier">Tier 3</p>
|
||||
<p class="ward-name">Merchant's Ward</p>
|
||||
<div class="ward-price">£50 <span>/ month</span></div>
|
||||
<hr class="pricing-divider">
|
||||
<p class="pricing-includes-label">Everything in Greater Ward, plus</p>
|
||||
<ul class="pricing-includes">
|
||||
<li>Ecommerce monitoring</li>
|
||||
<li>Store maintenance</li>
|
||||
<li>Priority response times</li>
|
||||
<li>Monthly support allowance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== CTA ===================== -->
|
||||
<section class="pricing-cta">
|
||||
<div class="pricing-cta-inner">
|
||||
<p class="section-eyebrow">Ready to Begin?</p>
|
||||
<h2 class="section-title">Not sure which spell you need?</h2>
|
||||
<p class="section-lead">Drop me a message and we can figure out the right package together - no pressure, no jargon.</p>
|
||||
<a href="index.php#contact" class="btn btn-accent">
|
||||
<i class="fas fa-envelope"></i> Get in Touch
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== FOOTER ===================== -->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p class="footer-logo">Fraxle<span>.net</span></p>
|
||||
<p class="footer-tagline">Friendly web & tech for small businesses</p>
|
||||
<p class="footer-copy">© <?= date('Y') ?> Fraxle.net All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user