181 lines
8.4 KiB
TypeScript
181 lines
8.4 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="Klarheit über dein Wohlbefinden gewinnen"
|
||
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 – nur 3 Min.", 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 3.00 CHF in deine psychische Klarheit. Erhalte eine fundierte, persönliche Analyse sowie konkrete Handlungsempfehlungen, die dir als wertvoller Kompass für dein weiteres Wohlbefinden dienen."
|
||
/>
|
||
</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>
|
||
);
|
||
}
|