You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
3.0 KiB
81 lines
3.0 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { FaPen } from "react-icons/fa6";
|
|
import AdvisorActionsCard from "@/components/ui/advisor-actions-card";
|
|
import NavigationButton from "@/components/ui/navigation-button";
|
|
import { PageBackground } from "@/components/utils/page-background";
|
|
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
|
|
import { localizePath } from "@/i18n/config";
|
|
import { useI18n } from "@/i18n/provider";
|
|
|
|
const advisorAvatars = [
|
|
{ id: "advisor-primary", src: "/assets/images/Avatar Image.png" },
|
|
{ id: "advisor-secondary", src: "/assets/images/Ellipse 370.png" },
|
|
{ id: "advisor-tertiary", src: "/assets/images/Avatar Image.png" },
|
|
];
|
|
|
|
export default function FindingMatchPage() {
|
|
const { dictionary: t, locale } = useI18n();
|
|
const { data: profile } = useMarriageProfileQuery();
|
|
const copy = t.findingMatch;
|
|
const matchImageSrc =
|
|
profile?.gender === "female"
|
|
? "/assets/images/Group 15978fdsa80467.svg"
|
|
: "/assets/images/Group 159788fd0467.svg";
|
|
|
|
return (
|
|
<>
|
|
<PageBackground />
|
|
|
|
<main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[calc(var(--safe-top)+28px)] pb-5 text-center">
|
|
<header className="-mx-[6px] flex items-center justify-between">
|
|
<NavigationButton icon="back" />
|
|
<h1 className="font-faminela">{t.common.appName}</h1>
|
|
<NavigationButton icon="subscription" iconLabel="Subscribe" />
|
|
</header>
|
|
|
|
<section className="flex flex-1 flex-col items-center mt-32">
|
|
<div className="relative h-[124px] w-[130px]" aria-hidden="true">
|
|
<Image
|
|
src={matchImageSrc}
|
|
alt=""
|
|
fill
|
|
sizes="58px"
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<h1 className="mt-5 text-[22px] font-bold leading-none tracking-[0.02em] text-[#171717] uppercase">
|
|
{copy.title}
|
|
</h1>
|
|
|
|
<p className="mt-3 max-w-[320px] text-[14px] leading-[1.35] font-semibold text-[#747474]">
|
|
{copy.description}
|
|
</p>
|
|
</section>
|
|
|
|
<AdvisorActionsCard
|
|
title={copy.advisorTitle}
|
|
description={copy.advisorDescription}
|
|
avatars={advisorAvatars}
|
|
extraCount={7}
|
|
getAdvisorLabel={copy.getAdvisor}
|
|
getAdvisorHref="/questions-list"
|
|
/>
|
|
|
|
<Link
|
|
className="inline-flex mt-3.5 w-full cursor-pointer items-center justify-center rounded-[9px] border-none bg-[#2B2C31] bg-none px-4 py-[17px] text-center text-white shadow-none transition-opacity"
|
|
href={localizePath("/questions-list", locale)}
|
|
>
|
|
<span className="flex min-w-0 items-center justify-center gap-2 text-center text-[16px] leading-none font-semibold">
|
|
<FaPen aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
|
|
<span>{copy.editProfile}</span>
|
|
</span>
|
|
</Link>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|