auto winn
This commit is contained in:
Faizulhaq F.N
@@ -0,0 +1,157 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Compass, Heart, Sparkles, MapPin, ArrowUpRight } from 'lucide-react';
|
||||
import { useTourStore } from '../../store/tourStore';
|
||||
|
||||
const Footer = () => {
|
||||
const trip = useTourStore((state) => state.trip);
|
||||
|
||||
return (
|
||||
<footer
|
||||
style={{
|
||||
borderTop: '1px solid var(--color-border)',
|
||||
backgroundColor: 'hsla(222, 28%, 6%, 0.95)',
|
||||
padding: 'var(--space-10) 0 var(--space-8)',
|
||||
marginTop: 'auto',
|
||||
}}
|
||||
>
|
||||
<div className="container">
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
|
||||
gap: 'var(--space-8)',
|
||||
marginBottom: 'var(--space-8)',
|
||||
}}
|
||||
>
|
||||
{/* Brand Info */}
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', marginBottom: 'var(--space-3)' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '34px',
|
||||
height: '34px',
|
||||
borderRadius: 'var(--radius-md)',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), var(--color-accent))',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff',
|
||||
}}
|
||||
>
|
||||
<Compass size={18} />
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: 'var(--font-display)',
|
||||
fontWeight: 800,
|
||||
fontSize: 'var(--text-lg)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
Ready to <span style={{ color: 'var(--color-accent)' }}>Plan Tour</span> (RPT)
|
||||
</span>
|
||||
</div>
|
||||
<p style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', maxWidth: '320px' }}>
|
||||
Platform interaktif perencanaan perjalanan wisata tanpa batas. Rencanakan jadwal harian, checklist packing, dan kendalikan estimasi budget.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Navigasi Cepat */}
|
||||
<div>
|
||||
<h4
|
||||
style={{
|
||||
fontSize: 'var(--text-sm)',
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
marginBottom: 'var(--space-3)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
Fitur Utama
|
||||
</h4>
|
||||
<ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
|
||||
<li>
|
||||
<Link to="/" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
|
||||
Trip Selection <ArrowUpRight size={13} />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/schedule" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
|
||||
Daily Schedule Builder <ArrowUpRight size={13} />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/packing" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
|
||||
Packing List Manager <ArrowUpRight size={13} />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/budget" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
|
||||
Budget Calculator <ArrowUpRight size={13} />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Active Trip Status */}
|
||||
<div>
|
||||
<h4
|
||||
style={{
|
||||
fontSize: 'var(--text-sm)',
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
marginBottom: 'var(--space-3)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
Trip Anda Saat Ini
|
||||
</h4>
|
||||
{trip.destination ? (
|
||||
<div className="glass" style={{ padding: 'var(--space-3) var(--space-4)', borderRadius: 'var(--radius-md)' }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 'var(--text-sm)', color: 'var(--color-accent-light)', display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
<MapPin size={14} /> {trip.destination}
|
||||
</div>
|
||||
<div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)', marginTop: '2px' }}>
|
||||
{trip.name || 'Trip Wisata'} • {trip.totalDays} Hari
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
|
||||
Belum ada trip yang dipilih. Mulai pilih destinasi di halaman utama.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid var(--color-border)',
|
||||
paddingTop: 'var(--space-6)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
gap: 'var(--space-4)',
|
||||
fontSize: 'var(--text-xs)',
|
||||
color: 'var(--color-text-muted)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
<span>© {new Date().getFullYear()} Ready to Plan Tour (RPT). Static Web Application.</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: 'var(--color-text-secondary)' }}>
|
||||
<span>Made with</span>
|
||||
<Heart size={13} style={{ color: 'var(--color-danger)' }} />
|
||||
<span>& React.js</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
Reference in New Issue
Block a user