218 lines
7.3 KiB
TypeScript
218 lines
7.3 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||
import { Zap } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="directional-hover"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="medium"
|
||
sizing="mediumLargeSizeMediumTitles"
|
||
background="grid"
|
||
cardStyle="gradient-radial"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="normal"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
navItems={[
|
||
{
|
||
name: "Start",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "Leistungen",
|
||
id: "leistungen",
|
||
},
|
||
{
|
||
name: "Über uns",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "Kontakt",
|
||
id: "contact",
|
||
},
|
||
]}
|
||
brandName="Webfinity"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardScroll
|
||
background={{
|
||
variant: "sparkles-gradient",
|
||
}}
|
||
title="Websites, die herausstechen."
|
||
description="Wir verwandeln Visionen in hochperformante, innovative Web-Erlebnisse. Ihr Partner für digitale Exzellenz."
|
||
buttons={[
|
||
{
|
||
text: "Jetzt starten",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "Projekt anfragen",
|
||
href: "#contact",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139294.jpg?_wi=1"
|
||
imageAlt="Futuristisches Design-Konzept"
|
||
/>
|
||
</div>
|
||
|
||
<div id="leistungen" data-section="leistungen">
|
||
<FeatureCardTwentySeven
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
gridVariant="two-columns-alternating-heights"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "f1",
|
||
title: "Webdesign",
|
||
description: "Individuell, modern & maßgeschneidert auf Ihre Marke.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139294.jpg?_wi=2",
|
||
imageAlt: "modern abstract tech background glowing lines",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "Entwicklung",
|
||
description: "Hochperformanter Code, optimiert für Geschwindigkeit & SEO.",
|
||
imageSrc: "http://img.b2bpic.net/free-vector/beautiful-landing-page_52683-32841.jpg?_wi=1",
|
||
imageAlt: "smartphone app interface design dark theme",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "Hosting",
|
||
description: "Sichere & skalierbare Infrastruktur für Ihr Business.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hands-working-laptop-with-diagram-it_1163-2755.jpg?_wi=1",
|
||
imageAlt: "laptop screen website UI glassmorphism",
|
||
},
|
||
{
|
||
id: "f4",
|
||
title: "Wartung & Support",
|
||
description: "Wir halten Ihr Web-Projekt auf dem neuesten Stand.",
|
||
imageSrc: "http://img.b2bpic.net/free-vector/dark-purple-stock-trading-infographic-template-design_53876-100722.jpg?_wi=1",
|
||
imageAlt: "SaaS dashboard interface neon blue dark",
|
||
},
|
||
{
|
||
id: "f5",
|
||
title: "UI/UX Design",
|
||
description: "Intuitive Benutzeroberflächen für optimale Nutzererfahrung.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139294.jpg?_wi=3",
|
||
imageAlt: "modern abstract tech background glowing lines",
|
||
},
|
||
]}
|
||
title="Unsere Expertise"
|
||
description="Individuelle Lösungen für Ihr digitales Wachstum."
|
||
/>
|
||
</div>
|
||
|
||
<div id="projects" data-section="projects">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1",
|
||
name: "E-Commerce App",
|
||
price: "Case Study",
|
||
imageSrc: "http://img.b2bpic.net/free-vector/beautiful-landing-page_52683-32841.jpg?_wi=2",
|
||
},
|
||
{
|
||
id: "p2",
|
||
name: "Portfolio Design",
|
||
price: "Case Study",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hands-working-laptop-with-diagram-it_1163-2755.jpg?_wi=2",
|
||
},
|
||
{
|
||
id: "p3",
|
||
name: "SaaS Dashboard",
|
||
price: "Case Study",
|
||
imageSrc: "http://img.b2bpic.net/free-vector/dark-purple-stock-trading-infographic-template-design_53876-100722.jpg?_wi=2",
|
||
},
|
||
{
|
||
id: "p4",
|
||
name: "Fintech Platform",
|
||
price: "Case Study",
|
||
imageSrc: "http://img.b2bpic.net/free-vector/beautiful-landing-page_52683-32841.jpg?_wi=3",
|
||
},
|
||
{
|
||
id: "p5",
|
||
name: "Creative Agency Site",
|
||
price: "Case Study",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hands-working-laptop-with-diagram-it_1163-2755.jpg?_wi=3",
|
||
},
|
||
]}
|
||
title="Referenzen"
|
||
description="Ein Auszug unserer aktuellen Projekte."
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TestimonialAboutCard
|
||
useInvertedBackground={false}
|
||
tag="Über Webfinity"
|
||
title="Innovation durch Leidenschaft"
|
||
description="Wir glauben daran, dass jede Marke ihre eigene, starke digitale Stimme braucht. Webfinity ist mehr als nur eine Agentur – wir sind Ihre Architekten für eine erfolgreiche Zukunft."
|
||
subdescription="Innovation, Qualität und persönlicher Service stehen bei uns an erster Stelle."
|
||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139294.jpg?_wi=4"
|
||
mediaAnimation="slide-up"
|
||
icon={Zap}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Bereit für Ihr nächstes Projekt?"
|
||
description="Lassen Sie uns gemeinsam etwas Einzigartiges schaffen."
|
||
inputs={[
|
||
{
|
||
name: "name",
|
||
type: "text",
|
||
placeholder: "Ihr Name",
|
||
required: true,
|
||
},
|
||
{
|
||
name: "email",
|
||
type: "email",
|
||
placeholder: "E-Mail-Adresse",
|
||
required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message",
|
||
placeholder: "Erzählen Sie uns von Ihrer Vision...",
|
||
rows: 4,
|
||
}}
|
||
mediaAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-vector/dark-purple-stock-trading-infographic-template-design_53876-100722.jpg?_wi=3"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterCard
|
||
logoText="Webfinity"
|
||
copyrightText="© 2025 Webfinity Digital Agentur"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|