1const DS = window.MusicalMemoryDesignSystem_924c93; 2const SIGNUP = 'https://app.musicalmemory.com'; 3const IOS = 'https://apps.apple.com/us/app/musical-memory-player/id6470549782'; 4const ANDROID = 'https://play.google.com/store/apps/details?id=com.musicalmemory.app&pcampaignid=web_share'; 5const REASSURE = <>Use it at your kitchen table or in your classroom. We also work with<br/>co-ops, micro-schools and hybrid programs - <a className="mm-contact" href="https://musicalmemory.com/contact/">contact us</a>.</>; 6 7function Cta({ size = 'lg', variant = 'primary', children = 'Start your free month', style }) { 8 const { Button } = DS; 9 return <Button as="a" href={SIGNUP} size={size} variant={variant} style={style}>{children}</Button>; 10} 11 12function Nav() { 13 const { Button, Icon } = DS; 14 const [open, setOpen] = React.useState(false); 15 return ( 16 <header data-screen-label="Nav" style={{position:'sticky',top:0,zIndex:30,background:'rgba(255,255,255,.92)',backdropFilter:'blur(10px)',borderBottom:'1px solid var(--border-subtle)'}}> 17 <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'14px var(--gutter)',display:'flex',alignItems:'center',gap:'var(--space-4)'}}> 18 <img className="mm-nav-logo" src="assets/logo-horizontal-purple.png" alt="Musical Memory" style={{height:40}}/> 19 <div className="mm-nav-links" style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:'var(--space-2)'}}> 20 <Button as="a" href="https://musicalmemory.com/shop/" size="sm" variant="ghost">Shop</Button> 21 <Button as="a" href="https://musicalmemory.com/blog/" size="sm" variant="ghost">Blog</Button> 22 <Button as="a" href="https://app.musicalmemory.com/sign-in/" size="sm" variant="ghost">Log in</Button> 23 <Cta size="sm">Start free month</Cta> 24 </div> 25 <button className="mm-nav-toggle" onClick={()=>setOpen(o=>!o)} aria-label={open?'Close menu':'Open menu'} aria-expanded={open} style={{marginLeft:'auto',width:44,height:44,borderRadius:'50%',border:'1px solid var(--border-subtle)',background:'#fff',cursor:'pointer',alignItems:'center',justifyContent:'center',padding:0,flexShrink:0}}> 26 <Icon name={open?'x':'menu'} size={24} color="var(--purple-500)"/> 27 </button> 28 </div> 29 {open && <div className="mm-nav-panel" style={{borderTop:'1px solid var(--border-subtle)',background:'#fff',padding:'var(--space-4) var(--gutter) var(--space-5)',display:'flex',flexDirection:'column',gap:'var(--space-2)'}} onClick={()=>setOpen(false)}> 30 <Button as="a" href="https://musicalmemory.com/shop/" size="md" variant="ghost" style={{width:'100%',boxSizing:'border-box'}}>Shop</Button> 31 <Button as="a" href="https://musicalmemory.com/blog/" size="md" variant="ghost" style={{width:'100%',boxSizing:'border-box'}}>Blog</Button> 32 <Button as="a" href="https://app.musicalmemory.com/sign-in/" size="md" variant="ghost" style={{width:'100%',boxSizing:'border-box'}}>Log in</Button> 33 <Cta size="md" style={{width:'100%',boxSizing:'border-box',marginTop:'var(--space-2)'}}>Start your free month</Cta> 34 </div>} 35 </header> 36 ); 37} 38 39function SongCard() { 40 const { Card, Icon } = DS; 41 const ref = React.useRef(null); 42 const [playing, setPlaying] = React.useState(false); 43 const [t, setT] = React.useState(0); 44 const [dur, setDur] = React.useState(0); 45 const fmt = s => !s ? '--:--' : Math.floor(s/60) + ':' + String(Math.floor(s%60)).padStart(2,'0'); 46 const toggle = () => { const a = ref.current; if(!a) return; if(a.paused){a.play();setPlaying(true);} else {a.pause();setPlaying(false);} }; 47 return ( 48 <Card tone="white" padding="var(--space-4)" style={{position:'absolute',bottom:-26,left:-28,width:250,boxShadow:'var(--shadow-lg)'}}> 49 <audio ref={ref} src="https://media.mmapi.co/32c3d00a-8a87-4002-830d-ed20fe33053a.mp3" preload="metadata" 50 onLoadedMetadata={e=>setDur(e.currentTarget.duration)} 51 onTimeUpdate={e=>setT(e.currentTarget.currentTime)} 52 onEnded={()=>{setPlaying(false);setT(0);}}/> 53 <div style={{display:'flex',alignItems:'center',gap:'var(--space-3)'}}> 54 <button onClick={toggle} aria-label={playing?'Pause':'Play'} style={{width:44,height:44,borderRadius:'50%',background:'var(--purple-500)',border:'none',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,padding:0}}> 55 <Icon name={playing?'pause':'play'} size={20} color="#fff"/> 56 </button>
57 <span style={{minWidth:0}}><strong style={{display:'block',fontFamily:'var(--font-display)',fontSize:'var(--text-base)',color:'var(--text-heading)'}}>Skip Counting 7s</strong> 58 <span style={{fontFamily:'var(--font-body)',fontSize:'var(--text-sm)',color:'var(--text-muted)'}}>Math · {playing||t?fmt(t)+' / ':''}{fmt(dur)}</span></span> 59 </div> 60 <div style={{height:5,borderRadius:'var(--radius-pill)',background:'var(--purple-100)',marginTop:'var(--space-3)',overflow:'hidden'}}> 61 <div style={{height:'100%',width:(dur?(t/dur)*100:0)+'%',background:'var(--yellow-500)',borderRadius:'var(--radius-pill)'}}/> 62 </div> 63 </Card> 64 ); 65} 66 67function Hero() { 68 const { Badge } = DS; 69 return ( 70 <section data-screen-label="Hero" style={{background:'var(--surface-page)',padding:'var(--space-16) var(--gutter) var(--space-20)'}}> 71 <div className="mm-hero" style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'1.05fr .95fr',gap:'var(--space-16)',alignItems:'center'}}> 72 <div> 73 <Badge tone="yellow" style={{marginBottom:'var(--space-5)'}}>First month free</Badge> 74 <h1 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-hero)',lineHeight:'var(--leading-tight)',letterSpacing:'var(--tracking-tight)',color:'var(--text-heading)',margin:'0 0 var(--space-5)'}}> 75 Learn it to song,<br/>know it for life. 76 </h1> 77 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-lg)',lineHeight:'var(--leading-relaxed)',color:'var(--text-body)',margin:'0 0 var(--space-8)',maxWidth:490,textWrap:'pretty'}}> 78 Your memory work, made easy. Short, fun songs covering everything from wonder-filled science facts to long Scripture passages to skip counting & geometry formulas - and so much more. Family style, no prep required. 79 </p> 80 <div style={{display:'flex',gap:'var(--space-3)',alignItems:'center',flexWrap:'wrap'}}> 81 <Cta/> 82 <span style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',color:'var(--text-muted)'}}>$5.99 a month after your free month</span> 83 </div> 84 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-sm)',color:'var(--text-muted)',marginTop:'var(--space-4)'}}>{REASSURE}</p> 85 </div> 86 <div style={{position:'relative'}}> 87 <div style={{borderRadius:'var(--radius-2xl)',aspectRatio:'4/3',overflow:'hidden',boxShadow:'var(--shadow-md)'}}> 88 <img src="assets/hero-desk.jpg" alt="A Musical Memory week: the printed binder page, headphones and the app open on a phone" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'62% 70%',display:'block',transform:'scale(1.45)',transformOrigin:'62% 70%'}}/> 89 </div> 90 <SongCard/> 91 </div> 92 </div> 93 </section> 94 ); 95} 96 97const SUBJECTS = [ 98 {k:'bible',name:'Bible',icon:'book-open',line:'Longer word-for-word Bible passages, 22 and counting. New songs added regularly.'}, 99 {k:'math',name:'Math',icon:'calculator',line:'Skip counting, geometry formulas, conversions and more.'}, 100 {k:'latin',name:'Latin',icon:'scroll-text',line:'If your child will study Latin in the future, these Latin songs give them an amazing foundation.'}, 101 {k:'grammar',name:'English grammar',icon:'pencil',line:'The fundamentals of English grammar, compiled by high school English instructor & set to FUN songs.'}, 102 {k:'science',name:'Science',icon:'leaf',line:'Dig into various science topics with songs & coordinating picture books.'}, 103 {k:'history',name:'History',icon:'landmark',line:'28 songs per cycle across the ancient, medieval and modern eras, with elementary lesson plans included.'} 104]; 105 106const EXTRAS = [ 107 {icon:'library-big',t:'Booklists that coordinate with every subject'}, 108 {icon:'pen-line',t:'Bible copywork packets in cursive or print'}, 109 {icon:'file-text',t:'PDF lyrics guides'}, 110 {icon:'dices',t:'Memory work teaching tips & games'}, 111 {icon:'layers',t:'Visual math flashcards that go along with the songs'}, 112 {icon:'map',t:'Weekly history lesson plans: literature, timeline, maps, videos, and more'} 113]; 114 115function Subjects() { 116 const { Card, Icon } = DS; 117 return ( 118 <section data-screen-label="Subjects" style={{background:'var(--surface-page-alt)',padding:'var(--section-y) var(--gutter)'}}> 119 <div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}> 120 <p style={{fontFamily:'var(--font-ui)',fontWeight:600,fontSize:'var(--text-2xs)',letterSpacing:'var(--tracking-caps)',textTransform:'uppercase',color:'var(--purple-500)',margin:'0 0 var(--space-3)'}}>Six subjects</p> 121 <h2 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-3xl)',letterSpacing:'var(--tracking-tight)',color:'var(--text-heading)',margin:'0 0 var(--space-4)'}}>Homeschool memory work, made easy</h2> 122 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-lg)',lineHeight:'var(--leading-relaxed)',color:'var(--text-body)',margin:'0 0 var(--space-10)',maxWidth:620}}>Flexible, open & go memory work. Listen by cycle or subject. Use as your spine or a supplement.</p> 123 <div className="mm-grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-5)'}}> 124 {SUBJECTS.map(s => ( 125 <Card key={s.k}>
126 <span style={{width:52,height:52,borderRadius:'var(--radius-md)',background:'var(--surface-card-muted)',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'var(--space-4)'}}> 127 <Icon name={s.icon} size={24} color={'var(--subject-' + s.k + ')'}/> 128 </span> 129 <h3 style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-lg)',color:'var(--text-heading)',margin:'0 0 var(--space-2)'}}>{s.name}</h3> 130 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',lineHeight:'var(--leading-relaxed)',color:'var(--text-body)',margin:0}}>{s.line}</p> 131 </Card> 132 ))} 133 </div> 134 <div style={{marginTop:'var(--space-12)'}}> 135 <h3 style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-xl)',color:'var(--text-heading)',margin:'0 0 var(--space-2)'}}>Every subscription includes the printables too</h3> 136 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',color:'var(--text-muted)',margin:'0 0 var(--space-6)'}}>Use the songs and booklists as your spine.</p> 137 <div className="mm-grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-4)'}}> 138 {EXTRAS.map(e => ( 139 <div key={e.t} style={{display:'flex',gap:'var(--space-3)',alignItems:'flex-start',background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-md)',padding:'var(--space-4)'}}> 140 <Icon name={e.icon} size={20} color="var(--purple-500)" style={{marginTop:2,flexShrink:0}}/> 141 <span style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',color:'var(--text-body)'}}>{e.t}</span> 142 </div> 143 ))} 144 </div> 145 </div> 146 </div> 147 </section> 148 ); 149} 150 151const STEPS = [ 152 {icon:'user-plus',t:'Sign up on the web',d:'One free month. It takes about a minute, and no card is charged today.'}, 153 {icon:'headphones',t:'Listen online or in the app',d:'Play right in your browser, or download the app for iPhone, iPad or Android. Same login, no extra charge.'}, 154 {icon:'sparkles',t:'Sing it all week',d:'In the car, at breakfast, during chores. Weeks later they still have it, because they learned the tune, not the flashcard.'} 155]; 156 157function HowItWorks() { 158 const { Icon } = DS; 159 return ( 160 <section data-screen-label="How it works" style={{background:'var(--surface-page)',padding:'var(--section-y) var(--gutter)'}}> 161 <div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}> 162 <h2 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-3xl)',letterSpacing:'var(--tracking-tight)',color:'var(--text-heading)',margin:'0 0 var(--space-12)',textAlign:'center'}}>How it works</h2> 163 <div className="mm-grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-10)'}}> 164 {STEPS.map((s,i) => ( 165 <div key={s.t} style={{textAlign:'center'}}> 166 <span style={{width:76,height:76,borderRadius:'50%',background:'var(--purple-500)',display:'inline-flex',alignItems:'center',justifyContent:'center',boxShadow:'var(--shadow-brand)',marginBottom:'var(--space-5)'}}> 167 <Icon name={s.icon} size={32} color="#fff"/> 168 </span> 169 <p style={{fontFamily:'var(--font-ui)',fontWeight:600,fontSize:'var(--text-2xs)',letterSpacing:'var(--tracking-caps)',textTransform:'uppercase',color:'var(--purple-400)',margin:'0 0 var(--space-2)'}}>Step {i+1}</p> 170 <h3 style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-xl)',color:'var(--text-heading)',margin:'0 0 var(--space-3)'}}>{s.t}</h3> 171 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',lineHeight:'var(--leading-relaxed)',color:'var(--text-body)',margin:0,textWrap:'pretty'}}>{s.d}</p> 172 </div> 173 ))} 174 </div> 175 <div style={{display:'flex',justifyContent:'center',marginTop:'var(--space-12)'}}><Cta/></div> 176 </div> 177 </section> 178 ); 179} 180 181const QUOTES = [ 182 {q:'My son and I love these memory work songs! It helps him retain the information so much faster. I catch him singing the songs even after we finish school. This is one of the best investments you could make as a homeschool parent.',n:'Keely'}, 183 {q:'We played the mp3 while we were driving in town. Now a year later, they still know the songs, when the subject comes up, especially math, they will break out in song from what they learned over a year ago.',n:'Travis'}, 184 {q:'We started using this at the beginning of the school year and my oldest had 8 weeks of memory work memorized in the first week! The music is fun, catchy and perfect for engaging learning without them even knowing it.',n:'Sheena'} 185]; 186 187function Testimonials() { 188 const { Card, Icon } = DS; 189 return ( 190 <section data-screen-label="Testimonials" style={{background:'var(--surface-page-alt)',padding:'var(--section-y) var(--gutter)'}}> 191 <div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}> 192 <h2 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-3xl)',letterSpacing:'var(--tracking-tight)',color:'var(--text-heading)',margin:'0 0 var(--space-10)'}}>What families are saying</h2> 193 <div className="mm-grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-5)',alignItems:'start'}}> 194 {QUOTES.map(t => ( 195 <Card key={t.n} style={{display:'flex',flexDirection:'column',height:'100%'}}> 196 <div style={{display:'flex',gap:2,marginBottom:'var(--space-4)'}}> 197 {[0,1,2,3,4].map(i => <svg key={i}
197 width="16" height="16" viewBox="0 0 24 24" fill="var(--yellow-500)" aria-hidden="true"><path d="M12 2.5l2.9 5.9 6.6.9-4.8 4.6 1.2 6.5L12 17.3 6.1 20.4l1.2-6.5-4.8-4.6 6.6-.9L12 2.5z"></path></svg>)} 198 </div> 199 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',lineHeight:'var(--leading-relaxed)',color:'var(--text-body)',margin:'0 0 var(--space-5)',textWrap:'pretty',flex:1}}>â{t.q}â</p> 200 <strong style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-base)',color:'var(--text-heading)'}}>{t.n}</strong> 201 </Card> 202 ))} 203 </div> 204 </div> 205 </section> 206 ); 207} 208 209const INCLUDED = ['Every song, all three cycles','Use our weekly, cycle-based program or listen by subject','Booklists, copywork, teaching guides, games and flashcards','Unlimited children in your family',"Access to every song we've ever written"]; 210 211function Pricing() { 212 const { Card, Tabs, Badge, Icon } = DS; 213 const [plan, setPlan] = React.useState('year'); 214 return ( 215 <section data-screen-label="Pricing" style={{background:'var(--surface-page)',padding:'var(--section-y) var(--gutter)'}}> 216 <div style={{maxWidth:760,margin:'0 auto',textAlign:'center'}}> 217 <h2 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-3xl)',letterSpacing:'var(--tracking-tight)',color:'var(--text-heading)',margin:'0 0 var(--space-4)'}}>One family, one price</h2> 218 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-lg)',color:'var(--text-body)',margin:'0 0 var(--space-8)'}}>See if it's a good fit! When you sign up, your first month is automatically free.</p> 219 <Tabs items={[{value:'month',label:'Monthly'},{value:'year',label:'Yearly · save 35%'}]} value={plan} onChange={setPlan} style={{marginBottom:'var(--space-8)'}}/> 220 <Card tone="white" padding="var(--space-10)" className="mm-price" style={{textAlign:'left',display:'grid',gridTemplateColumns:'1fr 1fr',gap:'var(--space-10)',alignItems:'center'}}> 221 <div> 222 <Badge tone="yellow" style={{marginBottom:'var(--space-4)'}}>First month free</Badge> 223 <div style={{display:'flex',alignItems:'baseline',gap:8}}> 224 <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:56,letterSpacing:'var(--tracking-tight)',color:'var(--text-heading)'}}>{plan==='year'?'$46.99':'$5.99'}</span> 225 <span style={{fontFamily:'var(--font-body)',fontSize:'var(--text-md)',color:'var(--text-muted)'}}>{plan==='year'?'/ year':'/ month'}</span> 226 </div> 227 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',color:'var(--text-muted)',margin:'var(--space-3) 0 var(--space-6)'}}>{plan==='year'?'Works out to $3.92 a month.':'Cancel any time, no fee.'}</p> 228 <Cta style={{width:'auto',alignSelf:'flex-start'}}>Start free month</Cta> 229 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-sm)',color:'var(--text-muted)',margin:'var(--space-4) 0 0'}}>{REASSURE}</p> 230 </div> 231 <ul style={{listStyle:'none',margin:0,padding:0,display:'flex',flexDirection:'column',gap:'var(--space-3)'}}> 232 {INCLUDED.map(i => ( 233 <li key={i} style={{display:'flex',gap:'var(--space-3)',alignItems:'flex-start',fontFamily:'var(--font-body)',fontSize:'var(--text-base)',color:'var(--text-body)'}}> 234 <Icon name="check" size={20} color="var(--teal-500)" style={{marginTop:2,flexShrink:0}}/>{i} 235 </li> 236 ))} 237 </ul> 238 </Card> 239 </div> 240 </section> 241 ); 242} 243 244const FAQS = [ 245 {q:'What ages is it for?',a:'Musical Memory is primarily intended for kids ages 4-11. Older siblings usually get a kick out of how funny the songs are, though, and younger siblings will pick up way more than you think.'}, 246 {q:'Does it work on phones and tablets?',a:'Yes. Sign up on the web, then listen online or download the Musical Memory app for iPhone, iPad or Android. Your login is the same either way.'}, 247 {q:'What happens when the free month ends?',a:"When your free month is up, you'll be charged based on the monthly or annual plan you selected. If it's not a good fit for you, cancel before you're charged."}, 248 {q:'How many children can use one subscription?',a:'One subscription covers the whole family. Some teachers play these songs in their classroom too! Especially math. If you want to discu
248ss group licensing, please contact us.'}, 249 {q:'What if I want to use this with my co-op or school?',a:<><a href="https://musicalmemory.com/contact/">Contact us</a>. A growing number of co-ops, micro-schools, and hybrid programs are using Musical Memory as their memory work spine. No set up fees or complicated licenses. We simply help you get your families and teachers set up with our existing program.</>} 250]; 251 252function Faq() { 253 const { Card } = DS; 254 return ( 255 <section data-screen-label="FAQ" style={{background:'var(--surface-page-alt)',padding:'var(--section-y) var(--gutter)'}}> 256 <div style={{maxWidth:760,margin:'0 auto'}}> 257 <h2 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-3xl)',letterSpacing:'var(--tracking-tight)',color:'var(--text-heading)',margin:'0 0 var(--space-8)',textAlign:'center'}}>Questions parents ask</h2> 258 <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}> 259 {FAQS.map(f => ( 260 <Card key={f.q} padding="var(--space-6)"> 261 <h3 style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-lg)',color:'var(--text-heading)',margin:'0 0 var(--space-2)'}}>{f.q}</h3> 262 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-base)',lineHeight:'var(--leading-relaxed)',color:'var(--text-body)',margin:0,textWrap:'pretty'}}>{f.a}</p> 263 </Card> 264 ))} 265 </div> 266 </div> 267 </section> 268 ); 269} 270 271function FinalCta() { 272 const { Button } = DS; 273 return ( 274 <section data-screen-label="Final CTA" style={{background:'var(--purple-800)',padding:'var(--section-y) var(--gutter)',textAlign:'center'}}> 275 <div style={{maxWidth:720,margin:'0 auto'}}> 276 <h2 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-3xl)',letterSpacing:'var(--tracking-tight)',color:'var(--white)',margin:'0 0 var(--space-4)'}}>Start singing this week</h2> 277 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-lg)',lineHeight:'var(--leading-relaxed)',color:'var(--white)',opacity:.85,margin:'0 0 var(--space-8)'}}>Your first month is free. Create your account, then start listening<br/>online or on the mobile app.</p> 278 <Button as="a" href={SIGNUP} size="lg" variant="accent">Start your free month</Button> 279 <p style={{fontFamily:'var(--font-body)',fontSize:'var(--text-sm)',color:'var(--white)',opacity:.7,margin:'var(--space-4) 0 var(--space-10)'}}>{REASSURE}</p> 280 <div style={{display:'flex',gap:'var(--space-3)',justifyContent:'center',flexWrap:'wrap'}}> 281 <Button as="a" href={IOS} variant="secondary" size="sm">Download on the App Store</Button> 282 <Button as="a" href={ANDROID} variant="secondary" size="sm">Get it on Google Play</Button> 283 </div> 284 </div> 285 </section> 286 ); 287} 288 289function Footer() { 290 return ( 291 <footer data-screen-label="Footer" style={{background:'var(--purple-900)',padding:'var(--space-8) var(--gutter)'}}> 292 <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'flex',alignItems:'center',justifyContent:'space-between',gap:'var(--space-6)',flexWrap:'wrap',fontFamily:'var(--font-body)',fontSize:'var(--text-sm)',color:'var(--white)'}}> 293 <span style={{background:'var(--white)',borderRadius:'var(--radius-pill)',padding:'8px 18px',display:'inline-flex'}}><img src="assets/logo-horizontal-purple.png" alt="Musical Memory" style={{height:26,display:'block'}}/></span> 294 <div style={{display:'flex',gap:'var(--space-6)',flexWrap:'wrap'}}> 295 <a href="https://musicalmemory.com/shop/" style={{color:'var(--white)',opacity:.85,textDecoration:'none'}}>Shop</a> 296 <a href="https://musicalmemory.com/blog/" style={{color:'var(--white)',opacity:.85,textDecoration:'none'}}>Blog</a> 297 <a href="https://musicalmemory.com/contact/" style={{color:'var(--white)',opacity:.85,textDecoration:'none'}}>Contact</a> 298 <a href="https://musicalmemory.com/privacy" style={{color:'var(--white)',opacity:.85,textDecoration:'none'}}>Privacy</a> 299 <a href="https://musicalmemory.com/terms" style={{color:'var(--white)',opacity:.85,textDecoration:'none'}}>Terms</a> 300 </div>
301 <span style={{opacity:.6}}>© 2026 Musical Memory</span> 302 </div> 303 </footer> 304 ); 305} 306 307Object.assign(window,{Nav,Hero,Subjects,HowItWorks,Testimonials,Pricing,Faq,FinalCta,Footer});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.