| Current Path : /var/www/html/pics/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html/pics/contact.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact — Konvalo</title>
<link rel="stylesheet" href="shared.css">
<style>
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start; }
.contact-form-card {
background:white;border:1.5px solid #EBE5FF;border-radius:var(--radius);
padding:40px 36px;box-shadow:0 8px 40px rgba(91,63,166,0.08);
}
.contact-form-card h2 { font-family:'Syne',sans-serif;font-weight:800;font-size:1.5rem;margin-bottom:8px; }
.contact-form-card p { font-size:0.9rem;color:var(--ink-muted);margin-bottom:28px;line-height:1.6; }
.form-group { margin-bottom:18px; }
.form-group label { display:block;font-size:0.82rem;font-weight:500;color:var(--ink);margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
width:100%;border:1.5px solid #DDD6F5;border-radius:10px;
padding:11px 14px;font-size:0.9rem;font-family:'DM Sans',sans-serif;
color:var(--ink);background:white;transition:border-color 0.2s;outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--purple); }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.btn-submit {
width:100%;background:var(--purple);color:white;border:none;cursor:pointer;
padding:14px;border-radius:100px;font-family:'Syne',sans-serif;font-weight:700;
font-size:0.95rem;transition:background 0.2s,transform 0.15s;margin-top:8px;
}
.btn-submit:hover { background:var(--purple-dark);transform:translateY(-1px); }
.contact-info { display:flex;flex-direction:column;gap:28px; }
.info-card { background:#FBF9FF;border:1.5px solid #EBE5FF;border-radius:var(--radius);padding:24px; }
.info-card h4 { font-family:'Syne',sans-serif;font-weight:700;font-size:0.95rem;margin-bottom:6px; }
.info-card p { font-size:0.88rem;color:var(--ink-muted);line-height:1.6; }
.info-card a { color:var(--purple);text-decoration:none;font-weight:500; }
.info-card a:hover { text-decoration:underline; }
@media(max-width:900px){
.contact-grid { grid-template-columns:1fr;gap:40px; }
.form-row { grid-template-columns:1fr; }
}
</style>
</head>
<body>
<nav>
<a href="index.html" class="nav-logo">konvalo</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="howitworks.html">How it works</a></li>
<li><a href="usecases.html">Use cases</a></li>
<li><a href="demo.html">Demo</a></li>
<li><a href="contact.html" class="nav-cta active">Request Demo</a></li>
</ul>
</nav>
<section class="page-hero">
<div class="cloud c1"></div><div class="cloud c3"></div>
<div class="page-hero-inner">
<span class="section-tag fadeup">Contact</span>
<h1 class="fadeup-1">Get in touch.</h1>
<p class="fadeup-2">Have a question, want to request a demo, or just want to learn more? We'd love to hear from you.</p>
</div>
</section>
<div class="section-wrap">
<div class="contact-grid">
<div class="contact-form-card">
<h2>Send us a message</h2>
<p>Fill in the form and our team will get back to you within one business day.</p>
<div class="form-row">
<div class="form-group"><label>Your name</label><input type="text" placeholder="Marie Dupont"></div>
<div class="form-group"><label>Your email</label><input type="email" placeholder="marie@company.com"></div>
</div>
<div class="form-group">
<label>Subject</label>
<select>
<option>Request a Demo</option>
<option>General Enquiry</option>
<option>Pricing</option>
<option>Technical Question</option>
<option>Partnership</option>
<option>Other</option>
</select>
</div>
<div class="form-group"><label>Message</label><textarea rows="5" placeholder="Tell us about your company, your current setup, and what you're looking to solve..."></textarea></div>
<button class="btn-submit">Send Message →</button>
</div>
<div class="contact-info">
<div>
<span class="section-tag">Contact Info</span>
<h2 class="section-title" style="margin-top:10px">We're here<br>to help.</h2>
<p style="font-size:0.95rem;color:var(--ink-muted);line-height:1.7;margin-bottom:28px">Whether you're evaluating Konvalo, need technical support or want to explore a partnership — reach out and we'll respond promptly.</p>
</div>
<div class="info-card">
<h4>📧 Email</h4>
<p><a href="mailto:hello@konvalo.de">hello@konvalo.de</a><br>We respond within 1 business day.</p>
</div>
<div class="info-card">
<h4>🏢 Company</h4>
<p>Konvalo GmbH<br>Powered by STRAT<br>Germany</p>
</div>
<div class="info-card">
<h4>🗓️ Book a Demo</h4>
<p>Prefer to skip the form? <a href="demo.html">Head to our demo page →</a> and select a time that works for you.</p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-top">
<div class="footer-brand"><a href="index.html" class="f-logo">konvalo</a><p>Continuous consolidation for modern companies.</p></div>
<div class="footer-col"><h5>Product</h5><ul><li><a href="product.html">Overview</a></li><li><a href="howitworks.html">How it works</a></li><li><a href="usecases.html">Use cases</a></li><li><a href="demo.html">Demo</a></li></ul></div>
<div class="footer-col"><h5>Company</h5><ul><li><a href="contact.html">Contact</a></li><li><a href="legal.html">Legal notice</a></li></ul></div>
<div class="footer-col"><h5>Get started</h5><ul><li><a href="contact.html">Request Demo</a></li></ul></div>
</div>
<div class="footer-bottom"><span>© 2025 Konvalo. All rights reserved.</span><span class="footer-powered">Powered by <a href="#">STRAT</a></span></div>
</footer>
</body>
</html>