782 lines
33 KiB
XML
782 lines
33 KiB
XML
import { Meta, StoryObj } from "@storybook/nextjs-vite";
|
||
import TrialPayment from "./TrialPayment";
|
||
import { fn } from "storybook/test";
|
||
|
||
/** Reusable TrialPayment page Component */
|
||
const meta: Meta<typeof TrialPayment> = {
|
||
title: "Templates/TrialPayment",
|
||
component: TrialPayment,
|
||
tags: ["autodocs"],
|
||
parameters: {
|
||
layout: "fullscreen",
|
||
},
|
||
args: {
|
||
header: {
|
||
timerHookProps: {
|
||
initialSeconds: 600,
|
||
},
|
||
text: {
|
||
children: "⚠️ Your sketch expires soon!",
|
||
},
|
||
button: {
|
||
children: "ПОЛУЧИТЬ",
|
||
onClick: fn(),
|
||
},
|
||
},
|
||
unlockYourSketch: {
|
||
title: {
|
||
children: "Unlock Your Sketch",
|
||
},
|
||
subtitle: {
|
||
children: "Just One Click to Reveal Your Match!",
|
||
},
|
||
image: {
|
||
src: "/trial-payment/portrait-female.jpg",
|
||
alt: "wall portrait female",
|
||
priority: true,
|
||
},
|
||
blur: {
|
||
text: {
|
||
children: "Unlock to reveal your personalized portrait",
|
||
},
|
||
icon: (
|
||
<svg
|
||
width="18"
|
||
height="21"
|
||
viewBox="0 0 18 21"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M5.625 6.125V8H11.875V6.125C11.875 4.39844 10.4766 3 8.75 3C7.02344 3 5.625 4.39844 5.625 6.125ZM3.125 8V6.125C3.125 3.01953 5.64453 0.5 8.75 0.5C11.8555 0.5 14.375 3.01953 14.375 6.125V8H15C16.3789 8 17.5 9.12109 17.5 10.5V18C17.5 19.3789 16.3789 20.5 15 20.5H2.5C1.12109 20.5 0 19.3789 0 18V10.5C0 9.12109 1.12109 8 2.5 8H3.125Z"
|
||
fill="#A16207"
|
||
/>
|
||
</svg>
|
||
),
|
||
},
|
||
button: {
|
||
children: "Get Me Soulmate Sketch",
|
||
onClick: fn(),
|
||
},
|
||
},
|
||
joinedToday: {
|
||
icon: (
|
||
<svg
|
||
width="15"
|
||
height="13"
|
||
viewBox="0 0 15 13"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M2.23906 7.96384L7.18008 12.5767C7.38516 12.7681 7.65586 12.8748 7.9375 12.8748C8.21914 12.8748 8.48984 12.7681 8.69492 12.5767L13.6359 7.96384C14.4672 7.19001 14.9375 6.10447 14.9375 4.9697V4.81111C14.9375 2.89978 13.5566 1.27009 11.6727 0.95564C10.4258 0.747827 9.15703 1.15525 8.26562 2.04666L7.9375 2.37478L7.60938 2.04666C6.71797 1.15525 5.44922 0.747827 4.20234 0.95564C2.31836 1.27009 0.9375 2.89978 0.9375 4.81111V4.9697C0.9375 6.10447 1.40781 7.19001 2.23906 7.96384Z"
|
||
fill="#1047A2"
|
||
/>
|
||
</svg>
|
||
),
|
||
count: {
|
||
children: "954",
|
||
},
|
||
text: {
|
||
children: "Joined today",
|
||
},
|
||
},
|
||
trustedByOver: {
|
||
icon: (
|
||
<svg
|
||
width="19"
|
||
height="15"
|
||
viewBox="0 0 19 15"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4.6875 0.75C5.26766 0.75 5.82406 0.980468 6.2343 1.3907C6.64453 1.80094 6.875 2.35734 6.875 2.9375C6.875 3.51766 6.64453 4.07406 6.2343 4.4843C5.82406 4.89453 5.26766 5.125 4.6875 5.125C4.10734 5.125 3.55094 4.89453 3.1407 4.4843C2.73047 4.07406 2.5 3.51766 2.5 2.9375C2.5 2.35734 2.73047 1.80094 3.1407 1.3907C3.55094 0.980468 4.10734 0.75 4.6875 0.75ZM14.75 0.75C15.3302 0.75 15.8866 0.980468 16.2968 1.3907C16.707 1.80094 16.9375 2.35734 16.9375 2.9375C16.9375 3.51766 16.707 4.07406 16.2968 4.4843C15.8866 4.89453 15.3302 5.125 14.75 5.125C14.1698 5.125 13.6134 4.89453 13.2032 4.4843C12.793 4.07406 12.5625 3.51766 12.5625 2.9375C12.5625 2.35734 12.793 1.80094 13.2032 1.3907C13.6134 0.980468 14.1698 0.75 14.75 0.75ZM0.75 8.91758C0.75 7.30703 2.05703 6 3.66758 6H4.83516C5.26992 6 5.68281 6.0957 6.05469 6.26523C6.01914 6.46211 6.00273 6.66719 6.00273 6.875C6.00273 7.91953 6.46211 8.85742 7.18672 9.5C7.18125 9.5 7.17578 9.5 7.16758 9.5H1.33242C1.0125 9.5 0.75 9.2375 0.75 8.91758ZM11.8324 9.5C11.827 9.5 11.8215 9.5 11.8133 9.5C12.5406 8.85742 12.9973 7.91953 12.9973 6.875C12.9973 6.66719 12.9781 6.46484 12.9453 6.26523C13.3172 6.09297 13.7301 6 14.1648 6H15.3324C16.943 6 18.25 7.30703 18.25 8.91758C18.25 9.24023 17.9875 9.5 17.6676 9.5H11.8324ZM6.875 6.875C6.875 6.17881 7.15156 5.51113 7.64384 5.01884C8.13613 4.52656 8.80381 4.25 9.5 4.25C10.1962 4.25 10.8639 4.52656 11.3562 5.01884C11.8484 5.51113 12.125 6.17881 12.125 6.875C12.125 7.57119 11.8484 8.23887 11.3562 8.73116C10.8639 9.22344 10.1962 9.5 9.5 9.5C8.80381 9.5 8.13613 9.22344 7.64384 8.73116C7.15156 8.23887 6.875 7.57119 6.875 6.875ZM4.25 14.0199C4.25 12.0074 5.88242 10.375 7.89492 10.375H11.1051C13.1176 10.375 14.75 12.0074 14.75 14.0199C14.75 14.4219 14.4246 14.75 14.0199 14.75H4.98008C4.57812 14.75 4.25 14.4246 4.25 14.0199Z"
|
||
fill="#1047A2"
|
||
/>
|
||
</svg>
|
||
),
|
||
text: {
|
||
children: (
|
||
<>
|
||
Trusted by over <b>355,000</b> people.
|
||
</>
|
||
),
|
||
},
|
||
},
|
||
findingOneGuide: {
|
||
header: {
|
||
emoji: {
|
||
children: "❤️",
|
||
},
|
||
title: {
|
||
children: "Finding the One Guide",
|
||
},
|
||
},
|
||
text: {
|
||
children:
|
||
"You're not just looking for someone — you're. You're not just looking for someone — you'reYou're not just looking for someone — you'reYou're not just looking for someone — you'reYou're not just looking for someone — you're. You're not just looking for someone — you're. You're not just looking for someone — you'reYou're not just looking for someone — you'reYou're not just looking for someone — you'reYou're not just looking for someone — you're",
|
||
},
|
||
blur: {
|
||
text: {
|
||
children: "Чтобы открыть весь отчёт, нужен полный доступ.",
|
||
},
|
||
icon: (
|
||
<svg
|
||
width="18"
|
||
height="21"
|
||
viewBox="0 0 18 21"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M5.625 6.125V8H11.875V6.125C11.875 4.39844 10.4766 3 8.75 3C7.02344 3 5.625 4.39844 5.625 6.125ZM3.125 8V6.125C3.125 3.01953 5.64453 0.5 8.75 0.5C11.8555 0.5 14.375 3.01953 14.375 6.125V8H15C16.3789 8 17.5 9.12109 17.5 10.5V18C17.5 19.3789 16.3789 20.5 15 20.5H2.5C1.12109 20.5 0 19.3789 0 18V10.5C0 9.12109 1.12109 8 2.5 8H3.125Z"
|
||
fill="#A16207"
|
||
/>
|
||
</svg>
|
||
),
|
||
},
|
||
},
|
||
tryForDays: {
|
||
title: {
|
||
children: "Попробуйте в течение 7 дней!",
|
||
},
|
||
textListProps: {
|
||
items: [
|
||
{
|
||
children:
|
||
"Receive a hand-drawn sketch of your soulmate, crafted by a trained AI-model.",
|
||
},
|
||
{
|
||
children:
|
||
"Reveal the path to your soulmate with the Finding the One guide.",
|
||
},
|
||
{
|
||
children:
|
||
"Talk to live experts and get guidance on finding your soulmate.",
|
||
},
|
||
{
|
||
children:
|
||
"Start your 7-day trial for just $1.00 — then only $14.50/week for full access.",
|
||
},
|
||
{
|
||
children: "Cancel anytime—just 24 hours before renewal.",
|
||
},
|
||
],
|
||
listStyleType: "none",
|
||
},
|
||
},
|
||
totalPrice: {
|
||
couponContainer: {
|
||
title: {
|
||
children: (
|
||
<>
|
||
Coupon
|
||
<br />
|
||
Code
|
||
</>
|
||
),
|
||
},
|
||
button: {
|
||
children: "SOULMATE94",
|
||
onClick: fn(),
|
||
},
|
||
},
|
||
priceContainer: {
|
||
title: {
|
||
children: "Total",
|
||
},
|
||
price: {
|
||
children: "$1.00",
|
||
},
|
||
oldPrice: {
|
||
children: "$14.99",
|
||
},
|
||
discount: {
|
||
children: "94% discount applied",
|
||
},
|
||
},
|
||
},
|
||
paymentButtons: {
|
||
buttons: [
|
||
{
|
||
children: "Pay",
|
||
icon: (
|
||
<svg
|
||
width="19"
|
||
height="24"
|
||
viewBox="0 0 19 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g clipPath="url(#clip0_49_113)">
|
||
<path
|
||
d="M15.8141 12.5953C15.8047 10.875 16.5828 9.57656 18.1578 8.62031C17.2766 7.35938 15.9453 6.66563 14.1875 6.52969C12.5234 6.39844 10.7047 7.5 10.0391 7.5C9.33594 7.5 7.72344 6.57656 6.45781 6.57656C3.84219 6.61875 1.0625 8.6625 1.0625 12.8203C1.0625 14.0484 1.2875 15.3172 1.7375 16.6266C2.3375 18.3469 4.50312 22.5656 6.7625 22.4953C7.94375 22.4672 8.77812 21.6563 10.3156 21.6563C11.8062 21.6563 12.5797 22.4953 13.8969 22.4953C16.175 22.4625 18.1344 18.6281 18.7062 16.9031C15.65 15.4641 15.8141 12.6844 15.8141 12.5953ZM13.1609 4.89844C14.4406 3.37969 14.3234 1.99688 14.2859 1.5C13.1562 1.56563 11.8484 2.26875 11.1031 3.13594C10.2828 4.06406 9.8 5.2125 9.90313 6.50625C11.1266 6.6 12.2422 5.97188 13.1609 4.89844Z"
|
||
fill="white"
|
||
/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_49_113">
|
||
<path d="M0.875 0H18.875V24H0.875V0Z" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
},
|
||
{
|
||
children: "Pay",
|
||
icon: (
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
x="0px"
|
||
y="0px"
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 48 48"
|
||
>
|
||
<path
|
||
fill="#FFC107"
|
||
d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
|
||
></path>
|
||
<path
|
||
fill="#FF3D00"
|
||
d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
|
||
></path>
|
||
<path
|
||
fill="#4CAF50"
|
||
d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
|
||
></path>
|
||
<path
|
||
fill="#1976D2"
|
||
d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
|
||
></path>
|
||
</svg>
|
||
),
|
||
},
|
||
{
|
||
children: "Credit or debit card",
|
||
icon: (
|
||
<svg
|
||
width="19"
|
||
height="16"
|
||
viewBox="0 0 19 16"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g clipPath="url(#clip0_49_125)">
|
||
<path
|
||
d="M16.0312 2.5C16.3062 2.5 16.5312 2.725 16.5312 3V4H1.53125V3C1.53125 2.725 1.75625 2.5 2.03125 2.5H16.0312ZM16.5312 7V13C16.5312 13.275 16.3062 13.5 16.0312 13.5H2.03125C1.75625 13.5 1.53125 13.275 1.53125 13V7H16.5312ZM2.03125 1C0.928125 1 0.03125 1.89688 0.03125 3V13C0.03125 14.1031 0.928125 15 2.03125 15H16.0312C17.1344 15 18.0312 14.1031 18.0312 13V3C18.0312 1.89688 17.1344 1 16.0312 1H2.03125ZM3.78125 10.5C3.36562 10.5 3.03125 10.8344 3.03125 11.25C3.03125 11.6656 3.36562 12 3.78125 12H5.28125C5.69688 12 6.03125 11.6656 6.03125 11.25C6.03125 10.8344 5.69688 10.5 5.28125 10.5H3.78125ZM7.78125 10.5C7.36562 10.5 7.03125 10.8344 7.03125 11.25C7.03125 11.6656 7.36562 12 7.78125 12H11.2812C11.6969 12 12.0312 11.6656 12.0312 11.25C12.0312 10.8344 11.6969 10.5 11.2812 10.5H7.78125Z"
|
||
fill="white"
|
||
/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_49_125">
|
||
<path d="M0.03125 0H18.0312V16H0.03125V0Z" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
className: "bg-primary",
|
||
},
|
||
],
|
||
},
|
||
moneyBackGuarantee: {
|
||
title: {
|
||
children: "30-DAY MONEY-BACK GUARANTEE",
|
||
},
|
||
text: {
|
||
children:
|
||
"If you don't receive your soulmate sketch, we'll refund your money!",
|
||
},
|
||
},
|
||
policy: {
|
||
text: {
|
||
children:
|
||
"By clicking Continue, you agree to our Terms of Use & Service and Privacy Policy. You also acknowledge that your 1 week introductory plan to Respontika, billed at $1.00, will automatically renew at $14.50 every 1 week unless canceled before the end of the trial period.",
|
||
},
|
||
},
|
||
usersPortraits: {
|
||
title: {
|
||
children: "Our Users' Soulmate Portraits",
|
||
},
|
||
imgs: [
|
||
{
|
||
src: "/trial-payment/users-portraits/1.jpg",
|
||
alt: "wall portrait 1",
|
||
},
|
||
{
|
||
src: "/trial-payment/users-portraits/2.jpg",
|
||
alt: "wall portrait 2",
|
||
},
|
||
{
|
||
src: "/trial-payment/users-portraits/3.jpg",
|
||
alt: "wall portrait 3",
|
||
},
|
||
],
|
||
button: {
|
||
children: "Get me soulmate sketch",
|
||
onClick: fn(),
|
||
},
|
||
},
|
||
joinedTodayWithAvatars: {
|
||
avatars: {
|
||
avatars: [
|
||
{
|
||
imageProps: {
|
||
src: "/trial-payment/avatars/1.jpg",
|
||
alt: "Avatar 1",
|
||
},
|
||
fallbackProps: {
|
||
children: "A1",
|
||
},
|
||
},
|
||
{
|
||
imageProps: {
|
||
src: "/trial-payment/avatars/2.jpg",
|
||
alt: "Avatar 2",
|
||
},
|
||
fallbackProps: {
|
||
children: "A2",
|
||
},
|
||
},
|
||
{
|
||
imageProps: {
|
||
src: "/trial-payment/avatars/3.jpg",
|
||
alt: "Avatar 3",
|
||
},
|
||
fallbackProps: {
|
||
children: "A3",
|
||
},
|
||
},
|
||
{
|
||
imageProps: {
|
||
src: "/trial-payment/avatars/4.jpg",
|
||
alt: "Avatar 4",
|
||
},
|
||
fallbackProps: {
|
||
children: "A4",
|
||
},
|
||
},
|
||
{
|
||
imageProps: {
|
||
src: "/trial-payment/avatars/5.jpg",
|
||
alt: "Avatar 5",
|
||
},
|
||
fallbackProps: {
|
||
children: "A5",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
count: {
|
||
children: "954",
|
||
},
|
||
text: {
|
||
children: "people joined today",
|
||
},
|
||
},
|
||
progressToSeeSoulmate: {
|
||
title: {
|
||
children: "See Your Soulmate – Just One Step Away",
|
||
},
|
||
progress: {
|
||
value: 92,
|
||
},
|
||
progressText: {
|
||
leftText: {
|
||
children: "Step 2 of 5",
|
||
},
|
||
rightText: {
|
||
children: "99% Complete",
|
||
},
|
||
},
|
||
},
|
||
stepsToSeeSoulmate: {
|
||
steps: [
|
||
{
|
||
title: { children: "Questions Answered" },
|
||
description: {
|
||
children:
|
||
"You've provided all the necessary information about your preferences and personality.",
|
||
},
|
||
icon: (
|
||
<svg
|
||
width="12"
|
||
height="15"
|
||
viewBox="0 0 12 15"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 0.75C4.85703 0.75 3.88359 1.48008 3.52539 2.5H2.5C1.53477 2.5 0.75 3.28477 0.75 4.25V13C0.75 13.9652 1.53477 14.75 2.5 14.75H9.5C10.4652 14.75 11.25 13.9652 11.25 13V4.25C11.25 3.28477 10.4652 2.5 9.5 2.5H8.47461C8.11641 1.48008 7.14297 0.75 6 0.75ZM6 2.5C6.23206 2.5 6.45462 2.59219 6.61872 2.75628C6.78281 2.92038 6.875 3.14294 6.875 3.375C6.875 3.60706 6.78281 3.82962 6.61872 3.99372C6.45462 4.15781 6.23206 4.25 6 4.25C5.76794 4.25 5.54538 4.15781 5.38128 3.99372C5.21719 3.82962 5.125 3.60706 5.125 3.375C5.125 3.14294 5.21719 2.92038 5.38128 2.75628C5.54538 2.59219 5.76794 2.5 6 2.5ZM3.64297 7.01992C3.85898 6.41016 4.43867 6 5.08672 6H6.68086C7.63516 6 8.40625 6.77383 8.40625 7.72539C8.40625 8.34336 8.07539 8.91484 7.53945 9.22383L6.65625 9.72969C6.65078 10.0852 6.3582 10.375 6 10.375C5.63633 10.375 5.34375 10.0824 5.34375 9.71875V9.34961C5.34375 9.11445 5.46953 8.89844 5.67461 8.78086L6.88594 8.08633C7.01445 8.0125 7.09375 7.87578 7.09375 7.72813C7.09375 7.49844 6.90781 7.31523 6.68086 7.31523H5.08672C4.99375 7.31523 4.91172 7.37266 4.88164 7.46016L4.8707 7.49297C4.75039 7.83477 4.37305 8.0125 4.03398 7.89219C3.69492 7.77188 3.51445 7.39453 3.63477 7.05547L3.6457 7.02266L3.64297 7.01992ZM5.125 12.125C5.125 11.8929 5.21719 11.6704 5.38128 11.5063C5.54538 11.3422 5.76794 11.25 6 11.25C6.23206 11.25 6.45462 11.3422 6.61872 11.5063C6.78281 11.6704 6.875 11.8929 6.875 12.125C6.875 12.3571 6.78281 12.5796 6.61872 12.7437C6.45462 12.9078 6.23206 13 6 13C5.76794 13 5.54538 12.9078 5.38128 12.7437C5.21719 12.5796 5.125 12.3571 5.125 12.125Z"
|
||
fill="white"
|
||
/>
|
||
</svg>
|
||
),
|
||
isActive: true,
|
||
},
|
||
{
|
||
title: { children: "Profile Analysis" },
|
||
description: {
|
||
children:
|
||
"Our advanced system is creating your perfect soulmate profile.",
|
||
},
|
||
icon: (
|
||
<svg
|
||
width="14"
|
||
height="15"
|
||
viewBox="0 0 14 15"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M5.03125 0.75C5.87617 0.75 6.5625 1.43633 6.5625 2.28125V13.2188C6.5625 14.0637 5.87617 14.75 5.03125 14.75C4.24102 14.75 3.59023 14.1512 3.5082 13.3801C3.36602 13.4184 3.21563 13.4375 3.0625 13.4375C2.09727 13.4375 1.3125 12.6527 1.3125 11.6875C1.3125 11.4852 1.34805 11.2883 1.41094 11.1078C0.585156 10.7961 0 9.99766 0 9.0625C0 8.19023 0.511328 7.43555 1.25234 7.08555C1.01445 6.7875 0.875 6.41016 0.875 6C0.875 5.16055 1.46563 4.46055 2.25312 4.28828C2.20938 4.13789 2.1875 3.97656 2.1875 3.8125C2.1875 2.99492 2.75078 2.30586 3.5082 2.11445C3.59023 1.34883 4.24102 0.75 5.03125 0.75ZM8.96875 0.75C9.75898 0.75 10.407 1.34883 10.4918 2.11445C11.252 2.30586 11.8125 2.99219 11.8125 3.8125C11.8125 3.97656 11.7906 4.13789 11.7469 4.28828C12.5344 4.45781 13.125 5.16055 13.125 6C13.125 6.41016 12.9855 6.7875 12.7477 7.08555C13.4887 7.43555 14 8.19023 14 9.0625C14 9.99766 13.4148 10.7961 12.5891 11.1078C12.652 11.2883 12.6875 11.4852 12.6875 11.6875C12.6875 12.6527 11.9027 13.4375 10.9375 13.4375C10.7844 13.4375 10.634 13.4184 10.4918 13.3801C10.4098 14.1512 9.75898 14.75 8.96875 14.75C8.12383 14.75 7.4375 14.0637 7.4375 13.2188V2.28125C7.4375 1.43633 8.12383 0.75 8.96875 0.75Z"
|
||
fill="white"
|
||
/>
|
||
</svg>
|
||
),
|
||
isActive: true,
|
||
},
|
||
{
|
||
title: { children: "Sketch Creation" },
|
||
description: {
|
||
children: "Your personalized soulmate sketch will be created.",
|
||
},
|
||
icon: (
|
||
<svg
|
||
width="14"
|
||
height="15"
|
||
viewBox="0 0 14 15"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M14 7.75C14 7.77461 14 7.79922 14 7.82383C13.9891 8.82188 13.0813 9.5 12.0832 9.5H9.40625C8.68164 9.5 8.09375 10.0879 8.09375 10.8125C8.09375 10.9055 8.10469 10.9957 8.12109 11.0832C8.17852 11.3621 8.29883 11.6301 8.41641 11.9008C8.5832 12.2781 8.74727 12.6527 8.74727 13.0492C8.74727 13.9187 8.15664 14.709 7.28711 14.7445C7.19141 14.7473 7.0957 14.75 6.99727 14.75C3.13359 14.75 0 11.6164 0 7.75C0 3.88359 3.13359 0.75 7 0.75C10.8664 0.75 14 3.88359 14 7.75ZM3.5 8.625C3.5 8.39294 3.40781 8.17038 3.24372 8.00628C3.07962 7.84219 2.85706 7.75 2.625 7.75C2.39294 7.75 2.17038 7.84219 2.00628 8.00628C1.84219 8.17038 1.75 8.39294 1.75 8.625C1.75 8.85706 1.84219 9.07962 2.00628 9.24372C2.17038 9.40781 2.39294 9.5 2.625 9.5C2.85706 9.5 3.07962 9.40781 3.24372 9.24372C3.40781 9.07962 3.5 8.85706 3.5 8.625ZM3.5 6C3.73206 6 3.95462 5.90781 4.11872 5.74372C4.28281 5.57962 4.375 5.35706 4.375 5.125C4.375 4.89294 4.28281 4.67038 4.11872 4.50628C3.95462 4.34219 3.73206 4.25 3.5 4.25C3.26794 4.25 3.04538 4.34219 2.88128 4.50628C2.71719 4.67038 2.625 4.89294 2.625 5.125C2.625 5.35706 2.71719 5.57962 2.88128 5.74372C3.04538 5.90781 3.26794 6 3.5 6ZM7.875 3.375C7.875 3.14294 7.78281 2.92038 7.61872 2.75628C7.45462 2.59219 7.23206 2.5 7 2.5C6.76794 2.5 6.54538 2.59219 6.38128 2.75628C6.21719 2.92038 6.125 3.14294 6.125 3.375C6.125 3.60706 6.21719 3.82962 6.38128 3.99372C6.54538 4.15781 6.76794 4.25 7 4.25C7.23206 4.25 7.45462 4.15781 7.61872 3.99372C7.78281 3.82962 7.875 3.60706 7.875 3.375ZM10.5 6C10.7321 6 10.9546 5.90781 11.1187 5.74372C11.2828 5.57962 11.375 5.35706 11.375 5.125C11.375 4.89294 11.2828 4.67038 11.1187 4.50628C10.9546 4.34219 10.7321 4.25 10.5 4.25C10.2679 4.25 10.0454 4.34219 9.88128 4.50628C9.71719 4.67038 9.625 4.89294 9.625 5.125C9.625 5.35706 9.71719 5.57962 9.88128 5.74372C10.0454 5.90781 10.2679 6 10.5 6Z"
|
||
fill="#6B7280"
|
||
/>
|
||
</svg>
|
||
),
|
||
isActive: false,
|
||
},
|
||
{
|
||
title: { children: "Астрологические Идеи" },
|
||
description: {
|
||
children: "Уникальные астрологич...",
|
||
},
|
||
icon: (
|
||
<svg
|
||
width="12"
|
||
height="13"
|
||
viewBox="0 0 12 13"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6.86133 0.625C3.48438 0.625 0.75 3.36758 0.75 6.75C0.75 10.1324 3.48438 12.875 6.86133 12.875C8.51836 12.875 10.0195 12.2133 11.1215 11.1414C11.2582 11.0074 11.2937 10.7996 11.2063 10.6301C11.1187 10.4605 10.9301 10.3648 10.7414 10.3977C10.4734 10.4441 10.2 10.4688 9.91836 10.4688C7.26875 10.4688 5.11953 8.31406 5.11953 5.65625C5.11953 3.85703 6.10391 2.29023 7.56133 1.46445C7.72813 1.36875 7.81289 1.17734 7.77187 0.991406C7.73086 0.805469 7.57227 0.666016 7.38086 0.649609C7.20859 0.635938 7.03633 0.627734 6.86133 0.627734V0.625Z"
|
||
fill="#6B7280"
|
||
/>
|
||
</svg>
|
||
),
|
||
isActive: false,
|
||
},
|
||
{
|
||
title: { children: "Персонализированный чат с экспертом" },
|
||
description: {
|
||
children: "Персональные советы от экспертов по отношениям.",
|
||
},
|
||
icon: (
|
||
<svg
|
||
width="18"
|
||
height="15"
|
||
viewBox="0 0 18 15"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M5.93755 10.375C9.07935 10.375 11.6251 8.22031 11.6251 5.5625C11.6251 2.90469 9.07935 0.75 5.93755 0.75C2.79576 0.75 0.250055 2.90469 0.250055 5.5625C0.250055 6.61797 0.652008 7.59414 1.33287 8.38984C1.23716 8.64687 1.09498 8.87383 0.944586 9.06523C0.813336 9.23477 0.679352 9.36602 0.580914 9.45625C0.531696 9.5 0.49068 9.53555 0.463336 9.55742C0.449664 9.56836 0.438727 9.57656 0.433258 9.5793L0.427789 9.58477C0.277399 9.69688 0.211774 9.89375 0.27193 10.0715C0.332086 10.2492 0.498883 10.375 0.687555 10.375C1.28365 10.375 1.88521 10.2219 2.3856 10.0332C2.63716 9.9375 2.87232 9.83086 3.0774 9.72148C3.91685 10.1371 4.89302 10.375 5.93755 10.375ZM12.5001 5.5625C12.5001 8.6332 9.79029 10.9465 6.58013 11.2227C7.24459 13.257 9.44849 14.75 12.0626 14.75C13.1071 14.75 14.0833 14.5121 14.9254 14.0965C15.1305 14.2059 15.3629 14.3125 15.6145 14.4082C16.1149 14.5969 16.7165 14.75 17.3126 14.75C17.5012 14.75 17.6708 14.627 17.7282 14.4465C17.7856 14.266 17.7227 14.0691 17.5696 13.957L17.5641 13.9516C17.5586 13.9461 17.5477 13.9406 17.534 13.9297C17.5067 13.9078 17.4657 13.875 17.4165 13.8285C17.318 13.7383 17.184 13.607 17.0528 13.4375C16.9024 13.2461 16.7602 13.0164 16.6645 12.7621C17.3454 11.9691 17.7473 10.993 17.7473 9.93477C17.7473 7.39727 15.4258 5.31641 12.4809 5.13594C12.4919 5.27539 12.4973 5.41758 12.4973 5.55977L12.5001 5.5625Z"
|
||
fill="#6B7280"
|
||
/>
|
||
</svg>
|
||
),
|
||
isActive: false,
|
||
},
|
||
],
|
||
button: {
|
||
children: "Show Me My Soulmate",
|
||
onClick: fn(),
|
||
},
|
||
},
|
||
reviews: {
|
||
title: {
|
||
children: (
|
||
<>
|
||
Loved and Trusted <span className="text-[#1047A2]">Worldwide</span>
|
||
</>
|
||
),
|
||
},
|
||
reviews: [
|
||
{
|
||
avatar: {
|
||
imageProps: {
|
||
src: "/trial-payment/reviews/avatars/1.jpg",
|
||
alt: "Avatar 1",
|
||
},
|
||
fallbackProps: {
|
||
children: "A1",
|
||
},
|
||
},
|
||
portrait: {
|
||
src: "/trial-payment/reviews/portraits/1.jpg",
|
||
alt: "Portrait 1",
|
||
},
|
||
photo: {
|
||
src: "/trial-payment/reviews/photos/1.jpg",
|
||
alt: "Photo 1",
|
||
},
|
||
name: {
|
||
children: "Jennifer Wilson 🇺🇸",
|
||
},
|
||
stars: {
|
||
value: 5,
|
||
},
|
||
date: {
|
||
children: "1 day ago",
|
||
},
|
||
text: {
|
||
children: (
|
||
<>
|
||
<b>“Я увидела свои ошибки… и нашла мужа”</b>
|
||
<br />
|
||
Портрет сразу зацепил — было чувство, что я уже где-то его
|
||
видела. Но настоящий перелом произошёл после гайда: я поняла,
|
||
почему снова и снова выбирала «не тех». И самое удивительное —
|
||
вскоре я познакомилась с мужчиной, который оказался точной
|
||
копией того самого портрета. Сейчас он мой муж, и когда мы
|
||
сравнили рисунок с его фото, сходство было просто вау.
|
||
</>
|
||
),
|
||
},
|
||
},
|
||
{
|
||
avatar: {
|
||
imageProps: {
|
||
src: "/trial-payment/reviews/avatars/2.jpg",
|
||
alt: "Avatar 2",
|
||
},
|
||
fallbackProps: {
|
||
children: "A2",
|
||
},
|
||
},
|
||
portrait: {
|
||
src: "/trial-payment/reviews/portraits/2.jpg",
|
||
alt: "Portrait 2",
|
||
},
|
||
photo: {
|
||
src: "/trial-payment/reviews/photos/2.jpg",
|
||
alt: "Photo 2",
|
||
},
|
||
name: {
|
||
children: "Amanda Davis 🇨🇦",
|
||
},
|
||
stars: {
|
||
value: 5,
|
||
},
|
||
date: {
|
||
children: "4 days ago",
|
||
},
|
||
text: {
|
||
children: (
|
||
<>
|
||
<b>
|
||
“Я поняла своего партнёра лучше за один вечер, чем за
|
||
несколько лет”
|
||
</b>
|
||
<br />
|
||
Прошла тест ради интереса — портрет нас удивил. Но настоящий
|
||
прорыв случился, когда я прочитала гайд о второй половинке. Там
|
||
были точные подсказки о том, как мы можем поддерживать друг
|
||
друга. Цена смешная, а ценность огромная: теперь у нас меньше
|
||
недопониманий и больше тепла.
|
||
</>
|
||
),
|
||
},
|
||
},
|
||
{
|
||
avatar: {
|
||
imageProps: {
|
||
src: "/trial-payment/reviews/avatars/3.jpg",
|
||
alt: "Avatar 3",
|
||
},
|
||
fallbackProps: {
|
||
children: "A3",
|
||
},
|
||
},
|
||
portrait: {
|
||
src: "/trial-payment/reviews/portraits/3.jpg",
|
||
alt: "Portrait 3",
|
||
width: 96,
|
||
className: "w-[96px] h-[64px]",
|
||
},
|
||
photo: {
|
||
src: "/trial-payment/reviews/photos/3.jpg",
|
||
alt: "Photo 3",
|
||
},
|
||
name: {
|
||
children: "Michael Johnson 🇬🇧",
|
||
},
|
||
stars: {
|
||
value: 5,
|
||
},
|
||
date: {
|
||
children: "1 week ago",
|
||
},
|
||
text: {
|
||
children: (
|
||
<>
|
||
<b>“Увидел её лицо — и мурашки по коже”</b>
|
||
<br />
|
||
Когда пришёл результат теста и показали портрет, я реально
|
||
замер. Это была та самая девушка, с которой я начал встречаться
|
||
пару недель назад. И гайд прямо описал, почему мы тянемся друг к
|
||
другу. Честно, я не ожидал такого совпадения.
|
||
</>
|
||
),
|
||
},
|
||
},
|
||
],
|
||
},
|
||
commonQuestions: {
|
||
title: {
|
||
children: "Common Questions",
|
||
},
|
||
questions: [
|
||
{
|
||
value: "when-will-i-receive-my-sketch",
|
||
trigger: {
|
||
children: "When will I receive my sketch?",
|
||
},
|
||
content: {
|
||
children:
|
||
"Your personalized soulmate sketch will be delivered within 24-48 hours after completing your order. You'll receive an email notification when it's ready for viewing in your account.",
|
||
},
|
||
},
|
||
{
|
||
value: "how-do-i-cancel-my-subscription",
|
||
trigger: {
|
||
children: "How do I cancel my subscription?",
|
||
},
|
||
content: {
|
||
children:
|
||
"Your personalized soulmate sketch will be delivered within 24-48 hours after completing your order. You'll receive an email notification when it's ready for viewing in your account.",
|
||
},
|
||
},
|
||
{
|
||
value: "how-accurate-are-the-readings",
|
||
trigger: {
|
||
children: "How accurate are the readings?",
|
||
},
|
||
content: {
|
||
children:
|
||
"Your personalized soulmate sketch will be delivered within 24-48 hours after completing your order. You'll receive an email notification when it's ready for viewing in your account.",
|
||
},
|
||
},
|
||
{
|
||
value: "is-my-data-secure-and-private",
|
||
trigger: {
|
||
children: "Is my data secure and private?",
|
||
},
|
||
content: {
|
||
children:
|
||
"Your personalized soulmate sketch will be delivered within 24-48 hours after completing your order. You'll receive an email notification when it's ready for viewing in your account.",
|
||
},
|
||
},
|
||
],
|
||
accordionProps: {
|
||
defaultValue: "when-will-i-receive-my-sketch",
|
||
type: "single",
|
||
},
|
||
},
|
||
stillHaveQuestions: {
|
||
title: {
|
||
children: "Still have questions? We're here to help!",
|
||
},
|
||
actionButton: {
|
||
children: "Get me Soulmate Sketch",
|
||
onClick: fn(),
|
||
},
|
||
contactButton: {
|
||
children: "Contact Support",
|
||
onClick: fn(),
|
||
},
|
||
},
|
||
footer: {
|
||
title: {
|
||
children: "WIT LAB ©",
|
||
},
|
||
contacts: {
|
||
title: {
|
||
children: "CONTACTS",
|
||
},
|
||
email: {
|
||
href: "support@witlab.com",
|
||
children: "support@witlab.com",
|
||
},
|
||
address: {
|
||
children: "Wit Lab 2108 N ST STE N SACRAMENTO, CA95816, US",
|
||
},
|
||
},
|
||
legal: {
|
||
title: {
|
||
children: "LEGAL",
|
||
},
|
||
links: [
|
||
{ href: "https://witlab.us", children: "Terms of Service" },
|
||
{ href: "https://witlab.us", children: "Privacy Policy" },
|
||
{ href: "https://witlab.us", children: "Refund Policy" },
|
||
],
|
||
copyright: {
|
||
children:
|
||
"Copyright © 2025 Wit Lab™. All rights reserved. All trademarks referenced herein are the properties of their respective owners.",
|
||
},
|
||
},
|
||
paymentMethods: {
|
||
title: {
|
||
children: "PAYMENT METHODS",
|
||
},
|
||
methods: [
|
||
{
|
||
src: "/trial-payment/payment-methods/visa.svg",
|
||
alt: "visa",
|
||
},
|
||
{
|
||
src: "/trial-payment/payment-methods/mastercard.svg",
|
||
alt: "mastercard",
|
||
},
|
||
{
|
||
src: "/trial-payment/payment-methods/discover.svg",
|
||
alt: "discover",
|
||
},
|
||
{
|
||
src: "/trial-payment/payment-methods/apple.svg",
|
||
alt: "apple",
|
||
},
|
||
{
|
||
src: "/trial-payment/payment-methods/google.svg",
|
||
alt: "google",
|
||
},
|
||
{
|
||
src: "/trial-payment/payment-methods/paypal.svg",
|
||
alt: "paypal",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
argTypes: {},
|
||
};
|
||
|
||
export default meta;
|
||
type Story = StoryObj<typeof meta>;
|
||
|
||
export const Default = {} satisfies Story;
|