feat: initial Funktechnik Schubert website
This commit is contained in:
Schubert Ferenc
commit
9a648e2ec8
35 changed files with 7521 additions and 0 deletions
7
.dockerignore
Normal file
7
.dockerignore
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
node_modules
|
||||||
|
.next
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
npm-debug.log*
|
||||||
|
.git
|
||||||
|
README.md
|
||||||
5
.env.example
Normal file
5
.env.example
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
NEXT_PUBLIC_SITE_URL=http://localhost:3010
|
||||||
|
|
||||||
|
# Optional spaetere Integration. Nicht im Browser verwenden.
|
||||||
|
OLYMPUS_INTAKE_API_URL=
|
||||||
|
OLYMPUS_INTAKE_API_TOKEN=
|
||||||
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.next
|
||||||
|
node_modules
|
||||||
|
out
|
||||||
|
dist
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
npm-debug.log*
|
||||||
29
Dockerfile
Normal file
29
Dockerfile
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
FROM node:22-alpine AS deps
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
FROM node:22-alpine AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED=1
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM node:22-alpine AS runner
|
||||||
|
WORKDIR /app
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED=1
|
||||||
|
|
||||||
|
RUN addgroup --system --gid 1001 nodejs
|
||||||
|
RUN adduser --system --uid 1001 nextjs
|
||||||
|
|
||||||
|
COPY --from=builder /app/public ./public
|
||||||
|
COPY --from=builder /app/.next/standalone ./
|
||||||
|
COPY --from=builder /app/.next/static ./.next/static
|
||||||
|
|
||||||
|
USER nextjs
|
||||||
|
EXPOSE 3010
|
||||||
|
ENV PORT=3010
|
||||||
|
|
||||||
|
CMD ["node", "server.js"]
|
||||||
108
README.md
Normal file
108
README.md
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
# Funktechnik Schubert Website
|
||||||
|
|
||||||
|
Eigenständige öffentliche Firmenwebsite für Funktechnik Schubert. Dieses Projekt ist nicht Olympus CRM und koppelt nicht direkt an Olympus.
|
||||||
|
|
||||||
|
## Technologie
|
||||||
|
|
||||||
|
- Next.js 16 App Router
|
||||||
|
- TypeScript strict
|
||||||
|
- Serverseitige API-Routen für Kontakt und Reparaturannahme
|
||||||
|
- Docker
|
||||||
|
- Nginx/Reverse-Proxy-fähig
|
||||||
|
- SEO Metadata, Sitemap und robots.txt
|
||||||
|
|
||||||
|
## Seiten
|
||||||
|
|
||||||
|
- `/` Startseite
|
||||||
|
- `/leistungen`
|
||||||
|
- `/funkgeraete-service`
|
||||||
|
- `/reparatur`
|
||||||
|
- `/ueber-uns`
|
||||||
|
- `/kontakt`
|
||||||
|
- `/impressum`
|
||||||
|
- `/datenschutz`
|
||||||
|
|
||||||
|
## Lokale Entwicklung
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Die Website läuft lokal unter:
|
||||||
|
|
||||||
|
```text
|
||||||
|
http://localhost:3010
|
||||||
|
```
|
||||||
|
|
||||||
|
## Checks
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run lint
|
||||||
|
npx next build
|
||||||
|
```
|
||||||
|
|
||||||
|
## Docker
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose build
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
Service:
|
||||||
|
|
||||||
|
```text
|
||||||
|
funktechnik-website
|
||||||
|
```
|
||||||
|
|
||||||
|
Port:
|
||||||
|
|
||||||
|
```text
|
||||||
|
3010:3010
|
||||||
|
```
|
||||||
|
|
||||||
|
## Umgebung
|
||||||
|
|
||||||
|
`.env.example` kopieren:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
Variablen:
|
||||||
|
|
||||||
|
- `NEXT_PUBLIC_SITE_URL`
|
||||||
|
- `OLYMPUS_INTAKE_API_URL`
|
||||||
|
- `OLYMPUS_INTAKE_API_TOKEN`
|
||||||
|
|
||||||
|
Die Olympus-Variablen sind nur für eine spätere serverseitige Integration vorbereitet. Sie werden nicht im Browser verwendet.
|
||||||
|
|
||||||
|
## API-Routen
|
||||||
|
|
||||||
|
- `POST /api/repair`
|
||||||
|
- `POST /api/contact`
|
||||||
|
|
||||||
|
Aktuell validieren die Routen serverseitig, geben klare JSON-Antworten zurück und schreiben nur technische Metadaten in Server-Logs. Es werden keine Nachrichteninhalte oder Tokens geloggt.
|
||||||
|
|
||||||
|
## Nginx
|
||||||
|
|
||||||
|
Siehe `nginx.example.conf`.
|
||||||
|
|
||||||
|
Beispiel-Domain:
|
||||||
|
|
||||||
|
```text
|
||||||
|
funktechnik-schubert.de
|
||||||
|
```
|
||||||
|
|
||||||
|
Produktiv HTTPS aktivieren, z. B. mit Certbot:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
certbot --nginx -d funktechnik-schubert.de -d www.funktechnik-schubert.de
|
||||||
|
```
|
||||||
|
|
||||||
|
## Offene manuelle Punkte
|
||||||
|
|
||||||
|
- TODO: Rechtliche Angaben ergänzen
|
||||||
|
- Produktives Kontakt-/Mail-System anbinden
|
||||||
|
- Spätere Olympus-Reparaturannahme serverseitig anbinden
|
||||||
|
- Finale Domain und HTTPS-Konfiguration setzen
|
||||||
25
app/api/contact/route.ts
Normal file
25
app/api/contact/route.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
function text(value: FormDataEntryValue | null) {
|
||||||
|
return typeof value === "string" ? value.trim() : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const form = await request.formData();
|
||||||
|
const name = text(form.get("name"));
|
||||||
|
const email = text(form.get("email"));
|
||||||
|
const message = text(form.get("message"));
|
||||||
|
|
||||||
|
if (!name || !email.includes("@") || message.length < 10 || form.get("privacy") !== "on") {
|
||||||
|
return NextResponse.json({ message: "Bitte füllen Sie alle Pflichtfelder aus." }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
console.info("contact_request.received", {
|
||||||
|
messageLength: message.length,
|
||||||
|
hasEmail: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
message: "Ihre Nachricht wurde erfasst. Sie erhalten eine Rückmeldung.",
|
||||||
|
});
|
||||||
|
}
|
||||||
34
app/api/repair/route.ts
Normal file
34
app/api/repair/route.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
function required(value: FormDataEntryValue | null) {
|
||||||
|
return typeof value === "string" && value.trim().length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const form = await request.formData();
|
||||||
|
const name = form.get("name");
|
||||||
|
const email = form.get("email");
|
||||||
|
const manufacturer = form.get("manufacturer");
|
||||||
|
const model = form.get("model");
|
||||||
|
const description = form.get("description");
|
||||||
|
const privacy = form.get("privacy");
|
||||||
|
|
||||||
|
if (!required(name) || !required(email) || !required(manufacturer) || !required(model) || !required(description) || privacy !== "on") {
|
||||||
|
return NextResponse.json({ message: "Bitte füllen Sie alle Pflichtfelder aus." }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const intakeUrl = process.env.OLYMPUS_INTAKE_API_URL;
|
||||||
|
const hasIntegrationToken = Boolean(process.env.OLYMPUS_INTAKE_API_TOKEN);
|
||||||
|
|
||||||
|
console.info("repair_intake.received", {
|
||||||
|
hasIntakeIntegration: Boolean(intakeUrl && hasIntegrationToken),
|
||||||
|
manufacturer: String(manufacturer),
|
||||||
|
model: String(model),
|
||||||
|
hasPhone: required(form.get("phone")),
|
||||||
|
hasSerialNumber: required(form.get("serialNumber")),
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
message: "Ihre Reparaturanfrage wurde erfasst. Sie erhalten nach Prüfung eine Rückmeldung.",
|
||||||
|
});
|
||||||
|
}
|
||||||
26
app/datenschutz/page.tsx
Normal file
26
app/datenschutz/page.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import PageHero from "@/components/PageHero";
|
||||||
|
import { createMetadata } from "../seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata("Datenschutz", "Datenschutzhinweise von Funktechnik Schubert.", "/datenschutz");
|
||||||
|
|
||||||
|
export default function DatenschutzPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHero eyebrow="Rechtliches" title="Datenschutz">Informationen zur Verarbeitung personenbezogener Daten.</PageHero>
|
||||||
|
<section className="section">
|
||||||
|
<div className="container legal">
|
||||||
|
<p className="notice">TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
<h2>Verantwortlicher</h2>
|
||||||
|
<p>TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
<h2>Kontakt- und Reparaturanfragen</h2>
|
||||||
|
<p>Die Formulare erfassen Angaben, die zur Bearbeitung der jeweiligen Anfrage erforderlich sind. Eine produktive Datenschutzerklärung muss vor Veröffentlichung rechtlich geprüft und ergänzt werden.</p>
|
||||||
|
<h2>Hosting und Server-Logs</h2>
|
||||||
|
<p>TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
<h2>Betroffenenrechte</h2>
|
||||||
|
<p>TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
app/funkgeraete-service/page.tsx
Normal file
35
app/funkgeraete-service/page.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
import PageHero from "@/components/PageHero";
|
||||||
|
import { createMetadata } from "../seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata("Funkgeräte-Service", "Werkstattservice für CB-Funk, Amateurfunk und Funkgeräte-Abgleich.", "/funkgeraete-service");
|
||||||
|
|
||||||
|
export default function RadioServicePage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHero eyebrow="Funkgeräte-Service" title="Prüfung, Diagnose und Abgleich">
|
||||||
|
Funkgeräte zeigen Fehler oft erst im Zusammenspiel von Empfang, Sendeteil, Versorgung, Antennenanpassung und Bedienung. Der Service betrachtet diese Zusammenhänge strukturiert.
|
||||||
|
</PageHero>
|
||||||
|
<section className="section">
|
||||||
|
<div className="container split">
|
||||||
|
<div>
|
||||||
|
<h2>Typische Fehlerbilder</h2>
|
||||||
|
<ul className="list">
|
||||||
|
<li>Kein oder schwacher Empfang</li>
|
||||||
|
<li>Keine, leise oder verzerrte Modulation</li>
|
||||||
|
<li>Frequenzversatz, PLL-Rasten oder instabile Kanäle</li>
|
||||||
|
<li>Aussetzer durch Stromversorgung, Buchsen oder Bedienelemente</li>
|
||||||
|
<li>Unklare Vorarbeiten oder verbastelte Geräte</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="panel">
|
||||||
|
<h2>Serviceablauf</h2>
|
||||||
|
<p className="lead">Eine gute Reparatur beginnt mit vollständigen Angaben zu Gerät, Fehlerbild und Vorgeschichte. Danach folgt eine technische Einschätzung und die weitere Abstimmung.</p>
|
||||||
|
<Link className="button" href="/reparatur">Reparatur anfragen</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
404
app/globals.css
Normal file
404
app/globals.css
Normal file
|
|
@ -0,0 +1,404 @@
|
||||||
|
:root {
|
||||||
|
--bg: #f6f8fb;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--ink: #101827;
|
||||||
|
--muted: #5b677a;
|
||||||
|
--line: #d9e1ec;
|
||||||
|
--navy: #0b1728;
|
||||||
|
--navy-2: #13243a;
|
||||||
|
--cyan: #16b6d9;
|
||||||
|
--orange: #f28c28;
|
||||||
|
--radius: 8px;
|
||||||
|
--shadow: 0 20px 50px rgba(10, 23, 40, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--ink);
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(1120px, calc(100% - 32px));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(11, 23, 40, 0.96);
|
||||||
|
color: #fff;
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
display: flex;
|
||||||
|
min-height: 72px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
display: grid;
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
place-items: center;
|
||||||
|
border: 1px solid rgba(22, 182, 217, 0.45);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, rgba(22, 182, 217, 0.22), rgba(242, 140, 40, 0.18));
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark::before {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 3px solid var(--cyan);
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 999px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 9px 11px;
|
||||||
|
color: rgba(255, 255, 255, 0.82);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: calc(100vh - 72px);
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, rgba(8, 18, 32, 0.94), rgba(8, 18, 32, 0.72), rgba(8, 18, 32, 0.58)),
|
||||||
|
url("/workbench-signal.svg"),
|
||||||
|
linear-gradient(135deg, #0b1728, #17324e);
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
max-width: 760px;
|
||||||
|
padding: 76px 0 118px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
color: var(--cyan);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
font-size: clamp(44px, 7vw, 76px);
|
||||||
|
line-height: 0.96;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: clamp(30px, 4vw, 44px);
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
max-width: 720px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .lead {
|
||||||
|
color: rgba(255, 255, 255, 0.82);
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions,
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
min-height: 44px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0 18px;
|
||||||
|
background: var(--cyan);
|
||||||
|
color: #06111d;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.secondary {
|
||||||
|
border-color: rgba(255, 255, 255, 0.22);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.light {
|
||||||
|
border-color: var(--line);
|
||||||
|
background: #fff;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 82px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section.dark {
|
||||||
|
background: var(--navy);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section.dark h2,
|
||||||
|
.section.dark h3 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section.dark .lead,
|
||||||
|
.section.dark p {
|
||||||
|
color: rgba(255, 255, 255, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
max-width: 760px;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid.three {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid.two {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--surface);
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 8px 26px rgba(12, 28, 48, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .card {
|
||||||
|
border-color: rgba(255, 255, 255, 0.12);
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card p,
|
||||||
|
.list li {
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .card p,
|
||||||
|
.dark .list li {
|
||||||
|
color: rgba(255, 255, 255, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
padding-left: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.05fr 0.95fr;
|
||||||
|
gap: 34px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: #fff;
|
||||||
|
padding: 28px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
display: grid;
|
||||||
|
gap: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field label {
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input,
|
||||||
|
.field select,
|
||||||
|
.field textarea {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #cfd8e5;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 11px 12px;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field textarea {
|
||||||
|
min-height: 130px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #b42318;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
border: 1px solid #a6d8bd;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #edf9f1;
|
||||||
|
padding: 12px;
|
||||||
|
color: #15562d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
border-left: 4px solid var(--orange);
|
||||||
|
background: #fff8ef;
|
||||||
|
padding: 14px 16px;
|
||||||
|
color: #5a3713;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background: #08111f;
|
||||||
|
color: rgba(255, 255, 255, 0.76);
|
||||||
|
padding: 44px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.3fr 1fr 1fr;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal {
|
||||||
|
max-width: 860px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal h2 {
|
||||||
|
margin-top: 28px;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.header-inner,
|
||||||
|
.nav {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
padding: 64px 0 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid.three,
|
||||||
|
.grid.two,
|
||||||
|
.split,
|
||||||
|
.footer-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
app/impressum/page.tsx
Normal file
24
app/impressum/page.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import PageHero from "@/components/PageHero";
|
||||||
|
import { createMetadata } from "../seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata("Impressum", "Impressum von Funktechnik Schubert.", "/impressum");
|
||||||
|
|
||||||
|
export default function ImpressumPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHero eyebrow="Rechtliches" title="Impressum">Rechtliche Angaben für die öffentliche Firmenwebsite.</PageHero>
|
||||||
|
<section className="section">
|
||||||
|
<div className="container legal">
|
||||||
|
<p className="notice">TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
<h2>Anbieterkennzeichnung</h2>
|
||||||
|
<p>TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<p>TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
<h2>Umsatzsteuer / Registerangaben</h2>
|
||||||
|
<p>TODO: Rechtliche Angaben ergänzen</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
app/kontakt/page.tsx
Normal file
27
app/kontakt/page.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import PageHero from "@/components/PageHero";
|
||||||
|
import ContactForm from "@/components/ContactForm";
|
||||||
|
import { createMetadata } from "../seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata("Kontakt", "Kontakt zu Funktechnik Schubert aufnehmen.", "/kontakt");
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHero eyebrow="Kontakt" title="Kontakt aufnehmen">
|
||||||
|
Beschreiben Sie kurz Ihr Anliegen. Für Reparaturen nutzen Sie idealerweise die strukturierte Reparaturannahme.
|
||||||
|
</PageHero>
|
||||||
|
<section className="section">
|
||||||
|
<div className="container split">
|
||||||
|
<div>
|
||||||
|
<h2>Direkt und technisch</h2>
|
||||||
|
<p className="lead">Je genauer Gerät, Anliegen und gewünschte Unterstützung beschrieben werden, desto gezielter kann die Rückmeldung erfolgen.</p>
|
||||||
|
</div>
|
||||||
|
<div className="panel">
|
||||||
|
<ContactForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
22
app/layout.tsx
Normal file
22
app/layout.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import "./globals.css";
|
||||||
|
import { createMetadata } from "./seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata(
|
||||||
|
"Funktechnik Schubert",
|
||||||
|
"Service, Reparatur und technische Unterstützung für Funkgeräte und Kommunikationstechnik.",
|
||||||
|
);
|
||||||
|
|
||||||
|
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||||
|
return (
|
||||||
|
<html lang="de">
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
<main>{children}</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
33
app/leistungen/page.tsx
Normal file
33
app/leistungen/page.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import PageHero from "@/components/PageHero";
|
||||||
|
import ServiceCard from "@/components/ServiceCard";
|
||||||
|
import { createMetadata } from "../seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata("Leistungen", "Funkgeräte-Service, Diagnose, Abgleich und Dokumentation für Kommunikationstechnik.", "/leistungen");
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
["Funkgeräte-Service", "Prüfung, Wartung und technische Beurteilung von Funkgeräten mit Fokus auf nachvollziehbare Fehlerbilder."],
|
||||||
|
["CB-Funk", "Service für klassische und moderne CB-Funkgeräte, inklusive Empfangs-, Sende- und Modulationsproblemen."],
|
||||||
|
["Amateurfunk", "Unterstützung bei ausgewählter Amateurfunktechnik, Abgleichfragen und gerätespezifischen Fehlern."],
|
||||||
|
["Betriebsfunk", "Technische Einschätzung und Prüfung von betriebsnaher Kommunikationstechnik im Rahmen der Werkstattmöglichkeiten."],
|
||||||
|
["Fehlersuche", "Strukturierte Diagnose bei Aussetzern, Störungen, instabiler Versorgung oder auffälligem Verhalten."],
|
||||||
|
["Modulationsprobleme", "Analyse von leiser, verzerrter oder fehlender Modulation sowie Prüfung relevanter Baugruppen."],
|
||||||
|
["PLL-/Frequenzprobleme", "Prüfung von Frequenzstabilität, Rastung, Synthesizer- und Referenzproblemen."],
|
||||||
|
["Abgleich und Prüfung", "Sorgfältiger Abgleich nach technischen Unterlagen und dokumentierte Funktionsprüfung."],
|
||||||
|
["Dokumentation", "Einbindung von Serviceunterlagen, Schaltplänen und Reparaturhinweisen in den Prüfprozess."],
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export default function ServicesPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHero eyebrow="Leistungen" title="Service für Funkgeräte und Kommunikationstechnik">
|
||||||
|
Technische Unterstützung für Geräte, bei denen Diagnose, Erfahrung und saubere Dokumentation zählen.
|
||||||
|
</PageHero>
|
||||||
|
<section className="section">
|
||||||
|
<div className="container grid three">
|
||||||
|
{services.map(([title, text]) => <ServiceCard key={title} title={title}>{text}</ServiceCard>)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
57
app/page.tsx
Normal file
57
app/page.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
import ServiceCard from "@/components/ServiceCard";
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="hero">
|
||||||
|
<div className="container hero-content">
|
||||||
|
<p className="eyebrow">Funktechnik, Elektronikservice, Werkstatt</p>
|
||||||
|
<h1>Funktechnik Schubert</h1>
|
||||||
|
<p className="lead">Service, Reparatur und technische Unterstützung für Funkgeräte und Kommunikationstechnik.</p>
|
||||||
|
<div className="hero-actions">
|
||||||
|
<Link className="button" href="/reparatur">Reparatur anfragen</Link>
|
||||||
|
<Link className="button secondary" href="/leistungen">Leistungen ansehen</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="section">
|
||||||
|
<div className="container">
|
||||||
|
<div className="section-head">
|
||||||
|
<p className="eyebrow">Leistungsbereiche</p>
|
||||||
|
<h2>Technischer Service mit sauberer Diagnose</h2>
|
||||||
|
<p className="lead">Von der ersten Fehlerbeschreibung bis zur dokumentierten Prüfung: Funktechnik Schubert verbindet Werkstatterfahrung mit strukturierter Kommunikation.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid three">
|
||||||
|
<ServiceCard title="Funkgeräte-Service">Prüfung, Abgleich und Service für CB-Funk, Amateurfunk und ausgewählte Kommunikationstechnik.</ServiceCard>
|
||||||
|
<ServiceCard title="Reparatur & Diagnose">Systematische Fehlersuche bei Empfang, Modulation, PLL, Frequenzstabilität und Stromversorgung.</ServiceCard>
|
||||||
|
<ServiceCard title="Serviceunterlagen">Sorgfältiger Umgang mit Schaltplänen, Service Manuals und gerätespezifischen Dokumentationen.</ServiceCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="section dark">
|
||||||
|
<div className="container split">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">Persönlicher Support</p>
|
||||||
|
<h2>Direkte technische Einschätzung statt anonymer Abwicklung</h2>
|
||||||
|
<p className="lead">Viele Fehlerbilder lassen sich bereits mit einer klaren Beschreibung eingrenzen. Die Reparaturannahme fragt deshalb die wichtigsten technischen Details strukturiert ab.</p>
|
||||||
|
<div className="actions">
|
||||||
|
<Link className="button" href="/reparatur">Reparaturformular öffnen</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<h3>Warum Funktechnik Schubert?</h3>
|
||||||
|
<ul className="list">
|
||||||
|
<li>Technischer Fokus auf Funkgeräte und Kommunikationstechnik</li>
|
||||||
|
<li>Nachvollziehbare Diagnose statt pauschaler Austauschlogik</li>
|
||||||
|
<li>Klare Rückmeldung zu Aufwand, Zustand und nächsten Schritten</li>
|
||||||
|
<li>Vorbereitung für strukturierte Service- und Dokumentationsprozesse</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
33
app/reparatur/page.tsx
Normal file
33
app/reparatur/page.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import PageHero from "@/components/PageHero";
|
||||||
|
import RepairForm from "@/components/RepairForm";
|
||||||
|
import { createMetadata } from "../seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata("Reparaturannahme", "Reparaturanfrage für Funkgeräte strukturiert vorbereiten.", "/reparatur");
|
||||||
|
|
||||||
|
export default function RepairPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHero eyebrow="Reparaturannahme" title="Reparatur anfragen">
|
||||||
|
Beschreiben Sie Gerät, Fehlerbild und bisherige Vorarbeiten. Die Anfrage wird strukturiert erfasst und für eine spätere technische Übergabe vorbereitet.
|
||||||
|
</PageHero>
|
||||||
|
<section className="section">
|
||||||
|
<div className="container split">
|
||||||
|
<div>
|
||||||
|
<h2>Vor der Einsendung</h2>
|
||||||
|
<p className="lead">Bitte senden Sie Geräte erst nach Rückmeldung ein. Eine klare Fehlerbeschreibung hilft, den Aufwand besser einzuschätzen.</p>
|
||||||
|
<ul className="list">
|
||||||
|
<li>Hersteller, Modell und Seriennummer bereithalten</li>
|
||||||
|
<li>Fehler möglichst reproduzierbar beschreiben</li>
|
||||||
|
<li>Vorarbeiten und geöffnete Geräte ehrlich angeben</li>
|
||||||
|
<li>Zubehör nur nach Absprache mitsenden</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="panel">
|
||||||
|
<RepairForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
12
app/robots.ts
Normal file
12
app/robots.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import type { MetadataRoute } from "next";
|
||||||
|
import { siteUrl } from "./seo";
|
||||||
|
|
||||||
|
export default function robots(): MetadataRoute.Robots {
|
||||||
|
return {
|
||||||
|
rules: {
|
||||||
|
userAgent: "*",
|
||||||
|
allow: "/",
|
||||||
|
},
|
||||||
|
sitemap: new URL("/sitemap.xml", siteUrl).toString(),
|
||||||
|
};
|
||||||
|
}
|
||||||
37
app/seo.ts
Normal file
37
app/seo.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
|
||||||
|
const siteName = "Funktechnik Schubert";
|
||||||
|
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3010";
|
||||||
|
const keywords = [
|
||||||
|
"Funktechnik Schubert",
|
||||||
|
"Funkgeräte Reparatur",
|
||||||
|
"CB Funk Service",
|
||||||
|
"Amateurfunk Reparatur",
|
||||||
|
"Funkgeräte Abgleich",
|
||||||
|
"Funktechnik Service",
|
||||||
|
"Kommunikationstechnik",
|
||||||
|
];
|
||||||
|
|
||||||
|
export function createMetadata(title: string, description: string, path = "/"): Metadata {
|
||||||
|
const url = new URL(path, siteUrl).toString();
|
||||||
|
const fullTitle = title === siteName ? title : `${title} | ${siteName}`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: fullTitle,
|
||||||
|
description,
|
||||||
|
keywords,
|
||||||
|
alternates: {
|
||||||
|
canonical: url,
|
||||||
|
},
|
||||||
|
openGraph: {
|
||||||
|
type: "website",
|
||||||
|
locale: "de_DE",
|
||||||
|
url,
|
||||||
|
siteName,
|
||||||
|
title: fullTitle,
|
||||||
|
description,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export { siteName, siteUrl };
|
||||||
22
app/sitemap.ts
Normal file
22
app/sitemap.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import type { MetadataRoute } from "next";
|
||||||
|
import { siteUrl } from "./seo";
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
"",
|
||||||
|
"/leistungen",
|
||||||
|
"/funkgeraete-service",
|
||||||
|
"/reparatur",
|
||||||
|
"/ueber-uns",
|
||||||
|
"/kontakt",
|
||||||
|
"/impressum",
|
||||||
|
"/datenschutz",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function sitemap(): MetadataRoute.Sitemap {
|
||||||
|
return routes.map((route) => ({
|
||||||
|
url: new URL(route, siteUrl).toString(),
|
||||||
|
lastModified: new Date(),
|
||||||
|
changeFrequency: route === "" ? "weekly" : "monthly",
|
||||||
|
priority: route === "" ? 1 : 0.7,
|
||||||
|
}));
|
||||||
|
}
|
||||||
27
app/ueber-uns/page.tsx
Normal file
27
app/ueber-uns/page.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import PageHero from "@/components/PageHero";
|
||||||
|
import { createMetadata } from "../seo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = createMetadata("Über uns", "Funktechnik Schubert steht für technischen Service und klare Kommunikation.", "/ueber-uns");
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHero eyebrow="Über uns" title="Technik verstehen, Fehler nachvollziehbar lösen">
|
||||||
|
Funktechnik Schubert richtet sich an Kunden, die bei Funkgeräten und Kommunikationstechnik eine persönliche, technische Einschätzung suchen.
|
||||||
|
</PageHero>
|
||||||
|
<section className="section">
|
||||||
|
<div className="container grid two">
|
||||||
|
<article className="card">
|
||||||
|
<h2>Arbeitsweise</h2>
|
||||||
|
<p>Im Mittelpunkt stehen saubere Diagnose, transparente Kommunikation und der respektvolle Umgang mit bestehenden Geräten und Serviceunterlagen.</p>
|
||||||
|
</article>
|
||||||
|
<article className="card">
|
||||||
|
<h2>Fokus</h2>
|
||||||
|
<p>Der Schwerpunkt liegt auf Funktechnik, Elektronikservice, Abgleichfragen und technischer Unterstützung rund um Kommunikationstechnik.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
61
components/ContactForm.tsx
Normal file
61
components/ContactForm.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, type FormEvent } from "react";
|
||||||
|
|
||||||
|
export default function ContactForm() {
|
||||||
|
const [message, setMessage] = useState("");
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [pending, setPending] = useState(false);
|
||||||
|
|
||||||
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
||||||
|
event.preventDefault();
|
||||||
|
setError("");
|
||||||
|
setMessage("");
|
||||||
|
const form = new FormData(event.currentTarget);
|
||||||
|
const name = String(form.get("name") ?? "").trim();
|
||||||
|
const email = String(form.get("email") ?? "").trim();
|
||||||
|
const text = String(form.get("message") ?? "").trim();
|
||||||
|
|
||||||
|
if (!name || !email.includes("@") || text.length < 10 || form.get("privacy") !== "on") {
|
||||||
|
setError("Bitte füllen Sie alle Pflichtfelder aus und bestätigen Sie die Datenschutz-Hinweise.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPending(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/contact", { method: "POST", body: form });
|
||||||
|
const result = await response.json() as { message?: string };
|
||||||
|
if (!response.ok) throw new Error(result.message ?? "Nachricht konnte nicht gesendet werden.");
|
||||||
|
event.currentTarget.reset();
|
||||||
|
setMessage(result.message ?? "Ihre Nachricht wurde vorbereitet.");
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Nachricht konnte nicht gesendet werden.");
|
||||||
|
} finally {
|
||||||
|
setPending(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className="form" onSubmit={submit} noValidate>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="name">Name</label>
|
||||||
|
<input id="name" name="name" />
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="email">E-Mail</label>
|
||||||
|
<input id="email" name="email" type="email" />
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="message">Nachricht</label>
|
||||||
|
<textarea id="message" name="message" />
|
||||||
|
</div>
|
||||||
|
<label className="checkbox">
|
||||||
|
<input type="checkbox" name="privacy" />
|
||||||
|
<span>Ich stimme zu, dass meine Angaben zur Bearbeitung der Kontaktanfrage verarbeitet werden.</span>
|
||||||
|
</label>
|
||||||
|
{error && <p className="error">{error}</p>}
|
||||||
|
{message && <p className="success">{message}</p>}
|
||||||
|
<button className="button" type="submit" disabled={pending}>{pending ? "Wird gesendet..." : "Nachricht senden"}</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
26
components/Footer.tsx
Normal file
26
components/Footer.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="footer">
|
||||||
|
<div className="container footer-grid">
|
||||||
|
<div>
|
||||||
|
<h3>Funktechnik Schubert</h3>
|
||||||
|
<p>Service, Reparatur und technische Unterstützung für Funkgeräte und Kommunikationstechnik.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Service</h3>
|
||||||
|
<p><Link href="/leistungen">Leistungen</Link></p>
|
||||||
|
<p><Link href="/funkgeraete-service">Funkgeräte-Service</Link></p>
|
||||||
|
<p><Link href="/reparatur">Reparaturannahme</Link></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Rechtliches</h3>
|
||||||
|
<p><Link href="/impressum">Impressum</Link></p>
|
||||||
|
<p><Link href="/datenschutz">Datenschutz</Link></p>
|
||||||
|
<p><Link href="/kontakt">Kontakt</Link></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
components/Header.tsx
Normal file
27
components/Header.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
["Leistungen", "/leistungen"],
|
||||||
|
["Funkgeräte-Service", "/funkgeraete-service"],
|
||||||
|
["Reparatur", "/reparatur"],
|
||||||
|
["Über uns", "/ueber-uns"],
|
||||||
|
["Kontakt", "/kontakt"],
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
return (
|
||||||
|
<header className="site-header">
|
||||||
|
<div className="container header-inner">
|
||||||
|
<Link href="/" className="brand" aria-label="Funktechnik Schubert Startseite">
|
||||||
|
<span className="brand-mark" aria-hidden="true" />
|
||||||
|
<span>Funktechnik Schubert</span>
|
||||||
|
</Link>
|
||||||
|
<nav className="nav" aria-label="Hauptnavigation">
|
||||||
|
{navigation.map(([label, href]) => (
|
||||||
|
<Link key={href} href={href}>{label}</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
19
components/PageHero.tsx
Normal file
19
components/PageHero.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
eyebrow?: string;
|
||||||
|
title: string;
|
||||||
|
children: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function PageHero({ eyebrow, title, children }: Props) {
|
||||||
|
return (
|
||||||
|
<section className="section dark">
|
||||||
|
<div className="container">
|
||||||
|
{eyebrow && <p className="eyebrow">{eyebrow}</p>}
|
||||||
|
<h1>{title}</h1>
|
||||||
|
<p className="lead">{children}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
92
components/RepairForm.tsx
Normal file
92
components/RepairForm.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, type FormEvent } from "react";
|
||||||
|
|
||||||
|
type Errors = Partial<Record<"name" | "email" | "manufacturer" | "model" | "description" | "privacy", string>>;
|
||||||
|
|
||||||
|
export default function RepairForm() {
|
||||||
|
const [errors, setErrors] = useState<Errors>({});
|
||||||
|
const [status, setStatus] = useState("");
|
||||||
|
const [pending, setPending] = useState(false);
|
||||||
|
|
||||||
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
||||||
|
event.preventDefault();
|
||||||
|
setStatus("");
|
||||||
|
const form = new FormData(event.currentTarget);
|
||||||
|
const nextErrors: Errors = {};
|
||||||
|
|
||||||
|
if (!String(form.get("name") ?? "").trim()) nextErrors.name = "Bitte geben Sie Ihren Namen ein.";
|
||||||
|
if (!String(form.get("email") ?? "").includes("@")) nextErrors.email = "Bitte geben Sie eine gültige E-Mail-Adresse ein.";
|
||||||
|
if (!String(form.get("manufacturer") ?? "").trim()) nextErrors.manufacturer = "Bitte nennen Sie den Hersteller.";
|
||||||
|
if (!String(form.get("model") ?? "").trim()) nextErrors.model = "Bitte nennen Sie das Modell.";
|
||||||
|
if (String(form.get("description") ?? "").trim().length < 20) nextErrors.description = "Bitte beschreiben Sie den Fehler mit mindestens 20 Zeichen.";
|
||||||
|
if (form.get("privacy") !== "on") nextErrors.privacy = "Bitte stimmen Sie der Verarbeitung Ihrer Angaben zu.";
|
||||||
|
|
||||||
|
setErrors(nextErrors);
|
||||||
|
if (Object.keys(nextErrors).length > 0) return;
|
||||||
|
|
||||||
|
setPending(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/repair", {
|
||||||
|
method: "POST",
|
||||||
|
body: form,
|
||||||
|
});
|
||||||
|
const result = await response.json() as { message?: string };
|
||||||
|
if (!response.ok) throw new Error(result.message ?? "Anfrage konnte nicht gesendet werden.");
|
||||||
|
event.currentTarget.reset();
|
||||||
|
setStatus(result.message ?? "Ihre Reparaturanfrage wurde vorbereitet.");
|
||||||
|
} catch (error) {
|
||||||
|
setStatus(error instanceof Error ? error.message : "Anfrage konnte nicht gesendet werden.");
|
||||||
|
} finally {
|
||||||
|
setPending(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className="form" onSubmit={submit} noValidate>
|
||||||
|
<div className="grid two">
|
||||||
|
<Field label="Name" name="name" error={errors.name} />
|
||||||
|
<Field label="E-Mail" name="email" type="email" error={errors.email} />
|
||||||
|
<Field label="Telefon" name="phone" />
|
||||||
|
<Field label="Hersteller" name="manufacturer" error={errors.manufacturer} />
|
||||||
|
<Field label="Modell" name="model" error={errors.model} />
|
||||||
|
<Field label="Seriennummer optional" name="serialNumber" />
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="opened">Wurde das Gerät bereits geöffnet?</label>
|
||||||
|
<select id="opened" name="opened" defaultValue="unknown">
|
||||||
|
<option value="unknown">Bitte auswählen</option>
|
||||||
|
<option value="no">Nein</option>
|
||||||
|
<option value="yes">Ja</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="previousWork">Gibt es Vorarbeiten?</label>
|
||||||
|
<textarea id="previousWork" name="previousWork" placeholder="z. B. Bauteile getauscht, Abgleich versucht, Fremdwerkstatt" />
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="description">Fehlerbeschreibung</label>
|
||||||
|
<textarea id="description" name="description" placeholder="Bitte Gerät, Fehlerbild und bisherige Beobachtungen beschreiben." />
|
||||||
|
{errors.description && <span className="error">{errors.description}</span>}
|
||||||
|
</div>
|
||||||
|
<p className="notice">Datei- und Bild-Upload ist für eine spätere Ausbaustufe vorbereitet. Bitte senden Sie Bilder aktuell erst nach Rückmeldung.</p>
|
||||||
|
<label className="checkbox">
|
||||||
|
<input type="checkbox" name="privacy" />
|
||||||
|
<span>Ich stimme zu, dass meine Angaben zur Bearbeitung der Reparaturanfrage verarbeitet werden.</span>
|
||||||
|
</label>
|
||||||
|
{errors.privacy && <span className="error">{errors.privacy}</span>}
|
||||||
|
{status && <p className="success">{status}</p>}
|
||||||
|
<button className="button" type="submit" disabled={pending}>{pending ? "Wird gesendet..." : "Reparatur anfragen"}</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Field({ label, name, type = "text", error }: { label: string; name: string; type?: string; error?: string }) {
|
||||||
|
return (
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor={name}>{label}</label>
|
||||||
|
<input id={name} name={name} type={type} />
|
||||||
|
{error && <span className="error">{error}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
15
components/ServiceCard.tsx
Normal file
15
components/ServiceCard.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title: string;
|
||||||
|
children: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ServiceCard({ title, children }: Props) {
|
||||||
|
return (
|
||||||
|
<article className="card">
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<p>{children}</p>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
docker-compose.yml
Normal file
14
docker-compose.yml
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
services:
|
||||||
|
funktechnik-website:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: funktechnik-website
|
||||||
|
restart: unless-stopped
|
||||||
|
environment:
|
||||||
|
NODE_ENV: production
|
||||||
|
NEXT_PUBLIC_SITE_URL: ${NEXT_PUBLIC_SITE_URL:-http://localhost:3010}
|
||||||
|
OLYMPUS_INTAKE_API_URL: ${OLYMPUS_INTAKE_API_URL:-}
|
||||||
|
OLYMPUS_INTAKE_API_TOKEN: ${OLYMPUS_INTAKE_API_TOKEN:-}
|
||||||
|
ports:
|
||||||
|
- "3010:3010"
|
||||||
9
eslint.config.mjs
Normal file
9
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
|
||||||
|
]);
|
||||||
6
next-env.d.ts
vendored
Normal file
6
next-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
/// <reference types="next" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
import "./.next/types/routes.d.ts";
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||||
8
next.config.ts
Normal file
8
next.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
output: "standalone",
|
||||||
|
poweredByHeader: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
18
nginx.example.conf
Normal file
18
nginx.example.conf
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name funktechnik-schubert.de www.funktechnik-schubert.de;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_pass http://127.0.0.1:3010;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection "upgrade";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# HTTPS sollte produktiv z. B. mit Certbot aktiviert werden:
|
||||||
|
# certbot --nginx -d funktechnik-schubert.de -d www.funktechnik-schubert.de
|
||||||
6156
package-lock.json
generated
Normal file
6156
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
24
package.json
Normal file
24
package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "funktechnik-schubert-website",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev -p 3010",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start -p 3010",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "16.2.10",
|
||||||
|
"react": "19.2.3",
|
||||||
|
"react-dom": "19.2.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.10.0",
|
||||||
|
"@types/react": "^19.2.7",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-config-next": "16.2.10",
|
||||||
|
"typescript": "^5.9.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
31
public/workbench-signal.svg
Normal file
31
public/workbench-signal.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="Technischer Arbeitsplatz mit Signalraster">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="panel" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#1d3956"/>
|
||||||
|
<stop offset="1" stop-color="#0a1525"/>
|
||||||
|
</linearGradient>
|
||||||
|
<pattern id="grid" width="54" height="54" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M54 0H0v54" fill="none" stroke="#2f5578" stroke-width="1" opacity=".32"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="1600" height="1000" fill="url(#panel)"/>
|
||||||
|
<rect width="1600" height="1000" fill="url(#grid)"/>
|
||||||
|
<g opacity=".56" fill="none" stroke="#16b6d9" stroke-width="6">
|
||||||
|
<path d="M1080 250c110 96 110 254 0 350"/>
|
||||||
|
<path d="M1160 170c160 142 160 368 0 510"/>
|
||||||
|
<path d="M1245 90c212 188 212 482 0 670"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(720 350)">
|
||||||
|
<rect x="0" y="0" width="420" height="220" rx="18" fill="#0d1a2c" stroke="#5a7796" stroke-width="4"/>
|
||||||
|
<rect x="34" y="36" width="190" height="42" rx="5" fill="#152b43" stroke="#16b6d9" stroke-width="3"/>
|
||||||
|
<circle cx="310" cy="74" r="34" fill="#152b43" stroke="#f28c28" stroke-width="5"/>
|
||||||
|
<circle cx="310" cy="74" r="10" fill="#f28c28"/>
|
||||||
|
<path d="M52 140h82l24-42 37 86 38-64h122" stroke="#16b6d9" stroke-width="5"/>
|
||||||
|
<rect x="54" y="178" width="286" height="14" rx="7" fill="#5a7796"/>
|
||||||
|
</g>
|
||||||
|
<g opacity=".5" stroke="#f28c28" stroke-width="5">
|
||||||
|
<path d="M250 705h380"/>
|
||||||
|
<path d="M250 745h300"/>
|
||||||
|
<path d="M250 785h340"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
41
tsconfig.json
Normal file
41
tsconfig.json
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"allowJs": false,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue