diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..8e62739 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/index.html b/index.html index 2c5521c..be1c30a 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + + Miracles In Motion | 501(c)3 Non-Profit Organization @@ -24,12 +26,10 @@ - - - + diff --git a/package-lock.json b/package-lock.json index 80d6102..ae77651 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@fontsource/inter": "^5.2.8", + "@fontsource/playfair-display": "^5.2.8", "@react-three/fiber": "^8.16.8", "@stripe/react-stripe-js": "^2.8.1", "@stripe/stripe-js": "^4.7.0", @@ -2417,6 +2418,15 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource/playfair-display": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource/playfair-display/-/playfair-display-5.2.8.tgz", + "integrity": "sha512-fUEhib70SszNhQVsGbUMSsWJhr7Je0rdeuZdtGpDNu0GKF1xJM8QhpI/y0pckU25GcChXm9TLOmeZupkvvZo2g==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", diff --git a/package.json b/package.json index acb506e..249c71f 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "homepage": "https://miraclesinmotion.org", "dependencies": { "@fontsource/inter": "^5.2.8", + "@fontsource/playfair-display": "^5.2.8", "@react-three/fiber": "^8.16.8", "@stripe/react-stripe-js": "^2.8.1", "@stripe/stripe-js": "^4.7.0", diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..a4be5b2 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..78b40c0 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-192x192.png b/public/favicon-192x192.png new file mode 100644 index 0000000..f3bfddf Binary files /dev/null and b/public/favicon-192x192.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..30b58ad Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon-512x512.png b/public/favicon-512x512.png new file mode 100644 index 0000000..1e0dc90 Binary files /dev/null and b/public/favicon-512x512.png differ diff --git a/public/favicon.svg b/public/favicon.svg index 1e377e0..2a2d385 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,13 +1,14 @@ - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..8e62739 Binary files /dev/null and b/public/logo.png differ diff --git a/public/site.webmanifest b/public/site.webmanifest index b376fc5..c95df33 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1,21 +1,29 @@ { - "name": "Miracles In Motion", - "short_name": "MiraclesInMotion", + "name": "Miracles In Motion Foundation", + "short_name": "MiM", "description": "A 501(c)3 non-profit providing essentials for student success", "start_url": "/", "display": "standalone", - "background_color": "#ffffff", - "theme_color": "#ec4899", + "background_color": "#1a3c34", + "theme_color": "#1a3c34", "icons": [ { "src": "/favicon-192x192.png", "sizes": "192x192", - "type": "image/png" + "type": "image/png", + "purpose": "any maskable" }, { "src": "/favicon-512x512.png", "sizes": "512x512", - "type": "image/png" + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "/favicon.svg", + "sizes": "any", + "type": "image/svg+xml", + "purpose": "any" } ], "categories": ["education", "social", "non-profit"], @@ -25,4 +33,4 @@ "scope": "/", "related_applications": [], "prefer_related_applications": false -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index f6f9d55..b05b151 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1493,7 +1493,7 @@ function Testimonial() { function GetInvolved() { const options = [ - { title: "Donate", body: "Fuel fast responses for urgent student needs.", href: "#/donate", accent: "from-rose-500 to-primary-500", icon: Heart }, + { title: "Donate", body: "Fuel fast responses for urgent student needs.", href: "#/donate", accent: "from-secondary-500 to-primary-500", icon: Heart }, { title: "Volunteer", body: "Assemble kits, deliver items, host a drive.", href: "#/volunteers", accent: "from-sky-500 to-secondary-500", icon: Users }, { title: "Corporate sponsor", body: "Schools and community orgs: let's team up.", href: "#/sponsors", accent: "from-emerald-500 to-lime-500", icon: Globe }, ] @@ -2939,7 +2939,7 @@ function PortalsPage() {
{/* Admin Portal */}
-
+
-

AI Assistance Portal

-

+

AI Assistance Portal

