diff --git a/astro.config.mjs b/astro.config.mjs index fad7973..559722b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -2,4 +2,9 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ site: 'https://larpaso.de', + redirects: { + '/leistungen': '/#leistungen', + '/ueber-uns': '/#kontakt', + '/kontakt': '/#kontakt', + }, }); diff --git a/public/logo.jpg b/public/logo.jpg new file mode 100644 index 0000000..07ddc78 Binary files /dev/null and b/public/logo.jpg differ diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 70a4a52..c836657 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -3,76 +3,34 @@ const year = new Date().getFullYear(); --- diff --git a/src/components/Nav.astro b/src/components/Nav.astro index f3f3102..e4ac64c 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -1,17 +1,18 @@ --- const navItems = [ - { href: '/', label: 'Startseite' }, - { href: '/leistungen', label: 'Leistungen' }, - { href: '/ueber-uns', label: 'Über uns' }, - { href: '/kontakt', label: 'Kontakt' }, + { href: '#warum', label: 'Warum' }, + { href: '#leistungen', label: 'Leistungen' }, + { href: '#arbeiten', label: 'Arbeiten' }, + { href: '#ablauf', label: 'Ablauf' }, + { href: '#preis', label: 'Preis' }, ]; - -const currentPath = Astro.url.pathname.replace(/\/$/, '') || '/'; --- diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 30a2ba8..c03d227 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -26,7 +26,7 @@ const { diff --git a/src/pages/datenschutz.astro b/src/pages/datenschutz.astro new file mode 100644 index 0000000..9eaf144 --- /dev/null +++ b/src/pages/datenschutz.astro @@ -0,0 +1,55 @@ +--- +import Layout from '../layouts/Layout.astro'; +--- + + +
+ +
+
+ + diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro new file mode 100644 index 0000000..e22da5f --- /dev/null +++ b/src/pages/impressum.astro @@ -0,0 +1,58 @@ +--- +import Layout from '../layouts/Layout.astro'; +--- + + +
+ +
+
+ + diff --git a/src/pages/index.astro b/src/pages/index.astro index d5f714c..7939ba9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,121 +3,1041 @@ import Layout from '../layouts/Layout.astro'; const highlights = [ { + num: 'I', title: 'Individuell entwickelt', - text: 'Keine Templates von der Stange – jede Website wird passend zu Zielen, Marke und Zielgruppe konzipiert und umgesetzt.', + text: 'Keine Templates von der Stange — jede Website wird passend zu Zielen, Marke und Zielgruppe konzipiert und umgesetzt.', }, { + num: 'II', title: 'KI-gestützte Entwicklung', text: 'Wir setzen moderne KI-Werkzeuge im Entwicklungsprozess ein, um schneller, gründlicher und zu planbaren Kosten zu liefern.', }, { + num: 'III', title: 'Technisch solide', text: 'Saubere, wartbare Umsetzung mit Blick auf Performance, Zugänglichkeit und langfristige Pflegbarkeit.', }, ]; -const steps = [ - { number: '01', title: 'Kennenlernen', text: 'Wir klären Ziele, Zielgruppe und Anforderungen in einem unverbindlichen Erstgespräch.' }, - { number: '02', title: 'Konzept & Design', text: 'Struktur, Inhalte und visuelle Richtung werden gemeinsam abgestimmt.' }, - { number: '03', title: 'Entwicklung', text: 'Umsetzung mit modernen Werkzeugen – inklusive KI-gestützter Entwicklung für mehr Tempo.' }, - { number: '04', title: 'Launch & Betreuung', text: 'Übergabe, Feinschliff und bei Bedarf laufende Weiterentwicklung.' }, +const leistungen = [ + { + num: '01', + title: 'Individuelle Websites', + text: 'Konzeption und Umsetzung von Websites, die auf Ihr Unternehmen, Ihre Zielgruppe und Ihre Ziele zugeschnitten sind — von der einfachen Unternehmenspräsenz bis zur komplexeren Webanwendung.', + }, + { + num: '02', + title: 'KI-gestützte Entwicklung', + text: 'Wir nutzen moderne KI-Werkzeuge gezielt im Entwicklungsprozess, um Umsetzungszeiten zu verkürzen und gleichzeitig Code-Qualität und Sorgfalt hochzuhalten.', + }, + { + num: '03', + title: 'Konzeption & Beratung', + text: 'Vor der Umsetzung klären wir Struktur, Inhalte und technische Anforderungen — damit die Website von Anfang an zu Ihren Zielen passt.', + }, + { + num: '04', + title: 'Redesign & Weiterentwicklung', + text: 'Bestehende Websites überarbeiten, modernisieren oder um neue Funktionen erweitern — technisch fundiert und mit klarem Fokus auf Nutzbarkeit.', + }, + { + num: '05', + title: 'Wartung & Support', + text: 'Nach dem Launch lassen wir Sie nicht allein: Updates, kleinere Anpassungen und technischer Support nach Bedarf.', + }, + { + num: '06', + title: 'Performance & Zugänglichkeit', + text: 'Websites, die schnell laden und für möglichst viele Nutzerinnen und Nutzer gut zugänglich sind — als Grundlage, nicht als nachträgliches Extra.', + }, +]; + +const nichtMachen = [ + 'Keine Onlineshops. Dafür gibt es Leute, die nichts anderes tun.', + 'Keine Fotos, die es nicht gibt: weder gekaufte Modelle in fremden Räumen noch am Rechner erfundene. Ihre Kunden sollen wiedererkennen, wo sie hinkommen.', + 'Keine Versprechen über Google-Plätze. Wer die gibt, weiß es entweder nicht besser oder hofft, dass Sie nicht nachrechnen.', + 'Keine zehn Seiten, wenn eine reicht. Die meisten Betriebe brauchen weniger, als ihnen verkauft wird.', +]; + +const mappe = [ + { + kategorie: 'Konzeptarbeit · Tanzstudio', + titel: 'Maison Verte', + text: 'Sand und Salbei. Der Stundenplan steht als Tabelle auf der Seite, nicht als Download, und die Preise auch. Für ein Studio, das ruhig wirken soll, ohne dabei alt auszusehen.', + nameHidden: false, + }, + { + kategorie: 'Konzeptarbeit · Tanzschule', + titel: 'Tanzhaus Kranich', + text: 'Dieselbe Seite zweimal, einmal kühl und einmal warm. Wir wollten wissen, was Farbe wirklich anrichtet. Der Unterschied war größer, als wir dachten. Seitdem schlagen wir Ihnen am Ende eine Fassung vor und nicht drei.', + nameHidden: false, + }, + { + kategorie: 'Konzeptarbeit · Kosmetikstudio', + titel: '', + text: 'Weich, warm, und trotzdem kein Pastellrosa. Jede Behandlung mit Dauer und Preis, Termin direkt aus der Liste heraus. Damit niemand erst anrufen muss, um zu erfahren, was etwas kostet.', + nameHidden: true, + }, +]; + +const ablaufSteps = [ + { num: '01', title: 'Kennenlernen', text: 'Wir klären Ziele, Zielgruppe und Anforderungen in einem unverbindlichen Erstgespräch.', dauer: '' }, + { num: '02', title: 'Konzept & Design', text: 'Struktur, Inhalte und visuelle Richtung werden gemeinsam abgestimmt.', dauer: '' }, + { num: '03', title: 'Entwicklung', text: 'Umsetzung mit modernen Werkzeugen — inklusive KI-gestützter Entwicklung für mehr Tempo.', dauer: '2–3 Tage' }, + { num: '04', title: 'Launch & Betreuung', text: 'Übergabe, Feinschliff und bei Bedarf laufende Weiterentwicklung.', dauer: '' }, +]; + +const faq = [ + 'Kann ich die Seite danach selbst ändern?', + 'Was, wenn mir das Ergebnis nicht gefällt?', + 'Ich habe keine guten Fotos. Ist das ein Problem?', + 'Müssen wir uns dafür treffen?', + 'Wie lange dauert es insgesamt?', + 'Was kostet es danach im Jahr?', + 'Ich habe schon eine Website. Lohnt sich das trotzdem?', ]; --- -
-
-

Digitalagentur für individuelle Websites

-

Websites, die zu Ihrem Unternehmen passen – gebaut mit KI-gestützter Entwicklung.

-

- Larpaso entwickelt individuelle Websites für Kunden aus unterschiedlichen Branchen. - Durch den gezielten Einsatz von KI in der Entwicklung liefern wir hochwertige Ergebnisse - in kürzerer Zeit – ohne Kompromisse bei Qualität und Individualität. -

-
- Projekt anfragen - Leistungen ansehen + +
+
+
+

Digitalagentur für individuelle Websites

+

Websites, die zu Ihrem Unternehmen passen.

+

+ Gebaut mit KI-gestützter Entwicklung. larpaso entwickelt individuelle + Websites für Kunden aus unterschiedlichen Branchen. Durch den gezielten Einsatz von KI + in der Entwicklung liefern wir hochwertige Ergebnisse in kürzerer Zeit, + ohne Kompromisse bei Qualität und Individualität. +

+ +
+ +
-
+ +
+
+
+

01 · Drei Plätze, dann ist Schluss

+

Wir brauchen drei Seiten, die wir herzeigen können.

+

500 € komplett, einmalig

+

+ Eine fertige Website statt eines Angebots über „Konzeptphasen“. Wir schreiben die + Texte, bauen die Seite und stellen sie online. Sie sagen uns, was Sie machen und für wen. +

+ +

+ Noch [3] von 3 Plätzen frei — Stand + [Datum]. +

+ +
    +
  • Eine Seite mit allem, was Kunden suchen: Angebot, Preise, Zeiten, Anfahrt, Kontakt
  • +
  • Auf dem Handy zuerst gebaut, nicht nachträglich zusammengeschoben
  • +
  • Impressum und Datenschutzerklärung eingebaut, Schriften auf Ihrem Server
  • +
  • Alle Texte von uns geschrieben, nach einem Gespräch mit Ihnen
  • +
  • Google-Grundlagen: Titel mit Ort, Beschreibung, Firmendaten für die Kartenanzeige
  • +
  • Einweisung, wie Sie Zeiten und Preise selbst ändern
  • +
  • Nicht enthalten: Fotoshooting, Logo-Neuentwurf, Onlineshop
  • +
  • + Nicht enthalten: Domain und Hosting. Das läuft auf Ihren Namen und kostet + [ca. Betrag] € im Jahr +
  • +
+
+ + +
+
+ + +
-
+

02 · Was uns unterscheidet

+

Individuell, KI-gestützt, technisch solide.

+

+ larpaso entwickelt individuelle Websites für Kunden, die sich von der Stange nicht + zufriedengeben wollen. +

+ +
{highlights.map((item) => ( -
+
+ {item.num}

{item.title}

{item.text}

))}
+ +
+

Lesbar schlägt vollständig.

+

+ Dieselben Angaben, zweimal. Einmal als Datei, die man erst herunterladen muss. Einmal + als Tabelle, die schon da ist. Angerufen wird nach dem zweiten Weg. +

+ +
+
+

So sieht es heute oft aus

+
+ PDF +
+

Oeffnungszeiten_2026_final_v3.pdf

+

2,4 MB · zum Herunterladen

+
+
+
+
+

So sieht es nachher aus

+
+

Öffnungszeiten

+
+ Tag +
+
+ Montag – Donnerstag9:00–18:00 +
+
+ Freitag9:00–14:00 +
+
+
+
+
-
+ +
-

So arbeiten wir

+

03 · Was Sie bekommen

+

Was wir für Sie tun können

+

+ Von der ersten Idee bis zur laufenden Betreuung: larpaso begleitet Ihr Website-Projekt + mit individueller Entwicklung und dem gezielten Einsatz von KI-Werkzeugen. +

+ +
    + {leistungen.map((item) => ( +
  • + {item.num} +
    +

    {item.title}

    +

    {item.text}

    +
    +
  • + ))} +
+ +
+

Was wir nicht machen

+
+ {nichtMachen.map((text) => ( +

— {text}

+ ))} +
+
+
+
+ + +
+
+

04 · Mappe

+

Drei Entwürfe, an denen Sie unsere Handschrift sehen.

+ +
+ {mappe.map((item) => ( +
+
+ Bildschirmfoto einsetzen +
+

{item.kategorie}

+

{item.nameHidden ? [Studio — erst nach Freigabe zeigen] : item.titel}

+

{item.text}

+
+ ))} +
+
+
+ + +
+
+

05 · So arbeiten wir

Vom ersten Gespräch bis zum Launch

-
- {steps.map((step) => ( -
- {step.number} -

{step.title}

-

{step.text}

+ +
+ {ablaufSteps.map((step) => ( +
+ {step.num} +
+

{step.title}

+

{step.text}

+
+ + {step.dauer || [Dauer?]} +
))}
-
-
-

Bereit für Ihre neue Website?

-

Lassen Sie uns über Ihr Projekt sprechen – unverbindlich und ohne Verpflichtung.

- Jetzt Kontakt aufnehmen + +
+
+
+ + Foto von Lara und Pascal einsetzen
+ zusammen, hochkant, echtes Licht +
+
+ +
+

06 · Über uns

+

Wir sind larpaso.

+

KI als Werkzeug, nicht als Ausrede.

+ +

+ Technik ändert sich schnell. Und mit ihr, was Kundinnen und Kunden von einem Betrieb + erwarten: eine Seite, die auf dem Handy funktioniert, klar sagt, worum es geht, und + nicht nach gestern aussieht. Was heute auffällt, ist in zwei Jahren Standard. Wir bauen + Websites für Menschen, die da mithalten wollen, ohne sich selbst in Technik einarbeiten + zu müssen. +

+

+ Dabei helfen uns KI-Werkzeuge. Sie nehmen uns Routine ab, damit wir Zeit haben für das, + worauf es ankommt: zuhören, mitdenken, sorgfältig arbeiten. So bleiben individuelle + Lösungen in überschaubarer Zeit und zu planbaren Kosten möglich, weder Massenware noch + Luxusgut. +

+

+ Der Name ist aus uns gebaut: Lara und Pascal. Und die + zweite Hälfte ist ein Wort: paso, spanisch für Schritt. Für uns steht es für + Fortschritt. Wir lernen weiter, entwickeln unsere Arbeit weiter und Ihre Seite gleich + mit, Schritt für Schritt. +

+ +
+

+ [Lara — drei bis vier Sätze in eigenen Worten: Was hat sie vorher gemacht, wie ist sie + dazu gekommen, was macht sie bei larpaso? Noch zu ergänzen.] +

+

+ [Pascal — drei bis vier Sätze in eigenen Worten: Was hat er vorher gemacht, wie ist er + dazu gekommen, was macht er bei larpaso? Noch zu ergänzen.] +

+
+
+ + +
+
+

07 · Bevor Sie fragen

+

Die Punkte, an denen die meisten zögern.

+ +
+ {faq.map((question, i) => ( +
+ + {question} + + +

[Antwort noch zu ergänzen]

+
+ ))} +
+
+
+ + +
+
+
+

08 · Kontakt

+

Lassen Sie uns sprechen.

+

+ Erzählen Sie uns kurz von Ihrem Projekt — wir melden uns zeitnah bei Ihnen zurück. Ein + Erstgespräch ist unverbindlich und kostet Sie nichts. +

+ +
+

Lieber anrufen

+

[Telefonnummer eintragen]

+

[Erreichbarkeit eintragen, z. B. Mo–Fr 9–18 Uhr]

+
+ +
+

Oder direkt schreiben

+

kontakt@larpaso.de

+

Antwort in der Regel am selben Tag.

+
+ +
+

Wie wir arbeiten

+

[Wie wir arbeiten — noch zu ergänzen]

+
+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +

+ Das Formular öffnet Ihr E-Mail-Programm mit fertig ausgefülltem Text. Es geht nichts an + Dritte. Wie wir mit Ihren Angaben umgehen, steht in der + Datenschutzerklärung. +

+
+
+
+ + diff --git a/src/pages/kontakt.astro b/src/pages/kontakt.astro deleted file mode 100644 index 916bd19..0000000 --- a/src/pages/kontakt.astro +++ /dev/null @@ -1,113 +0,0 @@ ---- -import Layout from '../layouts/Layout.astro'; ---- - - -
-
-
-

Kontakt

-

Lassen Sie uns sprechen.

-

- Erzählen Sie uns kurz von Ihrem Projekt – wir melden uns zeitnah bei Ihnen zurück. - Ein Erstgespräch ist unverbindlich und kostet Sie nichts. -

- -
-

Direkt erreichbar

-

kontakt@larpaso.de

-
-
- -
-
- - -
- -
- - -
- -
- - -
- - -

- Hinweis: Dieses Formular ist aktuell nur als Struktur angelegt und noch nicht an ein - Backend angebunden. -

-
-
-
-
- - diff --git a/src/pages/leistungen.astro b/src/pages/leistungen.astro deleted file mode 100644 index d5f017c..0000000 --- a/src/pages/leistungen.astro +++ /dev/null @@ -1,87 +0,0 @@ ---- -import Layout from '../layouts/Layout.astro'; - -const services = [ - { - title: 'Individuelle Websites', - text: 'Konzeption und Umsetzung von Websites, die auf Ihr Unternehmen, Ihre Zielgruppe und Ihre Ziele zugeschnitten sind – von der einfachen Unternehmenspräsenz bis zur komplexeren Webanwendung.', - }, - { - title: 'KI-gestützte Entwicklung', - text: 'Wir nutzen moderne KI-Werkzeuge gezielt im Entwicklungsprozess, um Umsetzungszeiten zu verkürzen und gleichzeitig Code-Qualität und Sorgfalt hochzuhalten.', - }, - { - title: 'Konzeption & Beratung', - text: 'Vor der Umsetzung klären wir Struktur, Inhalte und technische Anforderungen – damit die Website von Anfang an zu Ihren Zielen passt.', - }, - { - title: 'Redesign & Weiterentwicklung', - text: 'Bestehende Websites überarbeiten, modernisieren oder um neue Funktionen erweitern – technisch fundiert und mit klarem Fokus auf Nutzbarkeit.', - }, - { - title: 'Wartung & Support', - text: 'Nach dem Launch lassen wir Sie nicht allein: Updates, kleinere Anpassungen und technischer Support nach Bedarf.', - }, - { - title: 'Performance & Zugänglichkeit', - text: 'Websites, die schnell laden und für möglichst viele Nutzerinnen und Nutzer gut zugänglich sind – als Grundlage, nicht als nachträgliches Extra.', - }, -]; ---- - - -
-
-

Leistungen

-

Was wir für Sie tun können

-

- Von der ersten Idee bis zur laufenden Betreuung: Larpaso begleitet Ihr Website-Projekt - mit individueller Entwicklung und dem gezielten Einsatz von KI-Werkzeugen. -

-
-
- -
-
-
- {services.map((service) => ( -
-

{service.title}

-

{service.text}

-
- ))} -
-
-
- -
-
-

Passt das zu Ihrem Projekt?

-

Schreiben Sie uns kurz, worum es geht – wir melden uns zeitnah zurück.

- Kontakt aufnehmen -
-
-
- - diff --git a/src/pages/ueber-uns.astro b/src/pages/ueber-uns.astro deleted file mode 100644 index 2cc9b3f..0000000 --- a/src/pages/ueber-uns.astro +++ /dev/null @@ -1,87 +0,0 @@ ---- -import Layout from '../layouts/Layout.astro'; - -const values = [ - { - title: 'Individualität statt Schema F', - text: 'Jedes Projekt bekommt eine Lösung, die zu den tatsächlichen Anforderungen passt – statt eines starren Baukastens.', - }, - { - title: 'KI als Werkzeug, nicht als Ausrede', - text: 'Wir setzen KI gezielt ein, um schneller und gründlicher zu arbeiten. Verantwortung für Qualität und Ergebnis bleibt bei uns.', - }, - { - title: 'Klare, ehrliche Kommunikation', - text: 'Verständliche Erklärungen statt Fachjargon, realistische Einschätzungen statt leerer Versprechen.', - }, -]; ---- - - -
-
-

Über uns

-

Wir sind Larpaso.

-

- Larpaso entwickelt individuelle Websites für Kunden, die sich von der Stange nicht - zufriedengeben wollen. Unser Schwerpunkt liegt auf KI-gestützter Entwicklung: Wir nutzen - moderne KI-Werkzeuge, um Projekte effizienter, gründlicher und zu planbaren Kosten - umzusetzen – ohne dabei an handwerklicher Sorgfalt zu sparen. -

-

- Entstanden ist Larpaso aus der Überzeugung, dass gute Websites weder Massenware noch - Luxusgut sein müssen. Mit dem richtigen Werkzeugkasten lässt sich beides verbinden: - individuelle, durchdachte Lösungen in überschaubarer Zeit. -

-
-
- -
-
-

Wofür wir stehen

-
- {values.map((value) => ( -
-

{value.title}

-

{value.text}

-
- ))} -
-
-
- -
-
-

Lernen Sie uns kennen

-

Erzählen Sie uns von Ihrem Projekt – wir freuen uns auf den Austausch.

- Kontakt aufnehmen -
-
-
- - diff --git a/src/styles/global.css b/src/styles/global.css index 7b90951..08e8497 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -5,23 +5,28 @@ ========================================================================== */ :root { /* Farben */ - --color-bg: #fafafa; - --color-surface: #ffffff; - --color-text: #1f2430; - --color-text-muted: #5b6472; - --color-border: #e4e7ec; + --color-bg: #17130f; + --color-bg-alt: #1c1712; + --color-surface: #211b15; + --color-text: #f2ead9; + --color-text-muted: #a89a85; + --color-border: rgba(201, 168, 118, 0.2); - --color-primary: #4f46e5; - --color-primary-dark: #3730a3; - --color-primary-contrast: #ffffff; + --color-primary: #c9a876; + --color-primary-dark: #b08f5c; + --color-primary-contrast: #1a1511; - --color-accent: #14b8a6; - --color-accent-dark: #0f766e; + --color-accent: #c9a876; + --color-accent-dark: #b08f5c; - --color-success: #16a34a; - --color-danger: #dc2626; + --color-success: #7a9a6b; + --color-danger: #c97b64; + + --color-flag: #c97b64; + --color-flag-bg: rgba(201, 123, 100, 0.1); /* Typografie */ + --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-size-sm: 0.875rem; @@ -102,6 +107,7 @@ h1, h2, h3, h4 { line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; + font-family: var(--font-serif); } h1 { font-size: var(--font-size-3xl); } @@ -235,3 +241,10 @@ textarea { color: var(--color-primary); text-decoration: none; } + +/* Platzhalter fuer noch fehlende, reale Angaben (Telefonnummer, Preise, Bios etc.) */ +.placeholder { + color: var(--color-flag); + border-bottom: 1px dashed var(--color-flag); + font-style: normal; +}