Initial Astro website with Tailwind

- Homepage mit Hero, Stats, Features, Pricing, Industries, Waitlist
- 5 Branchenseiten (Großhandel, Handwerk, Steuerberater, Inkasso, Lieferanten)
- Tailwind CSS mit Brand-Colors (Navy + Signal-Red)
- Docker-Build für Coolify Deployment
- Component-basierte Architektur
This commit is contained in:
root
2026-02-21 15:53:28 +01:00
commit b34f45adf8
26 changed files with 7110 additions and 0 deletions

27
.gitignore vendored Normal file
View File

@@ -0,0 +1,27 @@
# Dependencies
node_modules/
# Build output
dist/
# Environment
.env
.env.*
!.env.example
# IDE
.vscode/
.idea/
*.swp
*.swo
# OS
.DS_Store
Thumbs.db
# Logs
*.log
npm-debug.log*
# Astro
.astro/

46
Dockerfile Normal file
View File

@@ -0,0 +1,46 @@
# Build Stage
FROM node:22-alpine AS builder
WORKDIR /app
# Dependencies
COPY package*.json ./
RUN npm ci
# Source
COPY . .
# Build
RUN npm run build
# Production Stage
FROM nginx:alpine
# Copy built files
COPY --from=builder /app/dist /usr/share/nginx/html
# Nginx config for SPA routing
RUN echo 'server { \
listen 80; \
root /usr/share/nginx/html; \
index index.html; \
\
location / { \
try_files $uri $uri/ $uri.html /index.html; \
} \
\
# Cache static assets \
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { \
expires 1y; \
add_header Cache-Control "public, immutable"; \
} \
\
# Security headers \
add_header X-Frame-Options "SAMEORIGIN" always; \
add_header X-Content-Type-Options "nosniff" always; \
add_header X-XSS-Protection "1; mode=block" always; \
}' > /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

43
README.md Normal file
View File

@@ -0,0 +1,43 @@
# Astro Starter Kit: Minimal
```sh
npm create astro@latest -- --template minimal
```
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

11
astro.config.mjs Normal file
View File

@@ -0,0 +1,11 @@
// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [tailwindcss()]
}
});

6048
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

16
package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "website",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@tailwindcss/vite": "^4.2.0",
"astro": "^5.17.1",
"tailwindcss": "^4.2.0"
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 B

6
public/favicon.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#1A365D"/>
<path d="M50 15 L20 35 L20 70 L50 90 L80 70 L80 35 Z" fill="none" stroke="white" stroke-width="4"/>
<circle cx="50" cy="45" r="8" fill="#E53E3E"/>
<path d="M50 55 L50 70" stroke="#E53E3E" stroke-width="6" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 364 B

View File

@@ -0,0 +1,58 @@
---
const features = [
{
icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>`,
title: "Watchlist hochladen",
description: "Laden Sie Ihre Kunden- oder Lieferantenliste als CSV oder Excel hoch. Einmalig einrichten, dauerhaft überwachen."
},
{
icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>`,
title: "Tägliche Prüfung",
description: "Wir scannen täglich die offiziellen Insolvenzbekanntmachungen und gleichen sie mit Ihrer Watchlist ab."
},
{
icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>`,
title: "Sofort-Alarm",
description: "Bei einem Treffer erhalten Sie sofort eine Benachrichtigung per E-Mail oder WhatsApp noch am selben Tag."
},
{
icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>`,
title: "Handeln Sie schnell",
description: "Mit dem Zeitvorsprung können Sie Lieferstopps verhängen, Zahlungsziele anpassen oder Forderungen sichern."
},
];
---
<section id="funktionen" class="section bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-navy mb-4">
So schützt Insolvenz-Alarm Ihr Unternehmen
</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Einfach einrichten, automatisch überwachen, sofort reagieren.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{features.map((feature, index) => (
<div class="relative">
<div class="bg-navy/5 rounded-2xl p-6 h-full hover:bg-navy/10 transition-colors">
<div class="w-12 h-12 bg-signal/10 rounded-xl flex items-center justify-center text-signal mb-4">
<Fragment set:html={feature.icon} />
</div>
<div class="absolute -top-3 -left-3 w-8 h-8 bg-navy text-white rounded-full flex items-center justify-center font-bold text-sm">
{index + 1}
</div>
<h3 class="text-lg font-semibold text-navy mb-2">
{feature.title}
</h3>
<p class="text-gray-600">
{feature.description}
</p>
</div>
</div>
))}
</div>
</div>
</section>

View File

@@ -0,0 +1,57 @@
---
const currentYear = new Date().getFullYear();
---
<footer class="bg-navy text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid md:grid-cols-4 gap-8">
<!-- Brand -->
<div class="md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.5L17.5 8 12 11.5 6.5 8 12 4.5zM6 9.5l5 3v6l-5-3v-6zm7 9v-6l5-3v6l-5 3z"/>
</svg>
</div>
<span class="font-bold text-lg">INSOLVENZ-ALARM</span>
</div>
<p class="text-gray-300 max-w-md">
Automatisches Insolvenz-Monitoring für den deutschen Mittelstand.
Schützen Sie Ihr Unternehmen vor Forderungsausfällen.
</p>
</div>
<!-- Links -->
<div>
<h4 class="font-semibold mb-4">Produkt</h4>
<ul class="space-y-2 text-gray-300">
<li><a href="/#funktionen" class="hover:text-white transition-colors">Funktionen</a></li>
<li><a href="/#preise" class="hover:text-white transition-colors">Preise</a></li>
<li><a href="/#branchen" class="hover:text-white transition-colors">Branchen</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h4 class="font-semibold mb-4">Rechtliches</h4>
<ul class="space-y-2 text-gray-300">
<li><a href="/impressum" class="hover:text-white transition-colors">Impressum</a></li>
<li><a href="/datenschutz" class="hover:text-white transition-colors">Datenschutz</a></li>
<li><a href="/agb" class="hover:text-white transition-colors">AGB</a></li>
</ul>
</div>
</div>
<!-- Bottom -->
<div class="border-t border-white/10 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-gray-400 text-sm">
© {currentYear} Insolvenz-Alarm. Alle Rechte vorbehalten.
</p>
<div class="flex items-center gap-2 text-gray-400 text-sm">
<span>🇩🇪 Entwickelt in Deutschland</span>
<span>·</span>
<span>🇪🇺 DSGVO-konform</span>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,52 @@
---
interface Props {
currentPath?: string;
}
const { currentPath = '/' } = Astro.props;
const navItems = [
{ href: '/#funktionen', label: 'Funktionen' },
{ href: '/#preise', label: 'Preise' },
{ href: '/#branchen', label: 'Branchen' },
];
---
<header class="bg-white border-b border-gray-100 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<a href="/" class="flex items-center gap-3 text-navy hover:text-navy-light transition-colors">
<div class="w-10 h-10 bg-navy rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.5L17.5 8 12 11.5 6.5 8 12 4.5zM6 9.5l5 3v6l-5-3v-6zm7 9v-6l5-3v6l-5 3z"/>
<circle cx="12" cy="9" r="2" fill="white"/>
</svg>
</div>
<span class="font-bold text-lg">INSOLVENZ-ALARM</span>
</a>
<!-- Navigation -->
<nav class="hidden md:flex items-center gap-8">
{navItems.map(item => (
<a
href={item.href}
class="text-gray-600 hover:text-navy font-medium transition-colors"
>
{item.label}
</a>
))}
<a href="#waitlist" class="btn btn-primary">
Kostenlos starten
</a>
</nav>
<!-- Mobile Menu Button -->
<button class="md:hidden p-2 text-gray-600" aria-label="Menü öffnen">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</header>

69
src/components/Hero.astro Normal file
View File

@@ -0,0 +1,69 @@
---
interface Props {
title?: string;
subtitle?: string;
}
const {
title = "Forderungsausfälle vermeiden, bevor sie entstehen",
subtitle = "Überwachen Sie automatisch Ihre Kunden und Lieferanten auf Insolvenzen. Erhalten Sie sofortige Alerts, bevor es zu spät ist."
} = Astro.props;
---
<section class="bg-gradient-to-b from-gray-50 to-white py-16 md:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Content -->
<div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-navy leading-tight mb-6">
{title.split(',')[0]},
<span class="text-signal">{title.split(',')[1] || ''}</span>
</h1>
<p class="text-xl text-gray-600 mb-8 max-w-lg">
{subtitle}
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-8">
<a href="#waitlist" class="btn btn-primary btn-large">
Kostenlos starten
</a>
<a href="#funktionen" class="btn btn-outline btn-large">
So funktioniert's
</a>
</div>
<div class="flex items-center gap-2 text-gray-500">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
</svg>
<span>5 Unternehmen kostenlos überwachen · Keine Kreditkarte nötig</span>
</div>
</div>
<!-- Visual -->
<div class="relative">
<!-- Alert Cards -->
<div class="space-y-4">
<div class="bg-white rounded-xl shadow-xl p-6 border-l-4 border-signal transform hover:-translate-y-1 transition-transform">
<div class="flex items-center gap-3 mb-2">
<div class="w-3 h-3 bg-signal rounded-full animate-pulse"></div>
<span class="font-semibold text-gray-900">Neue Insolvenz erkannt</span>
</div>
<p class="text-lg font-medium text-navy">Mustermann GmbH</p>
<p class="text-sm text-gray-500">Auf Ihrer Watchlist · Gerade eben</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 ml-8 opacity-90">
<div class="flex items-center gap-3 mb-2">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
</svg>
<span class="font-medium text-gray-900">Täglicher Check abgeschlossen</span>
</div>
<p class="text-sm text-gray-500">247 Unternehmen geprüft · Keine neuen Treffer</p>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,62 @@
---
const industries = [
{
name: "Großhandel",
href: "/grosshandel",
description: "Schützen Sie sich vor zahlungsunfähigen Abnehmern",
icon: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>`,
},
{
name: "Handwerk",
href: "/handwerk",
description: "Vermeiden Sie Aufträge bei insolventen Bauherren",
icon: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>`,
},
{
name: "Steuerberater",
href: "/steuerberater",
description: "Beraten Sie Ihre Mandanten proaktiv",
icon: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>`,
},
{
name: "Inkasso",
href: "/inkasso",
description: "Optimieren Sie Ihr Forderungsmanagement",
icon: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>`,
},
{
name: "Lieferanten",
href: "/lieferanten",
description: "Sichern Sie Ihre Lieferkette ab",
icon: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>`,
},
];
---
<section id="branchen" class="section bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-navy mb-4">
Lösungen für Ihre Branche
</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Egal ob Sie Forderungen absichern oder Lieferketten schützen wir haben die passende Lösung.
</p>
</div>
<div class="grid md:grid-cols-3 lg:grid-cols-5 gap-6">
{industries.map(industry => (
<a
href={industry.href}
class="group bg-gray-50 rounded-xl p-6 text-center hover:bg-navy hover:text-white transition-all duration-300"
>
<div class="w-16 h-16 mx-auto mb-4 bg-navy/10 group-hover:bg-white/10 rounded-xl flex items-center justify-center text-navy group-hover:text-white transition-colors">
<Fragment set:html={industry.icon} />
</div>
<h3 class="font-semibold mb-2 group-hover:text-white">{industry.name}</h3>
<p class="text-sm text-gray-500 group-hover:text-gray-200">{industry.description}</p>
</a>
))}
</div>
</div>
</section>

View File

@@ -0,0 +1,117 @@
---
const plans = [
{
name: "Starter",
price: "0",
period: "für immer",
description: "Für Freelancer und Kleinunternehmer",
features: [
"5 Unternehmen überwachen",
"Tägliche Prüfung",
"E-Mail Benachrichtigungen",
"Basis-Support",
],
cta: "Kostenlos starten",
popular: false,
},
{
name: "Professional",
price: "29",
period: "pro Monat",
description: "Für wachsende Unternehmen",
features: [
"50 Unternehmen überwachen",
"Tägliche Prüfung",
"E-Mail + WhatsApp Alerts",
"CSV/Excel Import",
"API-Zugang",
"Prioritäts-Support",
],
cta: "14 Tage kostenlos testen",
popular: true,
},
{
name: "Business",
price: "69",
period: "pro Monat",
description: "Für mittlere Unternehmen",
features: [
"250 Unternehmen überwachen",
"Echtzeit-Prüfung",
"Alle Benachrichtigungskanäle",
"Team-Zugänge (5 Nutzer)",
"Erweiterte API",
"Dedizierter Support",
],
cta: "14 Tage kostenlos testen",
popular: false,
},
{
name: "Enterprise",
price: "149",
period: "pro Monat",
description: "Für Großunternehmen",
features: [
"Unbegrenzt überwachen",
"Echtzeit-Prüfung",
"Alle Kanäle + Webhook",
"Unbegrenzte Team-Zugänge",
"White-Label Option",
"SLA & Account Manager",
],
cta: "Kontakt aufnehmen",
popular: false,
},
];
---
<section id="preise" class="section bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-navy mb-4">
Transparente Preise, ohne versteckte Kosten
</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Starten Sie kostenlos. Upgraden Sie, wenn Sie wachsen.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{plans.map(plan => (
<div class={`bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-shadow relative ${plan.popular ? 'ring-2 ring-signal' : ''}`}>
{plan.popular && (
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-signal text-white text-xs font-bold px-3 py-1 rounded-full">
BELIEBT
</div>
)}
<h3 class="text-xl font-bold text-navy mb-2">{plan.name}</h3>
<p class="text-gray-500 text-sm mb-4">{plan.description}</p>
<div class="mb-6">
<span class="text-4xl font-bold text-navy">€{plan.price}</span>
<span class="text-gray-500 text-sm">/{plan.period}</span>
</div>
<ul class="space-y-3 mb-6">
{plan.features.map(feature => (
<li class="flex items-start gap-2 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
</svg>
<span>{feature}</span>
</li>
))}
</ul>
<a
href="#waitlist"
class={`btn w-full justify-center ${plan.popular ? 'btn-primary' : 'btn-outline'}`}
>
{plan.cta}
</a>
</div>
))}
</div>
</div>
</section>

View File

@@ -0,0 +1,25 @@
---
const stats = [
{ number: "57 Mrd. €", label: "Jährlicher Gläubigerschaden in Deutschland" },
{ number: "22.400", label: "Unternehmensinsolvenzen 2025" },
{ number: "96%", label: "Durchschnittlicher Forderungsverlust" },
{ number: "< 2 Min.", label: "Zeit bis zur Benachrichtigung" },
];
---
<section class="bg-navy py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
{stats.map(stat => (
<div class="text-center">
<div class="text-3xl md:text-4xl font-bold text-white mb-2">
{stat.number}
</div>
<div class="text-gray-300 text-sm">
{stat.label}
</div>
</div>
))}
</div>
</div>
</section>

View File

@@ -0,0 +1,69 @@
---
// Waitlist Component - sammelt E-Mail Adressen für Launch
---
<section id="waitlist" class="section bg-navy">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
Seien Sie unter den Ersten
</h2>
<p class="text-xl text-gray-300 mb-8">
Tragen Sie sich jetzt ein und erhalten Sie exklusiven Early-Access,
sobald wir starten plus 3 Monate Professional kostenlos.
</p>
<form
id="waitlist-form"
class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"
>
<input
type="email"
name="email"
placeholder="ihre@email.de"
required
class="flex-1 px-6 py-4 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-signal"
/>
<button
type="submit"
class="btn btn-primary btn-large whitespace-nowrap"
>
Platz sichern
</button>
</form>
<p class="text-gray-400 text-sm mt-4">
🔒 Kein Spam. Nur Launch-Updates. Jederzeit abmeldbar.
</p>
<!-- Success Message (hidden by default) -->
<div id="waitlist-success" class="hidden mt-8 bg-green-500/20 border border-green-400 rounded-lg p-6">
<svg class="w-12 h-12 text-green-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<h3 class="text-xl font-bold text-white mb-2">Sie sind auf der Liste!</h3>
<p class="text-gray-300">Wir melden uns, sobald es losgeht.</p>
</div>
</div>
</section>
<script>
const form = document.getElementById('waitlist-form');
const success = document.getElementById('waitlist-success');
form?.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form as HTMLFormElement);
const email = formData.get('email');
// TODO: Backend-Endpoint implementieren
// Für jetzt: Speichern wir lokal und zeigen Success
console.log('Waitlist signup:', email);
// Hier später: fetch('/api/waitlist', { method: 'POST', body: JSON.stringify({ email }) })
// Success anzeigen
(form as HTMLElement).classList.add('hidden');
success?.classList.remove('hidden');
});
</script>

View File

@@ -0,0 +1,95 @@
---
import Layout from './Layout.astro';
import Header from '../components/Header.astro';
import Waitlist from '../components/Waitlist.astro';
import Footer from '../components/Footer.astro';
interface Props {
title: string;
industry: string;
description: string;
heroTitle: string;
heroSubtitle: string;
benefits: Array<{
title: string;
description: string;
}>;
problems: string[];
}
const { title, industry, description, heroTitle, heroSubtitle, benefits, problems } = Astro.props;
---
<Layout title={title} description={description}>
<Header />
<main>
<!-- Hero -->
<section class="bg-gradient-to-b from-gray-50 to-white py-16 md:py-24">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-block bg-navy/10 text-navy font-medium px-4 py-2 rounded-full text-sm mb-6">
Für {industry}
</div>
<h1 class="text-4xl md:text-5xl font-bold text-navy leading-tight mb-6">
{heroTitle}
</h1>
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
{heroSubtitle}
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#waitlist" class="btn btn-primary btn-large">
Kostenlos starten
</a>
<a href="/" class="btn btn-outline btn-large">
Zurück zur Übersicht
</a>
</div>
</div>
</section>
<!-- Problems -->
<section class="section bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl md:text-3xl font-bold text-navy mb-8 text-center">
Kennen Sie diese Probleme?
</h2>
<div class="grid md:grid-cols-2 gap-4">
{problems.map(problem => (
<div class="flex items-start gap-3 bg-red-50 rounded-lg p-4">
<svg class="w-6 h-6 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<span class="text-gray-700">{problem}</span>
</div>
))}
</div>
</div>
</section>
<!-- Benefits -->
<section class="section bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl md:text-3xl font-bold text-navy mb-8 text-center">
So hilft Insolvenz-Alarm
</h2>
<div class="grid md:grid-cols-2 gap-6">
{benefits.map(benefit => (
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-start gap-3">
<svg class="w-6 h-6 text-green-500 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
</svg>
<div>
<h3 class="font-semibold text-navy mb-1">{benefit.title}</h3>
<p class="text-gray-600 text-sm">{benefit.description}</p>
</div>
</div>
</div>
))}
</div>
</div>
</section>
<Waitlist />
</main>
<Footer />
</Layout>

42
src/layouts/Layout.astro Normal file
View File

@@ -0,0 +1,42 @@
---
import '../styles/global.css'
interface Props {
title: string;
description?: string;
}
const {
title,
description = "Schützen Sie Ihr Unternehmen vor Forderungsausfällen. Automatisches Insolvenz-Monitoring für Ihre Kunden und Lieferanten."
} = Astro.props;
---
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
<meta property="og:locale" content="de_DE" />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Fonts -->
<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;700&display=swap" rel="stylesheet" />
<title>{title}</title>
</head>
<body class="font-['Inter'] text-gray-900 bg-white">
<slot />
</body>
</html>

View File

@@ -0,0 +1,37 @@
---
import IndustryPage from '../layouts/IndustryPage.astro';
---
<IndustryPage
title="Insolvenz-Alarm für Großhandel | Forderungen absichern"
industry="Großhandel"
description="Schützen Sie Ihr Großhandelsunternehmen vor Forderungsausfällen. Automatisches Insolvenz-Monitoring für Ihre Geschäftskunden."
heroTitle="Schützen Sie Ihre Forderungen im Großhandel"
heroSubtitle="Überwachen Sie Ihre Geschäftskunden automatisch und erfahren Sie sofort, wenn ein Abnehmer insolvent wird bevor Sie die nächste Lieferung rausschicken."
problems={[
"Kunden zahlen nicht und Sie erfahren erst später von der Insolvenz",
"Offene Rechnungen über 10.000€+ werden uneinbringlich",
"Manuelles Prüfen der Bonität ist zeitaufwendig",
"Keine Zeit, täglich Insolvenzbekanntmachungen zu lesen",
"Lieferungen an insolvente Kunden verursachen doppelten Schaden",
"Zahlungsziele werden zum Risiko bei instabilen Kunden",
]}
benefits={[
{
title: "Frühwarnsystem für Ihre Debitoren",
description: "Laden Sie Ihre Kundenliste hoch und wir überwachen jeden einzelnen Kunden täglich."
},
{
title: "Sofortige Benachrichtigung",
description: "Bei einer Insolvenz erhalten Sie innerhalb von Stunden eine Warnung nicht erst Wochen später."
},
{
title: "Lieferstopp rechtzeitig verhängen",
description: "Mit dem Zeitvorsprung können Sie offene Aufträge stoppen, bevor die Ware rausgeht."
},
{
title: "Forderungen anmelden",
description: "Sie erfahren früh genug vom Insolvenzverfahren, um Ihre Forderungen korrekt anzumelden."
},
]}
/>

37
src/pages/handwerk.astro Normal file
View File

@@ -0,0 +1,37 @@
---
import IndustryPage from '../layouts/IndustryPage.astro';
---
<IndustryPage
title="Insolvenz-Alarm für Handwerk | Auftraggeber prüfen"
industry="Handwerk"
description="Vermeiden Sie Aufträge bei insolventen Bauherren und Generalunternehmern. Automatisches Insolvenz-Monitoring für Handwerksbetriebe."
heroTitle="Handwerk: Arbeiten Sie nur für zahlungsfähige Kunden"
heroSubtitle="Prüfen Sie Bauherren und Generalunternehmer, bevor Sie den Auftrag annehmen und überwachen Sie laufende Projekte auf Warnsignale."
problems={[
"Auftraggeber wird während des Projekts insolvent",
"Arbeit geleistet, aber Schlussrechnung bleibt unbezahlt",
"Material vorfinanziert, Erstattung fällt aus",
"GU-Insolvenzen reißen Subunternehmer mit",
"Keine Zeit für Bonitätsprüfung bei jedem Auftrag",
"Bauvorhaben werden gestoppt, Handwerker bleiben auf Kosten sitzen",
]}
benefits={[
{
title: "Auftraggeber vorab prüfen",
description: "Checken Sie potenzielle Kunden vor Auftragsannahme auf laufende Insolvenzverfahren."
},
{
title: "Laufende Projekte überwachen",
description: "Behalten Sie alle Auftraggeber im Blick und erfahren Sie sofort von neuen Insolvenzen."
},
{
title: "Baustellenrisiko minimieren",
description: "Bei Warnsignalen können Sie Abschlagsrechnungen fordern oder Lieferungen anpassen."
},
{
title: "Subunternehmer-Schutz",
description: "Als Sub wissen Sie früher Bescheid, wenn der GU wackelt Zeit zu handeln."
},
]}
/>

24
src/pages/index.astro Normal file
View File

@@ -0,0 +1,24 @@
---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import Hero from '../components/Hero.astro';
import Stats from '../components/Stats.astro';
import Features from '../components/Features.astro';
import Pricing from '../components/Pricing.astro';
import Industries from '../components/Industries.astro';
import Waitlist from '../components/Waitlist.astro';
import Footer from '../components/Footer.astro';
---
<Layout title="Insolvenz-Alarm | Forderungsausfälle vermeiden">
<Header />
<main>
<Hero />
<Stats />
<Features />
<Industries />
<Pricing />
<Waitlist />
</main>
<Footer />
</Layout>

37
src/pages/inkasso.astro Normal file
View File

@@ -0,0 +1,37 @@
---
import IndustryPage from '../layouts/IndustryPage.astro';
---
<IndustryPage
title="Insolvenz-Alarm für Inkasso | Forderungsmanagement optimieren"
industry="Inkasso"
description="Optimieren Sie Ihr Forderungsmanagement mit automatischem Insolvenz-Monitoring. Erkennen Sie aussichtslose Fälle früher."
heroTitle="Effizienteres Inkasso durch Insolvenz-Früherkennung"
heroSubtitle="Wissen Sie sofort, wenn ein Schuldner insolvent wird. Priorisieren Sie Ihre Ressourcen auf Fälle mit Aussicht auf Erfolg."
problems={[
"Zeit und Geld für Mahnverfahren gegen insolvente Schuldner",
"Verspätete Forderungsanmeldung im Insolvenzverfahren",
"Manuelle Prüfung jedes einzelnen Falls ist aufwendig",
"Keine Echtzeit-Information über neue Insolvenzen",
"Ineffiziente Ressourcenallokation",
"Mandanten erwarten schnelle, fundierte Einschätzungen",
]}
benefits={[
{
title: "Portfolio-Screening",
description: "Laden Sie Ihre gesamte Schuldnerliste hoch und erhalten Sie sofort eine Insolvenz-Übersicht."
},
{
title: "Tägliche Überwachung",
description: "Alle Schuldner werden täglich gegen neue Insolvenzbekanntmachungen geprüft."
},
{
title: "Sofortige Forderungsanmeldung",
description: "Mit der Frühinformation können Sie Forderungen rechtzeitig anmelden."
},
{
title: "API für Ihr System",
description: "Integrieren Sie die Insolvenz-Daten direkt in Ihre Inkasso-Software."
},
]}
/>

View File

@@ -0,0 +1,37 @@
---
import IndustryPage from '../layouts/IndustryPage.astro';
---
<IndustryPage
title="Insolvenz-Alarm für Lieferantenüberwachung | Supply Chain schützen"
industry="Einkauf & Supply Chain"
description="Sichern Sie Ihre Lieferkette ab. Automatisches Monitoring Ihrer kritischen Lieferanten auf Insolvenzrisiken."
heroTitle="Schützen Sie Ihre Lieferkette vor Ausfällen"
heroSubtitle="Überwachen Sie Ihre kritischen Lieferanten automatisch und erfahren Sie sofort, wenn ein Zulieferer in Schwierigkeiten gerät."
problems={[
"Lieferant wird insolvent Produktion steht still",
"Keine Vorwarnung, plötzlicher Lieferausfall",
"Single-Source-Risiken nicht im Blick",
"Ersatzlieferanten zu finden braucht Zeit",
"Kundenaufträge können nicht erfüllt werden",
"Vertragsstrafen und Reputationsschäden",
]}
benefits={[
{
title: "Kritische Lieferanten überwachen",
description: "Definieren Sie Ihre wichtigsten Zulieferer und wir behalten sie für Sie im Auge."
},
{
title: "Frühzeitige Warnung",
description: "Bei einer Insolvenz haben Sie Zeit, alternative Lieferanten zu aktivieren."
},
{
title: "Supply Chain Resilienz",
description: "Planen Sie voraus und vermeiden Sie Produktionsausfälle durch Lieferantenprobleme."
},
{
title: "Einkaufsrisiko minimieren",
description: "Prüfen Sie neue Lieferanten vor Vertragsabschluss auf Insolvenzhistorie."
},
]}
/>

View File

@@ -0,0 +1,37 @@
---
import IndustryPage from '../layouts/IndustryPage.astro';
---
<IndustryPage
title="Insolvenz-Alarm für Steuerberater | Mandanten schützen"
industry="Steuerberater"
description="Beraten Sie Ihre Mandanten proaktiv zu Insolvenzrisiken. Automatisches Monitoring der Geschäftspartner Ihrer Mandanten."
heroTitle="Mehrwert für Ihre Mandanten durch Insolvenz-Monitoring"
heroSubtitle="Bieten Sie Ihren Mandanten einen zusätzlichen Service: Automatische Überwachung ihrer Kunden und Lieferanten auf Insolvenzen."
problems={[
"Mandanten erfahren zu spät von Kundeninsolvenzen",
"Forderungsausfälle belasten Jahresabschlüsse",
"Reaktive statt proaktive Beratung",
"Kein Tool für systematisches Debitorenmonitoring",
"Mandanten erwarten modernen, digitalen Service",
"Zeitaufwand für manuelle Recherchen",
]}
benefits={[
{
title: "Proaktive Mandantenberatung",
description: "Informieren Sie Mandanten, bevor der Schaden entsteht das schafft Vertrauen."
},
{
title: "Zusätzliche Einnahmequelle",
description: "Bieten Sie Insolvenz-Monitoring als Premium-Service an und generieren Sie wiederkehrende Einnahmen."
},
{
title: "Digitalisierung der Kanzlei",
description: "Moderne Tools signalisieren: Ihre Kanzlei ist auf dem neuesten Stand."
},
{
title: "Team-Zugänge inklusive",
description: "Ihre Mitarbeiter können eigenständig Mandanten-Watchlists pflegen und überwachen."
},
]}
/>

53
src/styles/global.css Normal file
View File

@@ -0,0 +1,53 @@
@import "tailwindcss";
/* Brand Colors als CSS Custom Properties */
@theme {
--color-navy: #1A365D;
--color-navy-light: #2C5282;
--color-navy-dark: #1A365D;
--color-signal: #E53E3E;
--color-signal-dark: #C53030;
--color-signal-light: #FC8181;
}
/* Base Styles */
@layer base {
html {
scroll-behavior: smooth;
}
body {
@apply antialiased;
}
}
/* Component Utilities */
@layer components {
.btn {
@apply inline-flex items-center justify-center px-6 py-3 font-semibold rounded-lg transition-all duration-200;
}
.btn-primary {
@apply bg-signal text-white hover:bg-signal-dark shadow-lg hover:shadow-xl;
}
.btn-secondary {
@apply bg-navy text-white hover:bg-navy-light;
}
.btn-outline {
@apply border-2 border-navy text-navy hover:bg-navy hover:text-white;
}
.btn-large {
@apply px-8 py-4 text-lg;
}
.section {
@apply py-16 md:py-24;
}
.container-narrow {
@apply max-w-4xl mx-auto px-4;
}
}

5
tsconfig.json Normal file
View File

@@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}