180 lines
8.3 KiB
TypeScript
180 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Start", id: "hero"},
|
|
{
|
|
name: "Der Test", id: "test"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
]}
|
|
brandName="Selbsttest"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
logoText="Trauma-Selbsttest"
|
|
description="Gewinne wertvolle Klarheit über dein emotionales Wohlbefinden. Unser strukturierter Test liefert dir direkt actionable Insights für ein tieferes Selbstverständnis und deinen nächsten Schritt."
|
|
buttons={[
|
|
{
|
|
text: "Jetzt Test starten", href: "#test"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/liquid-marble-border-blue-abstract-experimental-art_53876-108090.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust" data-section="trust">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Vertraulich", "100% Online", "Sofortige Auswertung", "Datensicher", "Anonym", "Empathisch", "Diskret"]}
|
|
title="Dein Vertrauen steht an erster Stelle"
|
|
description="Wir legen höchsten Wert auf Anonymität und Datenschutz, damit du dich auf den Prozess konzentrieren kannst."
|
|
/>
|
|
</div>
|
|
|
|
<div id="info" data-section="info">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Was erwartet dich?"
|
|
description="Dieser Trauma-Selbsttest hilft dir dabei, mögliche emotionale Belastungsmuster besser einzuordnen. Bitte beachte: Dieser Test dient ausschließlich der Selbstreflexion und ersetzt keine professionelle psychologische oder medizinische Diagnose."
|
|
metrics={[
|
|
{
|
|
value: "3", title: "Minuten Dauer"},
|
|
{
|
|
value: "100%", title: "Online verfügbar"},
|
|
{
|
|
value: "Diskret", title: "Anonym"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/orange-paint-brush-strokes-forming-circular-shape-white-canvas_23-2148079143.jpg"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="test" data-section="test">
|
|
<FeatureCardTwentyNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="one-large-right-three-stacked-left"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Sicherheit & Vertrauen", description: "Entdecke dein Bedürfnis nach Sicherheit und Ruhe in stürmischen Zeiten.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-sitting-couch_23-2149720835.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/caring-african-american-woman-consoling-sad-woman-before-group-therapy-meeting_637285-10049.jpg", buttonText: "Weiter"},
|
|
{
|
|
title: "Emotionaler Ballast", description: "Erkenne, welche Situationen dich emotional stärker belasten als gewohnt.", imageSrc: "http://img.b2bpic.net/free-vector/flat-time-logo-templates-collection_23-2148944207.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/3d-render-hourglass-mouse-symbol-design_460848-7398.jpg", buttonText: "Weiter"},
|
|
{
|
|
title: "Gegenwart erleben", description: "Verbinde dich wieder mit dem Hier und Jetzt und finde innere Balance.", imageSrc: "http://img.b2bpic.net/free-vector/verified-badge-ribbon-set_78370-6066.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/water-droplet-with-checkmarks-set_78370-7529.jpg", buttonText: "Ergebnis anzeigen"},
|
|
]}
|
|
title="Beginne deine Reflexion"
|
|
description="Beantworte die folgenden 15 Fragen in Ruhe und ehrlich. Es gibt keine falschen Antworten."
|
|
/>
|
|
</div>
|
|
|
|
<div id="paywall" data-section="paywall">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "unlock", title: "Persönliche Auswertung", price: "3.00 CHF", period: "einmalig", features: [
|
|
"Detaillierte Analyse", "Handlungsorientierte Empfehlungen", "Kein Abo"],
|
|
button: {
|
|
text: "Ergebnis für 3.00 CHF freischalten"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-psychedelic-papercut-background_23-2149303070.jpg", imageAlt: "Abstract psychedelic papercut background"},
|
|
]}
|
|
title="Erhalte deine professionelle Analyse"
|
|
description="Investiere in deine mentale Klarheit. Dieser kleine Schritt ermöglicht dir wertvolle Selbstkenntnis und schafft die nötige Entlastung, um dich wieder auf das Wesentliche in deinem Leben zu fokussieren."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Ist der Test anonym?", content: "Ja, der Test ist vollständig anonym und deine Daten werden nicht gespeichert."},
|
|
{
|
|
id: "2", title: "Ist das ein medizinischer Test?", content: "Nein, dieser Test dient nur der Selbstreflexion und ersetzt keine ärztliche Diagnose."},
|
|
{
|
|
id: "3", title: "Warum kostet die Auswertung etwas?", content: "Die kleine Gebühr von 3.00 CHF hilft uns, den Betrieb der Plattform und die Qualität der Inhalte zu finanzieren."},
|
|
{
|
|
id: "4", title: "Wie werden die Ergebnisse generiert?", content: "Die Analyse basiert auf wissenschaftlich fundierten Fragebögen, die psychologische Muster objektiv bewerten, um dir eine fundierte Einschätzung zu ermöglichen."},
|
|
]}
|
|
title="Häufige Fragen"
|
|
faqsAnimation="slide-up"
|
|
description="Hier findest du Antworten auf die wichtigsten Fragen zu unserem Selbsttest-Prozess."
|
|
/>
|
|
</div>
|
|
|
|
<div id="results" data-section="results">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
text="Nach der Freischaltung erhältst du deine Auswertung mit sanften Empfehlungen zu Achtsamkeit und ersten Orientierungshilfen. Denke immer daran: Diese Auswertung ersetzt keine professionelle medizinische Beratung. Wir sind für dich da."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Trauma-Selbsttest"
|
|
columns={[
|
|
{
|
|
title: "Rechtliches", items: [
|
|
{
|
|
label: "Datenschutz", href: "#"},
|
|
{
|
|
label: "Impressum", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Hilfe", items: [
|
|
{
|
|
label: "Kontakt", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Trauma-Selbsttest. Hinweis: Wenn du dich akut belastet fühlst, wende dich bitte an eine Fachperson oder den Notdienst."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |