Files
website/website/resources/ts/Pages/Marketing/Sla.vue
Claude Dev 33e86a32a8 Add customer dashboard, provisioning services, and legal pages
Phase 3 (Provisioning):
- Create ProvisioningServiceInterface abstraction
- Implement VirtFusionService for VPS provisioning via REST API
- Implement SynergyCPService for dedicated server provisioning
- Implement EnhanceService for web hosting provisioning
- Create ProvisioningFactory for service type routing
- Add API config for VirtFusion, SynergyCP, Enhance

Phase 4 (Customer Dashboard):
- Enhance DashboardController with real data (services, subscriptions,
  invoices, pending amounts, next renewal)
- Rebuild Dashboard.vue with stats cards, active subscriptions list,
  recent invoices table, and quick action buttons

Phase 8 (Marketing):
- Add Terms of Service page with 15 sections
- Add Privacy Policy page (GDPR/CCPA aware)
- Add Acceptable Use Policy page
- Add Service Level Agreement page (99.99% uptime, credit calc)
- 52 tests passing, build clean

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 10:21:25 -05:00

381 lines
19 KiB
Vue

<script lang="ts" setup>
import { Link } from '@inertiajs/vue3'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
defineOptions({ layout: MarketingLayout })
const effectiveDate = 'February 1, 2026'
const companyName = 'EZSCALE LLC'
interface Section {
id: string
title: string
}
const sections: Section[] = [
{ id: 'overview', title: '1. Overview' },
{ id: 'uptime', title: '2. Uptime Guarantees' },
{ id: 'credits', title: '3. Service Credit Calculation' },
{ id: 'exclusions', title: '4. Exclusions' },
{ id: 'monitoring', title: '5. Monitoring and Reporting' },
{ id: 'claiming', title: '6. How to Claim SLA Credits' },
{ id: 'remedies', title: '7. Remedies' },
{ id: 'changes', title: '8. Changes to This SLA' },
{ id: 'contact', title: '9. Contact Information' },
]
interface UptimeGuarantee {
service: string
uptime: string
monthly: string
color: string
}
const uptimeGuarantees: UptimeGuarantee[] = [
{ service: 'VPS Hosting', uptime: '99.99%', monthly: '4 min 23 sec', color: 'success' },
{ service: 'Dedicated Servers', uptime: '99.99%', monthly: '4 min 23 sec', color: 'success' },
{ service: 'Web Hosting', uptime: '99.9%', monthly: '43 min 50 sec', color: 'primary' },
{ service: 'Game Servers', uptime: '99.9%', monthly: '43 min 50 sec', color: 'primary' },
{ service: 'MySQL Hosting', uptime: '99.9%', monthly: '43 min 50 sec', color: 'primary' },
]
interface CreditTier {
uptime: string
credit: string
}
const creditTiers: CreditTier[] = [
{ uptime: '99.00% - 99.98%', credit: '10x downtime' },
{ uptime: '95.00% - 98.99%', credit: '25x downtime' },
{ uptime: '90.00% - 94.99%', credit: '50x downtime' },
{ uptime: 'Below 90.00%', credit: '100x downtime' },
]
</script>
<template>
<div>
<VContainer class="py-16">
<!-- Header -->
<VRow justify="center">
<VCol cols="12" md="10" lg="8">
<div class="text-center mb-12">
<h1 class="text-h2 font-weight-bold mb-3">Service Level Agreement</h1>
<p class="text-body-1 text-medium-emphasis">
Effective Date: {{ effectiveDate }}
</p>
</div>
<VCard variant="outlined">
<VCardText class="pa-6 pa-md-10">
<!-- Introduction -->
<p class="text-body-1 mb-6">
This Service Level Agreement ("SLA") is part of the
<Link :href="route('terms')" class="text-primary text-decoration-none font-weight-medium">Terms of Service</Link>
between you and {{ companyName }} ("EZSCALE," "we," "us," or "our"). This SLA describes our
uptime commitments and the remedies available to you if we fail to meet them.
</p>
<!-- Table of Contents -->
<VCard variant="tonal" color="primary" class="mb-8">
<VCardText>
<h2 class="text-h6 font-weight-bold mb-3">Table of Contents</h2>
<div class="d-flex flex-column ga-1">
<a
v-for="section in sections"
:key="section.id"
:href="`#${section.id}`"
class="text-body-2 text-primary text-decoration-none"
>
{{ section.title }}
</a>
</div>
</VCardText>
</VCard>
<!-- 1. Overview -->
<div id="overview" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">1. Overview</h2>
<p class="text-body-1 mb-3">
EZSCALE is committed to providing reliable, high-performance hosting infrastructure. This SLA
defines our uptime guarantees and the service credits we provide when we fail to meet those
commitments.
</p>
<p class="text-body-1">
"Uptime" is defined as the percentage of time during a calendar month that your service is
accessible and operational, as measured by our monitoring systems. "Downtime" is any period
during which your service is inaccessible due to causes within our control.
</p>
</div>
<!-- 2. Uptime Guarantees -->
<div id="uptime" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">2. Uptime Guarantees</h2>
<p class="text-body-1 mb-4">
The following uptime guarantees apply to each service category:
</p>
<VCard variant="outlined" class="mb-4">
<VTable>
<thead>
<tr>
<th class="text-subtitle-2 font-weight-bold">Service</th>
<th class="text-subtitle-2 font-weight-bold">Uptime Guarantee</th>
<th class="text-subtitle-2 font-weight-bold">Max Downtime / Month</th>
</tr>
</thead>
<tbody>
<tr v-for="item in uptimeGuarantees" :key="item.service">
<td class="font-weight-medium">{{ item.service }}</td>
<td>
<VChip :color="item.color" size="small" variant="tonal">
{{ item.uptime }}
</VChip>
</td>
<td class="text-medium-emphasis">{{ item.monthly }}</td>
</tr>
</tbody>
</VTable>
</VCard>
<p class="text-body-1">
Uptime is calculated on a monthly basis using the formula:
</p>
<VCard variant="tonal" class="mt-3">
<VCardText class="text-center">
<code class="text-body-1">
Uptime % = ((Total Minutes in Month - Downtime Minutes) / Total Minutes in Month) x 100
</code>
</VCardText>
</VCard>
</div>
<!-- 3. Service Credit Calculation -->
<div id="credits" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">3. Service Credit Calculation</h2>
<p class="text-body-1 mb-3">
If we fail to meet the uptime guarantee for your service, you are eligible for service credits.
Credits are calculated based on the duration of downtime and applied as a multiplier:
</p>
<VCard variant="outlined" class="mb-4">
<VTable>
<thead>
<tr>
<th class="text-subtitle-2 font-weight-bold">Monthly Uptime</th>
<th class="text-subtitle-2 font-weight-bold">Credit Amount</th>
</tr>
</thead>
<tbody>
<tr v-for="tier in creditTiers" :key="tier.uptime">
<td class="font-weight-medium">{{ tier.uptime }}</td>
<td>
<VChip color="primary" size="small" variant="tonal">
{{ tier.credit }}
</VChip>
</td>
</tr>
</tbody>
</VTable>
</VCard>
<h3 class="text-subtitle-1 font-weight-bold mb-2">Credit Calculation Example</h3>
<VCard variant="tonal" class="mb-3">
<VCardText>
<p class="text-body-2 mb-2">
<strong>Scenario:</strong> Your VPS plan costs $50/month. The service experienced 2 hours of
downtime in a month, resulting in 99.72% uptime.
</p>
<p class="text-body-2 mb-2">
<strong>Credit tier:</strong> 99.00% - 99.98% = 10x downtime credit
</p>
<p class="text-body-2 mb-2">
<strong>Hourly rate:</strong> $50 / 720 hours = $0.069/hour
</p>
<p class="text-body-2 mb-0">
<strong>Credit:</strong> 2 hours x $0.069 x 10 = <strong>$1.39 service credit</strong>
</p>
</VCardText>
</VCard>
<p class="text-body-1">
Service credits are applied to your account balance and can be used toward future invoices.
Credits cannot be converted to cash refunds. The maximum credit for any single month shall
not exceed 100% of your monthly service fee for the affected service.
</p>
</div>
<!-- 4. Exclusions -->
<div id="exclusions" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">4. Exclusions</h2>
<p class="text-body-1 mb-3">
The following situations are excluded from our uptime guarantee and do not qualify for service credits:
</p>
<ul class="text-body-1 mb-3 ml-6">
<li class="mb-2">
<strong>Scheduled Maintenance:</strong> Planned maintenance windows announced at least 48 hours
in advance via email and/or dashboard notification. We schedule maintenance during low-traffic
hours (typically 2:00 AM - 6:00 AM ET) and aim for zero-downtime maintenance whenever possible.
</li>
<li class="mb-2">
<strong>Force Majeure:</strong> Events beyond our reasonable control, including but not limited
to natural disasters, acts of war, terrorism, pandemics, government actions, power grid failures,
or widespread internet outages.
</li>
<li class="mb-2">
<strong>Customer-Caused Issues:</strong> Downtime resulting from your actions, configurations,
or software, including misconfigured firewalls, resource exhaustion from your applications,
or software bugs in your code.
</li>
<li class="mb-2">
<strong>DDoS Attacks:</strong> Downtime caused by distributed denial-of-service attacks targeting
your services, though we will make reasonable efforts to mitigate such attacks.
</li>
<li class="mb-2">
<strong>Third-Party Services:</strong> Outages of third-party services, DNS providers, or upstream
network providers outside of our direct control.
</li>
<li class="mb-2">
<strong>Account Suspension:</strong> Downtime resulting from suspension of your account due to
policy violations, non-payment, or other breaches of our Terms of Service.
</li>
<li class="mb-2">
<strong>Beta/Preview Services:</strong> Services labeled as beta, preview, or experimental are
not covered by this SLA.
</li>
</ul>
</div>
<!-- 5. Monitoring and Reporting -->
<div id="monitoring" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">5. Monitoring and Reporting</h2>
<p class="text-body-1 mb-3">
We continuously monitor our infrastructure using multiple monitoring systems to detect and
respond to service disruptions:
</p>
<ul class="text-body-1 ml-6">
<li class="mb-1"><strong>Network Monitoring:</strong> Real-time monitoring of network connectivity, latency, and packet loss across all data centers.</li>
<li class="mb-1"><strong>Server Monitoring:</strong> Continuous monitoring of server health, including CPU, memory, disk, and service availability.</li>
<li class="mb-1"><strong>Status Page:</strong> Our public status page provides real-time information about service status, active incidents, and scheduled maintenance.</li>
<li class="mb-1"><strong>Incident Response:</strong> Our operations team is available 24/7 to respond to service disruptions. We aim to acknowledge incidents within 15 minutes and provide updates every 30 minutes during active incidents.</li>
</ul>
</div>
<!-- 6. How to Claim SLA Credits -->
<div id="claiming" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">6. How to Claim SLA Credits</h2>
<p class="text-body-1 mb-3">
To request an SLA credit, follow these steps:
</p>
<VCard variant="outlined" class="mb-4">
<VList lines="three">
<VListItem>
<template #prepend>
<VAvatar color="primary" variant="tonal" size="36">
<span class="text-body-2 font-weight-bold">1</span>
</VAvatar>
</template>
<VListItemTitle class="font-weight-bold">Submit a Support Ticket</VListItemTitle>
<VListItemSubtitle class="text-wrap">
Open a support ticket through your account dashboard or email support@ezscale.cloud
with the subject line "SLA Credit Request."
</VListItemSubtitle>
</VListItem>
<VListItem>
<template #prepend>
<VAvatar color="primary" variant="tonal" size="36">
<span class="text-body-2 font-weight-bold">2</span>
</VAvatar>
</template>
<VListItemTitle class="font-weight-bold">Provide Details</VListItemTitle>
<VListItemSubtitle class="text-wrap">
Include your account ID, affected service(s), date and time of the downtime, duration,
and a description of the impact.
</VListItemSubtitle>
</VListItem>
<VListItem>
<template #prepend>
<VAvatar color="primary" variant="tonal" size="36">
<span class="text-body-2 font-weight-bold">3</span>
</VAvatar>
</template>
<VListItemTitle class="font-weight-bold">Timeframe</VListItemTitle>
<VListItemSubtitle class="text-wrap">
Credit requests must be submitted within 30 days of the incident. Requests submitted
after 30 days will not be eligible for credits.
</VListItemSubtitle>
</VListItem>
<VListItem>
<template #prepend>
<VAvatar color="primary" variant="tonal" size="36">
<span class="text-body-2 font-weight-bold">4</span>
</VAvatar>
</template>
<VListItemTitle class="font-weight-bold">Review and Issuance</VListItemTitle>
<VListItemSubtitle class="text-wrap">
We will review your request within 5 business days. If approved, the credit will be
applied to your next billing cycle.
</VListItemSubtitle>
</VListItem>
</VList>
</VCard>
</div>
<!-- 7. Remedies -->
<div id="remedies" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">7. Remedies</h2>
<p class="text-body-1 mb-3">
Service credits as described in this SLA are your sole and exclusive remedy for any failure
by EZSCALE to meet the uptime guarantees. This SLA does not entitle you to any additional
damages, refunds, or other remedies beyond the service credits described herein.
</p>
<p class="text-body-1">
Nothing in this SLA limits or excludes liability that cannot be limited or excluded under
applicable law.
</p>
</div>
<!-- 8. Changes to This SLA -->
<div id="changes" class="mb-8">
<h2 class="text-h5 font-weight-bold mb-4">8. Changes to This SLA</h2>
<p class="text-body-1">
We may update this SLA from time to time. We will notify you of material changes by posting
the updated SLA on our website and updating the "Effective Date." Changes will not apply
retroactively. If we reduce our uptime guarantees, we will provide at least 30 days' advance
notice. Your continued use of the Services after changes take effect constitutes acceptance
of the revised SLA.
</p>
</div>
<!-- 9. Contact Information -->
<div id="contact">
<h2 class="text-h5 font-weight-bold mb-4">9. Contact Information</h2>
<p class="text-body-1 mb-3">
If you have questions about this Service Level Agreement or need to submit a credit request, please contact us:
</p>
<VCard variant="tonal" class="mb-0">
<VCardText>
<div class="d-flex flex-column ga-2">
<div class="d-flex align-center ga-2">
<VIcon icon="tabler-building" size="20" class="text-medium-emphasis" />
<span class="text-body-1">{{ companyName }}</span>
</div>
<div class="d-flex align-center ga-2">
<VIcon icon="tabler-mail" size="20" class="text-medium-emphasis" />
<a href="mailto:support@ezscale.cloud" class="text-body-1 text-primary text-decoration-none">support@ezscale.cloud</a>
</div>
<div class="d-flex align-center ga-2">
<VIcon icon="tabler-world" size="20" class="text-medium-emphasis" />
<a href="https://ezscale.cloud" class="text-body-1 text-primary text-decoration-none">ezscale.cloud</a>
</div>
</div>
</VCardText>
</VCard>
</div>
</VCardText>
</VCard>
</VCol>
</VRow>
</VContainer>
</div>
</template>