feat: add manual page deployment and rebrand from Auracast to wireless audio

- Update deployment scripts to upload manual/index.html to server
- Make deploy_to_hetzner.sh executable
- Rebrand site from "Auracast made easy" to "Wireless Audio Made Easy"
- Update all meta tags and descriptions to remove Auracast branding
- Refine hero headline and call-to-action text
- Simplify use case descriptions with clearer, more concise copy
- Rewrite "Why Auracast" section as "Why Wireless Audio" with update
This commit is contained in:
2025-11-17 09:21:21 +01:00
parent 9e4c605da7
commit cf383e7412
3 changed files with 79 additions and 128 deletions

3
deploy_to_hetzner.sh Normal file → Executable file
View File

@@ -20,6 +20,9 @@ mkdir img
cd img
put -r $LOCAL_DIR/img/*
cd ..
# Ensure manual folder exists and upload manual page
mkdir manual
put -r $LOCAL_DIR/manual/index.html manual/index.html
bye
EOF

View File

@@ -46,6 +46,10 @@ put "$LOCAL_DIR/.htaccess"
mkdir img
cd img
put "$LOCAL_DIR/img/"*
cd ..
# Ensure manual folder exists and upload manual page
mkdir manual
put "$LOCAL_DIR/manual/index.html" manual/index.html
bye
EOF

View File

@@ -22,23 +22,23 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SummitWave | Auracast made easy</title>
<meta name="description" content="SummitWave Auracast transmitters deliver crystal-clear, low-latency multichannel Bluetooth audio to everyone."/>
<title>SummitWave | Wireless Audio Made Easy</title>
<meta name="description" content="SummitWave transmitters deliver crystal-clear, low-latency multichannel audio to everyone."/>
<meta name="robots" content="index,follow" />
<meta name="theme-color" content="#2563EB" />
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/favicon.ico" />
<link rel="canonical" href="https://summitwave.eu/" />
<link rel="alternate" hreflang="en" href="https://summitwave.eu/" />
<meta property="og:type" content="website"/>
<meta property="og:title" content="SummitWave | Auracast made easy"/>
<meta property="og:description" content="Broadcast brilliant multichannel audio anywhere with SummitWave Auracast transmitters."/>
<meta property="og:title" content="SummitWave | Wireless Audio Made Easy"/>
<meta property="og:description" content="Broadcast brilliant multichannel audio anywhere with SummitWave transmitters."/>
<meta property="og:url" content="https://summitwave.eu/"/>
<meta property="og:site_name" content="SummitWave"/>
<meta property="og:image" content="https://summitwave.eu/img/logo.png"/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SummitWave | Auracast made easy" />
<meta name="twitter:description" content="Broadcast brilliant multichannel audio anywhere with SummitWave Auracast transmitters." />
<meta name="twitter:title" content="SummitWave | Wireless Audio Made Easy" />
<meta name="twitter:description" content="Broadcast brilliant multichannel audio anywhere with SummitWave transmitters." />
<meta name="twitter:image" content="https://summitwave.eu/img/logo.png" />
<!-- Tailwind via CDN for rapid styling -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
@@ -62,12 +62,13 @@
}
}
</script>
<!-- =========== Header & Nav =========== -->
<!-- =========== Header & Nav ============ -->
<header class="py-6 px-4 md:px-12 flex items-center justify-between">
<img src="img/logo.png" alt="SummitWave logo" class="h-24 md:h-28" />
<nav class="space-x-6 text-lg font-medium" aria-label="Primary">
<a href="#usecases" class="hover:text-blue-600">Use cases</a>
<a href="#why" class="hover:text-blue-600">Why Auracast</a>
<a href="#why" class="hover:text-blue-600">Why Wireless Audio</a>
<a href="#features" class="hover:text-blue-600">Features</a>
<a href="#contact" class="hover:text-blue-600">Contact</a>
</nav>
@@ -75,11 +76,13 @@
<!-- =========== Hero =========== -->
<section class="flex flex-col items-center text-center mt-12 px-4">
<h1 class="text-4xl md:text-5xl font-bold text-blue-700">Clear, personal audio for everyone</h1>
<h2 class="mt-2 text-xl md:text-2xl text-gray-700">For venues, integrators, and event pros who need low latency sound delivered to personal devices.</h2>
<img src="img/device.png" alt="SummitWave Auracast transmitter" loading="lazy" class="mt-8 w-full max-w-md rounded-lg shadow-xl"/>
<h1 class="text-4xl md:text-5xl font-bold text-blue-700">Crystal-clear audio, wherever it matters</h1>
<h2 class="mt-2 text-xl md:text-2xl text-gray-700">
Deliver immersive, low-latency sound directly to your audiences devices—perfect for venues, events, classrooms, and conferences.
</h2>
<img src="img/device.png" alt="SummitWave wireless audio transmitter" loading="lazy" class="mt-8 w-full max-w-md rounded-lg shadow-xl"/>
<a href="#contact" class="mt-8 inline-block bg-blue-600 text-white rounded-2xl px-8 py-3 shadow-lg transform transition hover:scale-105">
Get in touch
Get started today
</a>
</section>
@@ -89,168 +92,109 @@
<div class="mt-12 grid gap-10 md:grid-cols-3">
<div class="bg-white rounded-2xl p-6 shadow-lg flex flex-col">
<h3 class="text-xl font-semibold mb-2">Live Events & Festivals</h3>
<p>Multiple stages and languages without RFcoordination headaches. Guests choose channels on their own devices.</p>
<p>Multiple stages, multiple languages, zero coordination headaches. Guests select their preferred audio stream instantly on their own device.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg flex flex-col">
<h3 class="text-xl font-semibold mb-2">Universities & Lecture Halls</h3>
<p>Stream the lecturers voice, assistive listening, and multiple language channels. Attendees listen on their own phones, earbuds, or hearing devices—no receivers to hand out.</p>
<h3 class="text-xl font-semibold mb-2">Universities & Lecture Halls</h3>
<p>Provide clear lectures, simultaneous translations, and assistive listening. Students use personal devices—no extra hardware required.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg flex flex-col">
<h3 class="text-xl font-semibold mb-2">Theaters & Cinemas</h3>
<p>Lipsynced assisted listening, audio description, and multilingual tracks—without disturbing others.</p>
<p>Offer lip-synced audio, multilingual tracks, and audio descriptions without disturbing other audience members.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg flex flex-col">
<h3 class="text-xl font-semibold mb-2">Conference Centers</h3>
<p>Serve overflow rooms, breakouts, and press feeds without extra cabling. Attendees select their preferred language or program on their devices.</p>
<h3 class="text-xl font-semibold mb-2">Conference Centers</h3>
<p>Stream presentations, breakouts, and overflow rooms effortlessly. Attendees join the stream on their own devices.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg flex flex-col">
<h3 class="text-xl font-semibold mb-2">Rail & Transit Hubs</h3>
<p>Replace unintelligible PA with clear, ondemand streams for announcements, tourist info, and emergency messages.</p>
<h3 class="text-xl font-semibold mb-2">Rail & Transit Hubs</h3>
<p>Replace unclear announcements with on-demand, easy-to-access audio streams for schedules, tourist info, and emergency messages.</p>
</div>
</div>
</section>
<!-- Hero moved to top -->
<!-- =========== Auracast Explainer =========== -->
<!-- =========== Wireless Audio Explainer ============ -->
<section id="why" class="mt-20 md:mt-24 pt-12 pb-10 px-4 md:px-12 border-t border-gray-200">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-6 md:mb-8 text-blue-700 tracking-tight">Why Auracast?</h2>
<p class="max-w-2xl mx-auto text-lg text-gray-700 text-center mb-6">Auracast is a Bluetooth LE Audio broadcast technology that lets venues transmit onetomany, lowlatency audio streams that anyone can join with their own device.</p>
<h2 class="text-3xl md:text-4xl font-bold text-center mb-6 md:mb-8 text-blue-700 tracking-tight">Why Wireless Audio?</h2>
<p class="max-w-2xl mx-auto text-lg text-gray-700 text-center mb-6">
Our wireless audio platform allows venues and event organizers to broadcast multiple, low-latency audio streams simultaneously. Everyone can join instantly using their own device—no setup hassles, no extra hardware.
</p>
<ul class="max-w-4xl mx-auto grid gap-3 md:gap-4 md:grid-cols-2 text-lg">
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Widespread adoption</span> <span class="text-gray-700">supported across modern smartphones, earbuds, and hearing devices via Bluetooth LE Audio/Auracast.</span></li>
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Accessibility</span> <span class="text-gray-700">inclusive listening for people with hearing devices; compatible with modern hearing aids and cochlear implants that support Bluetooth LE Audio/Auracast.</span></li>
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Device Independence</span> <span class="text-gray-700">listeners use their own phones, earbuds, or hearing aids.</span></li>
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Low Latency</span> <span class="text-gray-700">lipsynced speech for presentations, video and live performances.</span></li>
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Instant access for everyone</span> <span class="text-gray-700">audiences use their own devices; no receivers or special equipment needed.</span></li>
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Inclusive listening</span> <span class="text-gray-700">fully compatible with modern hearing devices and personal audio equipment.</span></li>
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Perfectly synchronized</span> <span class="text-gray-700">low-latency streaming ensures lip-synced audio for presentations, video, and live performances.</span></li>
<li class="leading-relaxed text-left"><span class="font-semibold text-gray-900">Flexible & future-ready</span> <span class="text-gray-700">works with current devices and easily integrates into existing infrastructure.</span></li>
</ul>
</section>
<!-- =========== Features (moved below Why) =========== -->
<!-- =========== Features =========== -->
<section id="features" class="mt-24 px-4 md:px-12">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-blue-700">Features</h2>
<div class="grid gap-8 md:grid-cols-3">
<div class="bg-white rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-2">Flexible audio input options</h3>
<p>Native <strong>AES67</strong> compatibility, USB audio and web audio inputs ensure seamless integration with existing technology and make usage simple.</p>
<h3 class="text-xl font-semibold mb-2">Flexible Audio Inputs</h3>
<p>Connect existing equipment via AES67, USB, or web audio streams for seamless integration.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-2">Multicast audio</h3>
<p>Broadcast up to six simultaneous audio channels — perfect for multilanguage or program feeds. Flexible channel configuration options.</p>
<h3 class="text-xl font-semibold mb-2">Multi-channel Streaming</h3>
<p>Broadcast up to six independent audio channels for translations, programs, or separate sessions.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-2">WebBased Control</h3>
<p>Configure, monitor, and update from any device—no additional software needed.</p>
<h3 class="text-xl font-semibold mb-2">Web-based Control</h3>
<p>Monitor, configure, and update from any device without installing software.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-2">Smart features</h3>
<p>Group multiple transmitters to send the same audio stream.</p>
<p>Integrated multichannel translation keeps every attendee posted.</p>
<p>Auto-detect sources and load OTA firmware updates with a click.</p>
<h3 class="text-xl font-semibold mb-2">Smart Management</h3>
<p>Group transmitters, automate updates, and manage streams effortlessly.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-2">Automate deployment</h3>
<p>Comprehensive REST API for automated deployment and management.</p>
<h3 class="text-xl font-semibold mb-2">Automated Deployment</h3>
<p>Full REST API enables integration into large-scale setups.</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-2">Compact & Efficient</h3>
<p>Flexible mounting options with screws, cable ties, or adhesive mounting.</p>
<p>Discreet, versatile mounting options for any environment.</p>
</div>
</div>
</section>
<!-- =========== Contact =========== -->
<!-- =========== Contact ============ -->
<section id="contact" class="mt-24 bg-blue-700 text-white py-16 px-4 md:px-12 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to elevate your audio?</h2>
<p class="max-w-2xl mx-auto mb-10 text-lg">Tell us about you and we'll get in touch.</p>
<h2 class="text-3xl md:text-4xl font-bold mb-6">Lets bring your audio to life</h2>
<p class="max-w-2xl mx-auto mb-10 text-lg">Share your project details, and well help you implement the perfect wireless audio solution.</p>
<form action="https://formspree.io/f/xrbkynzk" method="POST" class="max-w-xl mx-auto flex flex-col gap-5 text-left">
<label class="block">
<span class="block mb-1 font-medium">Name</span>
<input type="text" name="name" placeholder="Your name" class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition" />
</label>
<label class="block">
<span class="block mb-1 font-medium">Company</span>
<input type="text" name="venue" placeholder="Your company" class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition" />
</label>
<label class="block">
<span class="block mb-1 font-medium">Email <span class="text-red-400">*</span></span>
<input type="email" name="email" placeholder="you@email.com" required class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition" />
</label>
<label class="block">
<span class="block mb-1 font-medium">Message <span class="text-red-400">*</span></span>
<textarea name="message" placeholder="How can we help you?" required class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition"></textarea>
</label>
<button type="submit" class="bg-white text-blue-700 rounded-2xl px-10 py-4 font-semibold shadow-lg transform transition hover:scale-105 focus:ring-2 focus:ring-blue-400 border border-blue-700">
Contact us!
</button>
</form>
<label class="block">
<span class="block mb-1 font-medium">Name</span>
<input type="text" name="name" placeholder="Your name" class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition" />
</label>
<label class="block">
<span class="block mb-1 font-medium">Company</span>
<input type="text" name="venue" placeholder="Your company" class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition" />
</label>
<label class="block">
<span class="block mb-1 font-medium">Email <span class="text-red-400">*</span></span>
<input type="email" name="email" placeholder="you@email.com" required class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition" />
</label>
<label class="block">
<span class="block mb-1 font-medium">Message <span class="text-red-400">*</span></span>
<textarea name="message" placeholder="How can we help you?" required class="w-full px-4 py-3 rounded-lg text-gray-900 focus:ring-2 focus:ring-blue-400 border border-gray-300 focus:outline-none transition"></textarea>
</label>
<button type="submit" class="bg-white text-blue-700 rounded-2xl px-10 py-4 font-semibold shadow-lg transform transition hover:scale-105 focus:ring-2 focus:ring-blue-400 border border-blue-700">
Contact us!
</button>
</form>
</section>
<!-- =========== Footer =========== -->
<!-- =========== Footer ============ -->
<footer class="py-8 text-center text-sm text-gray-500">
<div class="space-x-4">
<span>&copy; 2025 SummitWave. All rights reserved.</span>
<span>&copy; 2025 SummitWave. All rights reserved.</span>
<a href="impressum.html" class="text-blue-700 hover:underline">Impressum</a>
</div>
</footer>
<!-- Cookie consent modal -->
<div id="cookie-banner" class="fixed inset-0 z-50 hidden" aria-hidden="true">
<!-- Backdrop -->
<div class="absolute inset-0 bg-black/40"></div>
<!-- Modal -->
<div class="relative h-full w-full flex items-center justify-center p-4">
<div role="dialog" aria-modal="true" aria-labelledby="cookie-title" class="w-full max-w-lg rounded-2xl bg-white shadow-xl border border-gray-200 p-6">
<h2 id="cookie-title" class="text-lg font-semibold text-gray-900 mb-2">Cookies & privacy</h2>
<p class="text-sm text-gray-700 mb-4">
We use analytics cookies to understand how our site is used and to improve your experience.
You can accept or reject analytics cookies. See our <a href="impressum.html" class="text-blue-700 hover:underline">Impressum</a> for details.
</p>
<div class="flex flex-col sm:flex-row gap-3 justify-end">
<button onclick="rejectCookies()" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm">Reject</button>
<button onclick="acceptCookies()" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 text-sm">Accept</button>
</div>
</div>
</div>
</div>
<script>
(function(){
const KEY = 'sw_consent_v1';
const banner = document.getElementById('cookie-banner');
function updateConsent(status){
// Persist and update GA consent
localStorage.setItem(KEY, status);
if (typeof gtag === 'function') {
gtag('consent', 'update', {
'analytics_storage': status,
'functionality_storage': status,
'ad_storage': 'denied'
});
}
}
window.acceptCookies = function(){
updateConsent('granted');
banner.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
};
window.rejectCookies = function(){
updateConsent('denied');
banner.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
};
const saved = localStorage.getItem(KEY);
if (saved === 'granted' || saved === 'denied') {
// Apply saved preference on load
updateConsent(saved);
} else {
// No preference yet: show banner and lock scroll
banner.classList.remove('hidden');
document.body.classList.add('overflow-hidden');
}
})();
</script>
</body>
</html>
</body>
</html>