Rebuild from Rails source - faithful to original brown/gold/cream design
This commit is contained in:
Jarvis Prime
@@ -1,67 +1,62 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
---
|
||||
<Base title="Component Owl Support & Contact" description=".NET components support, and also general Component Owl contact form and information.">
|
||||
<Base title="Help & Support - Component Owl" description="Get help and support for Better ListView, Better Thumbnail Browser and Better SplitButton .NET components.">
|
||||
|
||||
<div class="max-w-5xl mx-auto px-4 py-10">
|
||||
<h1 class="text-3xl font-bold text-owl-blue mb-6">Help & Support</h1>
|
||||
<div class="support-content">
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Contact form -->
|
||||
<div class="lg:col-span-2">
|
||||
<p class="text-gray-700 mb-2">You can contact us at <span class="font-mono text-owl-blue">support (at) componentowl (dot) com</span> or use the form below.</p>
|
||||
<p class="text-gray-600 text-sm mb-6">We will answer you as soon as possible, usually in 24 hours.</p>
|
||||
<h1>Help & Support</h1>
|
||||
|
||||
<form class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm space-y-4" action="mailto:support@componentowl.com" method="get">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1" for="name">Your Name</label>
|
||||
<input type="text" id="name" name="name" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-owl-blue-light" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1" for="email">Your Email (Required)</label>
|
||||
<input type="email" id="email" name="email" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-owl-blue-light" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1" for="message">Message (Required)</label>
|
||||
<textarea id="message" name="body" rows="8" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-owl-blue-light"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="bg-owl-blue hover:bg-owl-blue-light text-white font-semibold px-8 py-2 rounded transition">Send</button>
|
||||
</form>
|
||||
<div class="left">
|
||||
<p>If you have any questions, suggestions, bug reports, or need help with any of our products, please don't hesitate to contact us. We usually reply within 24 hours or sooner.</p>
|
||||
|
||||
<p class="text-xs text-gray-500 mt-4">Please make sure that our reply will not be marked as spam by your filter (e.g. add <span class="font-mono">support (at) componentowl (dot) com</span> to your white list) and that you typed your email address correctly, otherwise we will not be able to reply.</p>
|
||||
</div>
|
||||
<p>You can also email us directly at: <strong>support (at) componentowl (dot) com</strong></p>
|
||||
|
||||
<!-- Resources sidebar -->
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white border border-gray-200 rounded-lg p-5 shadow-sm">
|
||||
<h2 class="font-bold text-owl-blue mb-3">Better ListView</h2>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/better-listview/quick-start-guide" class="text-owl-blue-light hover:underline">See Quick Start Guide</a></li>
|
||||
<li><a href="/better-listview/documentation" class="text-owl-blue-light hover:underline">See Documentation</a></li>
|
||||
<li><a href="/better-listview/class-reference" class="text-owl-blue-light hover:underline">See Class Reference</a></li>
|
||||
<li><a href="http://stackoverflow.com/questions/tagged/better-listview" class="text-owl-blue-light hover:underline">Better ListView on StackOverflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contact-form-ct">
|
||||
<div class="contact-form-wrap">
|
||||
<form class="contact-form" action="#" method="post">
|
||||
<fieldset>
|
||||
<label for="support_name">Your Name</label>
|
||||
<input type="text" id="support_name" name="name" class="name" style="width:100%" />
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded-lg p-5 shadow-sm">
|
||||
<h2 class="font-bold text-owl-blue mb-3">Better Thumbnail Browser</h2>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/better-thumbnail-browser/quick-start-guide" class="text-owl-blue-light hover:underline">See Quick Start Guide</a></li>
|
||||
<li><a href="/better-thumbnail-browser/documentation" class="text-owl-blue-light hover:underline">See Documentation</a></li>
|
||||
<li><a href="/better-thumbnail-browser/class-reference" class="text-owl-blue-light hover:underline">See Class Reference</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<label for="support_email">Your Email</label>
|
||||
<input type="email" id="support_email" name="email" class="email" style="width:100%" />
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded-lg p-5 shadow-sm">
|
||||
<h2 class="font-bold text-owl-blue mb-3">Better SplitButton</h2>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/better-splitbutton/quick-start-guide" class="text-owl-blue-light hover:underline">See Quick Start Guide</a></li>
|
||||
<li><a href="/better-splitbutton/documentation" class="text-owl-blue-light hover:underline">See Documentation</a></li>
|
||||
<li><a href="/better-splitbutton/class-reference" class="text-owl-blue-light hover:underline">See Class Reference</a></li>
|
||||
</ul>
|
||||
<label for="support_subject">Subject</label>
|
||||
<input type="text" id="support_subject" name="subject" style="width:100%" />
|
||||
|
||||
<label for="support_message">Message</label>
|
||||
<textarea id="support_message" name="message" class="message" style="width:100%"></textarea>
|
||||
|
||||
<div class="submit">
|
||||
<button type="submit" class="dbtn">Send Message</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<p class="note">Please note: We provide support for our products only. For general .NET programming questions, please use <a href="http://stackoverflow.com">StackOverflow</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<h2>Better ListView</h2>
|
||||
<p class="guide"><strong><a href="/better-listview">See Quick Start Guide</a></strong></p>
|
||||
<p class="documentation"><strong><a href="/better-listview">See Documentation</a></strong></p>
|
||||
<p class="reference"><strong><a href="/better-listview">See Class Reference</a></strong></p>
|
||||
|
||||
<h2>Better Thumbnail Browser</h2>
|
||||
<p class="guide"><strong><a href="/better-thumbnail-browser">See Quick Start Guide</a></strong></p>
|
||||
<p class="documentation"><strong><a href="/better-thumbnail-browser">See Documentation</a></strong></p>
|
||||
<p class="reference"><strong><a href="/better-thumbnail-browser">See Class Reference</a></strong></p>
|
||||
|
||||
<h2>Better SplitButton</h2>
|
||||
<p class="guide"><strong><a href="/better-splitbutton">See Quick Start Guide</a></strong></p>
|
||||
<p class="documentation"><strong><a href="/better-splitbutton">See Documentation</a></strong></p>
|
||||
<p class="reference"><strong><a href="/better-splitbutton">See Class Reference</a></strong></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</Base>
|
||||
</Base>
|
||||
Reference in New Issue
Block a user