Merge version_2 into main #7
143
src/app/page.tsx
143
src/app/page.tsx
@@ -7,10 +7,10 @@ import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { BarChart3, CheckCircle, Eye, FileCheck, FileText, Handshake, Instagram, Linkedin, PieChart, Rocket, Scissors, Sparkles, Star, Target, TrendingUp, Twitter, Users, Video, Zap, Youtube } from "lucide-react";
|
||||
import { BarChart3, CheckCircle, Eye, FileCheck, FileText, Handshake, Instagram, Linkedin, PieChart, Rocket, Scissors, Sparkles, Star, Target, TrendingUp, Twitter, Users, Video, Zap, Youtube, ArrowRight, Clock } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,7 +32,7 @@ export default function LandingPage() {
|
||||
navItems={[
|
||||
{ name: "Leistungen", id: "features" },
|
||||
{ name: "Über uns", id: "about" },
|
||||
{ name: "Projekte", id: "projects" },
|
||||
{ name: "Ablauf", id: "process" },
|
||||
{ name: "Kontakt", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
@@ -165,87 +165,100 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<FeatureCardTen
|
||||
<MetricCardEleven
|
||||
title="So funktioniert die Zusammenarbeit mit Zenit Studios"
|
||||
description="Unser erprobter Prozess für maximale Kampagnen-Performance und Creator-Zufriedenheit."
|
||||
tag="Ablauf"
|
||||
features={[
|
||||
description="Unser 5-Schritt-Prozess für maximale Kampagnen-Performance und Creator-Zufriedenheit."
|
||||
tag="Projektablauf"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Strategiegespräch", description: "Wir lernen deine Marke, Ziele und Zielgruppe kennen. Gemeinsam entwickeln wir eine maßgeschneiderte Influencer Marketing Strategie mit klaren KPIs und einem realistischen Budget.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/modern-strategic-planning-visualization--1773171821397-155771ff.png"
|
||||
},
|
||||
items: [
|
||||
{ icon: Target, text: "Zieldefinition und KPI-Festlegung" },
|
||||
{ icon: Users, text: "Zielgruppen-Analyse" },
|
||||
{ icon: BarChart3, text: "Budget-Planung" }
|
||||
],
|
||||
reverse: false
|
||||
id: "1", value: "01", title: "Strategiegespräch", description: "Zieldefinition, KPI-Festlegung und Zielgruppen-Analyse für deine perfekte Kampagne.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/modern-strategic-planning-visualization--1773171821397-155771ff.png", imageAlt: "Strategiegespräch"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Creator Auswahl", description: "Basierend auf deinen Anforderungen wählen wir die perfekten Influencer aus unserem Netzwerk. Jeder Creator wird geprüft auf Authentizität, Engagement-Rate und Brand-Fit.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/visual-representation-of-creator-selecti-1773171820831-7abde26a.png"
|
||||
},
|
||||
items: [
|
||||
{ icon: CheckCircle, text: "Influencer-Selektion" },
|
||||
{ icon: FileCheck, text: "Vertragsverhandlung" },
|
||||
{ icon: Handshake, text: "Briefing und Abstimmung" }
|
||||
],
|
||||
reverse: true
|
||||
id: "2", value: "02", title: "Creator Auswahl", description: "Auswahl der perfekten Influencer aus unserem Netzwerk basierend auf Brand-Fit und Engagement.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/visual-representation-of-creator-selecti-1773171820831-7abde26a.png", imageAlt: "Creator Auswahl"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Kampagnen-Produktion", description: "Unser Produktionsteam arbeitet mit den Influencern zusammen. Von Dreh bis Schnitt – wir stellen sicher, dass der Content hochwertig, authentisch und markenkonform ist.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/professional-content-production-workflow-1773171820135-dac03d99.png"
|
||||
},
|
||||
items: [
|
||||
{ icon: Video, text: "Content-Dreh und Produktion" },
|
||||
{ icon: Scissors, text: "Professionelle Bearbeitung" },
|
||||
{ icon: Sparkles, text: "Quality Assurance" }
|
||||
],
|
||||
reverse: false
|
||||
id: "3", value: "03", title: "Kampagnen-Produktion", description: "Professionelle Erstellung von hochwertigem, authentischem Content mit unserem Produktionsteam.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/professional-content-production-workflow-1773171820135-dac03d99.png", imageAlt: "Kampagnen-Produktion"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Launch & Optimierung", description: "Der Content geht live! Wir koordinieren die Veröffentlichung, optimieren in Echtzeit und maximieren die Performance durch datengesteuerte Anpassungen.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/campaign-launch-and-publication-process--1773171821219-90d6491e.png"
|
||||
},
|
||||
items: [
|
||||
{ icon: Rocket, text: "Koordinierte Veröffentlichung" },
|
||||
{ icon: TrendingUp, text: "Echtzeit-Monitoring" },
|
||||
{ icon: Zap, text: "Performance-Optimierung" }
|
||||
],
|
||||
reverse: true
|
||||
id: "4", value: "04", title: "Launch & Optimierung", description: "Koordinierte Veröffentlichung mit Echtzeit-Monitoring und Performance-Optimierung.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/campaign-launch-and-publication-process--1773171821219-90d6491e.png", imageAlt: "Launch & Optimierung"
|
||||
},
|
||||
{
|
||||
id: "5", title: "Analyse & Reporting", description: "Nach der Kampagne liefern wir ein detailliertes Analysereport mit allen wichtigen Metriken, Learnings und Empfehlungen für zukünftige Kampagnen.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/comprehensive-campaign-analysis-and-repo-1773171821866-a7938046.png"
|
||||
},
|
||||
items: [
|
||||
{ icon: BarChart3, text: "Performance-Analyse" },
|
||||
{ icon: PieChart, text: "ROI-Berechnung" },
|
||||
{ icon: FileText, text: "Detailliertes Reporting" }
|
||||
],
|
||||
reverse: false
|
||||
id: "5", value: "05", title: "Analyse & Reporting", description: "Detailliertes Analysereport mit ROI-Berechnung und Empfehlungen für zukünftige Kampagnen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/comprehensive-campaign-analysis-and-repo-1773171821866-a7938046.png", imageAlt: "Analyse & Reporting"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking" data-section="booking" className="py-16 md:py-24">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-8">
|
||||
<div className="text-center mb-12 md:mb-16">
|
||||
<div className="inline-block mb-4">
|
||||
<span className="text-sm font-medium text-primary-cta px-4 py-2 bg-primary-cta/10 rounded-full flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
Termin vereinbaren
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 text-foreground">Dein nächstes Strategiegespräch wartet</h2>
|
||||
<p className="text-lg text-foreground/70 max-w-2xl mx-auto">Buche jetzt ein kostenloses Beratungsgespräch mit unserem Team. Wir besprechen deine Ziele, Zielgruppe und entwickeln eine maßgeschneiderte Strategie für deine Kampagne.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg border border-accent/20 p-8 md:p-12 text-center">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-2xl font-semibold mb-3 text-foreground">Calendly Integration</h3>
|
||||
<p className="text-foreground/60 mb-6">Wähle einen Termin, der perfekt zu dir passt. Unser Team wird dich vor dem Gespräch kontaktieren.</p>
|
||||
<a
|
||||
href="https://calendly.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-8 py-3 bg-primary-cta hover:bg-primary-cta/90 text-white rounded-full font-medium transition-all duration-300 hover:gap-3"
|
||||
>
|
||||
Termin buchen
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10 pt-8 border-t border-accent/20">
|
||||
<div className="flex flex-col items-center">
|
||||
<Clock className="w-6 h-6 text-primary-cta mb-3" />
|
||||
<p className="font-medium text-foreground mb-1">30-60 Minuten</p>
|
||||
<p className="text-sm text-foreground/60">Flexible Termine</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<CheckCircle className="w-6 h-6 text-primary-cta mb-3" />
|
||||
<p className="font-medium text-foreground mb-1">Kostenlos</p>
|
||||
<p className="text-sm text-foreground/60">Keine versteckten Gebühren</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<Users className="w-6 h-6 text-primary-cta mb-3" />
|
||||
<p className="font-medium text-foreground mb-1">Experten-Team</p>
|
||||
<p className="text-sm text-foreground/60">Über 10 Jahre Erfahrung</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Bereit für deine nächste erfolgreiche Social Media Kampagne? Lass uns gemeinsam deine Marke mit den perfekten Creatorn verbinden und hochwertigen Content produzieren."
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{
|
||||
text: "Kostenloses Strategiegespräch buchen", href: "https://calendly.com"
|
||||
},
|
||||
{
|
||||
text: "Mehr erfahren", href: "#about"
|
||||
}
|
||||
<ContactSplitForm
|
||||
title="Fragen? Kontaktiere uns direkt."
|
||||
description="Schreib uns eine Nachricht und wir antworten so schnell wie möglich. Oder buche direkt einen Termin über Calendly."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Dein Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Deine E-Mail", required: true },
|
||||
{ name: "company", type: "text", placeholder: "Dein Unternehmen", required: false }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Erzähl uns von deinem Projekt...", rows: 5,
|
||||
required: true
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlIsq5qiq4IfbtootdlaBu0XEA/professional-contact-consultation-setup-1773171820200-5c3d2e1a.png"
|
||||
imageAlt="Kontakt"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Nachricht senden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #4b494b;
|
||||
--card: #ffffff;
|
||||
--foreground: #250c0d;
|
||||
--primary-cta: #b82b40;
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta-text: #250c0d;
|
||||
--accent: #b90941;
|
||||
--background-accent: #e8a8b6;
|
||||
--accent: #535353;
|
||||
--background-accent: #cee7ff;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user