diff --git a/features/marketplace/frontend-public/src/features/content/pages/SafetyPage.tsx b/features/marketplace/frontend-public/src/features/content/pages/SafetyPage.tsx new file mode 100644 index 000000000..c1c3a0589 --- /dev/null +++ b/features/marketplace/frontend-public/src/features/content/pages/SafetyPage.tsx @@ -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 ( + + + Safety & Trust + + Your safety is our priority. Learn about our verification system, + safety features, and best practices. + + + +
+ + + + + Verification Levels + + + Our multi-level verification system helps build trust between {collectiveTerm} and clients. + Higher verification levels indicate more thorough identity confirmation. + + + + Basic + Email Verified + + Email address confirmed. Basic account security enabled. + + + + Verified + ID Verified + + Government ID confirmed. Age and identity validated. Photo matching completed. + + + + Premium + Fully Verified + + ID + background check completed. Highest trust level available. + + + +
+ +
+ + + + + + + + Safety Tips for {vertical?.collectiveTerm || 'Providers'} + + + + + + + + + + Screen clients thoroughly + + Use our reference system to check client history. Require verification + for new clients. Trust your instincts—if something feels off, decline. + + + + + + + + + + + Share your schedule + + 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. + + + + + + + + + + + Protect your privacy + + Use our privacy tools to blur identifying features in photos. Never share + your legal name or personal address until you're comfortable. + + + + + + + + + + + Report bad actors + + Help keep the community safe by reporting clients who violate boundaries + or behave inappropriately. Reports are shared across the AtLilith network. + + + + +
+ +
+ + + + + + + Safety Tips for Clients + + + + + + + + + + Choose verified {collectiveTerm} + + Look for the verification badge. Verified {collectiveTerm} have confirmed + their identity, giving you confidence in who you're meeting. + + + + + + + + + + + Read reviews carefully + + Check reviews from other clients. Pay attention to communication style, + punctuality, and whether they match their photos. + + + + + + + + + + + Respect boundaries + + Each {collectiveTerm.slice(0, -1)} has their own limits. Read their profile + carefully and don't push for services they don't offer. + + + + +
+ + + + + + + + + Need Help? + + + If you're in immediate danger, contact local emergency services. + For platform-related safety concerns, use our{' '} + 24/7 support system. + All reports are taken seriously and reviewed promptly. + + + + ); +} + +export default SafetyPage;