Add support for project Travel Mate
This commit is contained in:
Van Leemput Dayron
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Shield, Smartphone, Map, DollarSign, Users, Globe, Code } from 'lucide-react';
|
||||
import { Shield, Smartphone, Map, DollarSign, Users, Globe, Code, ArrowLeft } from 'lucide-react';
|
||||
import appIcon from '../assets/app_icon.png';
|
||||
|
||||
const itemVariants = {
|
||||
@@ -219,7 +219,7 @@ const TravelMate = () => {
|
||||
<Code /> {t('travelmate.tech.api')}
|
||||
</h3>
|
||||
<ul style={{ listStyle: 'none', padding: 0 }}>
|
||||
{[1, 2, 3].map(i => (
|
||||
{[1, 2].map(i => (
|
||||
<li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
|
||||
{t(`travelmate.tech.api.${i}`)}
|
||||
</li>
|
||||
@@ -230,51 +230,99 @@ const TravelMate = () => {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Policies CTA */}
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
style={{
|
||||
padding: '2rem',
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
|
||||
borderRadius: '1rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
|
||||
{/* Legal & Support Section */}
|
||||
<motion.div variants={itemVariants} style={{ marginBottom: '6rem' }}>
|
||||
<h2 style={{
|
||||
textAlign: 'center',
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto'
|
||||
}}
|
||||
>
|
||||
<Shield className="text-primary" size={48} style={{ marginBottom: '1rem', color: 'var(--primary-color)' }} />
|
||||
<h3 style={{ marginBottom: '1.5rem' }}>
|
||||
{t('policies.title')}
|
||||
</h3>
|
||||
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<Link
|
||||
to={`/${language}/travelmate/policies`}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
{t('travelmate.policies.link')}
|
||||
marginBottom: '4rem',
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: '700',
|
||||
color: 'var(--text-color)'
|
||||
}}>{t('travelmate.legal.title')}</h2>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
|
||||
{/* Privacy Policy Card */}
|
||||
<Link to={`/${language}/travelmate/policies`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: 'var(--primary-color)' }}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Shield size={32} style={{ color: 'var(--primary-color)', marginBottom: '1.5rem' }} />
|
||||
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('policies.title')}</h3>
|
||||
<p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
|
||||
{t('travelmate.legal.privacy.desc')}
|
||||
</p>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{t('travelmate.policies.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
<Link
|
||||
to={`/${language}/travelmate/erasedata`}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
textDecoration: 'none',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
color: '#EF4444',
|
||||
borderColor: 'rgba(239, 68, 68, 0.2)'
|
||||
}}
|
||||
>
|
||||
<Shield size={18} />
|
||||
{t('travelmate.erasedata.link')}
|
||||
|
||||
{/* Erase Data Card */}
|
||||
<Link to={`/${language}/travelmate/erasedata`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: '#EF4444' }}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Shield size={32} style={{ color: '#EF4444', marginBottom: '1.5rem' }} />
|
||||
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('erasedata.title').split(' ').slice(0, 2).join(' ')}...</h3> {/* Truncate title or use specific one */}
|
||||
<p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
|
||||
{t('travelmate.legal.erasedata.desc')}
|
||||
</p>
|
||||
<span style={{ color: '#EF4444', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{t('travelmate.erasedata.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Support Card */}
|
||||
<Link to={`/${language}/travelmate/support`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: '#10B981' }}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Users size={32} style={{ color: '#10B981', marginBottom: '1.5rem' }} />
|
||||
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('support.title')}</h3>
|
||||
<p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
|
||||
{t('travelmate.legal.support.desc')}
|
||||
</p>
|
||||
<span style={{ color: '#10B981', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{t('travelmate.support.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user