Merge version_3 into main #2
277
src/app/page.tsx
277
src/app/page.tsx
@@ -2,163 +2,156 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Sparkles, CheckCircle, Target, Briefcase, Zap, Star, MessageCircle, Mail } from "lucide-react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="grid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Leistungen", id: "#services" },
|
||||
{ name: "Preise", id: "#pricing" },
|
||||
{ name: "Über mich", id: "#about" },
|
||||
{ name: "Bewertungen", id: "#testimonials" }
|
||||
]}
|
||||
brandName="Creative Studio"
|
||||
button={{
|
||||
text: "Kontakt aufnehmen", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Leistungen", id: "#services" },
|
||||
{ name: "Preise", id: "#pricing" },
|
||||
{ name: "Über mich", id: "#about" },
|
||||
{ name: "Referenzen", id: "#testimonials" }
|
||||
]}
|
||||
brandName="Creative Studio"
|
||||
button={{ text: "Kontakt", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Kreative Visionen, die begeistern"
|
||||
description="Ich helfe Marken dabei, durch kreatives Design und durchdachte Konzepte sichtbar zu werden. Lass uns gemeinsam dein nächstes Projekt verwirklichen."
|
||||
buttons={[
|
||||
{ text: "Projekte ansehen", href: "#services" },
|
||||
{ text: "Kontaktieren", href: "#contact" }
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1542744094-24638752d529?q=80&w=2000"
|
||||
imageAlt="Kreatives Studio Portfolio"
|
||||
avatarText="Kreative Zusammenarbeit für Marken & Einzelpersonen"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Kreative Visionen, die begeistern"
|
||||
description="Ich helfe Marken dabei, durch maßgeschneidertes Design und eine klare Strategie aus der Masse herauszustechen."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E67zmxnnLDB7GpBzRqelkFR3hh/uploaded-1779487651730-sg1h51w0.jpg", imageAlt: "Creative Studio Workspace" }
|
||||
]}
|
||||
buttons={[{ text: "Projekt starten", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: ["Keine standardisierten 08/15 Designs", "Keine fehlende Markenidentität", "Keine mangelnde Kommunikation"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: ["Individuelles Design-Konzept", "Strategischer Aufbau", "Klare visuelle Kommunikation"],
|
||||
}}
|
||||
title="Mein Arbeitsansatz"
|
||||
description="Design bedeutet für mich nicht nur Ästhetik, sondern eine funktionale Lösung für deine Ziele."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
title="Mein kreativer Prozess"
|
||||
description="Design ist mehr als nur Optik – es ist das Fundament deiner Markenidentität."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ tag: "Analyse", title: "Strategische Planung", subtitle: "Fundierte Analyse", description: "Wir identifizieren deine Zielgruppe und definieren deine Kernbotschaft.", imageSrc: "https://images.unsplash.com/photo-1542744094-24638752d529?q=80&w=600" },
|
||||
{ tag: "Kreation", title: "Visuelle Umsetzung", subtitle: "Design-Entwicklung", description: "Ich entwerfe eine einzigartige visuelle Welt, die deine Kunden überzeugt.", imageSrc: "https://images.unsplash.com/photo-1626785774573-4b799315347d?q=80&w=600" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "s1", brand: "Design", name: "Branding & CI", price: "ab 500€", rating: 5, reviewCount: "15+", imageSrc: "https://images.unsplash.com/photo-1626785774573-4b799315347d?q=80&w=800" },
|
||||
{ id: "s2", brand: "Digital", name: "Webdesign", price: "ab 800€", rating: 5, reviewCount: "20+", imageSrc: "https://images.unsplash.com/photo-1547658719-da2b51169165?q=80&w=800" },
|
||||
{ id: "s3", brand: "Print", name: "Printmedien", price: "ab 300€", rating: 5, reviewCount: "10+", imageSrc: "https://images.unsplash.com/photo-1586717791821-3f44a563daae?q=80&w=800" }
|
||||
]}
|
||||
title="Leistungsspektrum"
|
||||
description="Ich unterstütze dich von der Konzeption bis zur finalen Umsetzung deiner kreativen Projekte."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardFour
|
||||
title="Meine Services"
|
||||
description="Leistungen, die deine Marke nach vorne bringen."
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
textboxLayout="split"
|
||||
products={[
|
||||
{ id: "1", name: "Branding & Identity", price: "Individuell", variant: "Premium", imageSrc: "https://images.unsplash.com/photo-1547658719-da2b51169165?q=80&w=600" },
|
||||
{ id: "2", name: "Web Design", price: "Individuell", variant: "Digital", imageSrc: "https://images.unsplash.com/photo-1586717791821-3f44a563daae?q=80&w=600" },
|
||||
{ id: "3", name: "Print Media", price: "Individuell", variant: "Klassisch", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=600" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "starter", badge: "Start", price: "Ab 500€", subtitle: "Kleine Projekte", buttons: [{ text: "Starten", href: "#contact" }], features: ["Individuelle Analyse", "3 Designvorschläge", "Quelldaten inklusive"] },
|
||||
{ id: "pro", badge: "Premium", price: "Ab 1500€", subtitle: "Vollumfängliche Markenarbeit", buttons: [{ text: "Starten", href: "#contact" }], features: ["Umfassendes Branding", "Social Media Assets", "Priority Support"] }
|
||||
]}
|
||||
title="Investition in deine Marke"
|
||||
description="Transparente Pakete für deinen kreativen Erfolg."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Investition in Qualität"
|
||||
description="Klare Strukturen für dein nächstes Projekt."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "starter", badge: "Essential", price: "ab 500€", subtitle: "Für kleine Vorhaben", buttons: [{ text: "Starten", href: "#contact" }], features: ["Individuelle Analyse", "3 Design-Konzepte", "Quelldaten inklusive"] },
|
||||
{ id: "pro", badge: "Full Service", price: "ab 1500€", subtitle: "Vollumfängliche Beratung", buttons: [{ text: "Starten", href: "#contact" }], features: ["Umfassendes Branding", "Social Media Assets", "Priority Support"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Wer steckt hinter dem Studio?"
|
||||
description="Ich bin ein kreativer Kopf mit Leidenschaft für Ästhetik und Funktion. Nach Jahren der Erfahrung im Designbereich habe ich mein eigenes Studio gegründet, um Menschen wie dir zu helfen, sich authentisch zu präsentieren."
|
||||
imageSrc="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1200"
|
||||
imageAlt="Über mich"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[{ type: "text", content: "Über mich & meine Vision" }]}
|
||||
useInvertedBackground={true}
|
||||
description="Als kreativer Designer unterstütze ich dich dabei, deine Vision Wirklichkeit werden zu lassen."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah M.", handle: "@sarah", testimonial: "Die Arbeit mit diesem Studio war eine absolute Bereicherung. Sehr professionell und kreativ!", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400" },
|
||||
{ id: "t2", name: "Markus W.", handle: "@markus", testimonial: "Endlich ein Design, das perfekt zu meiner Marke passt.", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400" }
|
||||
]}
|
||||
title="Stimmen meiner Partner"
|
||||
description="Kunden, die auf Qualität und Kreativität setzen."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Kundenstimmen"
|
||||
description="Was Kunden über die Zusammenarbeit sagen."
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="default"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah M.", role: "Unternehmerin", testimonial: "Hervorragende Zusammenarbeit und exzellente Ergebnisse!", icon: Star },
|
||||
{ id: "t2", name: "Markus W.", role: "Founder", testimonial: "Endlich ein Studio, das meine Anforderungen perfekt verstanden hat.", icon: Star }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Wie läuft der Prozess ab?", content: "Wir beginnen mit einem kostenlosen Erstgespräch, danach folgt die Konzeption und Umsetzung." },
|
||||
{ id: "f2", title: "Wie lange dauert ein Projekt?", content: "Je nach Umfang planen wir etwa 2 bis 6 Wochen ein." }
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1000"
|
||||
mediaAnimation="slide-up"
|
||||
title="Fragen & Antworten"
|
||||
description="Hier findest du alle wichtigen Informationen vorab."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Häufige Fragen"
|
||||
description="Hier findest du alle Antworten für einen schnellen Start."
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
textboxLayout="split"
|
||||
faqs={[
|
||||
{ id: "1", title: "Wie lange dauert ein Prozess?", content: "In der Regel ca. 2-6 Wochen, abhängig vom Umfang." },
|
||||
{ id: "2", title: "Wie starte ich?", content: "Schreib mir einfach eine Mail oder kontaktiere mich über das Formular." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Lass uns gemeinsam Großes erschaffen. Kontaktiere mich für eine unverbindliche Anfrage."
|
||||
buttons={[{ text: "E-Mail schreiben", href: "mailto:hallo@studio.de" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Kontakt"
|
||||
title="Lass uns starten"
|
||||
description="Bereit, deine Marke auf das nächste Level zu heben?"
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttonText="Absenden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Creative Studio"
|
||||
leftLink={{ text: "Impressum", href: "#" }}
|
||||
rightLink={{ text: "Datenschutz", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Creative Studio"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Leistungen", href: "#services" }, { label: "Preise", href: "#pricing" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user