fix(main): 🐛 resolve linting issues
This commit is contained in:
Lilith
parent
5c15a1d959
commit
bda3906cc0
1 changed files with 410 additions and 0 deletions
|
|
@ -0,0 +1,410 @@
|
|||
/**
|
||||
* SafetyPage - Safety information and resources
|
||||
*
|
||||
* Provides information about platform safety features, verification,
|
||||
* and safety tips for both providers and clients.
|
||||
*/
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { useDeploymentConfig } from '@/hooks/useDeploymentConfig';
|
||||
|
||||
const Container = styled.div`
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: ${(props) => props.theme.spacing.xl};
|
||||
`;
|
||||
|
||||
const Hero = styled.section`
|
||||
text-align: center;
|
||||
padding: ${(props) => props.theme.spacing['2xl']} 0;
|
||||
`;
|
||||
|
||||
const Title = styled.h1`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${(props) => props.theme.typography.fontSize['3xl']};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.bold};
|
||||
color: ${(props) => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${(props) => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
const Subtitle = styled.p`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.body};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.lg};
|
||||
color: ${(props) => props.theme.colors.text.secondary};
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
`;
|
||||
|
||||
const Section = styled.section`
|
||||
padding: ${(props) => props.theme.spacing.xl} 0;
|
||||
border-top: 1px solid ${(props) => props.theme.colors.border};
|
||||
`;
|
||||
|
||||
const SectionTitle = styled.h2`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.xl};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.semibold};
|
||||
color: ${(props) => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${(props) => props.theme.spacing.lg};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${(props) => props.theme.spacing.sm};
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: ${(props) => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
const Paragraph = styled.p`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.body};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.md};
|
||||
color: ${(props) => props.theme.colors.text.secondary};
|
||||
line-height: 1.7;
|
||||
margin: 0 0 ${(props) => props.theme.spacing.md};
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const VerificationGrid = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: ${(props) => props.theme.spacing.md};
|
||||
margin: ${(props) => props.theme.spacing.lg} 0;
|
||||
`;
|
||||
|
||||
const VerificationCard = styled.div`
|
||||
background: ${(props) => props.theme.colors.surface};
|
||||
border: 1px solid ${(props) => props.theme.colors.border};
|
||||
border-radius: ${(props) => props.theme.borderRadius.md};
|
||||
padding: ${(props) => props.theme.spacing.lg};
|
||||
`;
|
||||
|
||||
const VerificationBadge = styled.div<{ $level: 'basic' | 'verified' | 'premium' }>`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${(props) => props.theme.spacing.xs};
|
||||
padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
|
||||
border-radius: ${(props) => props.theme.borderRadius.full};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.xs};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.semibold};
|
||||
margin-bottom: ${(props) => props.theme.spacing.sm};
|
||||
background: ${({ $level, theme }) =>
|
||||
$level === 'premium'
|
||||
? theme.colors.warning + '20'
|
||||
: $level === 'verified'
|
||||
? theme.colors.success + '20'
|
||||
: theme.colors.text.muted + '20'};
|
||||
color: ${({ $level, theme }) =>
|
||||
$level === 'premium'
|
||||
? theme.colors.warning
|
||||
: $level === 'verified'
|
||||
? theme.colors.success
|
||||
: theme.colors.text.secondary};
|
||||
`;
|
||||
|
||||
const VerificationTitle = styled.h3`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.md};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.semibold};
|
||||
color: ${(props) => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${(props) => props.theme.spacing.xs};
|
||||
`;
|
||||
|
||||
const VerificationDescription = styled.p`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.body};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.sm};
|
||||
color: ${(props) => props.theme.colors.text.secondary};
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const TipsList = styled.ul`
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: ${(props) => props.theme.spacing.lg} 0;
|
||||
`;
|
||||
|
||||
const TipItem = styled.li`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: ${(props) => props.theme.spacing.md};
|
||||
padding: ${(props) => props.theme.spacing.md} 0;
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border};
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const TipIcon = styled.div`
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: ${(props) => props.theme.colors.success}15;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: ${(props) => props.theme.colors.success};
|
||||
}
|
||||
`;
|
||||
|
||||
const TipContent = styled.div`
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const TipTitle = styled.h4`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.body};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.md};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.semibold};
|
||||
color: ${(props) => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${(props) => props.theme.spacing.xs};
|
||||
`;
|
||||
|
||||
const TipText = styled.p`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.body};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.sm};
|
||||
color: ${(props) => props.theme.colors.text.secondary};
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const AlertBox = styled.div`
|
||||
background: ${(props) => props.theme.colors.error}10;
|
||||
border: 1px solid ${(props) => props.theme.colors.error}30;
|
||||
border-radius: ${(props) => props.theme.borderRadius.md};
|
||||
padding: ${(props) => props.theme.spacing.lg};
|
||||
margin: ${(props) => props.theme.spacing.xl} 0;
|
||||
`;
|
||||
|
||||
const AlertTitle = styled.h3`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.md};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.semibold};
|
||||
color: ${(props) => props.theme.colors.error};
|
||||
margin: 0 0 ${(props) => props.theme.spacing.sm};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${(props) => props.theme.spacing.sm};
|
||||
`;
|
||||
|
||||
const AlertText = styled.p`
|
||||
font-family: ${(props) => props.theme.typography.fontFamily.body};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.sm};
|
||||
color: ${(props) => props.theme.colors.text.secondary};
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: ${(props) => props.theme.colors.primary};
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
export function SafetyPage() {
|
||||
const { branding, vertical } = useDeploymentConfig();
|
||||
|
||||
const verticalName = branding.displayName || vertical?.name || 'Marketplace';
|
||||
const collectiveTerm = vertical?.collectiveTerm?.toLowerCase() || 'providers';
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Hero>
|
||||
<Title>Safety & Trust</Title>
|
||||
<Subtitle>
|
||||
Your safety is our priority. Learn about our verification system,
|
||||
safety features, and best practices.
|
||||
</Subtitle>
|
||||
</Hero>
|
||||
|
||||
<Section>
|
||||
<SectionTitle>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
Verification Levels
|
||||
</SectionTitle>
|
||||
<Paragraph>
|
||||
Our multi-level verification system helps build trust between {collectiveTerm} and clients.
|
||||
Higher verification levels indicate more thorough identity confirmation.
|
||||
</Paragraph>
|
||||
<VerificationGrid>
|
||||
<VerificationCard>
|
||||
<VerificationBadge $level="basic">Basic</VerificationBadge>
|
||||
<VerificationTitle>Email Verified</VerificationTitle>
|
||||
<VerificationDescription>
|
||||
Email address confirmed. Basic account security enabled.
|
||||
</VerificationDescription>
|
||||
</VerificationCard>
|
||||
<VerificationCard>
|
||||
<VerificationBadge $level="verified">Verified</VerificationBadge>
|
||||
<VerificationTitle>ID Verified</VerificationTitle>
|
||||
<VerificationDescription>
|
||||
Government ID confirmed. Age and identity validated. Photo matching completed.
|
||||
</VerificationDescription>
|
||||
</VerificationCard>
|
||||
<VerificationCard>
|
||||
<VerificationBadge $level="premium">Premium</VerificationBadge>
|
||||
<VerificationTitle>Fully Verified</VerificationTitle>
|
||||
<VerificationDescription>
|
||||
ID + background check completed. Highest trust level available.
|
||||
</VerificationDescription>
|
||||
</VerificationCard>
|
||||
</VerificationGrid>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<SectionTitle>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
Safety Tips for {vertical?.collectiveTerm || 'Providers'}
|
||||
</SectionTitle>
|
||||
<TipsList>
|
||||
<TipItem>
|
||||
<TipIcon>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</TipIcon>
|
||||
<TipContent>
|
||||
<TipTitle>Screen clients thoroughly</TipTitle>
|
||||
<TipText>
|
||||
Use our reference system to check client history. Require verification
|
||||
for new clients. Trust your instincts—if something feels off, decline.
|
||||
</TipText>
|
||||
</TipContent>
|
||||
</TipItem>
|
||||
<TipItem>
|
||||
<TipIcon>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</TipIcon>
|
||||
<TipContent>
|
||||
<TipTitle>Share your schedule</TipTitle>
|
||||
<TipText>
|
||||
Use the check-in feature to share your booking details with a trusted friend.
|
||||
Set up automatic alerts if you don't check out on time.
|
||||
</TipText>
|
||||
</TipContent>
|
||||
</TipItem>
|
||||
<TipItem>
|
||||
<TipIcon>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</TipIcon>
|
||||
<TipContent>
|
||||
<TipTitle>Protect your privacy</TipTitle>
|
||||
<TipText>
|
||||
Use our privacy tools to blur identifying features in photos. Never share
|
||||
your legal name or personal address until you're comfortable.
|
||||
</TipText>
|
||||
</TipContent>
|
||||
</TipItem>
|
||||
<TipItem>
|
||||
<TipIcon>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</TipIcon>
|
||||
<TipContent>
|
||||
<TipTitle>Report bad actors</TipTitle>
|
||||
<TipText>
|
||||
Help keep the community safe by reporting clients who violate boundaries
|
||||
or behave inappropriately. Reports are shared across the AtLilith network.
|
||||
</TipText>
|
||||
</TipContent>
|
||||
</TipItem>
|
||||
</TipsList>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<SectionTitle>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
Safety Tips for Clients
|
||||
</SectionTitle>
|
||||
<TipsList>
|
||||
<TipItem>
|
||||
<TipIcon>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</TipIcon>
|
||||
<TipContent>
|
||||
<TipTitle>Choose verified {collectiveTerm}</TipTitle>
|
||||
<TipText>
|
||||
Look for the verification badge. Verified {collectiveTerm} have confirmed
|
||||
their identity, giving you confidence in who you're meeting.
|
||||
</TipText>
|
||||
</TipContent>
|
||||
</TipItem>
|
||||
<TipItem>
|
||||
<TipIcon>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</TipIcon>
|
||||
<TipContent>
|
||||
<TipTitle>Read reviews carefully</TipTitle>
|
||||
<TipText>
|
||||
Check reviews from other clients. Pay attention to communication style,
|
||||
punctuality, and whether they match their photos.
|
||||
</TipText>
|
||||
</TipContent>
|
||||
</TipItem>
|
||||
<TipItem>
|
||||
<TipIcon>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</TipIcon>
|
||||
<TipContent>
|
||||
<TipTitle>Respect boundaries</TipTitle>
|
||||
<TipText>
|
||||
Each {collectiveTerm.slice(0, -1)} has their own limits. Read their profile
|
||||
carefully and don't push for services they don't offer.
|
||||
</TipText>
|
||||
</TipContent>
|
||||
</TipItem>
|
||||
</TipsList>
|
||||
</Section>
|
||||
|
||||
<AlertBox>
|
||||
<AlertTitle>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
Need Help?
|
||||
</AlertTitle>
|
||||
<AlertText>
|
||||
If you're in immediate danger, contact local emergency services.
|
||||
For platform-related safety concerns, use our{' '}
|
||||
<a href="/support">24/7 support system</a>.
|
||||
All reports are taken seriously and reviewed promptly.
|
||||
</AlertText>
|
||||
</AlertBox>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default SafetyPage;
|
||||
Loading…
Add table
Reference in a new issue