-
+
+
+
+ Profile registration
+
+
+
+
+
Bookings Terms & Conditions
+
+
+
+
+ - You will be contacted by your consultant.
+ - The call may start 10–15 minutes earlier or later than scheduled.
+ - Make sure you are available and in a quiet place at least 10 minutes before the session.
+
+
+
+ {
+ QUESTIONS.map((question) => (
+
+ ))
+ }
);
diff --git a/src/app/questions-list/[slug]/page.tsx b/src/app/questions-list/[slug]/page.tsx
new file mode 100644
index 0000000..9511af2
--- /dev/null
+++ b/src/app/questions-list/[slug]/page.tsx
@@ -0,0 +1,92 @@
+import { notFound } from "next/navigation";
+
+import QuestionButton from "@/components/questions/question-button";
+import QuestionDate from "@/components/questions/question-date";
+import QuestionDropdown from "@/components/questions/question-dropdown";
+import QuestionFile from "@/components/questions/question-file";
+import QuestionNumber from "@/components/questions/question-number";
+import QuestionRadio from "@/components/questions/question-radio";
+import QuestionSlider from "@/components/questions/question-slider";
+import QuestionText from "@/components/questions/question-text";
+import Button from "@/components/ui/button";
+import InformationSheet from "@/components/ui/information-sheet";
+import { PageBackground } from "@/components/utils/page-background";
+import {
+ getQuestionListItemBySlug,
+ type QuestionField,
+ questionListItems,
+} from "@/data/question-data";
+
+export function generateStaticParams() {
+ return questionListItems.map((item) => ({
+ slug: item.slug,
+ }));
+}
+
+type QuestionDetailPageProps = {
+ params: Promise<{
+ slug: string;
+ }>;
+};
+
+function renderQuestion(question: QuestionField) {
+ switch (question.type) {
+ case "button":
+ return
;
+ case "date":
+ return
;
+ case "dropdown":
+ return
;
+ case "file":
+ return
;
+ case "number":
+ return
;
+ case "radio":
+ return
;
+ case "slider":
+ return
;
+ case "text":
+ return
;
+ default:
+ return null;
+ }
+}
+
+export default async function QuestionDetailPage({
+ params,
+}: QuestionDetailPageProps) {
+ const { slug } = await params;
+ const item = getQuestionListItemBySlug(slug);
+
+ if (!item) {
+ notFound();
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ {item.questions.map((question) => (
+
+ {renderQuestion(question)}
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/src/app/questions-list/page.tsx b/src/app/questions-list/page.tsx
new file mode 100644
index 0000000..9e6ef19
--- /dev/null
+++ b/src/app/questions-list/page.tsx
@@ -0,0 +1,55 @@
+import BookingTermsCard from "@/components/questions/booking-terms-card";
+import QuestionCard from "@/components/questions/question-card";
+import Button from "@/components/ui/button";
+import NavigationButton from "@/components/ui/navigation-button";
+import { PageBackground } from "@/components/utils/page-background";
+import { bookingTerms, questionListItems } from "@/data/question-data";
+
+export default function QuestionsListPage() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ Profile registration
+
+
+
+
+
+
+
+ {questionListItems.map((item) => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/dev/dev-click-to-component.tsx b/src/components/dev/dev-click-to-component.tsx
new file mode 100644
index 0000000..ea17ecb
--- /dev/null
+++ b/src/components/dev/dev-click-to-component.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect } from "react";
+
+const IDE_SCHEMES = [
+ {
+ matches: ["antigravity"],
+ createUrl: (locator: string) => `antigravity://file/${locator}`,
+ },
+ {
+ matches: ["cursor"],
+ createUrl: (locator: string) => `cursor://file/${locator}`,
+ },
+ {
+ matches: ["vscode", "code"],
+ createUrl: (locator: string) => `vscode://file/${locator}`,
+ },
+ {
+ matches: ["webstorm", "intellij"],
+ createUrl: (locator: string) => `webstorm://open?file=${locator}`,
+ },
+ {
+ matches: ["sublime"],
+ createUrl: (locator: string) => `subl://open?url=file://${locator}`,
+ },
+ {
+ matches: ["atom", "nova"],
+ createUrl: (locator: string) => `atom://open?url=file://${locator}`,
+ },
+] as const;
+
+function parseLocator(locator: string) {
+ const match = locator.match(/^(.*):(\d+|unknown):(\d+|unknown)$/);
+
+ if (!match) {
+ return { filePath: locator, line: null, column: null };
+ }
+
+ const [, filePath, line, column] = match;
+
+ return {
+ filePath,
+ line: line === "unknown" ? null : Number(line),
+ column: column === "unknown" ? null : Number(column),
+ };
+}
+
+export function DevClickToComponent() {
+ useEffect(() => {
+ const userAgent = navigator.userAgent.toLowerCase();
+ const handleClick = (event: MouseEvent) => {
+ if (!event.altKey) {
+ return;
+ }
+
+ const target = event.target;
+ if (!(target instanceof HTMLElement)) {
+ return;
+ }
+
+ const locator = target
+ .closest
("[data-locator]")
+ ?.getAttribute("data-locator");
+
+ if (!locator) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+
+ const { filePath, line, column } = parseLocator(locator);
+ const positionSuffix =
+ line === null ? "" : `:${line}${column === null ? "" : `:${column}`}`;
+
+ const ideUrl =
+ IDE_SCHEMES.find(({ matches }) =>
+ matches.some((match) => userAgent.includes(match)),
+ )?.createUrl(`${filePath}${positionSuffix}`) ??
+ `vscode://file/${filePath}${positionSuffix}`;
+
+ try {
+ window.location.href = ideUrl;
+ } catch {
+ window.open(`file://${filePath}`, "_blank", "noopener,noreferrer");
+ }
+ };
+
+ document.addEventListener("click", handleClick, true);
+
+ return () => {
+ document.removeEventListener("click", handleClick, true);
+ };
+ }, []);
+
+ return null;
+}
+
+export default DevClickToComponent;
diff --git a/src/components/dev/locator-paths.ts b/src/components/dev/locator-paths.ts
new file mode 100644
index 0000000..c854c92
--- /dev/null
+++ b/src/components/dev/locator-paths.ts
@@ -0,0 +1,29 @@
+export const LOCATORS = {
+ appHomePage: "D:/sajjadi/marriage/src/app/page.tsx",
+ appIntroPage: "D:/sajjadi/marriage/src/app/intro/page.tsx",
+ appQuestionsListPage: "D:/sajjadi/marriage/src/app/questions-list/page.tsx",
+ appQuestionDetailPage:
+ "D:/sajjadi/marriage/src/app/questions-list/[slug]/page.tsx",
+ appSliderPage: "D:/sajjadi/marriage/src/app/slider/page.tsx",
+ bookingTermsCard:
+ "D:/sajjadi/marriage/src/components/questions/booking-terms-card.tsx",
+ questionCard:
+ "D:/sajjadi/marriage/src/components/questions/question-card.tsx",
+ sliderPage: "D:/sajjadi/marriage/src/components/sliders/slider-page.tsx",
+ sliderSlide: "D:/sajjadi/marriage/src/components/sliders/slider-slide.tsx",
+ sliderSlideOne:
+ "D:/sajjadi/marriage/src/components/sliders/slider-slide-one.tsx",
+ sliderSlideTwo:
+ "D:/sajjadi/marriage/src/components/sliders/slider-slide-two.tsx",
+ sliderSlideThree:
+ "D:/sajjadi/marriage/src/components/sliders/slider-slide-three.tsx",
+ sliderSlideFour:
+ "D:/sajjadi/marriage/src/components/sliders/slider-slide-four.tsx",
+ button: "D:/sajjadi/marriage/src/components/ui/button.tsx",
+ infoProgressCard:
+ "D:/sajjadi/marriage/src/components/ui/info-progress-card.tsx",
+ navigationButton:
+ "D:/sajjadi/marriage/src/components/ui/navigation-button.tsx",
+ pageBackground:
+ "D:/sajjadi/marriage/src/components/utils/page-background.tsx",
+} as const;
diff --git a/src/components/questions/booking-terms-card.tsx b/src/components/questions/booking-terms-card.tsx
new file mode 100644
index 0000000..139f9f6
--- /dev/null
+++ b/src/components/questions/booking-terms-card.tsx
@@ -0,0 +1,29 @@
+import { IoChevronUp } from "react-icons/io5";
+
+type BookingTermsCardProps = {
+ title: string;
+ items: readonly string[];
+};
+
+export function BookingTermsCard({ title, items }: BookingTermsCardProps) {
+ return (
+
+
+
+ {title}
+
+
+
+
+
+
+
+ {items.map((item) => (
+ - {item}
+ ))}
+
+
+ );
+}
+
+export default BookingTermsCard;
diff --git a/src/components/questions/question-button.tsx b/src/components/questions/question-button.tsx
new file mode 100644
index 0000000..de8b5ab
--- /dev/null
+++ b/src/components/questions/question-button.tsx
@@ -0,0 +1,30 @@
+import type { QuestionField } from "@/data/question-data";
+import { IoInformation } from "react-icons/io5";
+
+type QuestionButtonProps = {
+ question: QuestionField;
+};
+
+export function QuestionButton({ question }: QuestionButtonProps) {
+ return (
+
+
+
{question.title}
+ {question.tooltip ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {question.description}
+
+
+
+
+
+
+
+
+
+
+ {item.title}
+
+ {item.required ? (
+
+ (Required)
+
+ ) : null}
+
+
+ Estimate time: {item.estimate}
+
+
+
+
+ {item.showInfoBadge ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ {normalizedProgress}%
+
+
+
+
+ {item.note}
+
+ ) : null}
+
+
+ );
+}
+
+export default QuestionCard;
diff --git a/src/components/questions/question-date.tsx b/src/components/questions/question-date.tsx
new file mode 100644
index 0000000..e31f63e
--- /dev/null
+++ b/src/components/questions/question-date.tsx
@@ -0,0 +1,11 @@
+import type { QuestionField } from "@/data/question-data";
+
+type QuestionDateProps = {
+ question: QuestionField;
+};
+
+export function QuestionDate({ question }: QuestionDateProps) {
+ return ;
+}
+
+export default QuestionDate;
diff --git a/src/components/questions/question-dropdown.tsx b/src/components/questions/question-dropdown.tsx
new file mode 100644
index 0000000..0662f25
--- /dev/null
+++ b/src/components/questions/question-dropdown.tsx
@@ -0,0 +1,11 @@
+import type { QuestionField } from "@/data/question-data";
+
+type QuestionDropdownProps = {
+ question: QuestionField;
+};
+
+export function QuestionDropdown({ question }: QuestionDropdownProps) {
+ return ;
+}
+
+export default QuestionDropdown;
diff --git a/src/components/questions/question-file.tsx b/src/components/questions/question-file.tsx
new file mode 100644
index 0000000..c7c39b3
--- /dev/null
+++ b/src/components/questions/question-file.tsx
@@ -0,0 +1,11 @@
+import type { QuestionField } from "@/data/question-data";
+
+type QuestionFileProps = {
+ question: QuestionField;
+};
+
+export function QuestionFile({ question }: QuestionFileProps) {
+ return ;
+}
+
+export default QuestionFile;
diff --git a/src/components/questions/question-number.tsx b/src/components/questions/question-number.tsx
new file mode 100644
index 0000000..19a7a17
--- /dev/null
+++ b/src/components/questions/question-number.tsx
@@ -0,0 +1,11 @@
+import type { QuestionField } from "@/data/question-data";
+
+type QuestionNumberProps = {
+ question: QuestionField;
+};
+
+export function QuestionNumber({ question }: QuestionNumberProps) {
+ return ;
+}
+
+export default QuestionNumber;
diff --git a/src/components/questions/question-radio.tsx b/src/components/questions/question-radio.tsx
new file mode 100644
index 0000000..b091e8d
--- /dev/null
+++ b/src/components/questions/question-radio.tsx
@@ -0,0 +1,11 @@
+import type { QuestionField } from "@/data/question-data";
+
+type QuestionRadioProps = {
+ question: QuestionField;
+};
+
+export function QuestionRadio({ question }: QuestionRadioProps) {
+ return ;
+}
+
+export default QuestionRadio;
diff --git a/src/components/questions/question-slider.tsx b/src/components/questions/question-slider.tsx
new file mode 100644
index 0000000..f330de8
--- /dev/null
+++ b/src/components/questions/question-slider.tsx
@@ -0,0 +1,11 @@
+import type { QuestionField } from "@/data/question-data";
+
+type QuestionSliderProps = {
+ question: QuestionField;
+};
+
+export function QuestionSlider({ question }: QuestionSliderProps) {
+ return ;
+}
+
+export default QuestionSlider;
diff --git a/src/components/questions/question-text.tsx b/src/components/questions/question-text.tsx
new file mode 100644
index 0000000..317ed59
--- /dev/null
+++ b/src/components/questions/question-text.tsx
@@ -0,0 +1,11 @@
+import type { QuestionField } from "@/data/question-data";
+
+type QuestionTextProps = {
+ question: QuestionField;
+};
+
+export function QuestionText({ question }: QuestionTextProps) {
+ return ;
+}
+
+export default QuestionText;
diff --git a/src/components/sliders/slider-slide-three.tsx b/src/components/sliders/slider-slide-three.tsx
index b32e54a..bbc78a6 100644
--- a/src/components/sliders/slider-slide-three.tsx
+++ b/src/components/sliders/slider-slide-three.tsx
@@ -1,30 +1,40 @@
-import { SliderSlide, type SliderSlideProps } from "@/components/sliders/slider-slide";
import Image from "next/image";
+import type { SliderSlideProps } from "@/components/sliders/slider-slide";
export function SliderSlideThree({ index }: SliderSlideProps) {
- return (
-
-
-
Submit Process
-
- {index + 1}/4 terms & conditions
-
-
+
Submit Process
+
+ {index + 1}/4 terms & conditions
+
+
-
-
+
+
+
+ );
}
diff --git a/src/components/ui/info-progress-card.tsx b/src/components/ui/info-progress-card.tsx
index 730b440..cbe80cc 100644
--- a/src/components/ui/info-progress-card.tsx
+++ b/src/components/ui/info-progress-card.tsx
@@ -1,10 +1,14 @@
-import { IoInformation, IoInformationCircle, IoPerson } from "react-icons/io5";
+import Image from "next/image";
+import Link from "next/link";
+import { useId } from "react";
type InfoProgressCardProps = {
title: string;
- requiredLabel?: string;
+ requiredLabel: boolean;
estimate: string;
progress: number;
+ tooltip?: string;
+ slug: string;
};
const RADIUS = 12;
@@ -12,81 +16,115 @@ const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
export function InfoProgressCard({
title,
- requiredLabel = "(Required)",
+ requiredLabel = false,
estimate,
progress,
+ tooltip,
+ slug,
}: InfoProgressCardProps) {
+ const tooltipId = useId();
const normalizedProgress = Math.max(0, Math.min(progress, 100));
const dashOffset = CIRCUMFERENCE - (normalizedProgress / 100) * CIRCUMFERENCE;
return (
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
- {title}{" "}
-
- {requiredLabel}
-
-
-
- Estimate time: {estimate}
-
-
+
+
+
+
+ {title}{" "}
+
+ {requiredLabel && "(Required)"}
+
+
+
-
-
+ {tooltip ? (
+
+ ) : null}
+
-
-
-
-
- {normalizedProgress}%
-
+
+
+ Estimate time: {estimate}
+
+
+ {normalizedProgress < 100 ? (
+
+ ) : (
+
+ )}
+
+ {normalizedProgress}%
+
+
-
-
+
+
);
}
diff --git a/src/components/ui/information-sheet.tsx b/src/components/ui/information-sheet.tsx
new file mode 100644
index 0000000..49b5f56
--- /dev/null
+++ b/src/components/ui/information-sheet.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import Image, { type StaticImageData } from "next/image";
+import type { HTMLAttributes, ReactNode } from "react";
+import { useEffect, useState } from "react";
+import Button from "@/components/ui/button";
+
+type InformationSheetPresetIcon =
+ | "play"
+ | "warning"
+ | "coin"
+ | "stash_play-solid.svg"
+ | "warning.svg"
+ | "coin.svg";
+
+type InformationSheetIcon =
+ | InformationSheetPresetIcon
+ | string
+ | {
+ src: string | StaticImageData;
+ alt?: string;
+ width?: number;
+ height?: number;
+ };
+
+export type InformationSheetProps = Omit<
+ HTMLAttributes
,
+ "children" | "title"
+> & {
+ icon?: InformationSheetIcon;
+ title: ReactNode;
+ description?: ReactNode;
+ buttons?: ReactNode;
+ closeOnOutside?: boolean;
+};
+
+const DEFAULT_ICON = {
+ src: "/assets/images/stash_play-solid.svg",
+ alt: "Play",
+ width: 50,
+ height: 50,
+} as const;
+
+const ICON_PRESETS: Record<
+ InformationSheetPresetIcon,
+ {
+ src: string;
+ alt: string;
+ width: number;
+ height: number;
+ }
+> = {
+ play: DEFAULT_ICON,
+ "stash_play-solid.svg": DEFAULT_ICON,
+ warning: {
+ src: "/assets/images/Vector.svg",
+ alt: "Warning",
+ width: 36,
+ height: 36,
+ },
+ "warning.svg": {
+ src: "/assets/images/Vector.svg",
+ alt: "Warning",
+ width: 36,
+ height: 36,
+ },
+ coin: {
+ src: "/assets/images/Inner Plugdsain Iframe.svg",
+ alt: "Coin",
+ width: 50,
+ height: 50,
+ },
+ "coin.svg": {
+ src: "/assets/images/Inner Plugdsain Iframe.svg",
+ alt: "Coin",
+ width: 50,
+ height: 50,
+ },
+};
+
+function resolveIcon(icon: InformationSheetIcon | undefined) {
+ if (!icon) {
+ return DEFAULT_ICON;
+ }
+
+ if (typeof icon === "string") {
+ return (
+ ICON_PRESETS[icon as InformationSheetPresetIcon] ?? {
+ src: icon,
+ alt: "Information",
+ width: DEFAULT_ICON.width,
+ height: DEFAULT_ICON.height,
+ }
+ );
+ }
+
+ return {
+ src: icon.src,
+ alt: icon.alt ?? "Information",
+ width: icon.width ?? DEFAULT_ICON.width,
+ height: icon.height ?? DEFAULT_ICON.height,
+ };
+}
+
+export function InformationSheet({
+ icon,
+ title,
+ description,
+ buttons,
+ closeOnOutside = true,
+ className,
+ ...props
+}: InformationSheetProps) {
+ const [isOpen, setIsOpen] = useState(true);
+ const resolvedIcon = resolveIcon(icon);
+ const resolvedButtons =
+ typeof buttons === "string" ? (
+
+ ) : (
+ buttons
+ );
+
+ useEffect(() => {
+ if (!isOpen) {
+ return;
+ }
+
+ const previousBodyOverflow = document.body.style.overflow;
+ const previousHtmlOverflow = document.documentElement.style.overflow;
+
+ document.body.style.overflow = "hidden";
+ document.documentElement.style.overflow = "hidden";
+
+ return () => {
+ document.body.style.overflow = previousBodyOverflow;
+ document.documentElement.style.overflow = previousHtmlOverflow;
+ };
+ }, [isOpen]);
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+ {
+ if (closeOnOutside && event.target === event.currentTarget) {
+ setIsOpen(false);
+ }
+ }}
+ onKeyDown={(event) => {
+ if (
+ closeOnOutside &&
+ event.target === event.currentTarget &&
+ (event.key === "Escape" || event.key === "Enter" || event.key === " ")
+ ) {
+ event.preventDefault();
+ setIsOpen(false);
+ }
+ }}
+ >
+
+
+
+
+
+ {title}
+
+
+ {description ? (
+
{description}
+ ) : null}
+
+ {resolvedButtons ? (
+
+ {resolvedButtons}
+
+ ) : null}
+
+