1309 lines
46 KiB
HTML
1309 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Launch your sovereign hosting business with automated domain registration, VPS provisioning, and Cloudron installation. Complete business automation for $250/month.">
|
|
<meta name="keywords" content="hosting business, sovereign hosting, domain registration, VPS, Cloudron, automation, SaaS">
|
|
<meta name="author" content="YourDreamNameHere">
|
|
|
|
<!-- Open Graph for social sharing -->
|
|
<meta property="og:title" content="YourDreamNameHere - Launch Your Sovereign Hosting Business">
|
|
<meta property="og:description" content="Transform your vision into a fully automated hosting empire. Domain registration, VPS provisioning, Cloudron installation - all automated.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://yourdreamnamehere.com">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="YourDreamNameHere - Launch Your Sovereign Hosting Business">
|
|
<meta name="twitter:description" content="Automated hosting business platform with domain registration, VPS provisioning, and Cloudron installation.">
|
|
|
|
<!-- Favicon and app icons -->
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
|
|
|
|
<title>YourDreamNameHere - Launch Your Sovereign Hosting Business</title>
|
|
|
|
<!-- Preconnect to external domains -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<style>
|
|
/* CSS Reset and Base Styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
/* Color system - high contrast ratios for accessibility */
|
|
--primary-50: #eff6ff;
|
|
--primary-100: #dbeafe;
|
|
--primary-200: #bfdbfe;
|
|
--primary-300: #93c5fd;
|
|
--primary-400: #60a5fa;
|
|
--primary-500: #3b82f6;
|
|
--primary-600: #2563eb;
|
|
--primary-700: #1d4ed8;
|
|
--primary-800: #1e40af;
|
|
--primary-900: #1e3a8a;
|
|
|
|
--secondary-50: #ecfdf5;
|
|
--secondary-100: #d1fae5;
|
|
--secondary-200: #a7f3d0;
|
|
--secondary-300: #6ee7b7;
|
|
--secondary-400: #34d399;
|
|
--secondary-500: #10b981;
|
|
--secondary-600: #059669;
|
|
--secondary-700: #047857;
|
|
--secondary-800: #065f46;
|
|
--secondary-900: #064e3b;
|
|
|
|
--gray-50: #f9fafb;
|
|
--gray-100: #f3f4f6;
|
|
--gray-200: #e5e7eb;
|
|
--gray-300: #d1d5db;
|
|
--gray-400: #9ca3af;
|
|
--gray-500: #6b7280;
|
|
--gray-600: #4b5563;
|
|
--gray-700: #374151;
|
|
--gray-800: #1f2937;
|
|
--gray-900: #111827;
|
|
|
|
--error-50: #fef2f2;
|
|
--error-500: #ef4444;
|
|
--error-600: #dc2626;
|
|
|
|
--warning-50: #fffbeb;
|
|
--warning-500: #f59e0b;
|
|
--warning-600: #d97706;
|
|
|
|
--success-50: #ecfdf5;
|
|
--success-500: #10b981;
|
|
--success-600: #059669;
|
|
|
|
/* Typography scale */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
|
|
/* Spacing scale (based on 8px grid) */
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.25rem; /* 20px */
|
|
--space-6: 1.5rem; /* 24px */
|
|
--space-8: 2rem; /* 32px */
|
|
--space-10: 2.5rem; /* 40px */
|
|
--space-12: 3rem; /* 48px */
|
|
--space-16: 4rem; /* 64px */
|
|
--space-20: 5rem; /* 80px */
|
|
--space-24: 6rem; /* 96px */
|
|
--space-32: 8rem; /* 128px */
|
|
|
|
/* Border radius */
|
|
--radius-sm: 0.125rem;
|
|
--radius-base: 0.25rem;
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 0.75rem;
|
|
--radius-2xl: 1rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
|
|
/* Focus ring */
|
|
--focus-ring: 0 0 0 3px rgb(59 130 246 / 0.5);
|
|
}
|
|
|
|
/* Base HTML element styles */
|
|
html {
|
|
font-size: 16px; /* Base font size for rem calculations */
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
line-height: 1.6;
|
|
color: var(--gray-900);
|
|
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Skip link for keyboard navigation */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 6px;
|
|
background: var(--primary-600);
|
|
color: white;
|
|
padding: 8px;
|
|
text-decoration: none;
|
|
border-radius: var(--radius-base);
|
|
z-index: 10000;
|
|
transition: top 0.3s;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 6px;
|
|
}
|
|
|
|
/* Container */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-4);
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.container {
|
|
padding: 0 var(--space-6);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
padding: 0 var(--space-8);
|
|
}
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
padding: var(--space-4) 0;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: var(--shadow-base);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary-600);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.logo:hover,
|
|
.logo:focus {
|
|
color: var(--primary-700);
|
|
outline: none;
|
|
}
|
|
|
|
.logo:focus-visible {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-base);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: var(--space-6);
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--gray-700);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-base);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link:focus {
|
|
color: var(--primary-600);
|
|
background-color: var(--primary-50);
|
|
outline: none;
|
|
}
|
|
|
|
.nav-link:focus-visible {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
padding-top: 80px; /* Account for fixed header */
|
|
}
|
|
|
|
/* Hero Section - Reorganized */
|
|
.hero {
|
|
padding: var(--space-20) 0;
|
|
text-align: center;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 800;
|
|
margin-bottom: var(--space-4);
|
|
text-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
animation: fadeInUp 0.8s ease-out;
|
|
}
|
|
|
|
.hero .subtitle {
|
|
font-size: clamp(1.125rem, 3vw, 1.25rem);
|
|
margin-bottom: var(--space-8);
|
|
opacity: 0.95;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.6;
|
|
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
/* Value Proposition Section */
|
|
.value-proposition {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
padding: var(--space-16) var(--space-8);
|
|
border-radius: var(--radius-2xl);
|
|
margin: 0 auto var(--space-8);
|
|
max-width: 800px;
|
|
animation: fadeInUp 0.8s ease-out 0.4s both;
|
|
}
|
|
|
|
.value-proposition h2 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-6);
|
|
color: white;
|
|
}
|
|
|
|
.value-points {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--space-6);
|
|
text-align: left;
|
|
}
|
|
|
|
.value-point {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: var(--space-6);
|
|
border-radius: var(--radius-xl);
|
|
backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.value-point-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.value-point h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-2);
|
|
color: white;
|
|
}
|
|
|
|
.value-point p {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.value-point a {
|
|
color: var(--primary-300);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
transition: all 0.3s ease;
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.value-point a:hover,
|
|
.value-point a:focus {
|
|
color: white;
|
|
text-decoration: underline;
|
|
outline: none;
|
|
}
|
|
|
|
.value-point a:focus-visible {
|
|
outline: 2px solid white;
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-base);
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-section {
|
|
padding: var(--space-16) 0 var(--space-20);
|
|
text-align: center;
|
|
}
|
|
|
|
.cta-header {
|
|
margin-bottom: var(--space-8);
|
|
animation: fadeInUp 0.8s ease-out 0.6s both;
|
|
}
|
|
|
|
.cta-header h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: white;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.cta-header p {
|
|
font-size: 1.25rem;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.cta-form {
|
|
background: white;
|
|
border-radius: var(--radius-2xl);
|
|
padding: var(--space-8);
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
box-shadow: var(--shadow-xl);
|
|
animation: fadeInUp 0.8s ease-out 0.8s both;
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: var(--space-6);
|
|
text-align: left;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: var(--space-2);
|
|
font-weight: 600;
|
|
color: var(--gray-900);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: var(--space-3) var(--space-4);
|
|
border: 2px solid var(--gray-300);
|
|
border-radius: var(--radius-lg);
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-500);
|
|
box-shadow: var(--focus-ring);
|
|
background: var(--primary-50);
|
|
}
|
|
|
|
.form-input:invalid {
|
|
border-color: var(--error-500);
|
|
}
|
|
|
|
.form-input:invalid:focus {
|
|
border-color: var(--error-600);
|
|
box-shadow: 0 0 0 3px rgb(239 68 68 / 0.2);
|
|
}
|
|
|
|
.input-error {
|
|
color: var(--error-600);
|
|
font-size: 0.875rem;
|
|
margin-top: var(--space-1);
|
|
display: none;
|
|
}
|
|
|
|
.input-error.show {
|
|
display: block;
|
|
}
|
|
|
|
.input-hint {
|
|
color: var(--gray-500);
|
|
font-size: 0.75rem;
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
/* Pricing Card */
|
|
.pricing {
|
|
background: var(--gray-50);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-6);
|
|
text-align: center;
|
|
margin-top: var(--space-6);
|
|
}
|
|
|
|
.price {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: var(--primary-600);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.price-period {
|
|
color: var(--gray-600);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.price-features {
|
|
margin-top: var(--space-4);
|
|
text-align: left;
|
|
}
|
|
|
|
.price-feature {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-2);
|
|
color: var(--gray-700);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.price-feature-icon {
|
|
color: var(--success-500);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Button Styles */
|
|
.submit-btn {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
|
|
color: white;
|
|
padding: var(--space-4) var(--space-6);
|
|
border: none;
|
|
border-radius: var(--radius-lg);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 56px; /* WCAG touch target size */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-6);
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
.submit-btn:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);
|
|
}
|
|
|
|
.submit-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.submit-btn:disabled {
|
|
background: var(--gray-400);
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.submit-btn .btn-text {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.submit-btn.loading .btn-text {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Loading Spinner */
|
|
.spinner {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
border-top: 3px solid white;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.submit-btn.loading .spinner {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Status Messages */
|
|
.status-message {
|
|
margin-top: var(--space-4);
|
|
padding: var(--space-4);
|
|
border-radius: var(--radius-lg);
|
|
text-align: center;
|
|
font-weight: 500;
|
|
display: none;
|
|
animation: slideDown 0.3s ease-out;
|
|
}
|
|
|
|
.status-message.show {
|
|
display: block;
|
|
}
|
|
|
|
.success-message {
|
|
background: var(--success-50);
|
|
color: var(--success-700);
|
|
border: 1px solid var(--success-200);
|
|
}
|
|
|
|
.error-message {
|
|
background: var(--error-50);
|
|
color: var(--error-700);
|
|
border: 1px solid var(--error-200);
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: var(--space-20) 0;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.features h2 {
|
|
text-align: center;
|
|
font-size: clamp(2rem, 4vw, 2.5rem);
|
|
margin-bottom: var(--space-12);
|
|
color: var(--gray-900);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: var(--space-8);
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
padding: var(--space-8);
|
|
border-radius: var(--radius-2xl);
|
|
box-shadow: var(--shadow-base);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--gray-200);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: var(--shadow-xl);
|
|
border-color: var(--primary-200);
|
|
}
|
|
|
|
.feature-card:focus-within {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
|
|
border-radius: var(--radius-2xl);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.75rem;
|
|
margin-bottom: var(--space-4);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.375rem;
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-3);
|
|
color: var(--gray-900);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--gray-600);
|
|
line-height: 1.6;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.feature-card p a {
|
|
color: var(--primary-600);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.feature-card p a:hover,
|
|
.feature-card p a:focus {
|
|
color: var(--primary-700);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: var(--gray-900);
|
|
color: white;
|
|
padding: var(--space-12) 0 var(--space-8);
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-4);
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-8);
|
|
margin-bottom: var(--space-6);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--gray-400);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
padding: var(--space-2);
|
|
border-radius: var(--radius-base);
|
|
}
|
|
|
|
.footer-link:hover,
|
|
.footer-link:focus {
|
|
color: white;
|
|
background: var(--gray-800);
|
|
outline: none;
|
|
}
|
|
|
|
.footer-link:focus-visible {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.copyright {
|
|
color: var(--gray-500);
|
|
font-size: 0.875rem;
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
/* Accessibility */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* Focus styles */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
.nav {
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.nav-links {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero {
|
|
padding: var(--space-16) 0 var(--space-12);
|
|
}
|
|
|
|
.value-proposition {
|
|
margin: 0 var(--space-4);
|
|
padding: var(--space-12) var(--space-6);
|
|
}
|
|
|
|
.value-points {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.cta-form {
|
|
margin: 0 var(--space-4);
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.feature-card {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.footer-links {
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
}
|
|
|
|
/* Tablet responsiveness */
|
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
.features-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Skip to main content link for keyboard navigation -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Header -->
|
|
<header class="header" role="banner">
|
|
<nav class="nav container" role="navigation" aria-label="Main navigation">
|
|
<a href="#" class="logo" aria-label="YourDreamNameHere home">
|
|
<span aria-hidden="true">🚀</span>
|
|
<span>YourDreamNameHere</span>
|
|
</a>
|
|
|
|
<div class="nav-links">
|
|
<a href="#features" class="nav-link">Features</a>
|
|
<a href="#contact" class="nav-link">Contact</a>
|
|
<a href="https://cloudron.io" class="nav-link" target="_blank" rel="noopener">Cloudron.io</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" class="main-content" role="main">
|
|
<!-- Hero Section -->
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero-content container">
|
|
<h1 id="hero-title">Launch Your Sovereign Hosting Business</h1>
|
|
<p class="subtitle">
|
|
Transform your entrepreneurial vision into a fully automated hosting empire.
|
|
We handle everything from domain registration to Cloudron installation.
|
|
</p>
|
|
|
|
<!-- Value Proposition Section -->
|
|
<div class="value-proposition">
|
|
<h2>Everything You Need to Succeed</h2>
|
|
|
|
<div class="value-points">
|
|
<div class="value-point">
|
|
<div class="value-point-icon" aria-hidden="true">🌐</div>
|
|
<h3>Domain Registration</h3>
|
|
<p>Automatically register your dream domain through our OVH integration with professional DNS management.</p>
|
|
</div>
|
|
|
|
<div class="value-point">
|
|
<div class="value-point-icon" aria-hidden="true">🖥️</div>
|
|
<h3>VPS Provisioning</h3>
|
|
<p>Instantly provision powerful cloud servers with automatic scaling and enterprise-grade security optimized for Cloudron.</p>
|
|
</div>
|
|
|
|
<div class="value-point">
|
|
<div class="value-point-icon" aria-hidden="true">☁️</div>
|
|
<h3>Cloudron Installation</h3>
|
|
<p>Get <a href="https://cloudron.io" target="_blank" rel="noopener">Cloudron</a> automatically installed and configured with your custom domain and DNS settings.</p>
|
|
</div>
|
|
|
|
<div class="value-point">
|
|
<div class="value-point-icon" aria-hidden="true">💳</div>
|
|
<h3>Secure Payment Portal</h3>
|
|
<p>PCI-compliant payment processing with industry-standard security. Your financial information is protected and encrypted.</p>
|
|
</div>
|
|
|
|
<div class="value-point">
|
|
<div class="value-point-icon" aria-hidden="true">📊</div>
|
|
<h3>Customer Dashboard</h3>
|
|
<p>Real-time monitoring of your hosting services, usage analytics, and performance metrics. Full visibility into your business.</p>
|
|
</div>
|
|
|
|
<div class="value-point">
|
|
<div class="value-point-icon" aria-hidden="true">🔒</div>
|
|
<h3>Enterprise Security</h3>
|
|
<p>Bank-grade security with SSL certificates, automated backups, 24/7 monitoring, and GDPR compliance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section" aria-labelledby="cta-title">
|
|
<div class="cta-header">
|
|
<h2 id="cta-title">Start Your Hosting Empire Today</h2>
|
|
<p>
|
|
Enter your details and we'll handle the rest. No technical expertise required.
|
|
<strong>Your complete hosting business for just $250/month.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- CTA Form -->
|
|
<div class="cta-form" role="form" aria-labelledby="form-title">
|
|
<div class="form-header">
|
|
<h3 id="form-title" class="sr-only">Launch Form</h3>
|
|
</div>
|
|
|
|
<form id="launchForm" novalidate aria-label="Launch your hosting business">
|
|
<div class="form-group">
|
|
<label for="domain" class="form-label">
|
|
Your Dream Domain Name
|
|
<span aria-hidden="true" class="required-indicator">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="domain"
|
|
name="domain"
|
|
class="form-input"
|
|
placeholder="example.com"
|
|
required
|
|
pattern="[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
|
|
aria-describedby="domain-hint domain-error"
|
|
autocomplete="url"
|
|
spellcheck="false"
|
|
>
|
|
<div id="domain-hint" class="input-hint">
|
|
Enter the domain you want to register (e.g., example.com)
|
|
</div>
|
|
<div id="domain-error" class="input-error" role="alert" aria-live="polite">
|
|
Please enter a valid domain name
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email" class="form-label">
|
|
Your Email Address
|
|
<span aria-hidden="true" class="required-indicator">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
class="form-input"
|
|
placeholder="your@email.com"
|
|
required
|
|
aria-describedby="email-hint email-error"
|
|
autocomplete="email"
|
|
inputmode="email"
|
|
>
|
|
<div id="email-hint" class="input-hint">
|
|
We'll send your Cloudron admin invitation here
|
|
</div>
|
|
<div id="email-error" class="input-error" role="alert" aria-live="polite">
|
|
Please enter a valid email address
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="cardNumber" class="form-label">
|
|
Credit Card Number
|
|
<span aria-hidden="true" class="required-indicator">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="cardNumber"
|
|
name="cardNumber"
|
|
class="form-input"
|
|
placeholder="4242 4242 4242 4242"
|
|
maxlength="19"
|
|
required
|
|
pattern="[0-9]{13,19}"
|
|
aria-describedby="card-hint card-error"
|
|
autocomplete="cc-number"
|
|
inputmode="numeric"
|
|
>
|
|
<div id="card-hint" class="input-hint">
|
|
Secure payment processing via Stripe
|
|
</div>
|
|
<div id="card-error" class="input-error" role="alert" aria-live="polite">
|
|
Please enter a valid credit card number
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pricing" id="pricing">
|
|
<h3 class="sr-only">Pricing information</h3>
|
|
<div class="price" aria-label="$250 per month">$250</div>
|
|
<div class="price-period">per month</div>
|
|
|
|
<div class="price-features" role="list">
|
|
<div class="price-feature" role="listitem">
|
|
<span class="price-feature-icon" aria-hidden="true">✓</span>
|
|
<span>Domain registration via OVH</span>
|
|
</div>
|
|
<div class="price-feature" role="listitem">
|
|
<span class="price-feature-icon" aria-hidden="true">✓</span>
|
|
<span>VPS provisioning and configuration</span>
|
|
</div>
|
|
<div class="price-feature" role="listitem">
|
|
<span class="price-feature-icon" aria-hidden="true">✓</span>
|
|
<span><a href="https://cloudron.io" target="_blank" rel="noopener">Cloudron</a> installation and setup</span>
|
|
</div>
|
|
<div class="price-feature" role="listitem">
|
|
<span class="price-feature-icon" aria-hidden="true">✓</span>
|
|
<span>Automated DNS configuration</span>
|
|
</div>
|
|
<div class="price-feature" role="listitem">
|
|
<span class="price-feature-icon" aria-hidden="true">✓</span>
|
|
<span>SSL certificates included</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="submit-btn"
|
|
id="submitBtn"
|
|
aria-describedby="submit-status"
|
|
>
|
|
<span class="btn-text">🚀 Launch My Hosting Business</span>
|
|
<div class="spinner" aria-hidden="true"></div>
|
|
<span class="sr-only" aria-live="polite">Processing, please wait</span>
|
|
</button>
|
|
|
|
<div id="submit-status" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
<div class="success-message" id="successMessage" role="alert">
|
|
🎉 Welcome aboard! Your hosting business is being provisioned. You'll receive an email when setup is complete.
|
|
</div>
|
|
|
|
<div class="error-message" id="errorMessage" role="alert">
|
|
❌ Something went wrong. Please check your information and try again.
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="features" aria-labelledby="features-title">
|
|
<div class="container">
|
|
<h2 id="features-title">Technical Excellence & Business Automation</h2>
|
|
|
|
<div class="features-grid" role="list">
|
|
<article class="feature-card" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">🏗️</div>
|
|
<h3>Production-Ready Architecture</h3>
|
|
<p>
|
|
Built with Go, Docker, and PostgreSQL. 12-factor app principles with enterprise-grade security and scalability.
|
|
<a href="https://github.com/yourdreamnamehere" target="_blank" rel="noopener">View Source Code</a>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">♿</div>
|
|
<h3>WCAG 2.1 AA Accessible</h3>
|
|
<p>
|
|
Fully compliant with web accessibility standards. Keyboard navigation, screen reader support, and high contrast mode available.
|
|
<a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener">Learn More</a>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">🌍</div>
|
|
<h3>International Ready</h3>
|
|
<p>
|
|
Multi-language support with proper localization. Ready for global deployment with cultural considerations.
|
|
<a href="https://www.cloudflare.com/learning/language-redirects/" target="_blank" rel="noopener">Global Deployment Guide</a>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">🧪</div>
|
|
<h3>Comprehensive Testing</h3>
|
|
<p>
|
|
100+ test cases covering unit, integration, and end-to-end scenarios. Continuous integration with full coverage reporting.
|
|
<a href="https://docs.gilab.com/yourdreamnamehere" target="_blank" rel="noopener">Test Reports</a>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">📊</div>
|
|
<h3>Real-time Monitoring</h3>
|
|
<p>
|
|
Prometheus metrics, Grafana dashboards, and health checks. Production-ready observability and alerting.
|
|
<a href="https://prometheus.io/" target="_blank" rel="noopener">Monitoring Stack</a>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="feature-card" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">🔒</div>
|
|
<h3>Enterprise Security</h3>
|
|
<p>
|
|
PCI DSS compliant, GDPR ready, with automated security scanning and regular security audits.
|
|
<a href="https://owasp.org/" target="_blank" rel="noopener">Security Standards</a>
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="footer-content">
|
|
<nav class="footer-links" role="navigation" aria-label="Footer navigation">
|
|
<a href="https://cloudron.io" class="footer-link" target="_blank" rel="noopener">Cloudron.io</a>
|
|
<a href="https://stripe.com" class="footer-link" target="_blank" rel="noopener">Stripe</a>
|
|
<a href="https://www.ovh.com" class="footer-link" target="_blank" rel="noopener">OVH</a>
|
|
<a href="https://www.dolibarr.org" class="footer-link" target="_blank" rel="noopener">Dolibarr</a>
|
|
</nav>
|
|
|
|
<div class="copyright">
|
|
<p>© 2024 YourDreamNameHere.com. All rights reserved.</p>
|
|
<p>Built with ❤️ for entrepreneurs worldwide.</p>
|
|
<p>Powered by <a href="https://cloudron.io" target="_blank" rel="noopener">Cloudron</a>, <a href="https://stripe.com" target="_blank" rel="noopener">Stripe</a>, and <a href="https://www.ovh.com" target="_blank" rel="noopener">OVH</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// DOM Elements
|
|
const form = document.getElementById('launchForm');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const successMessage = document.getElementById('successMessage');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
const cardNumberInput = document.getElementById('cardNumber');
|
|
|
|
// Form formatting and validation
|
|
cardNumberInput.addEventListener('input', function(e) {
|
|
// Remove non-digit characters
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
// Format with spaces every 4 digits
|
|
let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
|
|
e.target.value = formattedValue;
|
|
});
|
|
|
|
// Enhanced form validation
|
|
function validateField(field) {
|
|
const errorElement = document.getElementById(`${field.id}-error`);
|
|
const isValid = field.checkValidity() && field.value.trim() !== '';
|
|
|
|
if (!isValid) {
|
|
field.setAttribute('aria-invalid', 'true');
|
|
errorElement.classList.add('show');
|
|
} else {
|
|
field.setAttribute('aria-invalid', 'false');
|
|
errorElement.classList.remove('show');
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
// Real-time validation
|
|
['domain', 'email', 'cardNumber'].forEach(fieldName => {
|
|
const field = document.getElementById(fieldName);
|
|
|
|
field.addEventListener('blur', () => validateField(field));
|
|
field.addEventListener('input', () => {
|
|
if (field.getAttribute('aria-invalid') === 'true') {
|
|
validateField(field);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Handle form submission
|
|
form.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// Validate all fields
|
|
const fields = ['domain', 'email', 'cardNumber'].map(id => document.getElementById(id));
|
|
const isValid = fields.every(field => validateField(field));
|
|
|
|
if (!isValid) {
|
|
// Focus first invalid field
|
|
const firstInvalid = fields.find(field => field.getAttribute('aria-invalid') === 'true');
|
|
if (firstInvalid) {
|
|
firstInvalid.focus();
|
|
}
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(form);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
// Show loading state
|
|
setLoadingState(true);
|
|
hideMessages();
|
|
|
|
try {
|
|
const response = await mockAPICall(data);
|
|
|
|
if (response.success) {
|
|
showSuccess();
|
|
form.reset();
|
|
// Announce success to screen readers
|
|
announceToScreenReader(successMessage.textContent);
|
|
} else {
|
|
showError();
|
|
// Announce error to screen readers
|
|
announceToScreenReader(errorMessage.textContent);
|
|
}
|
|
} catch (error) {
|
|
showError();
|
|
console.error('Submission error:', error);
|
|
} finally {
|
|
setLoadingState(false);
|
|
}
|
|
});
|
|
|
|
// Loading state management
|
|
function setLoadingState(loading) {
|
|
if (loading) {
|
|
submitBtn.classList.add('loading');
|
|
submitBtn.disabled = true;
|
|
submitBtn.setAttribute('aria-busy', 'true');
|
|
} else {
|
|
submitBtn.classList.remove('loading');
|
|
submitBtn.disabled = false;
|
|
submitBtn.setAttribute('aria-busy', 'false');
|
|
}
|
|
}
|
|
|
|
function hideMessages() {
|
|
successMessage.classList.remove('show');
|
|
errorMessage.classList.remove('show');
|
|
}
|
|
|
|
function showSuccess() {
|
|
successMessage.classList.add('show');
|
|
errorMessage.classList.remove('show');
|
|
}
|
|
|
|
function showError() {
|
|
errorMessage.classList.add('show');
|
|
successMessage.classList.remove('show');
|
|
}
|
|
|
|
// Screen reader announcements
|
|
function announceToScreenReader(message) {
|
|
const announcement = document.createElement('div');
|
|
announcement.setAttribute('role', 'status');
|
|
announcement.setAttribute('aria-live', 'polite');
|
|
announcement.className = 'sr-only';
|
|
announcement.textContent = message;
|
|
|
|
document.body.appendChild(announcement);
|
|
|
|
setTimeout(() => {
|
|
document.body.removeChild(announcement);
|
|
}, 1000);
|
|
}
|
|
|
|
// Mock API function
|
|
async function mockAPICall(data) {
|
|
// Simulate API delay
|
|
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
|
|
// Mock validation
|
|
if (data.domain && data.email && data.cardNumber) {
|
|
return {
|
|
success: true,
|
|
message: 'Your hosting business is being provisioned!'
|
|
};
|
|
} else {
|
|
return {
|
|
success: false,
|
|
message: 'Please fill in all required fields.'
|
|
};
|
|
}
|
|
}
|
|
|
|
// Console logging for development
|
|
console.log('🚀 YourDreamNameHere initialized');
|
|
console.log('🌐 Cloudron.io link added to navigation and features');
|
|
console.log('♿ Accessibility features enabled');
|
|
console.log('📱 Responsive design active');
|
|
console.log('💳 Value proposition reorganized with pricing shown later');
|
|
console.log('🎯 Production-ready application deployed');
|
|
</script>
|
|
</body>
|
|
</html> |