435 lines
21 KiB
PHP
435 lines
21 KiB
PHP
<?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, web apps, graphics, video, 3D, audio, 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">
|
|
<link rel="stylesheet" href="css/estimates.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===================== NAV ===================== -->
|
|
<header class="site-header" id="site-header">
|
|
<nav class="nav-container">
|
|
<a href="/" class="nav-logo">
|
|
<span class="logo-icon"><img style="width:32px;" src="img/tinyicon.png"></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" 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 section-bg-deep">
|
|
<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 or Squarespace</li>
|
|
</ul>
|
|
<p class="pricing-tagline">Perfect for businesses taking their first steps into the digital realm.</p>
|
|
<a href="index.php?package=first-spark#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</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 spread their wings and get properly noticed online.</p>
|
|
<a href="index.php?package=enchanted-workshop#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</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>
|
|
<a href="index.php?package=arcane-forge#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</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 you need to throw open the doors of your digital marketplace.</p>
|
|
<a href="index.php?package=merchants-portal#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</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>
|
|
<a href="index.php?package=grand-emporium#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== BESPOKE WEB APPS ===================== -->
|
|
<section class="section-pad section-bg-mid">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<p class="section-eyebrow">Custom Builds</p>
|
|
<h2 class="section-title">The Spellforge</h2>
|
|
<p class="section-lead">When a website alone won't cut it - bespoke web apps and tools, conjured to fit exactly how you work.</p>
|
|
</div>
|
|
<div class="pricing-grid pricing-grid--2col">
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-emoji">⚙️</div>
|
|
<div class="pricing-name">The Cantrip</div>
|
|
<div class="pricing-price">£750 <span>- £2,000</span></div>
|
|
<hr class="pricing-divider">
|
|
<p class="pricing-includes-label">Includes</p>
|
|
<ul class="pricing-includes">
|
|
<li>Single-purpose tool or mini-app</li>
|
|
<li>Forms and data capture</li>
|
|
<li>Database-backed</li>
|
|
<li>Simple admin view</li>
|
|
<li>Hosting and setup</li>
|
|
</ul>
|
|
<p class="pricing-tagline">A small but mighty tool, built to fit your workflow.</p>
|
|
<a href="index.php?package=the-cantrip#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</div>
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-emoji">🏗️</div>
|
|
<div class="pricing-name">The Grand Working</div>
|
|
<div class="pricing-price">£3,000 <span>- £10,000+</span></div>
|
|
<hr class="pricing-divider">
|
|
<p class="pricing-includes-label">Includes</p>
|
|
<ul class="pricing-includes">
|
|
<li>Bespoke functionality</li>
|
|
<li>User accounts and roles</li>
|
|
<li>Custom database design</li>
|
|
<li>Integrations and APIs</li>
|
|
<li>Testing and launch</li>
|
|
<li>Ongoing support</li>
|
|
</ul>
|
|
<p class="pricing-tagline">When off-the-shelf simply won't do - a system built around you.</p>
|
|
<a href="index.php?package=grand-working#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== MYSTIC DIGITAL ARTS ===================== -->
|
|
<section class="section-pad section-bg-deep">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<p class="section-eyebrow">Creative Services</p>
|
|
<h2 class="section-title">The Mystic Digital Arts</h2>
|
|
<p class="section-lead">Beyond the web - graphics, video, 3D and audio, crafted to make your brand unforgettable.</p>
|
|
</div>
|
|
<div class="pricing-grid pricing-grid--2col">
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-emoji">🎨</div>
|
|
<div class="pricing-name">The Sigil Workshop</div>
|
|
<div class="pricing-price">From £150</div>
|
|
<hr class="pricing-divider">
|
|
<p class="pricing-includes-label">Includes</p>
|
|
<ul class="pricing-includes">
|
|
<li>Logo design</li>
|
|
<li>Brand colour and font palette</li>
|
|
<li>Social media templates</li>
|
|
<li>Print-ready business cards</li>
|
|
<li>Source and web-ready files</li>
|
|
</ul>
|
|
<p class="pricing-tagline">A brand identity that turns heads and casts a lasting impression.</p>
|
|
<a href="index.php?package=sigil-workshop#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</div>
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-emoji">🎬</div>
|
|
<div class="pricing-name">The Moving Picture</div>
|
|
<div class="pricing-price">From £350</div>
|
|
<hr class="pricing-divider">
|
|
<p class="pricing-includes-label">Includes</p>
|
|
<ul class="pricing-includes">
|
|
<li>On-location filming</li>
|
|
<li>Editing and colour grading</li>
|
|
<li>Titles and captions</li>
|
|
<li>Licensed music and sound</li>
|
|
<li>Social media cut-downs</li>
|
|
</ul>
|
|
<p class="pricing-tagline">Bring your story to life - lights, camera, enchantment.</p>
|
|
<a href="index.php?package=moving-picture#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</div>
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-emoji">🧊</div>
|
|
<div class="pricing-name">The Third Dimension</div>
|
|
<div class="pricing-price">From £300</div>
|
|
<hr class="pricing-divider">
|
|
<p class="pricing-includes-label">Includes</p>
|
|
<ul class="pricing-includes">
|
|
<li>3D modelling</li>
|
|
<li>Product visualisation</li>
|
|
<li>Logo and title animation</li>
|
|
<li>Render-ready assets</li>
|
|
<li>Short animated clips</li>
|
|
</ul>
|
|
<p class="pricing-tagline">Objects and ideas, conjured into three dimensions.</p>
|
|
<a href="index.php?package=third-dimension#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</div>
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-emoji">🎙️</div>
|
|
<div class="pricing-name">Sonic Alchemy</div>
|
|
<div class="pricing-price">From £200</div>
|
|
<hr class="pricing-divider">
|
|
<p class="pricing-includes-label">Includes</p>
|
|
<ul class="pricing-includes">
|
|
<li>Audio editing and cleanup</li>
|
|
<li>Podcast production</li>
|
|
<li>Voiceover mixing</li>
|
|
<li>Music and jingles</li>
|
|
<li>Mastering for release</li>
|
|
</ul>
|
|
<p class="pricing-tagline">Sound that casts a spell on the ear.</p>
|
|
<a href="index.php?package=sonic-alchemy#contact" class="btn btn-accent pricing-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== WIZARD'S BENCH ===================== -->
|
|
<section class="section-pad section-bg-mid">
|
|
<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>
|
|
<a href="index.php?package=wizards-bench#contact" class="btn btn-accent bench-enquire">
|
|
<i class="fas fa-envelope"></i> Book some support
|
|
</a>
|
|
</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 section-bg-deep">
|
|
<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>
|
|
<a href="index.php?package=minor-ward#contact" class="btn btn-accent ward-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</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>
|
|
<a href="index.php?package=greater-ward#contact" class="btn btn-accent ward-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</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>
|
|
<a href="index.php?package=merchants-ward#contact" class="btn btn-accent ward-enquire">
|
|
<i class="fas fa-envelope"></i> Enquire about this
|
|
</a>
|
|
</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-links"><a href="terms">Terms & Conditions</a></p>
|
|
<p class="footer-copy">© <?= date('Y') ?> Fraxle.net All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script src="js/estimates.js"></script>
|
|
</body>
|
|
</html>
|