+

AI-powered request matching and insights

-
+
Real-time AI request processing @@ -3091,7 +3091,7 @@ function PortalsPage() { Access AI Portal @@ -3108,7 +3108,7 @@ function PortalsPage() {
{/* Advanced Analytics */}
@@ -4151,19 +4151,19 @@ function AnalyticsDashboard() {
-

Students Helped

-

1,847

+

Students Helped

+

1,847

- +
+15.2% - vs last month + vs last month
@@ -4273,12 +4273,12 @@ function AnalyticsDashboard() {
789
-
+
- + Emergency Responses
- 156 + 156
diff --git a/src/AppNew.tsx b/src/AppNew.tsx index 13de880..5c6abd6 100644 --- a/src/AppNew.tsx +++ b/src/AppNew.tsx @@ -77,7 +77,7 @@ const App: React.FC = () => { return ( -
+
{/* Navigation */}

- + AI Insights

@@ -200,7 +200,7 @@ export function AIAssistancePortal({ userRole }: AIAssistancePortalProps) { {aiInsights.map((insight) => (
@@ -324,7 +324,7 @@ function RequestCard({ request, onApprove, onModify, showAIRecommendations, isSe {showAIRecommendations && request.aiRecommendations && ( { if (loading) { return ( -
+
{ } return ( -
+
{/* Header */} {

Donations Processed

-
- 💝 +
+ 💝
-
{formatCurrency(metrics?.totalDonationsProcessed || 0)}
+
{formatCurrency(metrics?.totalDonationsProcessed || 0)}
+15% from last {selectedTimeframe}
@@ -247,7 +247,7 @@ const AdvancedAnalyticsDashboard: React.FC = () => { initial={{ height: 0 }} animate={{ height: `${(trend.studentsServed / 400) * 100}%` }} transition={{ delay: 0.6 + index * 0.1, duration: 0.8 }} - className="bg-gradient-to-t from-blue-500 to-blue-300 rounded-t-lg w-full mb-2 min-h-[20px]" + className="bg-gradient-to-t from-primary-500 to-primary-300 rounded-t-lg w-full mb-2 min-h-[20px]" />
{trend.month}
{trend.studentsServed}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 889a1e0..85ea4fa 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -11,12 +11,9 @@ export function Footer() {
-
- -
-
Miracles in Motion
-
Essentials for every student
-
+
+ +

Essentials for every student

A 501(c)(3) nonprofit providing students with school supplies, clothing, and emergency support to help them succeed. diff --git a/src/components/MimChatAgent.tsx b/src/components/MimChatAgent.tsx index 9cff24e..5da8b29 100644 --- a/src/components/MimChatAgent.tsx +++ b/src/components/MimChatAgent.tsx @@ -155,10 +155,10 @@ export default function MimChatAgent({ currentPath }: MimChatAgentProps) { animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: 12, scale: 0.96 }} transition={{ duration: 0.18 }} - className="w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-[1.75rem] border border-white/60 bg-white/92 shadow-[0_24px_80px_rgba(219,39,119,0.22)] backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/92" + className="w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-[1.75rem] border border-white/60 bg-white/92 shadow-[0_24px_80px_rgba(26,60,52,0.22)] backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/92" aria-label="Miracles in Motion AI chat assistant" > -

+
@@ -191,7 +191,7 @@ export default function MimChatAgent({ currentPath }: MimChatAgentProps) { className={`max-w-[85%] rounded-2xl px-4 py-3 text-sm leading-6 shadow-sm ${ message.role === 'user' ? 'rounded-br-md bg-neutral-900 text-white dark:bg-white dark:text-neutral-900' - : 'rounded-bl-md bg-pink-50 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-100' + : 'rounded-bl-md bg-primary-50 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-100' }`} > {message.content} @@ -201,7 +201,7 @@ export default function MimChatAgent({ currentPath }: MimChatAgentProps) { {isSending && (
-
+
Thinking...
@@ -214,7 +214,7 @@ export default function MimChatAgent({ currentPath }: MimChatAgentProps) { key={suggestion} type="button" onClick={() => void handleSubmit(undefined, suggestion)} - className="rounded-full border border-pink-200 bg-white px-3 py-2 text-left text-xs font-medium text-neutral-700 transition hover:border-pink-300 hover:bg-pink-50 dark:border-white/10 dark:bg-neutral-950 dark:text-neutral-200 dark:hover:bg-neutral-900" + className="rounded-full border border-primary-200 bg-white px-3 py-2 text-left text-xs font-medium text-neutral-700 transition hover:border-secondary-400 hover:bg-primary-50 dark:border-white/10 dark:bg-neutral-950 dark:text-neutral-200 dark:hover:bg-neutral-900" > {suggestion} @@ -231,12 +231,12 @@ export default function MimChatAgent({ currentPath }: MimChatAgentProps) { onChange={event => setInput(event.target.value)} rows={2} placeholder="Ask about programs, requests, donations, or volunteering..." - className="min-h-[3.25rem] flex-1 resize-none rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-900 outline-none transition focus:border-pink-400 focus:ring-2 focus:ring-pink-200 dark:border-white/10 dark:bg-neutral-950 dark:text-white dark:focus:border-pink-500 dark:focus:ring-pink-500/20" + className="min-h-[3.25rem] flex-1 resize-none rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-900 outline-none transition focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:border-white/10 dark:bg-neutral-950 dark:text-white dark:focus:border-secondary-500 dark:focus:ring-secondary-500/20" /> @@ -276,7 +276,7 @@ export default function MimChatAgent({ currentPath }: MimChatAgentProps) { aria-expanded={isOpen} aria-controls="mim-chat-agent-panel" > - + {isOpen ? : } diff --git a/src/components/MobileVolunteerApp.tsx b/src/components/MobileVolunteerApp.tsx index d6a97e7..0cedfa9 100644 --- a/src/components/MobileVolunteerApp.tsx +++ b/src/components/MobileVolunteerApp.tsx @@ -217,7 +217,7 @@ const MobileVolunteerApp: React.FC = () => { switch (status) { case 'pending': return 'text-orange-600 bg-orange-100' case 'accepted': return 'text-blue-600 bg-blue-100' - case 'in-progress': return 'text-purple-600 bg-purple-100' + case 'in-progress': return 'text-primary-600 bg-primary-100' case 'completed': return 'text-green-600 bg-green-100' default: return 'text-gray-600 bg-gray-100' } @@ -288,7 +288,7 @@ const MobileVolunteerApp: React.FC = () => { {assignment.status === 'in-progress' && ( diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 4a45aaa..bb9e902 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -37,16 +37,13 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen <>
@@ -521,7 +521,7 @@ const StaffTrainingDashboard: React.FC = () => {

-
+
{checklist.completedItems}/{checklist.totalItems}
Items Complete
@@ -538,7 +538,7 @@ const StaffTrainingDashboard: React.FC = () => { initial={{ width: 0 }} animate={{ width: `${(checklist.completedItems / checklist.totalItems) * 100}%` }} transition={{ delay: 0.3, duration: 1.2 }} - className="bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full" + className="bg-gradient-to-r from-primary-500 to-secondary-500 h-3 rounded-full" />
@@ -576,7 +576,7 @@ const StaffTrainingDashboard: React.FC = () => { )}
{
-
{/* Donation Summary */} -
+
{isRecurring ? 'Monthly' : 'One-time'} Donation - + {formatCurrency(amount)}
@@ -254,7 +254,7 @@ function PaymentForm({ amount, isRecurring = false, onSuccess, onError }: Paymen @@ -161,7 +161,7 @@ export function LanguageSwitcher({
{code === currentLang && ( -
+
)} ))} diff --git a/src/components/ui/LogoMark.tsx b/src/components/ui/LogoMark.tsx index eaf67ab..3a5e818 100644 --- a/src/components/ui/LogoMark.tsx +++ b/src/components/ui/LogoMark.tsx @@ -1,24 +1,32 @@ -// LogoMark component -import { motion } from 'framer-motion' -import { Sparkles } from 'lucide-react' +export type LogoMarkVariant = 'nav' | 'footer' | 'square' + +export interface LogoMarkProps { + /** nav/footer: full wordmark; square: compact icon tile */ + variant?: LogoMarkVariant + className?: string +} + +const LOGO_SRC = '/logo.png' + +export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) { + const isDecorative = variant === 'nav' || variant === 'footer' -export function LogoMark() { return ( -
- + {isDecorative - -
+ ) } -export default LogoMark \ No newline at end of file +export default LogoMark diff --git a/src/components/ui/PerformanceMonitor.tsx b/src/components/ui/PerformanceMonitor.tsx index 3d36d45..6f3bd3d 100644 --- a/src/components/ui/PerformanceMonitor.tsx +++ b/src/components/ui/PerformanceMonitor.tsx @@ -184,7 +184,7 @@ export function PerformanceMonitor({
- + Images {bundleMetrics.imageSize}KB diff --git a/src/index.css b/src/index.css index e12a764..c9e08f1 100644 --- a/src/index.css +++ b/src/index.css @@ -1,27 +1,40 @@ -/* Self-hosted Inter (LCP-friendly; no external font requests) */ +/* Self-hosted fonts (LCP-friendly; no external font requests) */ @import "@fontsource/inter/300.css"; @import "@fontsource/inter/400.css"; @import "@fontsource/inter/500.css"; @import "@fontsource/inter/600.css"; @import "@fontsource/inter/700.css"; +@import "@fontsource/playfair-display/600.css"; +@import "@fontsource/playfair-display/700.css"; @tailwind base; @tailwind components; @tailwind utilities; +/* Official MIM brand palette (logo: forest green + gold) */ +:root { + --mim-brand-green: #1a3c34; + --mim-brand-green-deep: #0f2922; + --mim-brand-green-mid: #2d6b5c; + --mim-brand-gold: #c5a059; + --mim-brand-gold-bright: #d4af37; + --mim-focus-ring: var(--mim-brand-gold); + --mim-shadow-brand: rgba(26, 60, 52, 0.28); + --mim-shadow-gold: rgba(197, 160, 89, 0.32); +} + @layer base { html { scroll-behavior: smooth; } - /* Skip to content: visible on focus for keyboard/screen reader (a11y) */ .skip-link { position: absolute; top: -100px; left: 0.5rem; z-index: 100; padding: 0.75rem 1rem; - background: #db2777; + background: var(--mim-brand-green); color: #fff; font-weight: 500; border-radius: 0.5rem; @@ -29,43 +42,166 @@ } .skip-link:focus { top: 0.5rem; - outline: 2px solid #ec4899; + outline: 2px solid var(--mim-brand-gold); outline-offset: 2px; } - + body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-feature-settings: 'rlig' 1, 'calt' 1; } - - /* Custom scrollbar */ + ::-webkit-scrollbar { width: 8px; } - + ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } - + ::-webkit-scrollbar-thumb { - background: linear-gradient(135deg, #ec4899, #8b5cf6); + background: linear-gradient(135deg, var(--mim-brand-green), var(--mim-brand-gold)); border-radius: 4px; } - + ::-webkit-scrollbar-thumb:hover { - background: linear-gradient(135deg, #db2777, #7c3aed); + background: linear-gradient(135deg, var(--mim-brand-green-deep), var(--mim-brand-gold-bright)); } } @layer components { - /* Button Components */ + /* Official logo (public/logo.png) */ + .logo-mark { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + line-height: 0; + } + + .logo-mark__img { + display: block; + object-fit: contain; + } + + /* Mobile-first; larger on tablet/desktop */ + .logo-mark--nav { + height: 2.125rem; + } + + .logo-mark--nav .logo-mark__img { + height: 100%; + width: auto; + max-width: 8.75rem; + } + + @media (min-width: 640px) { + .logo-mark--nav { + height: 2.75rem; + } + .logo-mark--nav .logo-mark__img { + max-width: 10.5rem; + } + } + + @media (min-width: 1024px) { + .logo-mark--nav { + height: 3.25rem; + } + .logo-mark--nav .logo-mark__img { + max-width: 12rem; + } + } + + .logo-mark--footer { + height: 2.75rem; + } + + .logo-mark--footer .logo-mark__img { + height: 100%; + width: auto; + max-width: 10rem; + } + + @media (min-width: 640px) { + .logo-mark--footer { + height: 3.25rem; + } + .logo-mark--footer .logo-mark__img { + max-width: 12rem; + } + } + + @media (min-width: 1024px) { + .logo-mark--footer { + height: 3.75rem; + } + .logo-mark--footer .logo-mark__img { + max-width: 14rem; + } + } + + .logo-mark--square { + width: 2.5rem; + height: 2.5rem; + border-radius: 0.375rem; + overflow: hidden; + box-shadow: 0 1px 3px rgb(15 41 34 / 0.25); + } + + .logo-mark--square .logo-mark__img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .nav-brand-link { + display: inline-flex; + align-items: center; + padding: 0.125rem 0.25rem; + border-radius: 0.5rem; + transition: opacity 0.2s ease; + } + + .nav-brand-link:hover { + opacity: 0.9; + } + + .nav-brand-link:focus-visible { + outline: 2px solid var(--mim-brand-gold); + outline-offset: 3px; + } + + .footer-brand-block { + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .footer-brand-block .footer-tagline { + font-size: 0.875rem; + color: #52525b; + max-width: 20rem; + } + + @media (prefers-color-scheme: dark) { + .footer-brand-block .footer-tagline { + color: #d4d4d8; + } + } + .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; - background-image: linear-gradient(to right, #db2777, #7c3aed); /* Replace with your primary-600 and secondary-600 colors */ + background-image: linear-gradient( + to right, + var(--mim-brand-green), + var(--mim-brand-green-mid), + var(--mim-brand-gold) + ); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; @@ -73,64 +209,66 @@ font-size: 0.875rem; font-weight: 500; color: #fff; - box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.25), 0 4px 6px -4px rgba(236, 72, 153, 0.25); + box-shadow: 0 10px 15px -3px var(--mim-shadow-brand), 0 4px 6px -4px var(--mim-shadow-gold); transition: transform 0.2s, box-shadow 0.2s; outline: none; } .btn-primary:hover { transform: scale(1.05); - box-shadow: 0 20px 25px -5px rgba(236, 72, 153, 0.25), 0 8px 10px -6px rgba(236, 72, 153, 0.25); + box-shadow: 0 20px 25px -5px var(--mim-shadow-brand), 0 8px 10px -6px var(--mim-shadow-gold); } .btn-primary:focus { outline: none; - box-shadow: 0 0 0 2px #ec4899, 0 10px 15px -3px rgba(236, 72, 153, 0.25), 0 4px 6px -4px rgba(236, 72, 153, 0.25); + box-shadow: 0 0 0 2px var(--mim-focus-ring), 0 10px 15px -3px var(--mim-shadow-brand); } .btn-primary:focus-visible { - outline: 2px solid #ec4899; + outline: 2px solid var(--mim-focus-ring); outline-offset: 2px; } - + .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; - border: 1px solid #d4d4d8; /* border-neutral-300 */ - background-color: rgba(255,255,255,0.7); /* bg-white/70 */ - padding-left: 1.5rem; /* px-6 */ + border: 1px solid #d4d4d8; + background-color: rgba(255, 255, 255, 0.7); + padding-left: 1.5rem; padding-right: 1.5rem; - padding-top: 0.75rem; /* py-3 */ + padding-top: 0.75rem; padding-bottom: 0.75rem; - font-size: 0.875rem; /* text-sm */ - font-weight: 500; /* font-medium */ - color: #52525b; /* text-neutral-700 */ - backdrop-filter: blur(8px); /* backdrop-blur */ - transition: background 0.2s, box-shadow 0.2s; + font-size: 0.875rem; + font-weight: 500; + color: #52525b; + backdrop-filter: blur(8px); + transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; outline: none; } .btn-secondary:hover { background-color: #fff; - box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); + border-color: var(--mim-brand-gold); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .btn-secondary:focus { outline: none; - box-shadow: 0 0 0 2px #737373, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); + box-shadow: 0 0 0 2px var(--mim-brand-green), 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .btn-secondary:focus-visible { - outline: 2px solid #737373; /* focus:ring-neutral-500 */ + outline: 2px solid var(--mim-brand-green); outline-offset: 2px; } @media (prefers-color-scheme: dark) { .btn-secondary { - border: 1px solid rgba(255,255,255,0.2); /* dark:border-white/20 */ - background-color: rgba(255,255,255,0.1); /* dark:bg-white/10 */ - color: #e5e5e5; /* dark:text-neutral-200 */ + border: 1px solid rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0.1); + color: #e5e5e5; } .btn-secondary:hover { - background-color: rgba(255,255,255,0.2); /* dark:hover:bg-white/20 */ + background-color: rgba(255, 255, 255, 0.2); + border-color: var(--mim-brand-gold); } } - + .btn-white { display: inline-flex; align-items: center; @@ -143,84 +281,72 @@ padding-bottom: 0.75rem; font-size: 0.875rem; font-weight: 500; - color: #18181b; - box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); + color: var(--mim-brand-green-deep); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s; outline: none; } .btn-white:hover { transform: scale(1.05); - box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); - } - .btn-white:focus { - outline: none; - box-shadow: 0 0 0 2px #fff, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .btn-white:focus-visible { - outline: 2px solid #fff; + outline: 2px solid var(--mim-brand-gold); outline-offset: 2px; } - + .navlink { - font-size: 0.875rem; /* text-sm */ - font-weight: 500; /* font-medium */ - color: #52525b; /* text-neutral-600 */ + font-size: 0.875rem; + font-weight: 500; + color: #52525b; transition: color 0.2s; } .navlink:hover { - color: #ec4899; /* text-primary-600 */ + color: var(--mim-brand-green); } @media (prefers-color-scheme: dark) { .navlink { - color: #d4d4d8; /* dark:text-neutral-300 */ + color: #d4d4d8; } .navlink:hover { - color: #a78bfa; /* dark:hover:text-primary-400 */ + color: var(--mim-brand-gold-bright); } } - - /* Form Components */ + .input-field { width: 100%; border-radius: 0.75rem; - border: 1px solid #d1d5db; /* gray-300 */ + border: 1px solid #d1d5db; background-color: #fff; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; + padding: 0.75rem 1rem; font-size: 0.875rem; - color: #111827; /* gray-900 */ + color: #111827; transition: border-color 0.2s, box-shadow 0.2s; } .input-field::placeholder { - color: #6b7280; /* gray-500 */ + color: #6b7280; opacity: 1; } .input-field:focus { - border-color: #ec4899; /* primary-500 */ + border-color: var(--mim-brand-green); outline: none; - box-shadow: 0 0 0 2px #ec4899, 0 0 0 2px rgba(236, 72, 153, 0.2); + box-shadow: 0 0 0 2px var(--mim-brand-green), 0 0 0 4px rgba(26, 60, 52, 0.15); } .input-field:focus-visible { - outline: 2px solid #ec4899; + outline: 2px solid var(--mim-brand-green); outline-offset: 2px; } @media (prefers-color-scheme: dark) { .input-field { - border: 1px solid #4b5563; /* gray-600 */ - background-color: #1f2937; /* gray-800 */ - color: #f3f4f6; /* gray-100 */ - } - .input-field::placeholder { - color: #9ca3af; /* gray-400 */ + border: 1px solid #4b5563; + background-color: #1f2937; + color: #f3f4f6; } .input-field:focus { - border-color: #a21caf; /* primary-400 */ + border-color: var(--mim-brand-gold); } } - - /* Text Utilities */ + .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; @@ -228,7 +354,7 @@ -webkit-box-orient: vertical; overflow: hidden; } - + .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; @@ -236,140 +362,144 @@ -webkit-box-orient: vertical; overflow: hidden; } - + .input { width: 100%; - border-radius: 0.75rem; /* rounded-xl */ - border: 1px solid rgba(255,255,255,0.3); /* border-white/30 */ - background-color: rgba(255,255,255,0.7); /* bg-white/70 */ - padding-left: 0.75rem; /* px-3 */ - padding-right: 0.75rem; - padding-top: 0.5rem; /* py-2 */ - padding-bottom: 0.5rem; - font-size: 0.875rem; /* text-sm */ - backdrop-filter: blur(8px); /* backdrop-blur */ + border-radius: 0.75rem; + border: 1px solid rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.7); + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + backdrop-filter: blur(8px); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .input:focus { - border-color: #ec4899; /* primary-500 */ + border-color: var(--mim-brand-green); outline: none; - box-shadow: 0 0 0 2px #ec4899, 0 0 0 2px rgba(236, 72, 153, 0.2); + box-shadow: 0 0 0 2px var(--mim-brand-green), 0 0 0 4px rgba(26, 60, 52, 0.15); } .input:focus-visible { - outline: 2px solid #ec4899; + outline: 2px solid var(--mim-brand-green); outline-offset: 2px; } @media (prefers-color-scheme: dark) { .input { - border: 1px solid rgba(255,255,255,0.1); /* dark:border-white/10 */ - background-color: rgba(255,255,255,0.1); /* dark:bg-white/10 */ + border: 1px solid rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .input:focus { - border-color: #a21caf; /* dark:focus:border-primary-400 */ + border-color: var(--mim-brand-gold); } } - - /* Card Components */ + .card { - border-radius: 1rem; /* rounded-2xl */ - border: 1px solid rgba(255,255,255,0.3); /* border-white/30 */ - background-color: rgba(255,255,255,0.7); /* bg-white/70 */ - padding: 1.5rem; /* p-6 */ - box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* shadow-xl */ - backdrop-filter: blur(8px); /* backdrop-blur */ + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.7); + padding: 1.5rem; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(8px); } @media (prefers-color-scheme: dark) { .card { - border: 1px solid rgba(255,255,255,0.1); /* dark:border-white/10 */ - background-color: rgba(255,255,255,0.05); /* dark:bg-white/5 */ + border: 1px solid rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.05); } } - + .card-hover { transition: transform 0.2s, box-shadow 0.2s; } .card-hover:hover { - transform: translateY(-0.25rem); /* -translate-y-1 */ - box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 0 8px 10px -6px rgba(0,0,0,0.1); /* shadow-2xl */ + transform: translateY(-0.25rem); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } - - /* Section Header */ + .section-header { margin-left: auto; margin-right: auto; - max-width: 48rem; /* 3xl = 48rem */ + max-width: 48rem; text-align: center; } - + .section-eyebrow { - font-size: 0.875rem; /* text-sm */ + font-size: 0.875rem; text-transform: uppercase; - letter-spacing: 0.05em; /* tracking-wider */ - color: #db2777; /* text-primary-600 */ + letter-spacing: 0.12em; + color: var(--mim-brand-gold); + font-weight: 600; } @media (prefers-color-scheme: dark) { .section-eyebrow { - color: #a78bfa; /* dark:text-primary-400 */ + color: var(--mim-brand-gold-bright); } } - + .section-title { - margin-top: 0.5rem; /* mt-2 */ - font-size: 1.875rem; /* text-3xl */ - font-weight: 700; /* font-bold */ - letter-spacing: -0.025em; /* tracking-tight */ + margin-top: 0.5rem; + font-family: "Playfair Display", Georgia, "Times New Roman", serif; + font-size: 1.875rem; + font-weight: 700; + letter-spacing: -0.025em; line-height: 2.25rem; + color: var(--mim-brand-green-deep); } @media (min-width: 640px) { .section-title { - font-size: 2.25rem; /* sm:text-4xl */ + font-size: 2.25rem; line-height: 2.5rem; } } - + @media (prefers-color-scheme: dark) { + .section-title { + color: #f4f4f5; + } + } + .section-subtitle { - margin-top: 1rem; /* mt-4 */ - font-size: 1.125rem; /* text-lg */ - color: #52525b; /* text-neutral-600 */ + margin-top: 1rem; + font-size: 1.125rem; + color: #52525b; } @media (prefers-color-scheme: dark) { .section-subtitle { - color: #d4d4d8; /* dark:text-neutral-300 */ + color: #d4d4d8; } } } @layer utilities { - /* Gradient Text */ .gradient-text { - background-image: linear-gradient(to right, #ec4899, #a21caf, #7c3aed); /* Replace with your Tailwind color values */ + background-image: linear-gradient( + to right, + var(--mim-brand-green), + var(--mim-brand-green-mid), + var(--mim-brand-gold-bright) + ); -webkit-background-clip: text; background-clip: text; color: transparent; } - - /* Glass Effect */ + .glass { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); } - + .glass-dark { background-color: rgba(0, 0, 0, 0.1); backdrop-filter: blur(12px); } - - /* Text Balance */ + .text-balance { text-wrap: balance; } - - /* Animation Utilities */ + .animate-in { animation: animate-in 0.6s ease-out; } - + @keyframes animate-in { from { opacity: 0; @@ -380,29 +510,17 @@ transform: translateY(0); } } - - /* Focus States for Accessibility */ + .focus-visible\:ring-2:focus-visible { outline: 2px solid transparent; outline-offset: 2px; - box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5); + box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.55); } } -/* High Contrast Mode Support */ @media (prefers-contrast: high) { - .btn-primary { - border-width: 2px; - border-style: solid; - border-color: currentColor; - } - - .btn-secondary { - border-width: 2px; - border-style: solid; - border-color: currentColor; - } - + .btn-primary, + .btn-secondary, .card { border-width: 2px; border-style: solid; @@ -410,7 +528,6 @@ } } -/* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, @@ -420,34 +537,27 @@ transition-duration: 0.01ms !important; scroll-behavior: auto !important; } - - .animate-marquee { - animation: none; - } - - .animate-float { - animation: none; - } - + + .animate-marquee, + .animate-float, .animate-pulse-slow { animation: none; } } -/* Print Styles */ @media print { .no-print { display: none !important; } - + body { color: black !important; background: white !important; } - + .gradient-text { color: black !important; background: none !important; -webkit-text-fill-color: initial !important; } -} \ No newline at end of file +} diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx index eeef135..dbfccc4 100644 --- a/src/layouts/MainLayout.tsx +++ b/src/layouts/MainLayout.tsx @@ -31,7 +31,7 @@ export const MainLayout: React.FC = ({ const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return ( -
+

- Miracles in Motion + Miracles in Motion

@@ -70,7 +70,7 @@ export const HomePage: React.FC = () => { {/* Background Elements */}

-
+
@@ -124,7 +124,7 @@ export const HomePage: React.FC = () => { {/* Call to Action */} -
+