Найден корректный robots.txt
Файл управления сканированием сайта роботами
?
Robots.txt указывает поисковым роботам, какие страницы сканировать, а какие — нет. Ошибки в файле могут случайно закрыть важные разделы от индексации.
Robots.txt настроен корректно. Размер файла: 36559 байт. Загружен за: 1сек.
Проверяемая страница не запрещена в robots.txt.
Показать содержимое robots.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calma Productions | Professional Web Development and AI Solutions</title>
<meta name="description" content="Expert web development services for small and medium businesses. Custom websites, WordPress, Shopify, and full e-commerce solutions tailored to your brand.">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<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=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--accent: #3a868b;
--accent-light: rgba(58, 134, 139, 0.08);
--accent-mid: rgba(58, 134, 139, 0.15);
--dark: #1a1a2e;
--gray-600: #4a4a5a;
--gray-400: #8a8a9a;
--gray-200: #e8e8ee;
--gray-100: #f5f5f8;
--white: #ffffff;
--radius: 16px;
}
/* Dark mode colors */
[data-theme="dark"] {
--accent: #5ba8ad;
--accent-light: rgba(91, 168, 173, 0.15);
--accent-mid: rgba(91, 168, 173, 0.25);
--dark: #e8e8ee;
--gray-600: #b8b8c8;
--gray-400: #8a8a9a;
--gray-200: #3a3a4e;
--gray-100: #2a2a3e;
--white: #1a1a2e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--dark);
background: var(--white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
line-height: 1.2;
}
/* ---- Navigation ---- */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--gray-200);
transition: box-shadow 0.3s;
}
[data-theme="dark"] nav {
background: rgba(26, 26, 46, 0.92);
}
nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.06); }
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.logo {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 1.4rem;
color: var(--dark);
text-decoration: none;
}
.logo span { color: var(--accent); }
[data-theme="dark"] .calma-letter {
fill: #e8e8ee;
}
[data-theme="dark"] .calma-at-char {
fill: #5ba8ad;
}
.nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; }
.nav-links a {
text-decoration: none;
color: var(--gray-600);
font-size: 0.92rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.btn { color: var(--white); }
.nav-links a.btn:hover { color: var(--white); }
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
background: var(--accent);
color: var(--white);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 0.92rem;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.btn:hover { background: #2e7377; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(58,134,139,0.3); }
.btn-outline {
background: transparent;
color: var(--accent);
border: 2px solid var(--accent);
}
.btn-outline:hover { background: var(--accent); color: var(--white); }
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.hamburger span {
width: 24px;
height: 2px;
background: var(--dark);
border-radius: 2px;
transition: all 0.3s;
}
.theme-toggle {
background: none;
border: none;
color: var(--gray-600);
cursor: pointer;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: all 0.2s;
}
.theme-toggle:hover {
background: var(--gray-100);
color: var(--accent);
}
[data-theme="dark"] .sun-icon {
display: none;
}
[data-theme="dark"] .moon-icon {
display: block !important;
}
/* ---- Hero ---- */
.hero {
padding: 10rem 2rem 6rem;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1rem;
background: var(--accent-light);
color: var(--accent);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.hero-badge::before {
content: '';
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.hero h1 span { color: var(--accent); }
.hero p {
font-size: 1.15rem;
color: var(--gray-600);
margin-bottom: 2.5rem;
max-width: 500px;
}
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
/* Hero Graphic */
.hero-graphic {
width: 100%;
max-width: 500px;
aspect-ratio: 1;
position: relative;
}
.hero-graphic .browser {
position: absolute;
top: 8%;
left: 5%;
width: 80%;
background: var(--white);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
overflow: hidden;
z-index: 2;
}
.browser-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
background: var(--gray-100);
border-bottom: 1px solid var(--gray-200);
}
.browser-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.browser-dot:nth-child(1) { background: #ff5f57; }
.browser-dot:nth-child(2) { background: #ffbd2e; }
.browser-dot:nth-child(3) { background: #28ca41; }
.browser-url {
flex: 1;
margin-left: 10px;
height: 24px;
background: var(--white);
border-radius: 6px;
}
.browser-content { padding: 20px; }
.browser-content .line {
height: 10px;
border-radius: 5px;
margin-bottom: 10px;
background: var(--gray-200);
}
.browser-content .line:nth-child(1) { width: 60%; height: 16px; background: var(--accent-mid); }
.browser-content .line:nth-child(2) { width: 90%; }
.browser-content .line:nth-child(3) { width: 75%; }
.browser-content .line:nth-child(4) { width: 45%; margin-top: 20px; height: 32px; background: var(--accent); border-radius: 8px; }
.browser-content .blocks {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-top: 16px;
}
.browser-content .block {
height: 60px;
border-radius: 8px;
background: var(--gray-100);
}
.browser-content .block:first-child { background: var(--accent-light); }
.hero-graphic .floating-card {
position: absolute;
background: var(--white);
border-radius: 12px;
padding: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
z-index: 3;
}
.card-stats {
bottom: 15%;
right: 0;
display: flex;
align-items: center;
gap: 12px;
animation: float 3s ease-in-out infinite;
}
.card-stats .icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--accent), #2e7377);
display: flex;
align-items: center;
justify-content: center;
}
.card-stats .icon svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 2; }
.card-stats .stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.1rem; }
.card-stats .stat-label { font-size: 0.75rem; color: var(--gray-400); }
.card-code {
top: 15%;
right: 2%;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.7rem;
color: var(--accent);
background: var(--dark);
color: #a0e8b0;
padding: 14px 18px;
border-radius: 10px;
animation: float 3s ease-in-out infinite 1.5s;
z-index: 3;
}
.card-code span { color: var(--gray-400); }
.card-code .tag { color: #7ecbff; }
.card-code .attr { color: #f9c859; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ---- Section Styles ---- */
section { padding: 6rem 2rem; }
.section-header {
text-align: center;
max-width: 640px;
margin: 0 auto 4rem;
}
.section-label {
display: inline-block;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.section-header p {
font-size: 1.1rem;
color: var(--gray-600);
}
/* ---- Services ---- */
.services { background: var(--gray-100); }
.services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.service-card {
background: var(--white);
border-radius: var(--radius);
padding: 2.5rem;
transition: all 0.3s;
border: 1px solid transparent;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,0.06);
border-color: var(--accent-mid);
}
.service-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--accent-light);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.service-icon svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.service-card p {
color: var(--gray-600);
font-size: 0.95rem;
line-height: 1.7;
}
.service-card .tech-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.25rem;
}
.tech-tag {
padding: 0.25rem 0.75rem;
background: var(--gray-100);
border-radius: 50px;
font-size: 0.8rem;
color: var(--gray-600);
font-weight: 500;
}
/* ---- Process ---- */
.process-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
position: relative;
}
.process-grid::before {
content: '';
position: absolute;
top: 44px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(to right, var(--accent), var(--accent-mid), var(--accent));
z-index: 0;
}
.process-step { text-align: center; position: relative; z-index: 1; }
.step-number {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--accent);
color: var(--white);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
box-shadow: 0 4px 15px rgba(58,134,139,0.3);
}
.process-step h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.process-step p {
font-size: 0.9rem;
color: var(--gray-600);
max-width: 220px;
margin: 0 auto;
}
/* ---- Portfolio / Platforms ---- */
.platforms { background: var(--gray-100); }
.platforms-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.platform-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.3s;
}
.platform-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.platform-visual {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.platform-visual svg { width: 80px; height: 80px; opacity: 0.9; }
.platform-visual.custom-bg { background: linear-gradient(135deg, #f0fafb, #daf0f1); }
.platform-visual.wp-bg { background: linear-gradient(135deg, #f0f5fa, #dce7f5); }
.platform-visual.shopify-bg { background: linear-gradient(135deg, #f0faf2, #dcf0de); }
[data-theme="dark"] .platform-visual.custom-bg { background: linear-gradient(135deg, #1a3a3e, #0f2a2e); }
[data-theme="dark"] .platform-visual.wp-bg { background: linear-gradient(135deg, #1a2a4e, #0f1a3e); }
[data-theme="dark"] .platform-visual.shopify-bg { background: linear-gradient(135deg, #1a3a2e, #0f2a1e); }
[data-theme="dark"] .platform-visual svg { opacity: 1; }
/* Logo colors in dark mode */
[data-theme="dark"] .wp-bg i {
color: #5ba8ad !important;
}
[data-theme="dark"] .shopify-bg i {
color: #a8e033 !important;
}
.platform-info { padding: 2rem; }
.platform-info h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.platform-info p { font-size: 0.92rem; color: var(--gray-600); line-height: 1.7; }
/* ---- CTA ---- */
.cta {
background: linear-gradient(135deg, var(--dark) 0%, #2a2a4e 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 50%, rgba(58,134,139,0.15) 0%, transparent 50%);
}
.cta-inner {
position: relative;
max-width: 700px;
margin: 0 auto;
}
.cta h2 {
font-size: 2.5rem;
color: var(--white);
margin-bottom: 1rem;
}
.cta p {
font-size: 1.15rem;
color: var(--gray-400);
margin-bottom: 2.5rem;
}
.cta .btn { font-size: 1rem; padding: 1rem 2.5rem; }
[data-theme="dark"] .cta {
background: linear-gradient(135deg, #0f0f1a 0%, #1a2a2e 100%);
}
[data-theme="dark"] .cta h2,
[data-theme="dark"] .cta p {
color: var(--dark);
}
[data-theme="dark"] .cta p {
color: #b8b8c8;
}
[data-theme="dark"] .cta::before {
background: radial-gradient(circle at 30% 50%, rgba(91, 168, 173, 0.15) 0%, transparent 50%);
}
/* ---- Footer ---- */
footer {
padding: 3rem 2rem;
background: var(--dark);
text-align: center;
}
footer p {
color: var(--gray-400);
font-size: 0.9rem;
}
footer a { color: var(--accent); text-decoration: none; }
/* ---- Responsive ---- */
@media (max-width: 968px) {
.hero {
grid-template-columns: 1fr;
text-align: center;
padding-top: 8rem;
}
.hero p { margin-left: auto; margin-right: auto; }
.hero-buttons { justify-content: center; }
.hero-visual { order: -1; }
.hero-graphic { max-width: 380px; }
.hero h1 { font-size: 2.5rem; }
.stats-strip { grid-template-columns: repeat(2, 1fr); }
.services-grid,
.platforms-grid { grid-template-columns: 1fr; max-width: 500px; }
.process-grid { grid-template-columns: repeat(2, 1fr); }
.process-grid::before { display: none; }
.section-header h2, .cta h2 { font-size: 2rem; }
.nav-links {
display: none;
position: absolute;
top: 72px;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
flex-direction: column;
padding: 1.5rem 2rem;
gap: 0.5rem;
border-bottom: 1px solid var(--gray-200);
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.nav-links.open { display: flex; }
.nav-links li { list-style: none; }
.nav-links a { display: block; padding: 0.6rem 0; font-size: 1rem; }
.nav-links a.btn { text-align: center; margin-top: 0.5rem; padding: 0.85rem 3rem; }
.hamburger { display: flex; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 2rem; }
.stats-strip { grid-template-columns: 1fr; }
.process-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav id="navbar">
<div class="nav-inner">
<a href="#" class="logo" style="height: 40px; display: flex; align-items: center;">
<svg viewBox="0 0 280 100" xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: auto; max-width: 160px;">
<defs>
<style>
.calma-letter { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 600; font-size: 60px; fill: #1a1a2e; }
.calma-at-char { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; font-size: 60px; fill: #3a868b; }
</style>
</defs>
<text x="10" y="68" class="calma-letter">C</text>
<text x="60" y="68" class="calma-at-char">@</text>
<text x="115" y="68" class="calma-letter">LMA</text>
</svg>
</a>
<ul class="nav-links">
<li><a href="#services">Services</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#platforms">Platforms</a></li>
<li><a href="survey.php">Project Survey</a></li>
<li><a href="survey.php" class="btn">Get a Quote</a></li>
</ul>
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle theme">
<svg class="sun-icon" viewBox="0 0 24 24" width="20" height="20">
<circle cx="12" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
<line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2"/>
<line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2"/>
<line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2"/>
</svg>
<svg class="moon-icon" viewBox="0 0 24 24" width="20" height="20" style="display:none;">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>
<button class="hamburger" onclick="this.classList.toggle('active'); document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge">Available for New Projects</div>
<h1>We Build Websites That <span>Drive Results</span></h1>
<p>Full-stack web development for businesses that demand more than a template. From custom-coded solutions to WordPress and Shopify — we craft digital experiences that convert visitors into customers.</p>
<div class="hero-buttons">
<a href="#contact" class="btn">Start Your Project <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
<a href="#services" class="btn btn-outline">View Services</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-graphic">
<div class="browser">
<div class="browser-bar">
<div class="browser-dot"></div>
<div class="browser-dot"></div>
<div class="browser-dot"></div>
<div class="browser-url"></div>
</div>
<div class="browser-content">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
<div class="floating-card card-stats">
<div class="icon">
<svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<div>
<div class="stat-value">+147%</div>
<div class="stat-label">Traffic Growth</div>
</div>
</div>
<div class="floating-card card-code">
<span><</span><span class="tag">div</span> <span class="attr">class</span>=<span>"hero"</span><span>></span><br>
<span><</span><span class="tag">h1</span><span>></span>Your Brand<span></</span><span class="tag">h1</span><span>></span>
</div>
</div>
</div>
</section>
<!-- Services -->
<section class="services" id="services">
<div class="section-header">
<span class="section-label">What We Do</span>
<h2>Development Services Tailored to Your Business</h2>
<p>Whether you need a simple business website or a full-scale e-commerce platform, we deliver solutions that are fast, secure, and built to grow with you.</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
</div>
<h3>Custom Web Development</h3>
<p>Bespoke websites engineered from the ground up. No templates, no compromises — just clean, performant code tailored to your exact specifications and business goals.</p>
<div class="tech-tags">
<span class="tech-tag">HTML/CSS</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">PHP</span>
<span class="tech-tag">React</span>
</div>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<h3>WordPress Solutions</h3>
<p>Custom WordPress themes and plugins that go beyond off-the-shelf solutions. Full CMS integration that gives you complete control over your content without touching code.</p>
<div class="tech-tags">
<span class="tech-tag">WordPress</span>
<span class="tech-tag">WooCommerce</span>
<span class="tech-tag">Elementor</span>
<span class="tech-tag">ACF</span>
</div>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24"><path d="M6 2L3 13h4l-1 9 10-12h-4l3-8z"/></svg>
</div>
<h3>E-Commerce & Shopify</h3>
<p>End-to-end online store development that turns browsers into buyers. From product catalogs to payment integration, we build stores that sell.</p>
<div class="tech-tags">
<span class="tech-tag">Shopify</span>
<span class="tech-tag">Liquid</span>
<span class="tech-tag">Stripe</span>
<span class="tech-tag">PayPal</span>
</div>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h3>Performance & Security</h3>
<p>Speed optimization, SSL implementation, and security hardening to keep your website fast and protected. We ensure your site scores top marks on every metric.</p>
<div class="tech-tags">
<span class="tech-tag">SSL</span>
<span class="tech-tag">CDN</span>
<span class="tech-tag">Optimization</span>
</div>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M9 6c0-1.66 1.34-3 3-3s3 1.34 3 3"/><path d="M6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3"/><path d="M18 9c1.66 0 3 1.34 3 3s-1.34 3-3 3"/><path d="M9 18c0 1.66 1.34 3 3 3s3-1.34 3-3"/></svg>
</div>
<h3>Custom AI Solutions</h3>
<p>Leverage artificial intelligence to automate workflows, enhance user experiences, and unlock new opportunities. From intelligent chatbots to smart automation, we build AI-powered systems tailored to your business goals.</p>
<div class="tech-tags">
<span class="tech-tag">AI/ML Integration</span>
<span class="tech-tag">Automation</span>
<span class="tech-tag">Custom APIs</span>
</div>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0022 16z"/><path d="M7.5 4.21l4.5 2.6 4.5-2.6"/><path d="M7.5 19.79V14.6L3 12"/><path d="M21 12l-4.5 2.6v5.19"/><path d="M3.27 6.96L12 12.01l8.73-5.05"/><path d="M12 22.08V12"/></svg>
</div>
<h3>Ongoing Support</h3>
<p>Your website is a living product. We offer maintenance packages that keep your site updated, backed up, and running smoothly — so you can focus on your business.</p>
<div class="tech-tags">
<span class="tech-tag">Maintenance</span>
<span class="tech-tag">Updates</span>
<span class="tech-tag">Backups</span>
</div>
</div>
</div>
</section>
<!-- Process -->
<section id="process">
<div class="section-header">
<span class="section-label">How We Work</span>
<h2>A Transparent Process from Start to Launch</h2>
<p>No surprises, no scope creep. We follow a proven development workflow that keeps you informed and in control at every stage.</p>
</div>
<div class="process-grid">
<div class="process-step">
<div class="step-number">1</div>
<h4>Discovery</h4>
<p>We learn your business, goals, and audience to define the right strategy and scope.</p>
</div>
<div class="process-step">
<div class="step-number">2</div>
<h4>Design</h4>
<p>Wireframes and mockups that visualize your site before a single line of code is written.</p>
</div>
<div class="process-step">
<div class="step-number">3</div>
<h4>Development</h4>
<p>Clean, responsive code built with modern best practices and thorough testing.</p>
</div>
<div class="process-step">
<div class="step-number">4</div>
<h4>Launch</h4>
<p>Deployment, final QA, and handoff — plus ongoing support to keep things running.</p>
</div>
</div>
</section>
<!-- Platforms -->
<section class="platforms" id="platforms">
<div class="section-header">
<span class="section-label">Platforms</span>
<h2>The Right Tool for Every Project</h2>
<p>We're platform-agnostic. We recommend the technology that best fits your needs, timeline, and budget — not what's easiest for us.</p>
</div>
<div class="platforms-grid">
<div class="platform-card">
<div class="platform-visual custom-bg">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M9 6c0-1.66 1.34-3 3-3s3 1.34 3 3"/><path d="M6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3"/><path d="M18 9c1.66 0 3 1.34 3 3s-1.34 3-3 3"/><path d="M9 18c0 1.66 1.34 3 3 3s3-1.34 3-3"/></svg>
</div>
<div class="platform-info">
<h3>Custom AI Solutions</h3>
<p>Build intelligent, AI-powered systems from the ground up. Integrate machine learning, automation, and intelligent workflows tailored to solve your unique business challenges.</p>
</div>
</div>
<div class="platform-card">
<div class="platform-visual wp-bg">
<i class="fab fa-wordpress" style="font-size: 56px; color: #2b5aa0;"></i>
</div>
<div class="platform-info">
<h3>AI-powered WordPress</h3>
<p>WordPress with intelligent features built in. Smart content optimization, AI-assisted publishing, and automation that keeps your site current and engaging without extra effort.</p>
</div>
</div>
<div class="platform-card">
<div class="platform-visual shopify-bg">
<i class="fas fa-shopping-bag" style="font-size: 56px; color: #96bf48;"></i>
</div>
<div class="platform-info">
<h3>AI-powered Shopify</h3>
<p>Next-gen e-commerce with intelligent product recommendations, smart inventory management, and AI-driven customer insights. Build stores that learn and adapt to your customers.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta" id="contact">
<div class="cta-inner">
<span class="section-label" style="color: var(--accent);">Ready to Get Started?</span>
<h2>Let's Build Something Your Customers Will Love</h2>
<p>Every great website starts with a conversation. Tell us about your project and we'll get back to you within 24 hours with a free consultation and estimate.</p>
<a href="survey.php" class="btn">Take Our Project Survey <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2026 Calma Pro. All rights reserved. Crafted with precision.</p>
</footer>
<script>
// Theme management
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}
// Set default theme to dark, or load user preference
(function() {
const savedTheme = localStorage.getItem('theme');
const defaultTheme = 'dark';
const theme = savedTheme || defaultTheme;
document.documentElement.setAttribute('data-theme', theme);
if (!savedTheme) {
localStorage.setItem('theme', defaultTheme);
}
})();
// Navbar scroll effect
window.addEventListener('scroll', () => {
document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 10);
});
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>
WooCommerce
nginx