bender/c305906f-ea2f-4ec4-bf7f-826ad28b75dc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_2
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1
..
compare: bender:main
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1

7 Commits
version_2 ... main

Author SHA1 Message Date
bender
196b939be9 Merge version_4 into main 
Merge version_4 into main
 2026-05-22 22:10:30 +00:00
bender
ec2203b961 Update src/app/page.tsx 2026-05-22 22:10:24 +00:00
bender
66d80846d0 Merge version_3 into main 
Merge version_3 into main
 2026-05-22 22:08:20 +00:00
bender
9c26bf6cc2 Update src/app/page.tsx 2026-05-22 22:08:14 +00:00
bender
107309b52f Merge version_3 into main 
Merge version_3 into main
 2026-05-22 22:07:49 +00:00
bender
6ec8ddd94e Update src/app/page.tsx 2026-05-22 22:07:46 +00:00
bender
7b3ffe6f91 Merge version_2 into main 
Merge version_2 into main
 2026-05-22 22:05:34 +00:00
1 changed files with 136 additions and 141 deletions
Expand all files Collapse all files

277
src/app/page.tsx
View File

@@ -2,162 +2,157 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText'; import { Sparkles, CheckCircle, Target, Briefcase, Zap, Star, MessageCircle, Mail } from "lucide-react";
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen'; import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay'; import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import MediaAbout from '@/components/sections/about/MediaAbout'; import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo'; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo'; import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix'; import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="text-shift" defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide" defaultTextAnimation="reveal-blur"
borderRadius="pill" borderRadius="rounded"
contentWidth="compact" contentWidth="mediumLarge"
sizing="large" sizing="largeSizeMediumTitles"
background="grid" background="noise"
cardStyle="glass-elevated" cardStyle="glass-depth"
primaryButtonStyle="shadow" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered" secondaryButtonStyle="glass"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarStyleFullscreen
navItems={[ navItems={[
{ name: "Leistungen", id: "#services" }, { name: "Leistungen", id: "#services" },
{ name: "Preise", id: "#pricing" }, { name: "Preise", id: "#pricing" },
{ name: "Über mich", id: "#about" }, { name: "Über mich", id: "#about" },
{ name: "Bewertungen", id: "#testimonials" } { name: "Referenzen", id: "#testimonials" }
]} ]}
brandName="Creative Studio" brandName="Creative Studio"
button={{ button={{ text: "Kontakt", href: "#contact" }}
text: "Kontakt aufnehmen", href: "#contact"}} />
/> </div>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroOverlay <HeroBillboardCarousel
title="Kreative Visionen, die begeistern" 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." description="Ich helfe Marken dabei, durch maßgeschneidertes Design und eine klare Strategie aus der Masse herauszustechen."
buttons={[ background={{ variant: "sparkles-gradient" }}
{ text: "Projekte ansehen", href: "#services" }, mediaItems={[
{ text: "Kontaktieren", href: "#contact" } { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E67zmxnnLDB7GpBzRqelkFR3hh/uploaded-1779487651730-sg1h51w0.jpg", imageAlt: "Creative Studio Workspace" }
]} ]}
imageSrc="https://images.unsplash.com/photo-1542744094-24638752d529?q=80&w=2000" buttons={[{ text: "Projekt starten", href: "#contact" }]}
imageAlt="Kreatives Studio Portfolio" />
avatarText="Kreative Zusammenarbeit für Marken & Einzelpersonen" </div>
/>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardSixteen <FeatureCardNineteen
animationType="slide-up" title="Mein kreativer Prozess"
textboxLayout="default" description="Design ist mehr als nur Optik – es ist das Fundament deiner Markenidentität."
useInvertedBackground={false} textboxLayout="split"
negativeCard={{ useInvertedBackground={false}
items: ["Keine standardisierten 08/15 Designs", "Keine fehlende Markenidentität", "Keine mangelnde Kommunikation"], 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" },
positiveCard={{ { 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" }
items: ["Individuelles Design-Konzept", "Strategischer Aufbau", "Klare visuelle Kommunikation"], ]}
}} />
title="Mein Arbeitsansatz" </div>
description="Design bedeutet für mich nicht nur Ästhetik, sondern eine funktionale Lösung für deine Ziele."
/>
</div>
<div id="services" data-section="services"> <div id="services" data-section="services">
<ProductCardTwo <ProductCardFour
animationType="slide-up" title="Meine Services"
textboxLayout="split" description="Leistungen, die deine Marke nach vorne bringen."
gridVariant="three-columns-all-equal-width" gridVariant="one-large-left-three-stacked-right"
useInvertedBackground={true} animationType="slide-up"
products={[ useInvertedBackground={true}
{ 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" }, textboxLayout="split"
{ 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" }, products={[
{ 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" } { 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" },
title="Leistungsspektrum" { id: "3", name: "Print Media", price: "Individuell", variant: "Klassisch", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=600" }
description="Ich unterstütze dich von der Konzeption bis zur finalen Umsetzung deiner kreativen Projekte." ]}
/> />
</div> </div>
<div id="pricing" data-section="pricing"> <div id="pricing" data-section="pricing">
<PricingCardTwo <PricingCardEight
animationType="slide-up" title="Investition in Qualität"
textboxLayout="split-description" description="Klare Strukturen für dein nächstes Projekt."
useInvertedBackground={false} animationType="slide-up"
plans={[ textboxLayout="split-description"
{ id: "starter", badge: "Start", price: "Ab 500€", subtitle: "Kleine Projekte", buttons: [{ text: "Starten", href: "#contact" }], features: ["Individuelle Analyse", "3 Designvorschläge", "Quelldaten inklusive"] }, useInvertedBackground={false}
{ id: "pro", badge: "Premium", price: "Ab 1500€", subtitle: "Vollumfängliche Markenarbeit", buttons: [{ text: "Starten", href: "#contact" }], features: ["Umfassendes Branding", "Social Media Assets", "Priority Support"] } 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"] },
title="Investition in deine Marke" { 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"] }
description="Transparente Pakete für deinen kreativen Erfolg." ]}
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<MediaAbout <InlineImageSplitTextAbout
useInvertedBackground={true} heading={[{ type: "text", content: "Über mich & meine Vision" }]}
title="Wer steckt hinter dem Studio?" useInvertedBackground={true}
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" </div>
imageAlt="Über mich"
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardSix <TestimonialCardTwo
animationType="slide-up" title="Kundenstimmen"
textboxLayout="default" description="Was Kunden über die Zusammenarbeit sagen."
useInvertedBackground={false} animationType="slide-up"
testimonials={[ useInvertedBackground={false}
{ 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" }, textboxLayout="default"
{ 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" } testimonials={[
]} { id: "t1", name: "Sarah M.", role: "Unternehmerin", testimonial: "Hervorragende Zusammenarbeit und exzellente Ergebnisse!", icon: Star },
title="Stimmen meiner Partner" { id: "t2", name: "Markus W.", role: "Founder", testimonial: "Endlich ein Studio, das meine Anforderungen perfekt verstanden hat.", icon: Star }
description="Kunden, die auf Qualität und Kreativität setzen." ]}
/> />
</div> </div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitMedia <FaqDouble
textboxLayout="default" title="Häufige Fragen"
useInvertedBackground={true} description="Hier findest du alle Antworten für einen schnellen Start."
faqs={[ faqsAnimation="slide-up"
{ id: "f1", title: "Wie läuft der Prozess ab?", content: "Wir beginnen mit einem kostenlosen Erstgespräch, danach folgt die Konzeption und Umsetzung." }, useInvertedBackground={true}
{ id: "f2", title: "Wie lange dauert ein Projekt?", content: "Je nach Umfang planen wir etwa 2 bis 6 Wochen ein." } textboxLayout="split"
]} faqs={[
imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1000" { id: "1", title: "Wie lange dauert ein Prozess?", content: "In der Regel ca. 2-6 Wochen, abhängig vom Umfang." },
mediaAnimation="slide-up" { id: "2", title: "Wie starte ich?", content: "Schreib mir einfach eine Mail oder kontaktiere mich über das Formular." }
title="Fragen & Antworten" ]}
description="Hier findest du alle wichtigen Informationen vorab." />
faqsAnimation="slide-up" </div>
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactText <ContactSplit
useInvertedBackground={false} tag="Kontakt"
background={{ variant: "gradient-bars" }} title="Lass uns starten"
text="Lass uns gemeinsam Großes erschaffen. Kontaktiere mich für eine unverbindliche Anfrage." description="Bereit, deine Marke auf das nächste Level zu heben?"
buttons={[{ text: "E-Mail schreiben", href: "mailto:hallo@studio.de" }]} background={{ variant: "gradient-bars" }}
/> useInvertedBackground={false}
</div> buttonText="Absenden"
imageSrc="https://images.unsplash.com/photo-1596524430615-b46618392176?q=80&w=800"
imageAlt="Kontakt aufnehmen"
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoReveal <FooterBaseReveal
logoText="Creative Studio" logoText="Creative Studio"
leftLink={{ text: "Impressum", href: "#" }} columns={[
rightLink={{ text: "Datenschutz", href: "#" }} { title: "Navigation", items: [{ label: "Leistungen", href: "#services" }, { label: "Preise", href: "#pricing" }] }
/> ]}
</div> />
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );