2025-10-04 20:25:25 -07:00
import React , { useState , useEffect } from 'react'
2025-10-04 18:11:14 -07:00
import { motion , useMotionValue , useSpring , useTransform } from 'framer-motion'
import {
ArrowRight ,
Backpack ,
CheckCircle2 ,
Facebook ,
Globe ,
Heart ,
Instagram ,
Mail ,
MapPin ,
Moon ,
Phone ,
Shirt ,
Sparkles ,
Star ,
SunMedium ,
Users ,
Building2 ,
BookOpenText ,
Quote ,
FileText ,
ShieldCheck ,
} from 'lucide-react'
/ * *
* Miracles in Motion — Complete Non - Profit Website
* A comprehensive 501 ( c ) 3 organization website with modern design ,
* donation processing , volunteer management , and impact tracking .
* /
/* ===================== Types ===================== */
interface IconProps {
className? : string
}
interface TiltCardProps {
icon : React.ComponentType < IconProps >
title : string
desc : string
}
interface FeatureCardProps {
icon : React.ComponentType < IconProps >
title : string
body : string
}
interface StatProps {
label : string
value : number
}
interface SectionHeaderProps {
eyebrow? : string
title : string
subtitle? : string
}
interface CalloutProps {
title : string
body : string
href : string
accent : string
icon : React.ComponentType < IconProps >
}
interface PageShellProps {
title : string
icon : React.ComponentType < IconProps >
eyebrow? : string
children : React.ReactNode
cta? : React.ReactNode
}
interface CardProps {
title : string
icon : React.ComponentType < IconProps >
children : React.ReactNode
}
interface PolicySectionProps {
id : string
title : string
children : React.ReactNode
}
/* ===================== Router ===================== */
function useHashRoute() {
const parse = ( ) = > ( window . location . hash ? . slice ( 1 ) || "/" )
const [ route , setRoute ] = useState ( parse ( ) )
useEffect ( ( ) = > {
const onHash = ( ) = > setRoute ( parse ( ) )
window . addEventListener ( "hashchange" , onHash )
return ( ) = > window . removeEventListener ( "hashchange" , onHash )
} , [ ] )
return route
}
/* ===================== Main App ===================== */
export default function MiraclesInMotionSite() {
const [ darkMode , setDarkMode ] = useState ( false )
const route = useHashRoute ( )
useEffect ( ( ) = > {
document . title =
route === "/"
? "Miracles in Motion — Essentials for Every Student"
: ` Miracles in Motion — ${ route . replace ( "/" , "" ) . replace ( /-/g , " " ) . replace ( /\b\w/g , ( m ) = > m . toUpperCase ( ) ) } `
} , [ route ] )
useEffect ( ( ) = > {
if ( darkMode ) {
document . documentElement . classList . add ( 'dark' )
} else {
document . documentElement . classList . remove ( 'dark' )
}
} , [ darkMode ] )
return (
< div className = "min-h-screen bg-neutral-50 text-neutral-900 antialiased selection:bg-primary-200/60 dark:bg-neutral-950 dark:text-neutral-50" >
< BackgroundDecor / >
< 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" >
2025-10-04 20:25:25 -07:00
< Nav darkMode = { darkMode } setDarkMode = { setDarkMode } / >
2025-10-04 18:11:14 -07:00
< / header >
< main id = "content" className = "relative" >
< Router route = { route } / >
< / main >
< Footer / >
< StickyDonate / >
< / div >
)
}
function Router ( { route } : { route : string } ) {
switch ( route ) {
case "/" :
return < HomePage / >
case "/donate" :
return < DonatePage / >
case "/volunteers" :
return < VolunteerPage / >
case "/sponsors" :
return < SponsorsPage / >
case "/stories" :
return < StoriesPage / >
case "/testimonies" :
return < TestimoniesPage / >
case "/legal" :
return < LegalPage / >
default :
return < NotFoundPage / >
}
}
/* ===================== Shared UI ===================== */
function SkipToContent() {
return (
< a
href = "#content"
className = "sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-[100] focus:rounded-xl focus:bg-white/90 focus:px-4 focus:py-2 focus:text-sm focus:shadow-xl dark:focus:bg-black/80"
>
Skip to content
< / a >
)
}
interface NavProps {
darkMode : boolean
setDarkMode : ( value : boolean ) = > void
}
2025-10-04 20:25:25 -07:00
function Nav ( { darkMode , setDarkMode } : NavProps ) {
2025-10-04 18:11:14 -07:00
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" >
< a href = "#/" className = "flex items-center gap-3" >
< LogoMark / >
< div className = "-space-y-1" >
< div className = "font-semibold tracking-tight" > Miracles in Motion < / div >
< div className = "text-xs text-neutral-600 dark:text-neutral-400" > Essentials for every student < / div >
< / div >
< / a >
< / div >
< div className = "hidden items-center gap-6 md:flex" >
< a className = "navlink" href = "#/stories" > Stories < / a >
< a className = "navlink" href = "#/testimonies" > Testimonies < / a >
< a className = "navlink" href = "#/volunteers" > Volunteers < / a >
< a className = "navlink" href = "#/sponsors" > Corporate < / a >
< a className = "navlink" href = "#/legal" > Legal < / a >
< / div >
< div className = "flex items-center gap-2" >
< button
aria - label = "Toggle dark mode"
onClick = { ( ) = > setDarkMode ( ! darkMode ) }
className = "group rounded-full border border-neutral-200/70 bg-white/70 p-2 shadow-sm transition hover:scale-105 hover:bg-white dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/15"
>
{ darkMode ? (
< SunMedium className = "h-5 w-5 transition group-hover:rotate-12" / >
) : (
< Moon className = "h-5 w-5 transition group-hover:-rotate-12" / >
) }
< / button >
< Magnetic >
< a href = "#/donate" className = "btn-primary hidden md:inline-flex" >
< Heart className = "mr-2 h-4 w-4" / > Donate
< / a >
< / Magnetic >
< / div >
< / nav >
)
}
function LogoMark() {
return (
< div className = "relative grid h-10 w-10 place-items-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 via-secondary-500 to-secondary-600 shadow-lg shadow-primary-500/20" >
< motion.div
className = "absolute inset-0 opacity-60"
animate = { {
background : [
"radial-gradient(120px 80px at 20% 20%, rgba(255,255,255,0.4), transparent)" ,
"radial-gradient(120px 80px at 80% 30%, rgba(255,255,255,0.4), transparent)" ,
"radial-gradient(120px 80px at 50% 80%, rgba(255,255,255,0.4), transparent)" ,
]
} }
transition = { { duration : 6 , repeat : Infinity , ease : "easeInOut" } }
/ >
< Sparkles className = "relative h-6 w-6 text-white drop-shadow" / >
< / div >
)
}
/* ===================== Home Page ===================== */
function HomePage() {
return (
< >
< Hero / >
< PartnerMarquee / >
< Programs / >
< Impact / >
< HowItWorks / >
< Testimonial / >
< GetInvolved / >
< CTA / >
< / >
)
}
function Hero() {
return (
< section className = "relative isolate overflow-hidden" >
< div className = "mx-auto grid max-w-7xl items-center gap-10 px-4 py-20 sm:px-6 lg:grid-cols-2 lg:gap-12 lg:py-28 lg:px-8" >
< div >
< motion.h1
initial = { { opacity : 0 , y : 12 } }
whileInView = { { opacity : 1 , y : 0 } }
viewport = { { once : true } }
transition = { { duration : 0.6 } }
className = "text-balance text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl"
>
Equipping kids for success —
< span className = "relative whitespace-pre gradient-text" > school supplies , clothing , & more < / span >
< / motion.h1 >
< p className = "mt-5 max-w-xl text-lg leading-7 text-neutral-700 dark:text-neutral-300" >
Miracles in Motion is a nonprofit providing students with the essentials they need to thrive : backpacks and notebooks , uniforms and shoes , and the everything - else fund for urgent needs .
< / p >
< div className = "mt-8 flex flex-wrap items-center gap-3" >
< Magnetic >
< a href = "#/donate" className = "btn-primary" >
2025-10-04 20:25:25 -07:00
< Heart className = "mr-2 h-4 w-4" / > Donate now
2025-10-04 18:11:14 -07:00
< / a >
< / Magnetic >
< a href = "#/volunteers" className = "btn-secondary" >
Volunteer < ArrowRight className = "ml-1 h-4 w-4" / >
< / a >
< a href = "#/stories" className = "rounded-full border border-transparent px-4 py-2 text-sm text-neutral-700 underline-offset-4 hover:underline dark:text-neutral-300" >
Read stories
< / a >
< / div >
< ul className = "mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-neutral-600 dark:text-neutral-400" >
< li className = "flex items-center gap-2" > < CheckCircle2 className = "h-4 w-4 text-emerald-500" / > 501 ( c ) ( 3 ) public charity < / li >
< li className = "flex items-center gap-2" > < CheckCircle2 className = "h-4 w-4 text-emerald-500" / > Donations tax - deductible < / li >
< li className = "flex items-center gap-2" > < CheckCircle2 className = "h-4 w-4 text-emerald-500" / > Community - driven impact < / li >
< / ul >
< / div >
< div className = "relative" >
< HeroShowcase / >
< / div >
< / div >
< / section >
)
}
function HeroShowcase() {
return (
< div className = "relative mx-auto max-w-md lg:max-w-none" >
< div className = "absolute -inset-8 -z-10 rounded-3xl bg-gradient-to-tr from-primary-500/20 via-secondary-500/20 to-secondary-600/20 blur-3xl" / >
< div className = "grid grid-cols-2 gap-4 sm:gap-6" >
< TiltCard icon = { Backpack } title = "School Supplies" desc = "Backpacks, notebooks, calculators" / >
< TiltCard icon = { Shirt } title = "School Clothing" desc = "Uniforms, shoes, coats" / >
< TiltCard icon = { Sparkles } title = "Everything Else" desc = "Glasses, fees, emergencies" / >
< TiltCard icon = { Users } title = "Family Support" desc = "Referrals & wraparound care" / >
< / div >
< / div >
)
}
function TiltCard ( { icon : Icon , title , desc } : TiltCardProps ) {
const x = useMotionValue ( 0 )
const y = useMotionValue ( 0 )
const rx = useTransform ( y , [ - 50 , 50 ] , [ 8 , - 8 ] )
const ry = useTransform ( x , [ - 50 , 50 ] , [ - 8 , 8 ] )
const springX = useSpring ( rx , { stiffness : 200 , damping : 20 } )
const springY = useSpring ( ry , { stiffness : 200 , damping : 20 } )
return (
< motion.div
onMouseMove = { ( e ) = > {
const rect = e . currentTarget . getBoundingClientRect ( )
x . set ( e . clientX - rect . left - rect . width / 2 )
y . set ( e . clientY - rect . top - rect . height / 2 )
} }
onMouseLeave = { ( ) = > {
x . set ( 0 )
y . set ( 0 )
} }
style = { { rotateX : springX , rotateY : springY , transformStyle : "preserve-3d" } }
className = "group card card-hover will-change-transform"
>
< div className = "pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(150px_80px_at_var(--x)_var(--y),_rgba(255,255,255,0.35),_transparent)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" / >
< div className = "flex items-start gap-4" style = { { transform : "translateZ(40px)" } } >
< div className = "grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow-lg" >
< Icon className = "h-6 w-6" / >
< / div >
< div >
< div className = "font-semibold tracking-tight" > { title } < / div >
< div className = "text-sm text-neutral-600 dark:text-neutral-300" > { desc } < / div >
< / div >
< / div >
< div className = "mt-4 flex items-center gap-2 text-sm text-primary-600 transition group-hover:translate-x-1 dark:text-primary-300" >
Learn more < ArrowRight className = "h-4 w-4" / >
< / div >
< / motion.div >
)
}
function PartnerMarquee() {
return (
< section aria-label = "Community partners" className = "relative" >
< div className = "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" >
< div className = "card" >
< div className = "flex items-center gap-2 px-2 text-xs uppercase tracking-wider text-neutral-500 dark:text-neutral-400" >
< Sparkles className = "h-4 w-4" / > Trusted by schools & community partners
< / div >
< div className = "mt-2 overflow-hidden" >
< div className = "animate-marquee whitespace-nowrap py-2 text-neutral-600 dark:text-neutral-300" >
{ Array . from ( { length : 2 } ) . map ( ( _ , i ) = > (
< span key = { i } className = "mx-6 inline-flex items-center gap-2 text-sm opacity-80" >
< span className = "h-2 w-2 rounded-full bg-gradient-to-r from-primary-500 to-secondary-600" / >
Lincoln Unified • Sunrise Elementary • Northview High • Rotary Club • City Youth Fund • BookBank • Caring Co .
< / span >
) ) }
< / div >
< / div >
< / div >
< / div >
< / section >
)
}
function Programs() {
const items = [
{ icon : Backpack , title : "School Supplies" , body : "Backpacks, notebooks, art kits, calculators—ready for day one." } ,
{ icon : Shirt , title : "School Clothing" , body : "Uniforms, shoes, coats, and seasonal essentials in all sizes." } ,
{ icon : Sparkles , title : "Everything Else" , body : "Glasses, test fees, activity passes, hygiene kits—fast relief when needed." } ,
]
return (
< section id = "programs" className = "relative py-20" >
< div className = "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" >
< SectionHeader eyebrow = "What we do" title = "Practical, student-first programs" subtitle = "Flexible help that meets families where they are." / >
< div className = "mt-10 grid gap-6 md:grid-cols-3" >
{ items . map ( ( i , idx ) = > (
< FeatureCard key = { idx } icon = { i . icon } title = { i . title } body = { i . body } / >
) ) }
< / div >
< / div >
< / section >
)
}
function FeatureCard ( { icon : Icon , title , body } : FeatureCardProps ) {
return (
< div className = "group card card-hover" >
< div className = "absolute left-1/2 top-0 -z-10 h-40 w-40 -translate-x-1/2 rounded-full bg-gradient-to-br from-primary-500/20 to-secondary-600/20 blur-2xl" / >
< div className = "flex items-center gap-3" >
< div className = "grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow" >
< Icon className = "h-5 w-5" / >
< / div >
< div className = "font-semibold tracking-tight" > { title } < / div >
< / div >
< p className = "mt-3 text-sm leading-6 text-neutral-700 dark:text-neutral-300" > { body } < / p >
< div className = "mt-5 text-sm text-primary-700 transition group-hover:translate-x-1 dark:text-primary-300" >
Explore < ArrowRight className = "ml-1 inline h-4 w-4" / >
< / div >
< / div >
)
}
function Impact() {
const stats = [
{ label : "Students equipped" , value : 4200 } ,
{ label : "Schools partnered" , value : 38 } ,
{ label : "Avg. response time (hrs)" , value : 24 } ,
{ label : "Counties served" , value : 6 } ,
]
return (
< section id = "impact" className = "relative py-24" >
< div className = "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" >
< SectionHeader eyebrow = "Impact" title = "Every gift moves a student forward" subtitle = "Transparent, measurable outcomes powered by local partnerships." / >
< div className = "mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4" >
{ stats . map ( ( s , i ) = > (
< Stat key = { i } label = { s . label } value = { s . value } / >
) ) }
< / div >
< div className = "mt-10 grid items-center gap-6 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-6 sm:grid-cols-2" >
< div className = "text-sm text-emerald-900 dark:text-emerald-100" >
< div className = "font-medium" > Where your donation goes < / div >
< ul className = "mt-3 space-y-2" >
< li className = "flex items-center gap-2" > < span className = "h-1.5 w-1.5 rounded-full bg-emerald-500" / > 85 % programs • 10 % ops • 5 % fundraising < / li >
< li className = "flex items-center gap-2" > < span className = "h-1.5 w-1.5 rounded-full bg-emerald-500" / > Average grant : $48 for supplies ; $72 for clothing < / li >
< / ul >
< / div >
< div className = "flex items-center justify-end" >
< a href = "#/donate" className = "btn-primary" >
See the impact report < ArrowRight className = "ml-2 h-4 w-4" / >
< / a >
< / div >
< / div >
< / div >
< / section >
)
}
function Stat ( { label , value } : StatProps ) {
return (
< div className = "card text-center" >
< div className = "absolute -right-10 -top-10 h-28 w-28 rounded-full bg-gradient-to-br from-primary-500/20 to-secondary-600/20 blur-2xl" / >
< div className = "text-4xl font-semibold tracking-tight" >
< AnimatedNumber value = { value } / >
< / div >
< div className = "mt-2 text-sm text-neutral-600 dark:text-neutral-300" > { label } < / div >
< / div >
)
}
function AnimatedNumber ( { value } : { value : number } ) {
const mv = useMotionValue ( 0 )
const spring = useSpring ( mv , { stiffness : 90 , damping : 15 } )
const rounded = useTransform ( spring , ( latest ) = > Math . floor ( latest ) . toLocaleString ( ) )
useEffect ( ( ) = > {
mv . set ( 0 )
const timeout = setTimeout ( ( ) = > mv . set ( value ) , 150 )
return ( ) = > clearTimeout ( timeout )
} , [ value , mv ] )
return < motion.span > { rounded } < / motion.span >
}
function HowItWorks() {
const steps = [
{ title : "Referral" , body : "A school counselor, social worker, or parent submits a simple request." } ,
{ title : "Fast response" , body : "Needs are verified same-day and approved within 24 hours." } ,
{ title : "Fulfillment" , body : "We purchase items locally or provide vouchers for pickup." } ,
{ title : "Follow-up" , body : "We confirm support reached the student and log outcomes." } ,
]
return (
< section id = "how" className = "relative py-24" >
< div className = "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" >
< SectionHeader eyebrow = "How it works" title = "Simple process, real results" subtitle = "Designed with counselors, optimized for speed and dignity." / >
< div className = "mt-10 grid gap-6 md:grid-cols-2" >
< div className = "card" >
< ol className = "relative space-y-6" >
{ steps . map ( ( s , i ) = > (
< li key = { i } className = "relative pl-8" >
< div className = "absolute left-0 top-1 grid h-6 w-6 place-items-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow text-xs" >
{ i + 1 }
< / div >
< div className = "font-medium" > { s . title } < / div >
< p className = "text-sm text-neutral-700 dark:text-neutral-300" > { s . body } < / p >
< / li >
) ) }
< / ol >
< / div >
< div className = "grid gap-6" >
< div className = "rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-6" >
< div className = "flex items-center gap-3" >
< div className = "grid h-10 w-10 place-items-center rounded-xl bg-emerald-500 text-white" > < Heart className = "h-5 w-5" / > < / div >
< div className = "font-semibold tracking-tight" > Donor promise < / div >
< / div >
< p className = "mt-2 text-sm text-emerald-900 dark:text-emerald-100" > Your gift funds direct student needs first . We publish anonymized impact and receipts for transparency . < / p >
< / div >
< div className = "rounded-2xl border border-secondary-500/20 bg-secondary-500/10 p-6" >
< div className = "flex items-center gap-3" >
< div className = "grid h-10 w-10 place-items-center rounded-xl bg-secondary-500 text-white" > < Users className = "h-5 w-5" / > < / div >
< div className = "font-semibold tracking-tight" > For counselors < / div >
< / div >
< p className = "mt-2 text-sm text-secondary-950 dark:text-secondary-100" > One - page referral . No uploads required . We do the running so students don ' t miss class . < / p >
< / div >
< / div >
< / div >
< / div >
< / section >
)
}
function Testimonial() {
return (
< section className = "relative py-20" >
< div className = "mx-auto max-w-5xl px-4 sm:px-6 lg:px-8" >
< div className = "card p-8" >
< div className = "absolute -left-10 -top-10 h-60 w-60 rounded-full bg-gradient-to-tr from-primary-500/30 to-secondary-600/30 blur-3xl" / >
< blockquote className = "text-balance text-xl leading-8 text-neutral-800 dark:text-neutral-100" >
"A student arrived with torn shoes before winter break. Within 24 hours, Miracles in Motion had a new coat and shoes ready. He came back from break beaming."
< / blockquote >
< div className = "mt-4 flex items-center gap-3 text-sm text-neutral-600 dark:text-neutral-300" >
< Star className = "h-4 w-4 text-amber-500" / >
Counselor , Northview High
< / div >
< / div >
< / div >
< / section >
)
}
function GetInvolved() {
const options = [
2025-10-04 20:25:25 -07:00
{ title : "Donate" , body : "Fuel fast responses for urgent student needs." , href : "#/donate" , accent : "from-rose-500 to-primary-500" , icon : Heart } ,
2025-10-04 18:11:14 -07:00
{ 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 } ,
]
return (
< section id = "get-involved" className = "relative py-24" >
< div className = "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" >
< SectionHeader eyebrow = "Get involved" title = "There's a role for everyone" subtitle = "Give monthly, share skills, or introduce us to your school." / >
< div className = "mt-10 grid gap-6 md:grid-cols-3" >
{ options . map ( ( o , i ) = > ( < Callout key = { i } { ...o } / > ) ) }
< / div >
< / div >
< / section >
)
}
function Callout ( { title , body , href , accent , icon : Icon } : CalloutProps ) {
return (
< div className = "group card card-hover" >
< div className = { ` absolute -right-10 -top-10 h-36 w-36 rounded-full bg-gradient-to-br ${ accent } opacity-30 blur-2xl ` } / >
< div className = { ` mb-3 grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br ${ accent } text-white shadow ` } >
< Icon className = "h-6 w-6" / >
< / div >
< div className = "font-semibold tracking-tight" > { title } < / div >
< p className = "mt-2 text-sm text-neutral-700 dark:text-neutral-300" > { body } < / p >
< a href = { href } className = "mt-4 inline-flex items-center text-sm text-neutral-800 underline-offset-4 hover:underline dark:text-neutral-200" >
Learn more < ArrowRight className = "ml-1 h-4 w-4" / >
< / a >
< / div >
)
}
function CTA() {
return (
< section className = "relative py-24" >
< div className = "mx-auto max-w-6xl px-4 sm:px-6 lg:px-8" >
< div className = "relative overflow-hidden rounded-3xl border border-white/30 bg-gradient-to-br from-primary-600 via-secondary-600 to-secondary-700 p-8 text-white shadow-2xl dark:border-white/10" >
< div className = "absolute inset-0 opacity-30 [mask-image:radial-gradient(60%_80%_at_70%_50%,white,transparent)]" style = { { backgroundImage : "url('data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'400\\' height=\\'400\\'><defs><pattern id=\\'g\\' width=\\'40\\' height=\\'40\\' patternUnits=\\'userSpaceOnUse\\'><path d=\\'M0 20 H40 M20 0 V40\\' stroke=\\'white\\' stroke-opacity=\\'0.25\\' stroke-width=\\'1\\'/></pattern></defs><rect width=\\'100%\\' height=\\'100%\\' fill=\\'url(%23g)\\'/></svg>')" } } / >
< div className = "grid items-center gap-8 md:grid-cols-2" >
< div >
< h2 className = "text-balance text-3xl font-semibold tracking-tight sm:text-4xl" > Help a student start school with pride < / h2 >
< p className = "mt-3 max-w-md text-white/90" > Your gift today equips a child with the essentials they need — fast . $48 fills a backpack ; $72 outfits a student with shoes and a coat . < / p >
< div className = "mt-6 flex flex-wrap items-center gap-3" >
< a href = "#/donate" className = "btn-white" > Donate $48 < / a >
< a href = "#/donate" className = "inline-flex items-center gap-2 rounded-full border-2 border-white/40 px-6 py-3 text-sm font-medium text-white backdrop-blur transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2" >
Give monthly < ArrowRight className = "ml-1 h-4 w-4" / >
< / a >
< / div >
< / div >
< div className = "relative" >
< div className = "rounded-2xl border border-white/40 bg-white/10 p-6 backdrop-blur" >
< h3 className = "font-medium tracking-tight" > Prefer offline ? < / h3 >
< ul className = "mt-3 space-y-2 text-sm text-white/90" >
< li className = "flex items-center gap-2" > < MapPin className = "h-4 w-4" / > 123 Community Way , Hometown , ST < / li >
< li className = "flex items-center gap-2" > < Mail className = "h-4 w-4" / > donate @miraclesinmotion . org < / li >
< li className = "flex items-center gap-2" > < Phone className = "h-4 w-4" / > ( 555 ) 123 - 4567 < / li >
< / ul >
< p className = "mt-3 text-xs text-white/80" > Miracles in Motion is a 501 ( c ) ( 3 ) . EIN 12 - 3456789 . < / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
)
}
/* ===================== Pages ===================== */
function PageShell ( { title , icon : Icon , eyebrow , children , cta } : PageShellProps ) {
return (
< section className = "relative py-16 sm:py-24" >
< div className = "mx-auto max-w-6xl px-4 sm:px-6 lg:px-8" >
< div className = "mb-10 flex items-center gap-3" >
< div className = "grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow" >
< Icon className = "h-6 w-6" / >
< / div >
< div >
{ eyebrow && < div className = "section-eyebrow" > { eyebrow } < / div > }
< h1 className = "text-3xl font-semibold tracking-tight sm:text-4xl" > { title } < / h1 >
< / div >
< div className = "ml-auto" > { cta } < / div >
< / div >
< div className = "grid gap-8" > { children } < / div >
< / div >
< / section >
)
}
function DonatePage() {
const tiers = [
{ amount : 24 , label : "Supplies for one class project" } ,
{ amount : 48 , label : "Fill a backpack with essentials" } ,
{ amount : 72 , label : "Shoes + warm coat" } ,
{ amount : 150 , label : "Head-to-toe outfit & fees" } ,
]
return (
2025-10-04 20:25:25 -07:00
< PageShell title = "Donate" icon = { Heart } eyebrow = "Give with confidence" cta = { < a href = "#/legal" className = "btn-secondary" > Policies < / a > } >
2025-10-04 18:11:14 -07:00
< div className = "grid gap-6 md:grid-cols-3" >
< div className = "md:col-span-2 space-y-6" >
< div className = "card" >
< div className = "font-medium" > Choose an amount < / div >
< div className = "mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4" >
{ tiers . map ( ( t ) = > (
< a key = { t . amount } href = "#" className = "btn-secondary justify-center" > $ { t . amount } < / a >
) ) }
< / div >
< div className = "mt-4 flex gap-3" >
< input aria-label = "Custom amount" placeholder = "$ Custom" className = "input w-40" / >
< label className = "inline-flex items-center gap-2 text-sm" >
< input type = "checkbox" className = "h-4 w-4" / > Make it monthly
< / label >
< / div >
< div className = "mt-6 flex flex-wrap gap-3" >
< a href = "#" className = "btn-primary" > Donate securely < / a >
< a href = "#" className = "btn-secondary" > PayPal < / a >
< a href = "#" className = "btn-secondary" > Donorbox < / a >
< / div >
< p className = "mt-3 text-xs text-neutral-600 dark:text-neutral-400" > You ' ll receive an email receipt for your tax records . Donations are tax - deductible to the extent allowed by law . EIN 12 - 3456789 . < / p >
< / div >
< div className = "card" >
< div className = "font-medium" > Matching gifts < / div >
< p className = "mt-2 text-sm text-neutral-700 dark:text-neutral-300" > Check if your employer will match your donation . Provide your receipt to your HR portal using our EIN . < / p >
< a href = "#" className = "mt-3 inline-flex text-sm underline underline-offset-4" > Download matching gift letter < / a >
< / div >
< div className = "card" >
< div className = "font-medium" > Other ways to give < / div >
< ul className = "mt-2 list-disc space-y-1 pl-5 text-sm text-neutral-700 dark:text-neutral-300" >
< li > Mail a check to : 123 Community Way , Hometown , ST 12345 < / li >
< li > In - kind gifts : new supplies / clothing only . See < a className = "underline" href = "#/legal" > Gift Acceptance Policy < / a > . < / li >
< li > Stocks / DAF / wire : request instructions at donate @miraclesinmotion . org < / li >
< / ul >
< / div >
< / div >
< aside className = "space-y-6" >
< Card title = "Transparency" icon = { FileText } >
< p className = "text-sm text-neutral-700 dark:text-neutral-300" > We publish annual reports and Form 990 s . See our < a className = "underline" href = "#/legal" > Legal & Financials < / a > . < / p >
< / Card >
< Card title = "Privacy" icon = { ShieldCheck } >
< p className = "text-sm text-neutral-700 dark:text-neutral-300" > We never sell or trade donor data . See our Donor Privacy Policy . < / p >
< / Card >
< Card title = "Tax info" icon = { CheckCircle2 } >
< p className = "text-sm text-neutral-700 dark:text-neutral-300" > 501 ( c ) ( 3 ) public charity . EIN 12 - 3456789 . No goods / services provided unless specified . < / p >
< / Card >
< / aside >
< / div >
< / PageShell >
)
}
function VolunteerPage() {
return (
< PageShell title = "Volunteer" icon = { Users } eyebrow = "Serve locally" >
< div className = "grid gap-6 md:grid-cols-2" >
< div className = "card" >
< div className = "font-medium" > Sign - up form < / div >
< form className = "mt-4 grid grid-cols-1 gap-4" onSubmit = { ( e ) = > { e . preventDefault ( ) ; alert ( "Thanks! We'll be in touch via email." ) ; } } >
< div className = "grid gap-2 sm:grid-cols-2" >
< input required aria-label = "First name" placeholder = "First name" className = "input" / >
< input required aria-label = "Last name" placeholder = "Last name" className = "input" / >
< / div >
< div className = "grid gap-2 sm:grid-cols-2" >
< input required type = "email" aria-label = "Email" placeholder = "Email" className = "input" / >
< input aria-label = "Phone" placeholder = "Phone" className = "input" / >
< / div >
< div className = "grid gap-2 sm:grid-cols-2" >
< select aria-label = "Interests" className = "input" >
< option > Assemble kits < / option >
< option > Delivery driver < / option >
< option > School liaison < / option >
< option > Admin support < / option >
< / select >
< select aria-label = "Availability" className = "input" >
< option > Weekdays < / option >
< option > Weeknights < / option >
< option > Weekends < / option >
< / select >
< / div >
< label className = "flex items-start gap-3 text-sm" >
< input required type = "checkbox" className = "mt-1 h-4 w-4" / >
< span > I have read and agree to the < a className = "underline" href = "#/legal#volunteer-waiver" > Volunteer Waiver & Liability Release < / a > , including background check and child - safety requirements . < / span >
< / label >
< button className = "btn-primary w-full justify-center" type = "submit" > Submit < / button >
< / form >
< / div >
< aside className = "space-y-6" >
< Card title = "What to expect" icon = { Backpack } >
< p className = "text-sm text-neutral-700 dark:text-neutral-300" > Shifts are 2 – 3 hours . Training provided . Youth ( 14 + ) welcome with guardian consent . < / p >
< / Card >
< Card title = "Group volunteering" icon = { Users } >
< p className = "text-sm text-neutral-700 dark:text-neutral-300" > We host teams of 5 – 25 for corporate / service groups . < a className = "underline" href = "#/sponsors" > Contact us < / a > for dates . < / p >
< / Card >
< / aside >
< / div >
< / PageShell >
)
}
function SponsorsPage() {
const tiers = [
{ name : "Bronze" , amt : "$2,500" , perks : [ "Logo on website" , "Social thank-you" , "Quarterly impact note" ] } ,
{ name : "Silver" , amt : "$5,000" , perks : [ "All Bronze" , "Logo on event signage" , "Volunteer day for your team" ] } ,
{ name : "Gold" , amt : "$10,000" , perks : [ "All Silver" , "Co-branded kit drive" , "Annual report feature" ] } ,
{ name : "Platinum" , amt : "$25,000+" , perks : [ "All Gold" , "Program naming opportunity" , "Custom partnership plan" ] } ,
]
return (
< PageShell title = "Corporate Sponsorship" icon = { Building2 } eyebrow = "Partner with purpose" cta = { < a className = "btn-secondary" href = "#" > Download prospectus < / a > } >
< div className = "grid gap-6 md:grid-cols-2" >
< div className = "space-y-6" >
{ tiers . map ( ( t ) = > (
< div key = { t . name } className = "card" >
< div className = "flex items-start justify-between" >
< div className = "text-xl font-semibold" > { t . name } < / div >
< div className = "text-lg" > { t . amt } < / div >
< / div >
< ul className = "mt-3 list-disc space-y-1 pl-5 text-sm text-neutral-700 dark:text-neutral-300" >
{ t . perks . map ( ( p , i ) = > ( < li key = { i } > { p } < / li > ) ) }
< / ul >
< / div >
) ) }
< / div >
< div className = "card" >
< div className = "font-medium" > Start a conversation < / div >
< form className = "mt-4 grid gap-4" onSubmit = { ( e ) = > { e . preventDefault ( ) ; alert ( "Thanks! We'll reach out soon." ) ; } } >
< input className = "input" placeholder = "Company name" aria-label = "Company name" required / >
< div className = "grid gap-2 sm:grid-cols-2" >
< input className = "input" placeholder = "Contact name" aria-label = "Contact name" required / >
< input type = "email" className = "input" placeholder = "Email" aria-label = "Email" required / >
< / div >
< select className = "input" aria-label = "Tier interest" >
< option > Bronze < / option >
< option > Silver < / option >
< option > Gold < / option >
< option > Platinum < / option >
< option > Custom < / option >
< / select >
< textarea className = "input min-h-28 resize-none" placeholder = "Tell us about your goals" aria-label = "Message" > < / textarea >
< label className = "flex items-start gap-3 text-xs opacity-80" >
< input type = "checkbox" className = "mt-1 h-4 w-4" / >
I agree to logo - use guidelines and brand approvals per our < a className = "underline" href = "#/legal#sponsorship-terms" > Sponsorship Terms < / a > .
< / label >
< button className = "btn-primary w-full justify-center" type = "submit" > Send < / button >
< / form >
< / div >
< / div >
< / PageShell >
)
}
function StoriesPage() {
const stories = [
{ title : "Ready on Day One" , tag : "Supplies" , body : "A 3rd grader received a backpack and art kit, returning to class with pride." , by : "Ms. Lee, Teacher" } ,
{ title : "Warm for Winter" , tag : "Clothing" , body : "A high schooler got a coat and shoes before a cold snap—attendance rebounded." , by : "School Social Worker" } ,
{ title : "Glasses for Growth" , tag : "Everything Else" , body : "A student's new glasses improved reading in two weeks." , by : "Counselor" } ,
]
return (
< PageShell title = "Stories" icon = { BookOpenText } eyebrow = "Impact in motion" cta = { < a href = "#/testimonies" className = "btn-secondary" > Read testimonies < / a > } >
< div className = "grid gap-6 md:grid-cols-3" >
{ stories . map ( ( s , i ) = > (
< article key = { i } className = "card" >
< div className = "text-xs uppercase tracking-wide text-neutral-500" > { s . tag } < / div >
< h3 className = "mt-1 text-lg font-semibold" > { s . title } < / h3 >
< p className = "mt-2 text-sm text-neutral-700 dark:text-neutral-300" > { s . body } < / p >
< div className = "mt-3 text-xs text-neutral-500" > — { s . by } < / div >
< / article >
) ) }
< / div >
< div className = "card" >
< div className = "font-medium" > Submit your story < / div >
< form className = "mt-3 grid gap-3" onSubmit = { ( e ) = > { e . preventDefault ( ) ; alert ( "Thanks for sharing! We'll review and publish with consent." ) ; } } >
< input className = "input" placeholder = "Your name (or Anonymous)" aria-label = "Name" / >
< textarea className = "input min-h-28 resize-none" placeholder = "Your story (no private student info)" aria-label = "Story" required / >
< label className = "flex items-start gap-3 text-xs opacity-80" >
< input type = "checkbox" className = "mt-1 h-4 w-4" required / >
I grant permission to publish this story ( edited for length / clarity ) . I have removed personally identifying student information .
< / label >
< button className = "btn-primary w-full justify-center" > Submit < / button >
< / form >
< / div >
< / PageShell >
)
}
function TestimoniesPage() {
const items = [
{ who : "Parent" , quote : "The uniform voucher saved us right before school started." } ,
{ who : "Counselor" , quote : "The 24-hr turnaround is unmatched for our families." } ,
{ who : "Principal" , quote : "Attendance improves when kids have what they need." } ,
]
return (
< PageShell title = "Testimonies" icon = { Quote } eyebrow = "What people say" >
< div className = "grid gap-6 md:grid-cols-3" >
{ items . map ( ( t , i ) = > (
< figure key = { i } className = "card" >
< blockquote className = "text-balance" > "{t.quote}" < / blockquote >
< figcaption className = "mt-3 text-sm text-neutral-600 dark:text-neutral-300" > — { t . who } < / figcaption >
< / figure >
) ) }
< / div >
< / PageShell >
)
}
function LegalPage() {
return (
< PageShell title = "Legal & Policies" icon = { FileText } eyebrow = "Trust & compliance" cta = { < a href = "#/donate" className = "btn-secondary" > Donate < / a > } >
< PolicySection id = "privacy" title = "Privacy Policy" >
< p > We collect only the data necessary to process donations , volunteer coordination , and email subscriptions . We do not sell or trade personal data . You may request access , correction , or deletion at < a className = "underline" href = "mailto:privacy@miraclesinmotion.org" > privacy @miraclesinmotion . org < / a > . < / p >
< / PolicySection >
< PolicySection id = "donor-privacy" title = "Donor Privacy Policy" >
< p > We never sell , share , or trade donor names or personal information with any other entity , nor send donor mailings on behalf of other organizations . This policy applies to all information received online and offline . < / p >
< / PolicySection >
< PolicySection id = "terms" title = "Terms of Use" >
< ul className = "list-disc pl-5 space-y-2" >
< li > Content is provided "as is" for informational purposes ; no warranties . < / li >
< li > By submitting content ( stories / testimonies ) , you grant us a non - exclusive license to edit and publish . < / li >
< li > Unauthorized scraping or misuse of site content is prohibited . < / li >
< / ul >
< / PolicySection >
< PolicySection id = "cookies" title = "Cookie Policy" >
< p > We use essential cookies for site functionality and , with your consent , privacy - friendly analytics . You can change your choices via the cookie banner or by clearing site data . < / p >
< / PolicySection >
< PolicySection id = "refunds" title = "Refund Policy" >
< p > Donations are generally non - refundable . If you believe a donation was made in error , contact < a className = "underline" href = "mailto:donate@miraclesinmotion.org" > donate @miraclesinmotion . org < / a > within 15 days for assistance . < / p >
< / PolicySection >
< PolicySection id = "gift-acceptance" title = "Gift Acceptance Policy" >
< ul className = "list-disc pl-5 space-y-2" >
< li > We accept monetary gifts , new school supplies / clothing , DAF grants , and publicly traded securities . < / li >
< li > In - kind items must be new and appropriate for school settings . We reserve the right to decline gifts not aligned with mission or capacity . < / li >
< / ul >
< / PolicySection >
< PolicySection id = "volunteer-waiver" title = "Volunteer Waiver & Liability Release" >
< p > By volunteering , you agree to follow staff instructions ; assume ordinary risks associated with volunteering ; and release Miracles in Motion from liability for ordinary negligence . You consent to background checks where required and agree to our child - safeguarding rules ( no unsupervised time with minors , no personal contact outside events ) . Under 18 requires guardian consent . < / p >
< / PolicySection >
< PolicySection id = "child-safety" title = "Child Safety & Safeguarding" >
< ul className = "list-disc pl-5 space-y-2" >
< li > No one - on - one unsupervised interactions with minors . < / li >
< li > Report suspected abuse / neglect immediately to authorities and notify staff . < / li >
< li > Photography of minors requires prior written consent from a parent / guardian . < / li >
< / ul >
< / PolicySection >
< PolicySection id = "nondiscrimination" title = "Non‑ >
< p > We serve students regardless of race , color , religion , national origin , sex , sexual orientation , gender identity , disability , or any other protected status . < / p >
< / PolicySection >
< PolicySection id = "accessibility" title = "Accessibility Statement" >
< p > We aim to meet WCAG 2.1 AA standards . If you encounter accessibility barriers , email < a className = "underline" href = "mailto:access@miraclesinmotion.org" > access @miraclesinmotion . org < / a > . < / p >
< / PolicySection >
< PolicySection id = "financials" title = "Financials & 990" >
< p > Miracles in Motion is a 501 ( c ) ( 3 ) nonprofit . EIN 12 - 3456789 . Annual reports and Form 990 s are available upon request or linked here when published . < / p >
< / PolicySection >
< PolicySection id = "sponsorship-terms" title = "Sponsorship Terms & Logo Use" >
< ul className = "list-disc pl-5 space-y-2" >
< li > Logo usage requires prior written approval and must follow brand guidelines . < / li >
< li > Sponsorship does not imply endorsement of products or services . < / li >
< li > Benefits may be adjusted for equivalency based on availability . < / li >
< / ul >
< / PolicySection >
< div className = "card p-4 text-xs opacity-80" >
< p > State disclosures : Certain states may require additional disclosures for charitable solicitations . Where applicable , our disclosures will be presented on the donation page and receipts . < / p >
< / div >
< / PageShell >
)
}
/* ===================== Helper Components ===================== */
function PolicySection ( { id , title , children } : PolicySectionProps ) {
return (
< section id = { id } className = "card" >
< h2 className = "font-semibold tracking-tight" > { title } < / h2 >
< div className = "mt-3 space-y-3 text-sm text-neutral-700 dark:text-neutral-300" > { children } < / div >
< / section >
)
}
function SectionHeader ( { eyebrow , title , subtitle } : SectionHeaderProps ) {
return (
< div className = "section-header" >
{ eyebrow && < div className = "section-eyebrow" > { eyebrow } < / div > }
< h2 className = "section-title" > { title } < / h2 >
{ subtitle && < p className = "section-subtitle" > { subtitle } < / p > }
< / div >
)
}
function Card ( { title , icon : Icon , children } : CardProps ) {
return (
< div className = "card" >
< div className = "flex items-center gap-3" >
< div className = "grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow" >
< Icon className = "h-5 w-5" / >
< / div >
< div className = "font-semibold tracking-tight" > { title } < / div >
< / div >
< div className = "mt-3" > { children } < / div >
< / div >
)
}
function NotFoundPage() {
return (
< section className = "relative py-24" >
< div className = "mx-auto max-w-md px-4 text-center sm:px-6 lg:px-8" >
< h1 className = "text-6xl font-bold text-neutral-300 dark:text-neutral-700" > 404 < / h1 >
< h2 className = "mt-4 text-2xl font-semibold" > Page not found < / h2 >
< p className = "mt-2 text-neutral-600 dark:text-neutral-400" >
The page you 're looking for doesn' t exist .
< / p >
< a href = "#/" className = "btn-primary mt-6" >
Go home
< / a >
< / div >
< / section >
)
}
function BackgroundDecor() {
return (
< div className = "pointer-events-none fixed inset-0 overflow-hidden" >
< div className = "absolute -top-40 -right-40 h-80 w-80 rounded-full bg-gradient-to-br from-primary-400/20 to-secondary-600/20 blur-3xl" / >
< div className = "absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-gradient-to-tr from-secondary-400/20 to-primary-600/20 blur-3xl" / >
< / div >
)
}
function Footer() {
return (
< footer className = "relative mt-24 border-t border-white/30 bg-white/50 backdrop-blur dark:border-white/10 dark:bg-white/5" >
< div className = "mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8" >
< div className = "grid gap-8 lg:grid-cols-4" >
< div className = "lg:col-span-2" >
< div className = "flex items-center gap-3" >
< LogoMark / >
< div >
< div className = "font-semibold" > Miracles in Motion < / div >
< div className = "text-sm text-neutral-600 dark:text-neutral-400" > Essentials for every student < / div >
< / div >
< / div >
< p className = "mt-4 max-w-md text-sm text-neutral-600 dark:text-neutral-400" >
A 501 ( c ) ( 3 ) nonprofit providing students with school supplies , clothing , and emergency support to help them succeed .
< / p >
< div className = "mt-4 flex gap-4" >
< a href = "#" className = "text-neutral-600 hover:text-primary-600 dark:text-neutral-400" >
< Facebook className = "h-5 w-5" / >
< / a >
< a href = "#" className = "text-neutral-600 hover:text-primary-600 dark:text-neutral-400" >
< Instagram className = "h-5 w-5" / >
< / a >
< a href = "#" className = "text-neutral-600 hover:text-primary-600 dark:text-neutral-400" >
< Globe className = "h-5 w-5" / >
< / a >
< / div >
< / div >
< div >
< h3 className = "font-semibold" > Get Involved < / h3 >
< ul className = "mt-4 space-y-2 text-sm" >
< li > < a href = "#/donate" className = "navlink" > Donate < / a > < / li >
< li > < a href = "#/volunteers" className = "navlink" > Volunteer < / a > < / li >
< li > < a href = "#/sponsors" className = "navlink" > Corporate Partnerships < / a > < / li >
< li > < a href = "#/stories" className = "navlink" > Success Stories < / a > < / li >
< / ul >
< / div >
< div >
< h3 className = "font-semibold" > Organization < / h3 >
< ul className = "mt-4 space-y-2 text-sm" >
< li > < a href = "#/testimonies" className = "navlink" > Testimonials < / a > < / li >
< li > < a href = "#/legal" className = "navlink" > Legal & Policies < / a > < / li >
< li > < a href = "mailto:contact@miraclesinmotion.org" className = "navlink" > Contact Us < / a > < / li >
< li > < a href = "tel:+15551234567" className = "navlink" > ( 555 ) 123 - 4567 < / a > < / li >
< / ul >
< / div >
< / div >
< div className = "mt-8 border-t border-white/30 pt-8 text-center text-xs text-neutral-500 dark:border-white/10 dark:text-neutral-400" >
< p > © 2024 Miracles in Motion . All rights reserved . EIN : 12 - 3456789 < / p >
< p className = "mt-1" > 501 ( c ) ( 3 ) nonprofit organization . Donations are tax - deductible to the extent allowed by law . < / p >
< / div >
< / div >
< / footer >
)
}
function StickyDonate() {
return (
< div className = "fixed bottom-4 right-4 z-50 md:hidden" >
< a
href = "#/donate"
className = "flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow-lg shadow-primary-500/25 transition hover:scale-105"
aria - label = "Donate"
>
< Heart className = "h-6 w-6" / >
< / a >
< / div >
)
}
function CookieBanner() {
const [ show , setShow ] = useState ( true )
if ( ! show ) return null
return (
< div className = "fixed bottom-4 left-4 right-4 z-50 card p-4 md:max-w-md md:right-auto" >
< p className = "text-sm" >
We use cookies to improve your experience . By continuing , you agree to our cookie policy .
< / p >
< div className = "mt-3 flex gap-2" >
< button
onClick = { ( ) = > setShow ( false ) }
className = "btn-primary text-xs px-4 py-2"
>
Accept
< / button >
< button
onClick = { ( ) = > setShow ( false ) }
className = "btn-secondary text-xs px-4 py-2"
>
Decline
< / button >
< / div >
< / div >
)
}
function Magnetic ( { children } : { children : React.ReactNode } ) {
return (
< div className = "relative" >
{ children }
< / div >
)
}
