bender/9bfe4fd2-f8d7-427f-bb50-4c0ca1ac7dc6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #1

Merged
bender merged 2 commits from version_2 into main 2026-04-21 13:35:36 +00:00
Conversation 0 Commits 2 Files Changed 2 +124 -367
2 changed files with 124 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
src/app/page.tsx
View File

@@ -2,388 +2,145 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextAbout from '@/components/sections/about/TextAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import { CheckCircle, Zap, Shield, Target } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="small"
sizing="mediumLarge"
background="noiseDiagonalGradient"
cardStyle="inset"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="large"
background="noise"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Services",
id: "services",
},
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="NovaSocial"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
brandName="NovaSocial"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "rotated-rays-animated",
}}
title="Social Media Marketing auf Premium-Level"
description="Wir skalieren Marken mit datengetriebenem Content, Ads & Strategie. Mehr Reichweite. Mehr Kunden. Mehr Umsatz."
buttons={[
{
text: "Kostenlos beraten lassen",
href: "#contact",
},
{
text: "Unsere Cases",
href: "#about",
},
]}
carouselItems={[
{
id: "h1",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-coloured-background-with-variety-transparent-raindrops_23-2148290158.jpg",
imageAlt: "digital tech lines",
},
{
id: "h2",
imageSrc: "http://img.b2bpic.net/free-photo/female-ceo-taking-break-from-work-answering-text-messages_482257-122664.jpg",
imageAlt: "office social media",
},
{
id: "h3",
imageSrc: "http://img.b2bpic.net/free-photo/modern-futuristic-sci-fi-background_35913-2150.jpg",
imageAlt: "smartphone social media",
},
{
id: "h4",
imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-psychedelic-octagon-corridor-pattern-background-with-blue-purple-colors_181624-32831.jpg",
imageAlt: "abstract geometry blue",
},
{
id: "h5",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-looking-pictures-camera_23-2148532589.jpg",
imageAlt: "creative team camera",
},
{
id: "h6",
imageSrc: "http://img.b2bpic.net/free-photo/speed-motion-urban-highway-road-tunnel_1112-1142.jpg",
imageAlt: "city night long exposure",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroCarouselLogo
logoText="NovaSocial"
description="Premium Social Media Marketing für datengetriebene Marken. Wir skalieren Ihren Erfolg durch Content-Exzellenz und Performance Ads."
buttons={[{ text: "Beratung vereinbaren", href: "#contact" }]}
slides={[
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-coloured-background-with-variety-transparent-raindrops_23-2148290158.jpg", imageAlt: "Hero 1" },
{ imageSrc: "http://img.b2bpic.net/free-photo/female-ceo-taking-break-from-work-answering-text-messages_482257-122664.jpg", imageAlt: "Hero 2" },
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-futuristic-sci-fi-background_35913-2150.jpg", imageAlt: "Hero 3" }
]}
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentySeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: "f1",
title: "Content Creation",
descriptions: [
"Virale Kurzvideos für TikTok & Reels",
"High-End Fotografie",
"Copywriting, das konvertiert",
],
imageSrc: "http://img.b2bpic.net/free-photo/ideas-creative-mission-strategy-vision-concept_53876-124143.jpg",
imageAlt: "studio setup photography",
},
{
id: "f2",
title: "Performance Ads",
descriptions: [
"Meta Ads für E-Commerce",
"TikTok Performance Kampagnen",
"Google Ads Skalierung",
],
imageSrc: "http://img.b2bpic.net/free-photo/graphic-concept-with-colorful-wood-blocks-high-angle_23-2148950364.jpg",
imageAlt: "bar graphs upward",
},
{
id: "f3",
title: "Brand Strategy",
descriptions: [
"Markenidentität definieren",
"Zielgruppen-Analyse",
"Wachstums-Roadmap",
],
imageSrc: "http://img.b2bpic.net/free-photo/employees-preparing-business-presentation_482257-124560.jpg",
imageAlt: "strategy planning brainstorming",
},
]}
title="Unsere Leistungen"
description="Exzellenz in allen digitalen Disziplinen."
/>
</div>
<div id="services" data-section="services">
<FeatureCardTen
title="Unsere Kernkompetenzen"
description="Alles was Sie für digitales Wachstum benötigen."
animationType="slide-up"
textboxLayout="split"
features={[
{
title: "Performance Marketing", description: "Datengetriebene Kampagnen mit Fokus auf messbaren ROI.", media: { imageSrc: "http://img.b2bpic.net/free-photo/graphic-concept-with-colorful-wood-blocks-high-angle_23-2148950364.jpg" },
items: [{ icon: Target, text: "Conversion Tracking" }, { icon: Zap, text: "Schnelle Skalierung" }],
reverse: false
}
]}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechCorp",
"InnovateLab",
"GrowthCo",
"StartupXYZ",
"DigitalVision",
"FutureGrowth",
"WebAgency",
]}
title="Unsere Partner"
description="Erfolgsgeschichten, die wir gemeinsam geschrieben haben."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
names={["TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ"]}
title="Vertraut von Branchenführern"
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={true}
title="Warum NovaSocial?"
buttons={[
{
text: "Erfahre mehr",
href: "#",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[{ type: "text", content: "Warum NovaSocial?" }]}
buttons={[{ text: "Mehr erfahren" }]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "p1",
tag: "Starter",
price: "1.999€",
period: "/monat",
description: "Für den initialen Boost.",
button: {
text: "Starten",
},
featuresTitle: "Was drin ist:",
features: [
"Content Setup",
"Monatlich 4 Reels",
"Ads Management",
],
},
{
id: "p2",
tag: "Growth",
price: "3.999€",
period: "/monat",
description: "Volle Skalierung.",
button: {
text: "Jetzt buchen",
},
featuresTitle: "Was drin ist:",
features: [
"Content Creation",
"Werbebudget-Management",
"Conversion Optimierung",
],
},
{
id: "p3",
tag: "Scale",
price: "7.499€",
period: "/monat",
description: "Maximale Performance.",
button: {
text: "Anfragen",
},
featuresTitle: "Was drin ist:",
features: [
"VIP Support",
"360° Ads & Content",
"Strategie-Beratung",
],
},
]}
title="Unsere Packages"
description="Skalierbare Lösungen für jedes Level."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
title="Transparente Preise"
animationType="depth-3d"
textboxLayout="default"
plans={[
{ id: "p1", badge: "Essential", price: "1.999€", subtitle: "Für Startups", features: ["Social Ads", "Content Strategy"] }
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "2.4M+",
title: "Reichweite",
description: "Organisch & bezahlt",
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-dark-earth-space_23-2151051317.jpg",
imageAlt: "global network lines",
},
{
id: "m2",
value: "150+",
title: "Kundenprojekte",
description: "Erfolgreich abgeschlossen",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-notebook-with-checklist-desk_23-2148938756.jpg",
imageAlt: "task complete digital",
},
{
id: "m3",
value: "4.2x",
title: "ROI",
description: "Durchschnitt für Kunden",
imageSrc: "http://img.b2bpic.net/free-photo/graphic-concept-with-red-arrow_23-2148950368.jpg",
imageAlt: "growth chart arrow",
},
]}
title="Unsere KPIs"
description="Daten sprechen lauter als Worte."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
title="Unsere Wirkung"
gridVariant="bento-grid"
animationType="slide-up"
metrics={[
{ id: "m1", value: "2.4M", title: "Reichweite", description: "Monatlich", icon: CheckCircle }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="NovaSocial hat unser komplettes Branding auf das nächste Level gehoben. Wahnsinns Arbeit!"
rating={5}
author="Sarah M., CEO"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
alt: "professional headshot man",
},
{
src: "http://img.b2bpic.net/free-photo/high-angle-beautiful-business-female_23-2148411859.jpg",
alt: "professional headshot woman",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
alt: "professional headshot smiling man",
},
{
src: "http://img.b2bpic.net/free-photo/indoor-picture-cheerful-handsome-young-man-having-folded-hands-looking-directly-smiling-sincerely-wearing-casual-clothes_176532-10257.jpg",
alt: "professional headshot young woman",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",
alt: "Portrait of optimistic businessman in formalwear",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
cardTitle="Erfolgsgeschichten"
cardAnimation="slide-up"
testimonials={[
{ id: "t1", name: "Sarah M.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg" }
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "Wie lange dauert ein Onboarding?",
content: "Meistens etwa 3-5 Werktage.",
},
{
id: "q2",
title: "Arbeitet ihr auch international?",
content: "Ja, wir betreuen Kampagnen weltweit.",
},
{
id: "q3",
title: "Welche Plattformen nutzt ihr?",
content: "Meta, TikTok, Pinterest & LinkedIn.",
},
]}
faqsAnimation="blur-reveal"
sideTitle="Häufige Fragen"
sideDescription="Alles, was Sie wissen müssen."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Häufige Fragen"
faqsAnimation="slide-up"
faqs={[{ id: "f1", title: "Wie starten wir?", content: "Kontaktieren Sie uns für ein Erstgespräch." }]}
imageSrc="http://img.b2bpic.net/free-photo/employees-preparing-business-presentation_482257-124560.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
tag="Kontakt"
title="Bereit für den Durchbruch?"
description="Lass uns dein Social Media Marketing auf das nächste Level heben."
buttons={[
{
text: "Jetzt kostenloses Erstgespräch vereinbaren",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Starten Sie Ihr Projekt"
description="Schreiben Sie uns für ein individuelles Angebot."
inputs={[{ name: "name", type: "text", placeholder: "Ihr Name" }, { name: "email", type: "email", placeholder: "Email" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="NovaSocial"
columns={[
{
title: "Quick Links",
items: [
{
label: "Services",
href: "#services",
},
{
label: "About",
href: "#about",
},
],
},
{
title: "Legal",
items: [
{
label: "Impressum",
href: "#",
},
{
label: "Datenschutz",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
bottomLeftText="© 2025 NovaSocial"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

6
src/app/styles/variables.css
View File

@@ -10,12 +10,12 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #000000;
--card: #0c0c0c;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffff;
--primary-cta: #106EFB;
--primary-cta-text: #ffffff;
--secondary-cta: #000000;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #ffffff;
--accent: #535353;
--background-accent: #106EFB;