313 lines
20 KiB
TypeScript
313 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||
import { Award, CheckCircle, Clock, DollarSign, Edit, Gauge, HelpCircle, Lightbulb, Layers, MessageSquare, MousePointer, Palette, Smartphone, Sparkles, Star, TrendingDown, Users, Zap } from 'lucide-react';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-magnetic"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="medium"
|
||
sizing="mediumLargeSizeLargeTitles"
|
||
background="none"
|
||
cardStyle="subtle-shadow"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
brandName="SiteForge"
|
||
navItems={[
|
||
{ name: "Wie es funktioniert", id: "how-it-works" },
|
||
{ name: "Pakete", id: "packages" },
|
||
{ name: "Branchen", id: "industries" },
|
||
{ name: "Warum SiteForge", id: "why" },
|
||
{ name: "FAQ", id: "faq" },
|
||
{ name: "Kontakt", id: "contact" }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardScroll
|
||
title="Fertige Websites. Jetzt online."
|
||
description="Wählen Sie Ihre Branche, passen Sie das Design an, und Ihre professionelle Website ist in 48 Stunden live. Keine Programmierkenntnisse nötig – schlüsselfertig und bezahlbar."
|
||
tag="Websites für kleine Unternehmen"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
background={{ variant: "radial-gradient" }}
|
||
buttons={[
|
||
{ text: "Jetzt Website kaufen", href: "#packages" },
|
||
{ text: "Beispiele ansehen", href: "#industries" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-vector/start-up-business-landing-page_23-2148276811.jpg"
|
||
imageAlt="modern browser mockup laptop screen website"
|
||
/>
|
||
</div>
|
||
|
||
<div id="how-it-works" data-section="how-it-works">
|
||
<FeatureCardTen
|
||
title="So funktioniert SiteForge"
|
||
description="In nur drei einfachen Schritten zu Ihrer professionellen Website – schnell, sicher und unkompliziert."
|
||
tag="Unser Prozess"
|
||
tagIcon={Zap}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="split"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "step-1", title: "1. Branche auswählen", description: "Wählen Sie aus verschiedenen vorgefertigten Website-Vorlagen für Ihre Branche – Restaurants, Friseure, Handwerker, Läden und mehr.", media: { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-ui-kit-collection_23-2149209589.jpg", imageAlt: "industry selection menu interface dropdown" },
|
||
items: [
|
||
{ icon: MousePointer, text: "Schnelle Auswahl" },
|
||
{ icon: Layers, text: "Branchengerechte Vorlagen" }
|
||
],
|
||
reverse: false
|
||
},
|
||
{
|
||
id: "step-2", title: "2. Design anpassen", description: "Personalisieren Sie Farben, Texte, Bilder und Layout nach Ihren Vorstellungen. Einfach im Browser – kein Design-Know-how erforderlich.", media: { imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_23-2149051192.jpg", imageAlt: "design customization interface color palette" },
|
||
items: [
|
||
{ icon: Palette, text: "Visuelle Anpassung" },
|
||
{ icon: Edit, text: "Intuitive Bearbeitung" }
|
||
],
|
||
reverse: true
|
||
},
|
||
{
|
||
id: "step-3", title: "3. Website geht live", description: "Bestätigen Sie Ihre fertige Website und sie ist sofort online. Optimiert für alle Geräte, suchmaschinenfreundlich und bereit für Ihr Geschäft.", media: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-typing-keyboard_23-2149476770.jpg", imageAlt: "website launch live deployment upload success" },
|
||
items: [
|
||
{ icon: CheckCircle, text: "Sofort verfügbar" },
|
||
{ icon: Smartphone, text: "Vollständig responsive" }
|
||
],
|
||
reverse: false
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="packages" data-section="packages">
|
||
<PricingCardNine
|
||
title="Pakete & Preise"
|
||
description="Wählen Sie das perfekte Paket für Ihre Bedürfnisse. Alle Pakete enthalten Hosting, Domain und E-Mail-Support."
|
||
textboxLayout="default"
|
||
animationType="scale-rotate"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "starter", title: "Starter", price: "299 €", period: "Einmalig", features: [
|
||
"Einfaches 5-Seiten-Layout", "Kostenlose Domain für 1 Jahr", "Mobile-optimiert", "SSL-Zertifikat", "E-Mail-Support", "Google Analytics integriert", "Kontaktformular"
|
||
],
|
||
button: { text: "Jetzt kaufen", href: "#" }
|
||
},
|
||
{
|
||
id: "business", title: "Business", price: "599 €", period: "Einmalig", features: [
|
||
"Alles aus Starter, plus:", "Bis zu 15 Seiten", "Online-Buchungssystem", "Social-Media-Integration", "Blog-Funktionalität", "E-Commerce-Modul (bis 50 Produkte)", "Premium Support (Chat & E-Mail)", "SEO-Basis-Paket", "Kostenlose Domain für 2 Jahre"
|
||
],
|
||
button: { text: "Am meisten gewählt", href: "#" },
|
||
imageSrc: "http://img.b2bpic.net/free-vector/flat-price-list-collection_23-2148089330.jpg", imageAlt: "business package premium tier highlight"
|
||
},
|
||
{
|
||
id: "premium", title: "Premium", price: "999 €", period: "Einmalig", features: [
|
||
"Alles aus Business, plus:", "Unbegrenzte Seiten", "E-Commerce (unbegrenzte Produkte)", "Zahlungsintegration (Stripe, PayPal)", "Membership-System", "Newsletter-Integration", "Advanced SEO-Optimierung", "Prioritäts-Support (Telefon)", "Kostenlose Domain für 3 Jahre", "Kostenlose Website-Wartung (3 Monate)"
|
||
],
|
||
button: { text: "Premium upgraden", href: "#" }
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="industries" data-section="industries">
|
||
<ProductCardFour
|
||
title="Beispiel-Branchen"
|
||
description="SiteForge bietet maßgeschneiderte Lösungen für verschiedenste Branchen. Sehen Sie, wie Ihre Branche von einer professionellen Website profitiert."
|
||
gridVariant="bento-grid"
|
||
animationType="blur-reveal"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "friseur", name: "Friseur & Salon", price: "ab 299 €", variant: "Online-Terminbuchung", imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-styling-clients-hair_107420-94690.jpg", imageAlt: "beauty salon hairdresser interior professional"
|
||
},
|
||
{
|
||
id: "handwerker", name: "Handwerksbetrieb", price: "ab 399 €", variant: "Projekt-Portfolio", imageSrc: "http://img.b2bpic.net/free-photo/instruments-carpenter-wooden-table_23-2148180540.jpg", imageAlt: "craftsman handyman tools workshop equipment"
|
||
},
|
||
{
|
||
id: "restaurant", name: "Restaurant & Café", price: "ab 499 €", variant: "Speisekarte & Reservierungen", imageSrc: "http://img.b2bpic.net/free-photo/table-setting_74190-1957.jpg", imageAlt: "restaurant interior dining modern professional"
|
||
},
|
||
{
|
||
id: "boutique", name: "Boutique & Mode", price: "ab 599 €", variant: "E-Commerce-Shop", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-women-clothes-shopping_23-2148312176.jpg", imageAlt: "boutique fashion store retail shop display"
|
||
},
|
||
{
|
||
id: "zahnarzt", name: "Arztpraxis", price: "ab 349 €", variant: "Patienten-Portal", imageSrc: "http://img.b2bpic.net/free-photo/elderly-man-hospital-reception-wearing-face-mask-taking-with-nurse-while-waiting-coronavirus-examination_482257-8532.jpg", imageAlt: "dental office clinic professional medical"
|
||
},
|
||
{
|
||
id: "fitnessstudio", name: "Fitnessstudio", price: "ab 449 €", variant: "Membership-System", imageSrc: "http://img.b2bpic.net/free-photo/side-view-male-exercise-bicycle_23-2148353067.jpg", imageAlt: "fitness gym studio modern equipment"
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-siteforge" data-section="why-siteforge">
|
||
<FeatureCardTen
|
||
title="Warum SiteForge"
|
||
description="Wir vereinfachen Website-Erstellung für kleine Unternehmen. Professionelle Qualität ohne die üblichen Hürden und Kosten."
|
||
tag="Unsere Vorteile"
|
||
tagIcon={Award}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
animationType="opacity"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "fast", title: "In 48h online", description: "Ihre Website ist innerhalb von zwei Tagen live. Schneller als traditionelle Agenturen, genauso professionell und zuverlässig.", media: { imageSrc: "http://img.b2bpic.net/free-vector/bicycle-delivery-concept-flat-style_23-2148167861.jpg", imageAlt: "fast speed clock timer quick rapid" },
|
||
items: [
|
||
{ icon: Zap, text: "Blitzschnell" },
|
||
{ icon: Clock, text: "Effizient" }
|
||
],
|
||
reverse: false
|
||
},
|
||
{
|
||
id: "notech", title: "Kein Tech-Know-how nötig", description: "Sie benötigen keine Programmierkenntnisse. Unser intuitives System ermöglicht es Ihnen, Ihre Website selbst zu gestalten und zu verwalten.", media: { imageSrc: "http://img.b2bpic.net/free-photo/authorized-guaranteed-certificate-approved-product_53876-21365.jpg", imageAlt: "no code low code simple easy platform" },
|
||
items: [
|
||
{ icon: Users, text: "User-freundlich" },
|
||
{ icon: Lightbulb, text: "Intuitiv" }
|
||
],
|
||
reverse: true
|
||
},
|
||
{
|
||
id: "professional", title: "Fertig & professionell", description: "Jede Website wird von unseren Designexperten nach modernen Standards erstellt. SEO-optimiert, responsive und performant.", media: { imageSrc: "http://img.b2bpic.net/free-vector/business-concept-landing-page-with-photo_23-2148293286.jpg", imageAlt: "professional design modern business template" },
|
||
items: [
|
||
{ icon: Star, text: "Premium Design" },
|
||
{ icon: Gauge, text: "Hochperformant" }
|
||
],
|
||
reverse: false
|
||
},
|
||
{
|
||
id: "affordable", title: "Günstiger als eine Agentur", description: "Sparen Sie bis zu 80% im Vergleich zu traditionellen Webagenturen. Keine versteckten Kosten, keine Überraschungen.", media: { imageSrc: "http://img.b2bpic.net/free-photo/stacked-coins-math-blocks-calculator-piggybank-wooden-tabletop_23-2147863929.jpg", imageAlt: "affordable price budget cost effective value" },
|
||
items: [
|
||
{ icon: DollarSign, text: "Transparent" },
|
||
{ icon: TrendingDown, text: "Kosteneffizient" }
|
||
],
|
||
reverse: true
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwo
|
||
title="Das sagen unsere Kunden"
|
||
description="Kleine Unternehmer und Geschäftsführer vertrauen SiteForge für ihre digitale Präsenz."
|
||
tag="Kundenstimmen"
|
||
tagIcon={MessageSquare}
|
||
tagAnimation="slide-up"
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Maria Schmidt", role: "Inhaberin", testimonial: "Mit SiteForge hatte ich innerhalb von zwei Tagen meine eigene Website online. Die Terminbuchung funktioniert perfekt, und meine Kunden finden mich jetzt online. Absolut empfehlenswert!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg", imageAlt: "professional woman portrait business headshot", icon: Star
|
||
},
|
||
{
|
||
id: "2", name: "Thomas Müller", role: "Geschäftsführer", testimonial: "Als Handwerker brauchte ich eine Lösung, die nicht kompliziert ist. SiteForge hat meine Anforderungen perfekt erfüllt. Mein Portfolio ist online, und ich bekomme neue Anfragen!", imageSrc: "http://img.b2bpic.net/free-photo/bald-man-with-beard-wearing-business-clothes-glasses-puffing-cheeks-with-funny-face-mouth-inflated-with-air-crazy-expression_839833-2502.jpg", imageAlt: "professional man portrait business headshot", icon: Star
|
||
},
|
||
{
|
||
id: "3", name: "Lisa Weber", role: "Eigentümerin", testimonial: "Unsere Website mit Speisekarte und Online-Reservierung ist ein Hit bei unseren Gästen. Die Investition hat sich bereits nach wenigen Wochen amortisiert.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-caucasian-woman-office-looking-camera_23-2148187145.jpg", imageAlt: "woman restaurant owner portrait professional", icon: Star
|
||
},
|
||
{
|
||
id: "4", name: "Martin Richter", role: "Geschäftsführer", testimonial: "Das Membership-System ist beeindruckend. Unsere Mitglieder können sich online anmelden, und wir sparen viel Verwaltungsaufwand. Ein großes Plus!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3269.jpg", imageAlt: "male fitness professional trainer portrait", icon: Star
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
title="Häufig gestellte Fragen"
|
||
description="Finden Sie Antworten auf die wichtigsten Fragen zu SiteForge und unseren Services."
|
||
tag="FAQ"
|
||
tagIcon={HelpCircle}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
faqsAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "q1", title: "Wie lange dauert es, bis meine Website online ist?", content: "Ihre Website ist innerhalb von 48 Stunden online. Sie müssen nur Ihre Branche auswählen, das Design anpassen und bestätigen. Danach kümmern wir uns um den Rest – Hosting, Domain, SSL-Zertifikat und Deployment."
|
||
},
|
||
{
|
||
id: "q2", title: "Kann ich meine Website nach dem Launch noch ändern?", content: "Ja, absolut! Sie haben vollständigen Zugriff auf Ihr Website-Admin-Panel. Sie können Texte, Bilder, Preise und alle anderen Inhalte jederzeit ändern. Es gibt keine versteckten Einschränkungen."
|
||
},
|
||
{
|
||
id: "q3", title: "Ist die Website für Suchmaschinen optimiert?", content: "Ja, alle SiteForge-Websites sind SEO-optimiert. Wir implementieren Best Practices für Google Rankings, strukturierte Daten, schnelle Ladezeiten und mobile Optimierung. Business- und Premium-Pakete erhalten zusätzlich ein intensives SEO-Basis-Paket."
|
||
},
|
||
{
|
||
id: "q4", title: "Was ist im Preis enthalten? Gibt es versteckte Kosten?", content: "Nein, es gibt keine versteckten Kosten. Der Paketpreis ist die einzige Investition. Alle Pakete enthalten Hosting, Domain, SSL, E-Mail und Support. Optional können Sie Add-ons wie erweiterte E-Commerce-Funktionen oder Premium-Themes hinzufügen."
|
||
},
|
||
{
|
||
id: "q5", title: "Ich habe ein spezielles Geschäftsmodell. Kann SiteForge das unterstützen?", content: "Sehr gerne! Kontaktieren Sie unser Team. Je nach Anforderung können wir Ihre Website individuell anpassen oder ein Custom-Paket zusammenstellen. Wir arbeiten eng mit Ihnen zusammen, um sicherzustellen, dass Ihre Lösung perfekt passt."
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact-cta" data-section="contact-cta">
|
||
<ContactCenter
|
||
tag="Bereit?"
|
||
title="Starten Sie noch heute mit SiteForge"
|
||
description="Lassen Sie sich von unserem Team beraten. Wir helfen Ihnen, die perfekte Website für Ihr Geschäft zu finden."
|
||
background={{ variant: "animated-grid" }}
|
||
useInvertedBackground={false}
|
||
inputPlaceholder="Geben Sie Ihre E-Mail ein"
|
||
buttonText="Jetzt Kontakt aufnehmen"
|
||
termsText="Mit dem Absenden akzeptieren Sie unsere Datenschutzerklärung und Nutzungsbedingungen."
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseCard
|
||
logoText="SiteForge"
|
||
copyrightText="© 2024 SiteForge. Alle Rechte vorbehalten."
|
||
columns={[
|
||
{
|
||
title: "Produkt", items: [
|
||
{ label: "Wie es funktioniert", href: "#how-it-works" },
|
||
{ label: "Pakete & Preise", href: "#packages" },
|
||
{ label: "Beispiel-Branchen", href: "#industries" },
|
||
{ label: "FAQ", href: "#faq" }
|
||
]
|
||
},
|
||
{
|
||
title: "Unternehmen", items: [
|
||
{ label: "Über uns", href: "#" },
|
||
{ label: "Blog", href: "#" },
|
||
{ label: "Karriere", href: "#" },
|
||
{ label: "Kontakt", href: "#contact-cta" }
|
||
]
|
||
},
|
||
{
|
||
title: "Rechtlich", items: [
|
||
{ label: "Datenschutz", href: "#" },
|
||
{ label: "Nutzungsbedingungen", href: "#" },
|
||
{ label: "Impressum", href: "#" },
|
||
{ label: "Cookies", href: "#" }
|
||
]
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |