justin/guitar-teacher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign splash screen: full-width stacked cards with horizontal layout

Browse Source
This commit is contained in:
Sterling Archer
2026-06-14 23:05:23 -07:00
parent 1fa5c2e782
commit 3179053655
1 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+45 -29
View File
@@ -1535,42 +1535,58 @@ function App() {
onSongSearch={()=>{setMenuOpen(false);setShowTuner(false);setSplash(false);go(7);}}
onClose={()=>setMenuOpen(false)}
/>}
<div style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"32px 20px 80px"}}>
<div style={{maxWidth:520,width:"100%",textAlign:"center"}}>
<div style={{fontSize:50,marginBottom:14}}>🎸</div>
<h1 style={{fontWeight:800,fontSize:34,lineHeight:1.15,marginBottom:12}}>
Learn guitar, <span style={{color:C.amber}}>your way.</span>
</h1>
<p style={{fontSize:15,color:"#C8C5BE",lineHeight:1.7,maxWidth:400,margin:"0 auto 32px"}}>
Start from the very beginning or jump straight to playing songs you love.
</p>
<div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:12}}>
<div style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"32px 24px 60px"}}>
<div style={{maxWidth:480,width:"100%"}}>
<div style={{textAlign:"center",marginBottom:36}}>
<div style={{fontSize:56,lineHeight:1,marginBottom:16}}>🎸</div>
<h1 style={{fontWeight:800,fontSize:32,lineHeight:1.2,marginBottom:10}}>
Learn guitar, <span style={{color:C.amber}}>your way.</span>
</h1>
<p style={{fontSize:14,color:C.muted,lineHeight:1.7}}>
Pick where you want to start.
</p>
</div>
<div style={{display:"flex",flexDirection:"column",gap:12}}>
{/* Tune your guitar */}
<button onClick={()=>setShowTuner(true)}
style={{background:C.bg2,border:"1px solid "+C.sage,borderRadius:14,padding:"22px 16px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",gridColumn:"1/-1"}}>
<div style={{fontSize:26,marginBottom:8}}>🎵</div>
<div style={{fontWeight:700,fontSize:15,color:C.text,marginBottom:5}}>Tune your guitar</div>
<div style={{fontSize:12,color:C.muted,lineHeight:1.5}}>Pluck a string and the tuner tells you if you are in tune. Always tune up before playing.</div>
<div style={{marginTop:12,fontSize:12,fontWeight:600,color:C.sage}}>Chromatic tuner - standard tuning</div>
style={{background:C.bg2,border:"1px solid "+C.sage,borderRadius:16,padding:"20px 22px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",
display:"flex",alignItems:"center",gap:18}}>
<div style={{fontSize:36,flexShrink:0}}>🎵</div>
<div style={{flex:1}}>
<div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:3}}>Tune your guitar</div>
<div style={{fontSize:13,color:C.muted,lineHeight:1.5}}>Get in tune before you play. Pluck a string and the tuner guides you.</div>
</div>
<div style={{color:C.sage,fontSize:20,flexShrink:0}}>›</div>
</button>
{/* Start from basics */}
<button onClick={()=>go(0)}
style={{background:C.bg2,border:"1px solid "+C.amber,borderRadius:14,padding:"22px 16px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif"}}>
<div style={{fontSize:26,marginBottom:8}}>📖</div>
<div style={{fontWeight:700,fontSize:15,color:C.text,marginBottom:5}}>Start from basics</div>
<div style={{fontSize:12,color:C.muted,lineHeight:1.5}}>Never played? We cover everything from holding the guitar to real songs.</div>
<div style={{marginTop:12,fontSize:12,fontWeight:600,color:C.amber}}>7 lessons + free play</div>
style={{background:C.bg2,border:"1px solid "+C.amber,borderRadius:16,padding:"20px 22px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",
display:"flex",alignItems:"center",gap:18}}>
<div style={{fontSize:36,flexShrink:0}}>📖</div>
<div style={{flex:1}}>
<div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:3}}>Start from basics</div>
<div style={{fontSize:13,color:C.muted,lineHeight:1.5}}>New to guitar? Learn step by step from the very beginning.</div>
</div>
<div style={{color:C.amber,fontSize:20,flexShrink:0}}>›</div>
</button>
{/* Search any song */}
<button onClick={()=>go(7)}
style={{background:C.bg2,border:"1px solid "+C.fret,borderRadius:14,padding:"22px 16px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif"}}>
<div style={{fontSize:26,marginBottom:8}}>🔍</div>
<div style={{fontWeight:700,fontSize:15,color:C.text,marginBottom:5}}>Search any song</div>
<div style={{fontSize:12,color:C.muted,lineHeight:1.5}}>Know the basics? Search 70+ songs and play with mic feedback.</div>
<div style={{marginTop:12,fontSize:12,fontWeight:600,color:C.muted}}>Jump to lesson 8</div>
style={{background:C.bg2,border:"1px solid "+C.fret,borderRadius:16,padding:"20px 22px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",
display:"flex",alignItems:"center",gap:18}}>
<div style={{fontSize:36,flexShrink:0}}>🎵</div>
<div style={{flex:1}}>
<div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:3}}>Search any song</div>
<div style={{fontSize:13,color:C.muted,lineHeight:1.5}}>Already know the basics? Find a song and play along with the mic.</div>
</div>
<div style={{color:C.muted,fontSize:20,flexShrink:0}}>›</div>
</button>
</div>
<p style={{fontSize:12,color:C.muted}}>You can jump between lessons anytime using the nav.</p>
</div>
</div>
</div>