Created
October 2, 2025 21:13
-
-
Save Youngestdev/964e7b61b66158983a3af5b8f0df8818 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mercury - Run Your Business From One Dashboard</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| color: #1F2937; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .container { | |
| padding: 0 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .container { | |
| padding: 0 2rem; | |
| } | |
| } | |
| /* Navigation */ | |
| nav { | |
| background: white; | |
| border-bottom: 1px solid #F3F4F6; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 64px; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| .logo { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: #1F2937; | |
| } | |
| @media (min-width: 640px) { | |
| .logo { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| .nav-links { | |
| display: none; | |
| gap: 2rem; | |
| } | |
| @media (min-width: 768px) { | |
| .nav-links { | |
| display: flex; | |
| } | |
| } | |
| .nav-links a { | |
| color: #6B7280; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { | |
| color: #1F2937; | |
| } | |
| .nav-buttons { | |
| display: none; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| @media (min-width: 768px) { | |
| .nav-buttons { | |
| display: flex; | |
| } | |
| } | |
| .nav-buttons a { | |
| color: #6B7280; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .nav-buttons a:hover { | |
| color: #1F2937; | |
| } | |
| .btn-primary { | |
| background: #1F2937; | |
| color: white; | |
| padding: 0.5rem 1.25rem; | |
| border-radius: 0.5rem; | |
| font-weight: 500; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-primary:hover { | |
| background: #111827; | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background: white; | |
| border: 2px solid #E5E7EB; | |
| color: #1F2937; | |
| padding: 0.5rem 1.25rem; | |
| border-radius: 0.5rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-secondary:hover { | |
| border-color: #1F2937; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .mobile-menu-btn { | |
| display: none; | |
| } | |
| } | |
| .mobile-menu { | |
| display: none; | |
| border-top: 1px solid #F3F4F6; | |
| padding: 1rem; | |
| background: white; | |
| } | |
| .mobile-menu.active { | |
| display: block; | |
| } | |
| .mobile-menu a { | |
| display: block; | |
| color: #6B7280; | |
| text-decoration: none; | |
| padding: 0.5rem 0; | |
| transition: color 0.2s; | |
| } | |
| .mobile-menu a:hover { | |
| color: #1F2937; | |
| } | |
| .mobile-menu .btn-primary { | |
| width: 100%; | |
| text-align: center; | |
| margin-top: 0.5rem; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(180deg, #F5F7F3 0%, #FFFFFF 100%); | |
| padding: 2rem 1rem 3rem; | |
| } | |
| @media (min-width: 640px) { | |
| .hero { | |
| padding: 3rem 1.5rem 4rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .hero { | |
| padding: 4rem 2rem 6rem; | |
| } | |
| } | |
| .hero-content { | |
| max-width: 56rem; | |
| margin: 0 auto 2rem; | |
| text-align: center; | |
| } | |
| @media (min-width: 640px) { | |
| .hero-content { | |
| margin-bottom: 3rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .hero-content { | |
| margin-bottom: 4rem; | |
| } | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: white; | |
| border: 1px solid #E5E7EB; | |
| border-radius: 9999px; | |
| padding: 0.5rem 1rem; | |
| margin-bottom: 1.5rem; | |
| font-size: 0.875rem; | |
| } | |
| @media (min-width: 640px) { | |
| .badge { | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| .badge-dot { | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| background: #10B981; | |
| border-radius: 50%; | |
| } | |
| h1 { | |
| font-size: 1.875rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| margin-bottom: 1rem; | |
| padding: 0 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| h1 { | |
| font-size: 2.25rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| h1 { | |
| font-size: 3rem; | |
| } | |
| } | |
| @media (min-width: 1280px) { | |
| h1 { | |
| font-size: 3.75rem; | |
| } | |
| } | |
| .hero-description { | |
| font-size: 1rem; | |
| color: #6B7280; | |
| margin-bottom: 1.5rem; | |
| padding: 0 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .hero-description { | |
| font-size: 1.125rem; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .hero-description { | |
| font-size: 1.25rem; | |
| margin-bottom: 2.5rem; | |
| } | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| padding: 0 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .cta-buttons { | |
| flex-direction: row; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| .cta-buttons .btn-primary, | |
| .cta-buttons .btn-secondary { | |
| padding: 0.75rem 1.5rem; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| @media (min-width: 640px) { | |
| .cta-buttons .btn-primary, | |
| .cta-buttons .btn-secondary { | |
| padding: 1rem 2rem; | |
| font-size: 1.125rem; | |
| } | |
| } | |
| @media (max-width: 639px) { | |
| .cta-buttons .btn-primary, | |
| .cta-buttons .btn-secondary { | |
| width: 100%; | |
| } | |
| } | |
| .hero-note { | |
| font-size: 0.75rem; | |
| color: #9CA3AF; | |
| } | |
| @media (min-width: 640px) { | |
| .hero-note { | |
| font-size: 0.875rem; | |
| } | |
| } | |
| /* Dashboard Preview */ | |
| .dashboard-preview { | |
| max-width: 80rem; | |
| margin: 0 auto; | |
| } | |
| .dashboard-card { | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| border: 1px solid #E5E7EB; | |
| padding: 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .dashboard-card { | |
| border-radius: 0.75rem; | |
| padding: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .dashboard-card { | |
| padding: 2rem; | |
| } | |
| } | |
| .window-dots { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .window-dots { | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| .dot { | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| border-radius: 50%; | |
| } | |
| @media (min-width: 640px) { | |
| .dot { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| } | |
| } | |
| .dot-red { background: #F87171; } | |
| .dot-yellow { background: #FBBF24; } | |
| .dot-green { background: #34D399; } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .stats-grid { | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| .stat-card { | |
| background: #F9FAFB; | |
| border: 1px solid #E5E7EB; | |
| border-radius: 0.5rem; | |
| padding: 0.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .stat-card { | |
| padding: 1rem; | |
| } | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| color: #6B7280; | |
| margin-bottom: 0.25rem; | |
| } | |
| @media (min-width: 640px) { | |
| .stat-label { | |
| font-size: 0.875rem; | |
| } | |
| } | |
| .stat-value { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| @media (min-width: 640px) { | |
| .stat-value { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .stat-value { | |
| font-size: 1.875rem; | |
| } | |
| } | |
| .activity-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .activity-list { | |
| gap: 0.75rem; | |
| } | |
| } | |
| .activity-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.75rem; | |
| border-radius: 0.5rem; | |
| border: 1px solid; | |
| } | |
| @media (min-width: 640px) { | |
| .activity-item { | |
| padding: 1rem; | |
| } | |
| } | |
| .activity-item.success { | |
| background: #ECFDF5; | |
| border-color: #A7F3D0; | |
| } | |
| .activity-item.info { | |
| background: #EFF6FF; | |
| border-color: #BFDBFE; | |
| } | |
| .activity-item.warning { | |
| background: #FFFBEB; | |
| border-color: #FDE68A; | |
| } | |
| .activity-text { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| @media (min-width: 640px) { | |
| .activity-text { | |
| font-size: 0.875rem; | |
| } | |
| } | |
| .activity-value { | |
| font-weight: 600; | |
| font-size: 0.75rem; | |
| white-space: nowrap; | |
| } | |
| @media (min-width: 640px) { | |
| .activity-value { | |
| font-size: 1rem; | |
| } | |
| } | |
| .activity-value.success { color: #047857; } | |
| .activity-value.info { color: #1D4ED8; } | |
| .activity-value.warning { color: #B45309; } | |
| /* Social Proof */ | |
| .social-proof { | |
| background: linear-gradient(90deg, #F9FAFB 0%, #FFFFFF 50%, #F9FAFB 100%); | |
| padding: 2rem 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .social-proof { | |
| padding: 3rem 1.5rem; | |
| } | |
| } | |
| .social-proof-text { | |
| text-align: center; | |
| font-size: 0.75rem; | |
| color: #6B7280; | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .social-proof-text { | |
| font-size: 0.875rem; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| .logo-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| align-items: center; | |
| justify-items: center; | |
| opacity: 0.4; | |
| } | |
| @media (min-width: 768px) { | |
| .logo-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 2rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .logo-grid { | |
| gap: 3rem; | |
| } | |
| } | |
| .partner-logo { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| } | |
| @media (min-width: 640px) { | |
| .partner-logo { | |
| font-size: 1.25rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .partner-logo { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| /* Section Styles */ | |
| section { | |
| padding: 3rem 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| section { | |
| padding: 4rem 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| section { | |
| padding: 6rem 2rem; | |
| } | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| @media (min-width: 640px) { | |
| .section-header { | |
| margin-bottom: 3rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .section-header { | |
| margin-bottom: 4rem; | |
| } | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| } | |
| @media (min-width: 640px) { | |
| h2 { | |
| font-size: 1.875rem; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| h2 { | |
| font-size: 2.25rem; | |
| } | |
| } | |
| .section-description { | |
| font-size: 1rem; | |
| color: #6B7280; | |
| } | |
| @media (min-width: 640px) { | |
| .section-description { | |
| font-size: 1.125rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .section-description { | |
| font-size: 1.25rem; | |
| } | |
| } | |
| .bg-gray-50 { | |
| background: #F9FAFB; | |
| } | |
| .bg-white { | |
| background: white; | |
| } | |
| /* Problem/Solution */ | |
| .comparison-grid { | |
| display: grid; | |
| gap: 1.5rem; | |
| max-width: 72rem; | |
| margin: 0 auto; | |
| } | |
| @media (min-width: 768px) { | |
| .comparison-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 2rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .comparison-grid { | |
| gap: 3rem; | |
| } | |
| } | |
| .comparison-card { | |
| border-radius: 0.75rem; | |
| padding: 1.5rem; | |
| border: 2px solid; | |
| } | |
| @media (min-width: 640px) { | |
| .comparison-card { | |
| padding: 2rem; | |
| } | |
| } | |
| .comparison-card.negative { | |
| background: #FEF2F2; | |
| border-color: #FECACA; | |
| } | |
| .comparison-card.positive { | |
| background: #ECFDF5; | |
| border-color: #A7F3D0; | |
| } | |
| .icon-box { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| border-radius: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .icon-box { | |
| width: 3rem; | |
| height: 3rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| .icon-box.negative { | |
| background: #FEE2E2; | |
| } | |
| .icon-box.positive { | |
| background: #D1FAE5; | |
| } | |
| .icon-box svg { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| @media (min-width: 640px) { | |
| .icon-box svg { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| } | |
| } | |
| h3 { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| } | |
| @media (min-width: 640px) { | |
| h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| .comparison-list { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .comparison-list { | |
| gap: 0.75rem; | |
| } | |
| } | |
| .comparison-list li { | |
| display: flex; | |
| gap: 0.5rem; | |
| font-size: 0.875rem; | |
| color: #374151; | |
| } | |
| @media (min-width: 640px) { | |
| .comparison-list li { | |
| gap: 0.75rem; | |
| font-size: 1rem; | |
| } | |
| } | |
| .comparison-list .icon { | |
| font-weight: 700; | |
| margin-top: 0.25rem; | |
| } | |
| .comparison-list .icon.negative { | |
| color: #DC2626; | |
| } | |
| .comparison-list .icon.positive { | |
| color: #059669; | |
| } | |
| /* Features */ | |
| .features-grid { | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .features-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .features-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| } | |
| } | |
| .feature-card { | |
| background: white; | |
| border: 1px solid #E5E7EB; | |
| border-radius: 0.75rem; | |
| padding: 1.5rem; | |
| transition: transform 0.3s ease; | |
| } | |
| @media (min-width: 640px) { | |
| .feature-card { | |
| padding: 2rem; | |
| } | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-4px); | |
| } | |
| .feature-icon { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| background: #F3F4F6; | |
| border-radius: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .feature-icon { | |
| width: 3rem; | |
| height: 3rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| .feature-icon svg { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| @media (min-width: 640px) { | |
| .feature-icon svg { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| } | |
| } | |
| .feature-card h3 { | |
| font-size: 1.125rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .feature-card h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| } | |
| .feature-card p { | |
| font-size: 0.875rem; | |
| color: #6B7280; | |
| } | |
| @media (min-width: 640px) { | |
| .feature-card p { | |
| font-size: 1rem; | |
| } | |
| } | |
| /* Stats */ | |
| .stats-container { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| text-align: center; | |
| } | |
| @media (min-width: 768px) { | |
| .stats-container { | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 2rem; | |
| } | |
| } | |
| .stat-number { | |
| font-size: 1.875rem; | |
| font-weight: 700; | |
| margin-bottom: 0.25rem; | |
| } | |
| @media (min-width: 640px) { | |
| .stat-number { | |
| font-size: 2.25rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .stat-number { | |
| font-size: 3rem; | |
| } | |
| } | |
| .stat-text { | |
| font-size: 0.875rem; | |
| color: #6B7280; | |
| } | |
| @media (min-width: 640px) { | |
| .stat-text { | |
| font-size: 1rem; | |
| } | |
| } | |
| /* CTA Section */ | |
| .cta-section { | |
| background: #111827; | |
| color: white; | |
| } | |
| .cta-content { | |
| max-width: 56rem; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .cta-section h2 { | |
| color: white; | |
| font-size: 1.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .cta-section h2 { | |
| font-size: 1.875rem; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .cta-section h2 { | |
| font-size: 2.25rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .cta-section h2 { | |
| font-size: 3rem; | |
| } | |
| } | |
| .cta-section p { | |
| font-size: 1rem; | |
| color: #D1D5DB; | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .cta-section p { | |
| font-size: 1.125rem; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .cta-section p { | |
| font-size: 1.25rem; | |
| margin-bottom: 2.5rem; | |
| } | |
| } | |
| .cta-section .cta-buttons { | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .cta-section .cta-buttons { | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| .btn-white { | |
| background: white; | |
| color: #1F2937; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-weight: 600; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| @media (min-width: 640px) { | |
| .btn-white { | |
| padding: 1rem 2rem; | |
| font-size: 1.125rem; | |
| } | |
| } | |
| .btn-white:hover { | |
| background: #F3F4F6; | |
| } | |
| .btn-outline-white { | |
| background: transparent; | |
| color: white; | |
| border: 2px solid white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| @media (min-width: 640px) { | |
| .btn-outline-white { | |
| padding: 1rem 2rem; | |
| font-size: 1.125rem; | |
| } | |
| } | |
| .btn-outline-white:hover { | |
| background: white; | |
| color: #1F2937; | |
| } | |
| @media (max-width: 639px) { | |
| .cta-section .btn-white, | |
| .cta-section .btn-outline-white { | |
| width: 100%; | |
| } | |
| } | |
| .cta-note { | |
| font-size: 0.75rem; | |
| color: #9CA3AF; | |
| } | |
| @media (min-width: 640px) { | |
| .cta-note { | |
| font-size: 0.875rem; | |
| } | |
| } | |
| /* Footer */ | |
| footer { | |
| background: white; | |
| border-top: 1px solid #E5E7EB; | |
| padding: 2rem 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| footer { | |
| padding: 3rem 1.5rem; | |
| } | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .footer-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| .footer-column:first-child { | |
| grid-column: span 2; | |
| } | |
| @media (min-width: 768px) { | |
| .footer-column:first-child { | |
| grid-column: span 1; | |
| } | |
| } | |
| .footer-logo { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| } | |
| @media (min-width: 640px) { | |
| .footer-logo { | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| .footer-description { | |
| font-size: 0.75rem; | |
| color: #6B7280; | |
| } | |
| @media (min-width: 640px) { | |
| .footer-description { | |
| font-size: 0.875rem; | |
| } | |
| } | |
| .footer-heading { | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| font-size: 0.875rem; | |
| } | |
| @media (min-width: 640px) { | |
| .footer-heading { | |
| margin-bottom: 1rem; | |
| font-size: 1rem; | |
| } | |
| } | |
| .footer-links { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .footer-links a { | |
| color: #6B7280; | |
| text-decoration: none; | |
| font-size: 0.75rem; | |
| transition: color 0.2s; | |
| } | |
| @media (min-width: 640px) { | |
| .footer-links a { | |
| font-size: 0.875rem; | |
| } | |
| } | |
| .footer-links a:hover { | |
| color: #1F2937; | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid #E5E7EB; | |
| padding-top: 1.5rem; | |
| text-align: center; | |
| color: #6B7280; | |
| font-size: 0.75rem; | |
| } | |
| @media (min-width: 640px) { | |
| .footer-bottom { | |
| padding-top: 2rem; | |
| font-size: 0.875rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav> | |
| <div class="nav-container"> | |
| <div class="logo">Mercury</div> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#how">How it works</a> | |
| <a href="#pricing">Pricing</a> | |
| </div> | |
| <div class="nav-buttons"> | |
| <a href="#">Sign in</a> | |
| <button class="btn-primary">Get started</button> | |
| </div> | |
| <button class="mobile-menu-btn" onclick="toggleMenu()" aria-label="Toggle menu"> | |
| <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="mobile-menu" id="mobileMenu"> | |
| <a href="#features">Features</a> | |
| <a href="#how">How it works</a> | |
| <a href="#pricing">Pricing</a> | |
| <a href="#">Sign in</a> | |
| <button class="btn-primary">Get started</button> | |
| </div> | |
| </nav> | |
| <!-- Hero --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <div class="badge"> | |
| <span class="badge-dot"></span> | |
| <span>Trusted by 5,000+ businesses</span> | |
| </div> | |
| <h1>Run your entire business<br>from one dashboard</h1> | |
| <p class="hero-description"> | |
| Stop juggling multiple tools. Mercury unifies your storefront, orders, inventory, invoicing, and logistics—so you can automate workflows and focus on growth. | |
| </p> | |
| <div class="cta-buttons"> | |
| <button class="btn-primary">Start free trial</button> | |
| <button class="btn-secondary">Watch demo →</button> | |
| </div> | |
| <p class="hero-note">No credit card required • 14-day free trial</p> | |
| </div> | |
| <div class="dashboard-preview"> | |
| <div class="dashboard-card"> | |
| <div class="window-dots"> | |
| <div class="dot dot-red"></div> | |
| <div class="dot dot-yellow"></div> | |
| <div class="dot dot-green"></div> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-label">All Orders</div> | |
| <div class="stat-value">893</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Processing</div> | |
| <div class="stat-value">2</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">In Transit</div> | |
| <div class="stat-value">679</div> | |
| </div> | |
| </div> | |
| <div class="activity-list"> | |
| <div class="activity-item success"> | |
| <span class="activity-text">New order #1247</span> | |
| <span class="activity-value success">+₦45,000</span> | |
| </div> | |
| <div class="activity-item info"> | |
| <span class="activity-text">Shipment en route</span> | |
| <span class="activity-value info">Track →</span> | |
| </div> | |
| <div class="activity-item warning"> | |
| <span class="activity-text">Low stock: Blue T-Shirt</span> | |
| <span class="activity-value warning">Reorder</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Social Proof --> | |
| <section class="social-proof"> | |
| <div class="container"> | |
| <p class="social-proof-text">Powering businesses across retail, e-commerce, and services</p> | |
| <div class="logo-grid"> | |
| <div class="partner-logo">SHOPIFY</div> | |
| <div class="partner-logo">JUMIA</div> | |
| <div class="partner-logo">KONGA</div> | |
| <div class="partner-logo">PAYSTACK</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problem/Solution --> | |
| <section class="bg-white"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Stop wasting time on manual work</h2> | |
| <p class="section-description">Most businesses lose hours every day copying data between tools</p> | |
| </div> | |
| <div class="comparison-grid"> | |
| <article class="comparison-card negative"> | |
| <div class="icon-box negative"> | |
| <svg fill="none" stroke="#DC2626" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </div> | |
| <h3>Without Mercury</h3> | |
| <ul class="comparison-list"> | |
| <li> | |
| <span class="icon negative">×</span> | |
| <span>Manual data entry across 5+ different tools</span> | |
| </li> | |
| <li> | |
| <span class="icon negative">×</span> | |
| <span>Overselling because inventory isn't synced</span> | |
| </li> | |
| <li> | |
| <span class="icon negative">×</span> | |
| <span>Customers asking "where's my order?"</span> | |
| </li> | |
| <li> | |
| <span class="icon negative">×</span> | |
| <span>No clear view of business performance</span> | |
| </li> | |
| </ul> | |
| </article> | |
| <article class="comparison-card positive"> | |
| <div class="icon-box positive"> | |
| <svg fill="none" stroke="#059669" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| </div> | |
| <h3>With Mercury</h3> | |
| <ul class="comparison-list"> | |
| <li> | |
| <span class="icon positive">✓</span> | |
| <span>Everything updates automatically in real-time</span> | |
| </li> | |
| <li> | |
| <span class="icon positive">✓</span> | |
| <span>Never oversell with synchronized inventory</span> | |
| </li> | |
| <li> | |
| <span class="icon positive">✓</span> | |
| <span>Branded tracking pages keep customers informed</span> | |
| </li> | |
| <li> | |
| <span class="icon positive">✓</span> | |
| <span>Complete business insights in one dashboard</span> | |
| </li> | |
| </ul> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section id="features" class="bg-gray-50"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Everything you need in one place</h2> | |
| <p class="section-description">No more switching between tools. Manage your entire business from Mercury.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <article class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path> | |
| </svg> | |
| </div> | |
| <h3>Storefront</h3> | |
| <p>Beautiful online store that syncs instantly with your back-office. Every sale updates inventory and triggers fulfillment.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path> | |
| </svg> | |
| </div> | |
| <h3>Inventory</h3> | |
| <p>Real-time stock tracking across all channels. Get low-stock alerts and never oversell again.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <h3>Orders</h3> | |
| <p>Manage orders from all channels in one place. Track status, process refunds, communicate with customers.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path> | |
| </svg> | |
| </div> | |
| <h3>Invoicing</h3> | |
| <p>Generate professional invoices automatically. Send payment reminders and track receivables.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| </div> | |
| <h3>Logistics</h3> | |
| <p>Branded tracking pages for customers. Integrate with carriers and automate shipping labels.</p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> | |
| </svg> | |
| </div> | |
| <h3>Analytics</h3> | |
| <p>Complete view of business performance. Sales trends, inventory turnover, profit margins—in one place.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats --> | |
| <section class="bg-white"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Join thousands of growing businesses</h2> | |
| </div> | |
| <div class="stats-container"> | |
| <div> | |
| <div class="stat-number">5,000+</div> | |
| <div class="stat-text">Active businesses</div> | |
| </div> | |
| <div> | |
| <div class="stat-number">70%</div> | |
| <div class="stat-text">Time saved</div> | |
| </div> | |
| <div> | |
| <div class="stat-number">50M+</div> | |
| <div class="stat-text">Orders processed</div> | |
| </div> | |
| <div> | |
| <div class="stat-number">98%</div> | |
| <div class="stat-text">Satisfaction rate</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="cta-section"> | |
| <div class="container"> | |
| <div class="cta-content"> | |
| <h2>Ready to streamline your operations?</h2> | |
| <p>Start your free 14-day trial. No credit card required.</p> | |
| <div class="cta-buttons"> | |
| <button class="btn-white">Start free trial</button> | |
| <button class="btn-outline-white">Schedule demo</button> | |
| </div> | |
| <p class="cta-note">Join 5,000+ businesses already using Mercury</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-column"> | |
| <div class="footer-logo">Mercury</div> | |
| <p class="footer-description">All-in-one business operations platform.</p> | |
| </div> | |
| <div class="footer-column"> | |
| <h4 class="footer-heading">Product</h4> | |
| <ul class="footer-links"> | |
| <li><a href="#">Features</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h4 class="footer-heading">Company</h4> | |
| <ul class="footer-links"> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h4 class="footer-heading">Support</h4> | |
| <ul class="footer-links"> | |
| <li><a href="#">Help Center</a></li> | |
| <li><a href="#">Contact</a></li> | |
| <li><a href="#">Privacy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2025 Mercury. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| function toggleMenu() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('active'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment