refactor: clean up imports and remove unused state variables in App component

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'
 import {
   ArrowRight,
@@ -6,7 +6,6 @@ import {
   CheckCircle2,
   Facebook,
   Globe,
-  HandHeart,
   Heart,
   Instagram,
   Mail,
@@ -23,8 +22,6 @@ import {
   Quote,
   FileText,
   ShieldCheck,
-  Menu,
-  X,
 } from 'lucide-react'
 
 /**
@@ -106,7 +103,6 @@ function useHashRoute() {
 /* ===================== Main App ===================== */
 export default function MiraclesInMotionSite() {
   const [darkMode, setDarkMode] = useState(false)
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const route = useHashRoute()
 
   useEffect(() => {
@@ -130,7 +126,7 @@ export default function MiraclesInMotionSite() {
       <CookieBanner />
       <SkipToContent />
       <header className="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/50 dark:supports-[backdrop-filter]:bg-black/40 border-b border-white/30 dark:border-white/10">
-        <Nav darkMode={darkMode} setDarkMode={setDarkMode} mobileMenuOpen={mobileMenuOpen} setMobileMenuOpen={setMobileMenuOpen} />
+        <Nav darkMode={darkMode} setDarkMode={setDarkMode} />
       </header>
       <main id="content" className="relative">
         <Router route={route} />
@@ -177,11 +173,9 @@ function SkipToContent() {
 interface NavProps {
   darkMode: boolean
   setDarkMode: (value: boolean) => void
-  mobileMenuOpen: boolean
-  setMobileMenuOpen: (value: boolean) => void
 }
 
-function Nav({ darkMode, setDarkMode, mobileMenuOpen, setMobileMenuOpen }: NavProps) {
+function Nav({ darkMode, setDarkMode }: NavProps) {
   return (
     <nav className="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
       <div className="flex items-center gap-3">
@@ -278,7 +272,7 @@ function Hero() {
           <div className="mt-8 flex flex-wrap items-center gap-3">
             <Magnetic>
               <a href="#/donate" className="btn-primary">
-                <HandHeart className="mr-2 h-4 w-4" /> Donate now
+                <Heart className="mr-2 h-4 w-4" /> Donate now
               </a>
             </Magnetic>
             <a href="#/volunteers" className="btn-secondary">
@@ -549,7 +543,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: HandHeart },
+    { title: "Donate", body: "Fuel fast responses for urgent student needs.", href: "#/donate", accent: "from-rose-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 },
   ]
@@ -647,7 +641,7 @@ function DonatePage() {
   ]
   
   return (
-    <PageShell title="Donate" icon={HandHeart} eyebrow="Give with confidence" cta={<a href="#/legal" className="btn-secondary">Policies</a>}>
+    <PageShell title="Donate" icon={Heart} eyebrow="Give with confidence" cta={<a href="#/legal" className="btn-secondary">Policies</a>}>
       <div className="grid gap-6 md:grid-cols-3">
         <div className="md:col-span-2 space-y-6">
           <div className="card">

src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(