contact page

This commit is contained in:
2026-03-04 07:35:01 +01:00
parent 2c07e49324
commit 026a88ca35
4 changed files with 74 additions and 1 deletions
+2
View File
@@ -23,6 +23,7 @@ import '../styles/global.css';
<a href="/blog" class="p-2 hover:text-purple-300 transition-colors duration-200">Blog</a>
<a href="/howtos" class="p-2 hover:text-purple-300 transition-colors duration-200">How-tos</a>
<a href="/code" class="p-2 hover:text-purple-300 transition-colors duration-200">Code</a>
<a href="/contact" class="p-2 hover:text-purple-300 transition-colors duration-200">Contact us</a>
</nav>
<!-- Hamburger Button (Mobile only) -->
@@ -39,6 +40,7 @@ import '../styles/global.css';
<a href="/blog" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Blog</a>
<a href="/howtos" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">How-tos</a>
<a href="/code" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Code</a>
<a href="/contact" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Contact us</a>
</nav>
</header>
<main>
+69
View File
@@ -0,0 +1,69 @@
---
import Layout from '../layouts/Layout.astro';
const DISCORD_INVITE_LINK = import.meta.env.DISCORD_INVITE_LINK || "https://discord.gg/your-discord-link";
---
<Layout>
<header class="hero-section-gradient from-blue-600 to-indigo-700 py-20 text-white">
<div class="hero-container text-center">
<h1 class="hero-title mb-6">Contact Us</h1>
<p class="hero-subtitle mb-10 text-blue-100">
Have questions, feedback, or just want to say hi? We'd love to hear from you!
</p>
<a
href={DISCORD_INVITE_LINK}
target="_blank"
class="inline-flex items-center gap-3 bg-[#5865F2] hover:bg-[#4752C4] text-white font-black py-4 px-8 rounded-full text-lg transition-all transform hover:scale-105 shadow-xl"
>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.862-1.297 1.197-1.99.051-.105.001-.23-.106-.272a13.223 13.223 0 0 1-1.878-.894.077.077 0 0 1-.007-.128c.126-.094.252-.192.372-.29a.074.074 0 0 1 .077-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .077.01c.12.098.246.196.373.29a.077.077 0 0 1-.006.128 12.299 12.299 0 0 1-1.878.894.077.077 0 0 0-.106.272c.335.693.735 1.36 1.197 1.99a.078.078 0 0 0 .084.028 19.83 19.83 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.956-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.956 2.419-2.156 2.419zm7.974 0c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.955-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.946 2.419-2.156 2.419z"/>
</svg>
Join our Discord
</a>
</div>
</header>
<main class="main-container py-16 px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100">
<h2 class="text-2xl font-black text-gray-900 mb-6 flex items-center gap-3">
<span class="text-3xl">📧</span> Email Us
</h2>
<p class="text-gray-600 mb-6 leading-relaxed">
For business inquiries, support, or detailed feedback, feel free to drop us an email.
</p>
<a href="mailto:contact@teletype.hu" class="text-indigo-600 font-bold text-xl hover:underline transition-all">
contact@teletype.hu
</a>
</div>
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100">
<h2 class="text-2xl font-black text-gray-900 mb-6 flex items-center gap-3">
<span class="text-3xl">💬</span> Community
</h2>
<p class="text-gray-600 mb-8 leading-relaxed">
Join our primarily Hungarian-speaking community (English speakers are also welcome!).
</p>
<div class="space-y-8">
<div class="border-l-4 border-[#5865F2] pl-4">
<h3 class="text-lg font-bold text-gray-900 mb-2">Discord</h3>
<p class="text-gray-600 text-sm mb-3">We have a vibrant Discord server for real-time chat and support.</p>
<a href={DISCORD_INVITE_LINK} target="_blank" class="text-[#5865F2] font-bold hover:underline inline-flex items-center gap-1">
Join Discord Server <span>→</span>
</a>
</div>
<div class="border-l-4 border-indigo-600 pl-4">
<h3 class="text-lg font-bold text-gray-900 mb-2">IRC Chat</h3>
<div class="bg-indigo-50 p-4 rounded-xl border border-indigo-100 mt-3 inline-block">
<span class="block text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-1">Network: Libera.Chat</span>
<code class="text-indigo-600 font-mono text-lg font-bold">#teletypegames</code>
</div>
</div>
</div>
</div>
</div>
</main>
</Layout>
+1
View File
@@ -120,6 +120,7 @@ services:
- HOST=0.0.0.0
- WEBAPP_GITEA_TOKEN=${WEBAPP_GITEA_TOKEN}
- WEBAPP_WIKIJS_TOKEN=${WEBAPP_WIKIJS_TOKEN}
- DISCORD_INVITE_LINK=${DISCORD_INVITE_LINK}
volumes:
- ./apps/frontend:/app
- /app/node_modules
+2 -1
View File
@@ -24,4 +24,5 @@ MYSQL_ROOT_PASSWORD=
DB_PASSWORD=
UPDATE_SECRET=
DROP_PASSWORD=
WEBAPP_WIKIJS_TOKEN=
WEBAPP_WIKIJS_TOKEN=
DISCORD_INVITE_LINK=