Update src/app/page.tsx
This commit is contained in:
349
src/app/page.tsx
349
src/app/page.tsx
@@ -19,249 +19,132 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Über uns",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Leistungen",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="TTL Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Über uns", id: "about" },
|
||||
{ name: "Leistungen", id: "features" },
|
||||
{ name: "Kontakt", id: "contact" }
|
||||
]}
|
||||
brandName="TTL Studio"
|
||||
button={{ text: "Kontakt", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
title="TTL Studio: Ihre Digitale Präsenz, Neu Definiert."
|
||||
description="Wir entwickeln maßgeschneiderte digitale Lösungen, die Ihr Unternehmen in der modernen Welt skalieren. Professionell, präzise, zukunftsorientiert."
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt Erstgespräch buchen",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/notepad-near-mouse-coffee-with-copy-space_23-2148291145.jpg",
|
||||
imageAlt: "TTL Studio - Digitale Lösungen",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-staring-cellphone-his-hands_259150-57825.jpg",
|
||||
imageAlt: "Technologie & Strategie",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-working-hard-innovation_23-2148776732.jpg",
|
||||
imageAlt: "Kreatives Design",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-executive-manager-briefing-her-collegues-explaning-company-strategy-brainstorming-multiethnical-businesspeople-working-professional-startup-financial-office-conference_482257-13735.jpg",
|
||||
imageAlt: "Unternehmensberatung",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-lines_1048-14148.jpg",
|
||||
imageAlt: "Innovation & Zukunft",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-light-prisms-effect_23-2148898155.jpg",
|
||||
imageAlt: "Digitale Transformation",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="TTL Studio: Ihre Digitale Präsenz, Neu Definiert."
|
||||
description="Wir entwickeln maßgeschneiderte digitale Lösungen, die Ihr Unternehmen in der modernen Welt skalieren. Professionell, präzise, zukunftsorientiert."
|
||||
buttons={[{ text: "Jetzt Erstgespräch buchen", href: "#contact" }]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/notepad-near-mouse-coffee-with-copy-space_23-2148291145.jpg", imageAlt: "TTL Studio - Digitale Lösungen" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/male-staring-cellphone-his-hands_259150-57825.jpg", imageAlt: "Technologie & Strategie" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/women-working-hard-innovation_23-2148776732.jpg", imageAlt: "Kreatives Design" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/professional-executive-manager-briefing-her-collegues-explaning-company-strategy-brainstorming-multiethnical-businesspeople-working-professional-startup-financial-office-conference_482257-13735.jpg", imageAlt: "Unternehmensberatung" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-lines_1048-14148.jpg", imageAlt: "Innovation & Zukunft" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/colorful-light-prisms-effect_23-2148898155.jpg", imageAlt: "Digitale Transformation" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Über TTL Studio",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg",
|
||||
alt: "TTL Teamarbeit",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "Wir sind mehr als eine Agentur. Wir sind Ihr strategischer Partner für digitales Wachstum. TTL Studio steht für Professionalität, Transparenz und erstklassige Ergebnisse. Wir unterstützen Unternehmen dabei, ihre Visionen in die digitale Realität umzusetzen.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "Über TTL Studio" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg", alt: "TTL Teamarbeit" },
|
||||
{ type: "text", content: "Wir sind mehr als eine Agentur. Wir sind Ihr strategischer Partner für digitales Wachstum. TTL Studio steht für Professionalität, Transparenz und erstklassige Ergebnisse. Wir unterstützen Unternehmen dabei, ihre Visionen in die digitale Realität umzusetzen." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Web-Entwicklung",
|
||||
description: "Hochperformante, skalierbare Web-Applikationen und Websites.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Digitale Strategie",
|
||||
description: "Fundierte Beratung für Ihre nachhaltige digitale Transformation.",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "UX/UI Design",
|
||||
description: "Benutzerzentrierte Designs, die Vertrauen schaffen und Konvertierung fördern.",
|
||||
},
|
||||
]}
|
||||
title="Unsere Leistungen"
|
||||
description="Profitieren Sie von unseren spezialisierten Dienstleistungen für Ihren Unternehmenserfolg."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Zap, title: "Web-Entwicklung", description: "Hochperformante, skalierbare Web-Applikationen und Websites." },
|
||||
{ icon: Shield, title: "Digitale Strategie", description: "Fundierte Beratung für Ihre nachhaltige digitale Transformation." },
|
||||
{ icon: Award, title: "UX/UI Design", description: "Benutzerzentrierte Designs, die Vertrauen schaffen und Konvertierung fördern." }
|
||||
]}
|
||||
title="Unsere Leistungen"
|
||||
description="Profitieren Sie von unseren spezialisierten Dienstleistungen für Ihren Unternehmenserfolg."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="capabilities" data-section="capabilities">
|
||||
<MetricCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
description: "Kundenorientierung",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
description: "Servicebereitschaft",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Fokus",
|
||||
description: "Qualität vor Quantität",
|
||||
},
|
||||
]}
|
||||
title="Unser Anspruch"
|
||||
description="Wir setzen Standards durch Präzision und Innovationskraft."
|
||||
/>
|
||||
</div>
|
||||
<div id="capabilities" data-section="capabilities">
|
||||
<MetricCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", description: "Kundenorientierung" },
|
||||
{ id: "m2", value: "24/7", description: "Servicebereitschaft" },
|
||||
{ id: "m3", value: "Fokus", description: "Qualität vor Quantität" }
|
||||
]}
|
||||
title="Unser Anspruch"
|
||||
description="Wir setzen Standards durch Präzision und Innovationskraft."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Alpha Corp",
|
||||
"Beta Tech",
|
||||
"Gamma Ventures",
|
||||
"Delta Innovations",
|
||||
"Epsilon Systems",
|
||||
"Zeta Labs",
|
||||
"Theta Partners",
|
||||
]}
|
||||
title="Vertrauen durch Professionalität"
|
||||
description="Ihr Erfolg ist unser Erfolg. Wir arbeiten diskret und ergebnisorientiert für anspruchsvolle Kunden."
|
||||
/>
|
||||
</div>
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Alpha Corp", "Beta Tech", "Gamma Ventures", "Delta Innovations", "Epsilon Systems", "Zeta Labs", "Theta Partners"]}
|
||||
title="Vertrauen durch Professionalität"
|
||||
description="Ihr Erfolg ist unser Erfolg. Wir arbeiten diskret und ergebnisorientiert für anspruchsvolle Kunden."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Wie arbeitet TTL Studio?",
|
||||
content: "Wir folgen einem strukturierten Prozess aus Analyse, Strategie, Umsetzung und Qualitätssicherung.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Warum TTL Studio?",
|
||||
content: "Professionalität, Zuverlässigkeit und ein unbedingter Fokus auf Ihren wirtschaftlichen Mehrwert.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Was kostet die Zusammenarbeit?",
|
||||
content: "Individuelle Projekte erfordern individuelle Angebote. Lassen Sie uns in einem unverbindlichen Gespräch die Details klären.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/diversity-inclusion-quote-black-fabric_23-2148699738.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Häufige Fragen"
|
||||
description="Alles, was Sie über unsere Arbeitsweise wissen müssen."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Wie arbeitet TTL Studio?", content: "Wir folgen einem strukturierten Prozess aus Analyse, Strategie, Umsetzung und Qualitätssicherung." },
|
||||
{ id: "f2", title: "Warum TTL Studio?", content: "Professionalität, Zuverlässigkeit und ein unbedingter Fokus auf Ihren wirtschaftlichen Mehrwert." },
|
||||
{ id: "f3", title: "Was kostet die Zusammenarbeit?", content: "Individuelle Projekte erfordern individuelle Angebote. Lassen Sie uns in einem unverbindlichen Gespräch die Details klären." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/diversity-inclusion-quote-black-fabric_23-2148699738.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Häufige Fragen"
|
||||
description="Alles, was Sie über unsere Arbeitsweise wissen müssen."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Bereit für Ihr nächstes digitales Projekt? Kontaktieren Sie uns für ein unverbindliches Erstgespräch."
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt anfragen",
|
||||
href: "mailto:hello@ttl-studio.de",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Bereit für Ihr nächstes digitales Projekt? Kontaktieren Sie uns für ein unverbindliches Erstgespräch."
|
||||
buttons={[{ text: "Jetzt anfragen", href: "mailto:hello@ttl-studio.de" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Agentur",
|
||||
items: [
|
||||
{
|
||||
label: "Über uns",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Leistungen",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Rechtliches",
|
||||
items: [
|
||||
{
|
||||
label: "Impressum",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Datenschutz",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="TTL Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Agentur", items: [{ label: "Über uns", href: "#about" }, { label: "Leistungen", href: "#features" }] },
|
||||
{ title: "Rechtliches", items: [{ label: "Impressum", href: "#" }, { label: "Datenschutz", href: "#" }] }
|
||||
]}
|
||||
logoText="TTL Studio"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user