|
|
|
@ -1,16 +1,57 @@ |
|
|
|
import type { SliderSlideProps } from "./slider-slide"; |
|
|
|
"use client"; |
|
|
|
|
|
|
|
import { useEffect, useRef } from "react"; |
|
|
|
import Button from "./button"; |
|
|
|
import { SliderHeader } from "./slider-header"; |
|
|
|
import type { SliderSlideProps } from "./slider-slide"; |
|
|
|
|
|
|
|
const ACTION_AREA_HEIGHT = 80; |
|
|
|
const CONTENT_MASK = `linear-gradient(to bottom, black 0, black calc(100% - ${ACTION_AREA_HEIGHT}px), transparent calc(100% - ${ACTION_AREA_HEIGHT}px), transparent 100%)`; |
|
|
|
|
|
|
|
export function SliderSlideOne({ index }: SliderSlideProps) { |
|
|
|
type SliderSlideOneProps = SliderSlideProps & { |
|
|
|
onScrollToEnd?: () => void; |
|
|
|
}; |
|
|
|
|
|
|
|
export function SliderSlideOne({ index, onScrollToEnd }: SliderSlideOneProps) { |
|
|
|
const containerRef = useRef<HTMLDivElement>(null); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
const container = containerRef.current; |
|
|
|
if (!container) return; |
|
|
|
|
|
|
|
const checkScroll = () => { |
|
|
|
const tolerance = 10; |
|
|
|
const isBottom = |
|
|
|
container.scrollHeight - container.scrollTop <= |
|
|
|
container.clientHeight + tolerance; |
|
|
|
if (isBottom) { |
|
|
|
onScrollToEnd?.(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// Check initially
|
|
|
|
checkScroll(); |
|
|
|
|
|
|
|
container.addEventListener("scroll", checkScroll); |
|
|
|
window.addEventListener("resize", checkScroll); |
|
|
|
|
|
|
|
// Check after short delay for dynamically rendered container layout
|
|
|
|
const timer = setTimeout(checkScroll, 150); |
|
|
|
|
|
|
|
return () => { |
|
|
|
container.removeEventListener("scroll", checkScroll); |
|
|
|
window.removeEventListener("resize", checkScroll); |
|
|
|
clearTimeout(timer); |
|
|
|
}; |
|
|
|
}, [onScrollToEnd]); |
|
|
|
|
|
|
|
return ( |
|
|
|
<section |
|
|
|
aria-label={`Slide ${index + 1}`} |
|
|
|
className="flex h-full min-h-0 w-full shrink-0 flex-col" |
|
|
|
> |
|
|
|
<div |
|
|
|
ref={containerRef} |
|
|
|
className="min-h-0 flex-1 overflow-y-auto" |
|
|
|
style={{ |
|
|
|
paddingBottom: ACTION_AREA_HEIGHT, |
|
|
|
@ -18,98 +59,370 @@ export function SliderSlideOne({ index }: SliderSlideProps) { |
|
|
|
maskImage: CONTENT_MASK, |
|
|
|
}} |
|
|
|
> |
|
|
|
<div className="text-center"> |
|
|
|
<p className="text-[#747474] group-10 font-semibold"> |
|
|
|
Submit Process |
|
|
|
</p> |
|
|
|
<p className="text-[#111111] group-16 font-bold"> |
|
|
|
{index + 1}/4 terms & conditions |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<SliderHeader index={index} title="Terms & Conditions" /> |
|
|
|
<div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8"> |
|
|
|
<p className="text-[#F14B46] group-12 font-semibold text-center"> |
|
|
|
Dear user, while welcoming you to the Habib Marij application, |
|
|
|
please read the following rules and regulations carefully before |
|
|
|
using the services of this platform. Your registration and use of |
|
|
|
this application constitutes full acceptance of these rules. |
|
|
|
Welcome to Habib Marriage. Please review our terms of service before |
|
|
|
proceeding. By registering and using this platform, you agree to |
|
|
|
these terms |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div className="bg-white rounded-2xl mt-4 overflow-y-auto shadow-xs"> |
|
|
|
<div className="space-y-6 px-5 py-5"> |
|
|
|
<div className="space-y-3.5"> |
|
|
|
<h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3"> |
|
|
|
1. Eligibility and Membership Requirements |
|
|
|
1. Acceptance of Rules and Platform Goal |
|
|
|
</h3> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Full Acceptance of Agreement: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Registration and use of any part of the application means |
|
|
|
reading and fully accepting all rules. If you do not agree, |
|
|
|
you must refrain from further use. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Changes and Updates: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
The application reserves the right to edit the rules when |
|
|
|
necessary, and your continued use will constitute acceptance |
|
|
|
of the new changes. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Exclusive Goal of the Application: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
This platform is designed solely for matchmaking and permanent |
|
|
|
marriage. Use with the purpose of dating, temporary |
|
|
|
relationships, or entertainment is prohibited. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Age and Legal Capacity Requirement: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Use of services is allowed only for individuals over 18 years |
|
|
|
of age who have the legal and religious capacity for marriage. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="space-y-3.5 pt-1"> |
|
|
|
<h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3"> |
|
|
|
2. User Account, Security, and Authentication |
|
|
|
</h3> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Accuracy of Personal Information: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
The user is obliged to enter all identity, occupational, |
|
|
|
educational, and marital status information completely |
|
|
|
accurately and honestly. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Prohibition of Fake Accounts: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Creating an account using the identity, name, mobile number, |
|
|
|
or photos of others, as well as creating multiple user |
|
|
|
accounts, is a serious violation. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Maintaining Account Security: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
The responsibility for maintaining the confidentiality of the |
|
|
|
password and login code lies with the user, and transferring |
|
|
|
or renting the account to another person is prohibited. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Introducing a Trusted Person: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
To enhance security, users can introduce a trusted family |
|
|
|
member. This information is used strictly for security and |
|
|
|
urgent cases. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="space-y-3.5 pt-1"> |
|
|
|
<h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3"> |
|
|
|
3. Communications, Ethics, and User Behavior |
|
|
|
</h3> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Mutual Respect: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Conversations must be ethical and purposeful. Sending |
|
|
|
offensive, sexual, obscene, threatening, or harassing messages |
|
|
|
is strictly prohibited. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Respecting Others' Privacy: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Saving, sending, or publishing screenshots of conversations |
|
|
|
and photos of other users outside the application is a |
|
|
|
violation of privacy. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Absolute Prohibition of Financial Requests: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Requesting money, loans, gift cards, cryptocurrency, or any |
|
|
|
financial benefit from other users under any pretext is |
|
|
|
prohibited. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Prohibition of Commercial Activity: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Any advertising, marketing, selling goods, or raising capital |
|
|
|
within the application environment is considered a violation. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Respectful End of Conversation: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
If the other party does not wish to continue the |
|
|
|
communication, the user is obliged to respect their decision |
|
|
|
and refrain from pursuing or causing harassment. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="space-y-3.5 pt-1"> |
|
|
|
<h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3"> |
|
|
|
4. Privacy, Data, and Intellectual Property |
|
|
|
</h3> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Personal Information Protection: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
The application is committed to protecting your sensitive |
|
|
|
information in accordance with the privacy policy and will not |
|
|
|
sell it to third parties without permission. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Public Profile Display: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
By completing the profile, the user consents to their public |
|
|
|
information being displayed to other qualified users for |
|
|
|
service delivery. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Account Deletion Rules: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Upon requesting account deletion, your information is removed |
|
|
|
from public view, but necessary data for legal and security |
|
|
|
requirements will remain archived in the system. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Intellectual Property Rights: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
All rights to software codes, design, database, and brand name |
|
|
|
belong to the platform, and any copying or scraping is |
|
|
|
prohibited. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="space-y-3.5 pt-1"> |
|
|
|
<h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3"> |
|
|
|
5. Financial Terms and Subscriptions |
|
|
|
</h3> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]">Legal Age:</span>{" "} |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Nature of Paid Services: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Users must meet the minimum legal age for independent |
|
|
|
registration. |
|
|
|
Payment is solely for using premium features and software |
|
|
|
infrastructure and does not provide any guarantee for marriage |
|
|
|
or finding a spouse. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]">Refund Policy:</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Paid fees are non-refundable, except in definitive cases of |
|
|
|
system technical errors. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Identity Verification: |
|
|
|
Disclaimer for External Transactions: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Mandatory submission of valid government-issued ID upon |
|
|
|
registration. |
|
|
|
The application holds no responsibility for financial |
|
|
|
transactions between users or outside the application's |
|
|
|
official payment gateway. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="space-y-3.5 pt-1"> |
|
|
|
<h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3"> |
|
|
|
6. Monitoring, Violations, and Legal Prosecution |
|
|
|
</h3> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Single Status Commitment: |
|
|
|
Confidential Reporting: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Users must provide proof of being single, or documents |
|
|
|
confirming divorce or spouse's death upon request. |
|
|
|
Users must report violations, suspicious behavior, or |
|
|
|
financial requests through the report violation option. The |
|
|
|
identity of the reporter remains confidential. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]">Intent:</span>{" "} |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Authorities of Application Moderators: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Commitment to monogamy and intention for permanent marriage |
|
|
|
only (no simultaneous or temporary relationships). |
|
|
|
The platform reserves the right to block, restrict, or suspend |
|
|
|
the user account without prior notice if any violation or |
|
|
|
breach of rules is detected. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
General Health: |
|
|
|
Cooperation with Law Enforcement: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Self-declaration regarding mental health, absence of |
|
|
|
addiction, and no criminal record. |
|
|
|
In the event of cybercrimes, fraud, or threats, the |
|
|
|
application will refer the necessary information to judicial |
|
|
|
and law enforcement authorities. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Dispute Resolution: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Any legal dispute must first be pursued through application |
|
|
|
support. If no agreement is reached, the competent authority |
|
|
|
will be the courts of the city where the application is |
|
|
|
registered. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="space-y-3.5 pt-1"> |
|
|
|
<h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3"> |
|
|
|
2. Privacy and Data Management |
|
|
|
7. Disclaimer and In-Person Meetings |
|
|
|
</h3> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Content Security: |
|
|
|
Role of the Application: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
This platform is only a facilitator for initial communication |
|
|
|
and does not replace family background research, counseling, |
|
|
|
and pre-marital investigations. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Responsibility for Accuracy of Claims: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Accurate verification of users' claims regarding their |
|
|
|
financial, occupational, marital, and health status is the |
|
|
|
responsibility of the user and their family. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Responsibility for In-Person Meetings: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Planning and deciding to meet in person is entirely the |
|
|
|
responsibility of the users, and the application assumes no |
|
|
|
liability for any incidents or potential damages. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Safety Recommendations in Meetings: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Technical prevention of screenshots from profiles and chat |
|
|
|
environments. |
|
|
|
It is strongly recommended that initial meetings be held in |
|
|
|
crowded public places, and that a family member or a trusted |
|
|
|
person be kept informed. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="group-12 leading-[1.55]"> |
|
|
|
<span className="font-bold text-[#262626]"> |
|
|
|
Progressive Disclosure: |
|
|
|
Force Majeure Conditions: |
|
|
|
</span>{" "} |
|
|
|
<span className="font-normal text-[#525252]"> |
|
|
|
Sensitive information (face, contact details) revealed |
|
|
|
step-by-step only with mutual consent. |
|
|
|
In the event of occurrences beyond control, such as a |
|
|
|
nationwide internet outage, natural disasters, or sanctions, |
|
|
|
the application will have no liability for temporary service |
|
|
|
outages. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
@ -122,10 +435,12 @@ export function SliderSlideOne({ index }: SliderSlideProps) { |
|
|
|
|
|
|
|
type SliderSlideOneActionsProps = { |
|
|
|
onAccept: () => void; |
|
|
|
disabled?: boolean; |
|
|
|
}; |
|
|
|
|
|
|
|
export function SliderSlideOneActions({ |
|
|
|
onAccept, |
|
|
|
disabled, |
|
|
|
}: SliderSlideOneActionsProps) { |
|
|
|
return ( |
|
|
|
<div className="flex items-center gap-3 [&>a]:flex-1 [&>button]:flex-1"> |
|
|
|
@ -137,6 +452,7 @@ export function SliderSlideOneActions({ |
|
|
|
countdownSeconds={0} |
|
|
|
onClick={onAccept} |
|
|
|
className="flex-1" |
|
|
|
disabled={disabled} |
|
|
|
> |
|
|
|
Accept |
|
|
|
</Button> |
|
|
|
|
