Update src/app/page.tsx

This commit is contained in:
2026-04-10 06:55:19 +00:00
parent 847f0d91f7
commit bc1b6b2059

View File

@@ -31,120 +31,45 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "#hero",
},
{
name: "Funktionsweise",
id: "#features",
},
{
name: "Vorteile",
id: "#metrics",
},
{
name: "FAQ",
id: "#faq",
},
{ name: "Home", id: "#hero" },
{ name: "Definition", id: "#hero" },
{ name: "Vorteile", id: "#about" },
{ name: "Funktionsweise", id: "#features" },
{ name: "KPIs", id: "#metrics" },
{ name: "FAQ", id: "#faq" },
{ name: "Kontakt", id: "#contact" }
]}
brandName="DigiFlow"
button={{
text: "Kontakt",
href: "#contact",
}}
text: "Kontakt", href: "#contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "gradient-bars",
}}
title="Marketing Automation: Effizienz im digitalen Marketing"
description="Erfahren Sie, wie Sie mit Marketing Automation Ihre Prozesse skalieren, Kunden individuell ansprechen und durch datenbasierte Workflows echtes Wachstum erzielen."
variant: "gradient-bars"}}
title="Marketing Automation: Bedeutung & Anwendung"
description="Marketing Automation bezeichnet den Einsatz von Software zur Automatisierung repetitiver Marketingprozesse. Durch datenbasierte Workflows erreichen Sie Kunden entlang ihrer gesamten Customer Journey mit der richtigen Nachricht zum richtigen Zeitpunkt."
buttons={[
{
text: "Mehr erfahren",
href: "#about",
},
{ text: "Mehr erfahren", href: "#about" },
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-high-end-office-workspace-with-advanced-technology-enhance-efficiency_482257-119656.jpg?_wi=1"
imageAlt="Marketing Automation Dashboard"
imageAlt="Marketing Automation Konzept"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/two-mature-businessman-businesswoman-standing-glass-office_23-2147923342.jpg",
alt: "Sarah",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-3354.jpg",
alt: "Markus",
},
{
src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
alt: "Elena",
},
{
src: "http://img.b2bpic.net/free-photo/happy-business-woman-keeping-hands-hips-outdoors_1262-20194.jpg",
alt: "Thomas",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-mature-woman-smiling_23-2148407645.jpg",
alt: "Julia",
},
]}
avatarText="Mehr als 500+ zufriedene Kunden"
marqueeItems={[
{
type: "text-icon",
text: "HubSpot Partner",
icon: Check,
},
{
type: "text-icon",
text: "Salesforce Expert",
icon: Check,
},
{
type: "text-icon",
text: "Data Analytics",
icon: Check,
},
{
type: "text-icon",
text: "Email Marketing",
icon: Check,
},
{
type: "text-icon",
text: "Lead Nurturing",
icon: Check,
},
]}
avatars={[]}
avatarText=""
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Datenbasierte Automation"
title="Wichtigkeit & Nutzen"
metrics={[
{
icon: Clock,
label: "Zeitersparnis",
value: "70%",
},
{
icon: TrendingUp,
label: "Conversion",
value: "+45%",
},
{
icon: Users,
label: "Kundenbindung",
value: "2x",
},
{ icon: Clock, label: "Zeitersparnis", value: "Hoch" },
{ icon: TrendingUp, label: "Conversion-Steigerung", value: "Signifikant" },
{ icon: Users, label: "Skalierbarkeit", value: "Maximal" },
]}
metricsAnimation="slide-up"
/>
@@ -157,46 +82,28 @@ export default function LandingPage() {
useInvertedBackground={false}
negativeCard={{
items: [
"Organisatorische Komplexität",
"Abhängigkeit von Datenqualität",
"Datenschutz & Compliance",
"Implementierungskosten",
"Implementierungskosten", "Abhängigkeit von Datenqualität", "Organisatorische Komplexität", "Datenschutz-Anforderungen"
],
}}
positiveCard={{
items: [
"Zeitersparnis durch Automatisierung",
"Personalisierte User Experience",
"Skalierbarkeit der Prozesse",
"Transparente Messbarkeit",
"Effizienzsteigerung", "Personalisierung in großem Stil", "Bessere Lead-Qualifizierung", "Optimierte Customer Journey"
],
}}
title="Vorteile vs. Herausforderungen"
description="Erfolgreiche Marketing Automation erfordert eine klare Balance zwischen Effizienz und strategischer Planung."
title="Funktionsweise & Herausforderungen"
description="Marketing Automation kombiniert Technologie und Strategie, um Kundenbeziehungen effizient zu verwalten, erfordert jedoch eine sorgfältige Implementierung und Datenpflege."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
useInvertedBackground={false}
title="Erfolg messen"
tag="Marketing KPIs"
title="KPIs & Use Cases"
tag="Erfolgsmessung"
metrics={[
{
id: "1",
value: "Conversion Rate",
description: "Erfassung der Abschlusswahrscheinlichkeit",
},
{
id: "2",
value: "ROI",
description: "Messung der Rentabilität Ihrer Kampagnen",
},
{
id: "3",
value: "CLV",
description: "Customer Lifetime Value Entwicklung",
},
{ id: "1", value: "Lead-to-Customer", description: "Qualitätsmessung entlang des Funnels." },
{ id: "2", value: "ROI", description: "Rentabilität der automatisierten Kampagnen." },
{ id: "3", value: "CLV", description: "Entwicklung des Customer Lifetime Value." },
]}
metricsAnimation="slide-up"
/>
@@ -206,65 +113,9 @@ export default function LandingPage() {
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Müller",
date: "10.02.2024",
title: "Marketingleitung",
quote: "Die Automatisierung unserer Prozesse hat unser Team nachhaltig entlastet.",
tag: "Top Bewertung",
avatarSrc: "http://img.b2bpic.net/free-photo/two-mature-businessman-businesswoman-standing-glass-office_23-2147923342.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-office-workspace-with-advanced-technology-enhance-efficiency_482257-119656.jpg?_wi=2",
imageAlt: "modern marketing automation dashboard analytics",
},
{
id: "2",
name: "Markus Weber",
date: "15.03.2024",
title: "Geschäftsführer",
quote: "Dank der neuen Workflows konnten wir unsere Lead-Qualität deutlich steigern.",
tag: "Strategischer Partner",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-3354.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/two-mature-businessman-businesswoman-standing-glass-office_23-2147923342.jpg",
imageAlt: "professional business leader portrait studio",
},
{
id: "3",
name: "Elena Schmidt",
date: "02.04.2024",
title: "E-Commerce Managerin",
quote: "Die Warenkorbabbruch-Kampagnen sind unser stärkster Umsatzhebel geworden.",
tag: "ROI Fokus",
avatarSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-3354.jpg",
imageAlt: "diverse professional business consultant portrait",
},
{
id: "4",
name: "Thomas Becker",
date: "20.05.2024",
title: "Sales Lead",
quote: "Die nahtlose Vertriebsübergabe hat unsere Sales Cycles extrem verkürzt.",
tag: "Sales Excellence",
avatarSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-keeping-hands-hips-outdoors_1262-20194.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
imageAlt: "confident young business professional portrait",
},
{
id: "5",
name: "Julia Wagner",
date: "05.06.2024",
title: "Digitale Transformation",
quote: "Ein sehr professioneller Ansatz mit messbaren Ergebnissen nach kurzer Zeit.",
tag: "Expertise",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-mature-woman-smiling_23-2148407645.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-keeping-hands-hips-outdoors_1262-20194.jpg",
imageAlt: "professional manager headshot bright office",
},
]}
title="Unsere Expertise im Einsatz"
description="Was Kunden über die Zusammenarbeit mit unserer Agentur sagen."
testimonials={[]}
title="Zusammenfassung"
description="Marketing Automation ist kein kurzfristiger Trend, sondern ein essenzieller Bestandteil moderner Marketingstrategien, um in einer digitalen Welt wettbewerbsfähig zu bleiben."
/>
</div>
@@ -273,26 +124,10 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "Was ist Marketing Automation einfach erklärt?",
content: "Marketing Automation steuert Marketingprozesse automatisch durch Software, um Nutzerverhalten intelligent entlang der Customer Journey zu nutzen.",
},
{
id: "2",
title: "Ist Marketing Automation sinnvoll?",
content: "Ja, es erhöht die Effizienz massiv, verbessert die Kundenbindung und steigert den Umsatz durch personalisierte Kommunikation.",
},
{
id: "3",
title: "Wie DSGVO-konform ist das?",
content: "Bei korrekter Konfiguration inklusive Opt-in, AVV-Verträgen und transparenter Datenschutzerklärung ist es vollständig DSGVO-konform.",
},
{
id: "4",
title: "Welches Tool ist das richtige?",
content: "Das hängt von Ihren Zielen ab. Wir empfehlen Hubspot oder Salesforce für skalierbare Enterprise-Anforderungen.",
},
{ id: "1", title: "Was gehört zum Customer Journey Prozess?", content: "Von der ersten Aufmerksamkeit bis zur loyalen Kundenbindung deckt Automation die Phasen Awareness, Consideration, Decision und Retention ab." },
{ id: "2", title: "Welche Use Cases gibt es?", content: "Typische Beispiele sind Welcome-Serien, Lead-Nurturing, Warenkorbabbruch-Kampagnen und personalisierte Newsletter." },
{ id: "3", title: "Wie starte ich die Implementierung?", content: "Starten Sie mit einer Analyse Ihrer Prozesse, wählen Sie das passende Tool und definieren Sie klare Workflows vor der technischen Umsetzung." },
{ id: "4", title: "Warum sind Daten so wichtig?", content: "Ohne saubere Daten ist Automatisierung ineffektiv. Daten bilden das Fundament für die Personalisierung und die Entscheidungsfindung der Software." },
]}
title="Häufige Fragen"
description="Alles, was Sie über den Einstieg in die Marketing Automatisierung wissen müssen."
@@ -303,58 +138,16 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
tag="Kontakt"
title="Starten Sie Ihre Automation"
description="Bereit für den nächsten Schritt in der Digitalisierung? Lassen Sie uns gemeinsam Ihre Prozesse automatisieren."
description="Haben Sie Fragen zur Umsetzung? Wir unterstützen Sie gerne bei der Skalierung Ihres digitalen Marketings."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Unternehmen",
items: [
{
label: "Über uns",
href: "#",
},
{
label: "Karriere",
href: "#",
},
],
},
{
title: "Dienstleistungen",
items: [
{
label: "Marketing Automation",
href: "#",
},
{
label: "Digitalisierung",
href: "#",
},
],
},
{
title: "Rechtliches",
items: [
{
label: "Datenschutz",
href: "#",
},
{
label: "Impressum",
href: "#",
},
],
},
]}
columns={[]}
logoText="DigiFlow"
copyrightText="© 2025 DigiFlow Agency"
/>
@@ -362,4 +155,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}