diff --git a/index.html b/index.html index ff7d42e..762d7f9 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Palengkatts - +
diff --git a/package-lock.json b/package-lock.json index 450a0bc..edc0ff3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "clsx": "^2.1.1", "framer-motion": "^12.42.2", "leaflet": "^1.9.4", - "lucide-react": "^1.23.0", + "lucide-react": "0.469.0", "react": "^18.3.1", "react-day-picker": "^10.0.1", "react-dom": "^18.3.1", @@ -3576,7 +3576,9 @@ } }, "node_modules/lucide-react": { - "version": "1.23.0", + "version": "0.469.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz", + "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==", "license": "ISC", "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" diff --git a/package.json b/package.json index 4fd23a1..d4e8eab 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "clsx": "^2.1.1", "framer-motion": "^12.42.2", "leaflet": "^1.9.4", - "lucide-react": "^1.23.0", + "lucide-react": "0.469.0", "react": "^18.3.1", "react-day-picker": "^10.0.1", "react-dom": "^18.3.1", diff --git a/public/images/qr/gcash-qr.png b/public/images/qr/gcash-qr.png new file mode 100644 index 0000000..4661dbd Binary files /dev/null and b/public/images/qr/gcash-qr.png differ diff --git a/public/images/qr/maya-qr.png b/public/images/qr/maya-qr.png new file mode 100644 index 0000000..4661dbd Binary files /dev/null and b/public/images/qr/maya-qr.png differ diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index 95da60c..35d8b89 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -1,6 +1,8 @@ import { useState } from 'react' import { Link, useLocation } from 'react-router-dom' import { Menu, X } from 'lucide-react' +import { motion, AnimatePresence } from 'framer-motion' +import { mobileMenuContainer, mobileMenuItem } from '@/lib/motion' const navLinks = [ { to: '/', label: 'Markets' }, @@ -57,23 +59,31 @@ export default function Nav() { {/* Mobile menu */} - {mobileOpen && ( - - )} + + {mobileOpen && ( + + {navLinks.map(link => ( + + setMobileOpen(false)} + > + {link.label} + + + ))} + + )} + ) diff --git a/src/index.css b/src/index.css index 23b9d63..4ea94d9 100644 --- a/src/index.css +++ b/src/index.css @@ -12,18 +12,43 @@ --color-accent: #e8736d; --color-accent-on: #ffffff; --color-accent-soft: #fdf0ef; + --color-secondary: #d4a04a; + --color-secondary-on: #ffffff; + --color-secondary-soft: #fdf6e8; --color-success: #2e9d57; --color-warn: #ffb020; --color-danger: #e5484d; + --color-info: #3b82f6; + + /* Warm neutral scale */ + --color-neutral-50: #faf8f5; + --color-neutral-100: #f5f0ec; + --color-neutral-200: #ebe4de; + --color-neutral-300: #d9d0c8; + --color-neutral-400: #b8aca2; + --color-neutral-500: #968a7e; + --color-neutral-600: #796f65; + --color-neutral-700: #5c5349; + --color-neutral-800: #3d3530; + --color-neutral-900: #1d1836; --font-display: "Noto Serif Display", serif; --font-body: Inter, system-ui, sans-serif; - --font-mono: "SF Mono", ui-monospace, Menlo, monospace; + --font-mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px; + + /* Motion tokens */ + --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1.0); + --ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0); + --ease-move: cubic-bezier(0.4, 0.0, 0.2, 1.0); + --duration-micro: 100ms; + --duration-short: 200ms; + --duration-medium: 350ms; + --duration-long: 500ms; } @layer base { diff --git a/src/layouts/PublicLayout.jsx b/src/layouts/PublicLayout.jsx index b2638f4..4792dc8 100644 --- a/src/layouts/PublicLayout.jsx +++ b/src/layouts/PublicLayout.jsx @@ -1,10 +1,14 @@ -import { Outlet } from 'react-router-dom' +import { Outlet, useLocation } from 'react-router-dom' +import { motion, AnimatePresence, MotionConfig } from 'framer-motion' import Nav from '../components/Nav' import Footer from '../components/Footer' +import { pageVariants, easeEnter, easeExit } from '../lib/motion' export default function PublicLayout() { + const location = useLocation() + return ( - <> +