muken/la-huasca-ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply La Huasca brand colors across layout, nav, login, admin, user and home

Browse Source
This commit is contained in:
muken
2026-06-27 16:42:34 -05:00
parent cc59177a74
commit 8952bbf555
7 changed files with 321 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/user/page.tsx
+97 -42
View File
@@ -31,6 +31,11 @@ interface PortalData {
wifiPassword: string;
}
const gold = '#E8A849';
const navy = '#010D1E';
const cream = '#f5f0e8';
const warm = '#a6683c';
export default function UserPage() {
const router = useRouter();
const [data, setData] = useState<PortalData | null>(null);
@@ -53,94 +58,144 @@ export default function UserPage() {
.finally(() => setLoading(false));
}, [router]);
if (loading) return <main style={{ padding: '2rem' }}><p>Loading...</p></main>;
if (loading) {
return (
<main style={{ padding: '2rem', color: warm, fontSize: '18px' }}>
<p>Loading your portal...</p>
</main>
);
}
if (!data) {
return <main style={{ padding: '2rem' }}><p>Please log in as user to access this page.</p></main>;
}
return (
<main style={{ padding: '2rem', maxWidth: '48rem', margin: '0 auto' }}>
<h1>User Portal</h1>
<main style={{ padding: '2rem', maxWidth: '56rem', margin: '0 auto' }}>
<h1 style={{ fontSize: 'clamp(28px, 4vw, 42px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 2rem' }}>
Member Portal
</h1>
<section style={{ marginBottom: '2rem' }}>
<h2>Future Reservations</h2>
<Section title="Future Reservations">
{data.reservations.length === 0 ? (
<p style={{ color: 'dimgray' }}>No upcoming reservations.</p>
<p style={{ color: '#777' }}>No upcoming reservations.</p>
) : (
<ul style={{ padding: 0, listStyle: 'none' }}>
<ul style={{ padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{data.reservations.map((r) => (
<li
key={r.id}
style={{
padding: '1rem',
marginBottom: '0.5rem',
border: '1px solid #ddd',
borderRadius: '8px',
padding: '1rem 1.25rem',
background: cream,
borderRadius: '16px',
boxShadow: '0 1px 2px rgba(1,13,30,0.08)',
color: navy,
}}
>
{r.date} at {r.time} · {r.guests} guests · {r.table_name}
<strong style={{ color: warm }}>{r.date}</strong> at {r.time} · {r.guests} guests · {r.table_name}
</li>
))}
</ul>
)}
</section>
</Section>
<section style={{ marginBottom: '2rem' }}>
<h2>Discount Coupons</h2>
<Section title="Discount Coupons">
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
{data.coupons.map((c) => (
<div
key={c.id}
style={{
padding: '1rem',
border: '2px dashed #1a1a1a',
borderRadius: '8px',
minWidth: '12rem',
padding: '1.25rem',
background: cream,
border: '2px dashed ' + warm,
borderRadius: '16px',
minWidth: '13rem',
color: navy,
}}
>
<strong>{c.code}</strong>
<p style={{ margin: '0.5rem 0 0', color: 'dimgray' }}>{c.discount}</p>
<strong style={{ fontSize: '18px', color: warm }}>{c.code}</strong>
<p style={{ margin: '0.5rem 0 0', color: '#555', fontSize: '14px' }}>{c.discount}</p>
</div>
))}
</div>
</section>
</Section>
<section style={{ marginBottom: '2rem' }}>
<h2>Offers</h2>
<ul>
<Section title="Offers">
<ul style={{ padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{data.offers.map((o) => (
<li key={o.id}>
<strong>{o.title}</strong> — {o.description}
<li
key={o.id}
style={{
padding: '1rem 1.25rem',
background: cream,
borderRadius: '16px',
color: navy,
}}
>
<strong style={{ color: warm }}>{o.title}</strong> — {o.description}
</li>
))}
</ul>
</section>
</Section>
<section style={{ marginBottom: '2rem' }}>
<h2>WiFi Password</h2>
<p
<Section title="WiFi Password">
<div
style={{
display: 'inline-block',
padding: '0.75rem 1.5rem',
background: '#f4f4f4',
borderRadius: '8px',
padding: '0.9rem 2rem',
background: navy,
color: cream,
borderRadius: '12px',
fontFamily: 'monospace',
fontSize: '1.25rem',
fontSize: '1.4rem',
letterSpacing: '0.04em',
boxShadow: '0 4px 12px rgba(1,13,30,0.2)',
}}
>
{data.wifiPassword}
</p>
</section>
</div>
</Section>
<section>
<h2>Member Benefits</h2>
<ul>
<Section title="Member Benefits">
<ul style={{ padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: '0.75rem' }}>
{data.benefits.map((b) => (
<li key={b}>{b}</li>
<li
key={b}
style={{
padding: '0.9rem 1.1rem',
background: '#e8eff3',
borderLeft: '4px solid ' + gold,
borderRadius: '0 12px 12px 0',
color: navy,
}}
>
{b}
</li>
))}
</ul>
</section>
</Section>
</main>
);
}
function Section({ title, children }: { title: string; children: React.ReactNode }) {
return (
<section style={{ marginBottom: '2.5rem' }}>
<h2
style={{
fontSize: '20px',
fontWeight: 600,
letterSpacing: '-0.01em',
color: navy,
margin: '0 0 1rem',
paddingBottom: '0.4rem',
borderBottom: '1.5px solid ' + warm,
display: 'inline-block',
}}
>
{title}
</h2>
{children}
</section>
);
}