@tanstack/create 0.68.0 → 0.68.1

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx

@@ -24,10 +24,8 @@ function InitialLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex-1 flex items-center justify-center px-4">
       <div className="text-center max-w-3xl mx-auto w-full">
-        <h1 className="text-6xl font-bold mb-4 bg-linear-to-r from-orange-500 to-red-600 text-transparent bg-clip-text uppercase">
-          <span className="text-white">TanStack</span> Chat
-        </h1>
-        <p className="text-gray-400 mb-6 w-2/3 mx-auto text-lg">
+        <h1 className="demo-title mb-4">TanStack Chat</h1>
+        <p className="demo-muted mb-6 mx-auto max-w-2xl text-lg">
           You can ask me about anything, I might or might not have a good
           answer, but you can still ask.
         </p>
@@ -39,7 +37,7 @@ function InitialLayout({ children }: { children: React.ReactNode }) {
 
 function ChattingLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sticky bottom-0 left-0 right-0 bg-gray-900/80 backdrop-blur-sm border-t border-orange-500/10 z-10">
+    <div className="sticky bottom-0 left-0 right-0 z-10 border-t border-[var(--line)] bg-[var(--header-bg)] backdrop-blur-sm">
       <div className="max-w-3xl mx-auto w-full px-4 py-3">{children}</div>
     </div>
   )
@@ -96,17 +94,17 @@ function Messages({
               key={message.id}
               className={`p-4 ${
                 message.role === 'assistant'
-                  ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+                  ? 'bg-[var(--chip-bg)]'
                   : 'bg-transparent'
               }`}
             >
               <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
                 {message.role === 'assistant' ? (
-                  <div className="w-8 h-8 rounded-lg bg-linear-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                  <div className="mt-2 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--lagoon-deep)] text-sm font-medium text-white">
                     AI
                   </div>
                 ) : (
-                  <div className="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--sea-ink-soft)] text-sm font-medium text-white">
                     Y
                   </div>
                 )}
@@ -115,7 +113,7 @@ function Messages({
                     if (part.type === 'text' && part.content) {
                       return (
                         <div
-                          className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
+                          className="prose prose-sm min-w-0 max-w-none flex-1"
                           key={index}
                         >
                           <Streamdown>{part.content}</Streamdown>
@@ -145,7 +143,7 @@ function Messages({
                         ? onStopSpeak()
                         : onSpeak(textContent, message.id)
                     }
-                    className="flex-shrink-0 p-2 text-gray-400 hover:text-orange-400 transition-colors"
+                    className="demo-muted flex-shrink-0 p-2 transition-colors hover:text-[var(--lagoon-deep)]"
                     title={isPlaying ? 'Stop speaking' : 'Read aloud'}
                   >
                     {isPlaying ? (
@@ -190,7 +188,7 @@ function ChatPage() {
   const Layout = messages.length ? ChattingLayout : InitialLayout
 
   return (
-    <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
+    <div className="relative flex h-[calc(100vh-12rem)] min-h-[32rem]">
       <div className="flex-1 flex flex-col min-h-0">
         <Messages
           messages={messages}
@@ -205,7 +203,7 @@ function ChatPage() {
               <div className="flex items-center justify-center">
                 <button
                   onClick={stop}
-                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+                  className="demo-button demo-button-danger"
                 >
                   <Square className="w-4 h-4 fill-current" />
                   Stop
@@ -226,10 +224,8 @@ function ChatPage() {
                   type="button"
                   onClick={handleMicClick}
                   disabled={isLoading || isTranscribing}
-                  className={`p-3 rounded-lg transition-colors ${
-                    isRecording
-                      ? 'bg-red-600 hover:bg-red-700 text-white'
-                      : 'bg-gray-800/50 text-gray-400 hover:text-orange-400 border border-orange-500/20'
+                  className={`demo-button p-3 ${
+                    isRecording ? 'demo-button-danger' : 'demo-button-secondary'
                   } disabled:opacity-50`}
                   title={isRecording ? 'Stop recording' : 'Start recording'}
                 >
@@ -247,7 +243,7 @@ function ChatPage() {
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder="Type something clever..."
-                    className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden shadow-lg"
+                    className="demo-textarea pr-12 text-sm"
                     rows={1}
                     style={{ minHeight: '44px', maxHeight: '200px' }}
                     disabled={isLoading}
@@ -268,7 +264,7 @@ function ChatPage() {
                   <button
                     type="submit"
                     disabled={!input.trim() || isLoading}
-                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-[var(--lagoon-deep)] transition-colors hover:text-[var(--sea-ink)] disabled:text-[var(--sea-ink-soft)]"
                   >
                     <Send className="w-4 h-4" />
                   </button>

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx

@@ -73,26 +73,25 @@ function ImagePage() {
   }
 
   return (
-    <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
-      <div className="max-w-6xl mx-auto">
+    <main className="demo-page demo-page-wide">
+      <div>
         <div className="flex items-center gap-3 mb-6">
-          <ImageIcon className="w-8 h-8 text-orange-500" />
-          <h1 className="text-2xl font-bold text-white">Image Generation</h1>
+          <ImageIcon className="w-8 h-8 text-[var(--lagoon-deep)]" />
+          <h1 className="demo-title">Image Generation</h1>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Input Panel */}
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                   Size
                 </label>
                 <select
                   value={size}
                   onChange={(e) => setSize(e.target.value)}
                   disabled={isLoading}
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+                  className="demo-select text-sm"
                 >
                   {SIZES.map((s) => (
                     <option key={s} value={s}>
@@ -102,7 +101,7 @@ function ImagePage() {
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                   Count
                 </label>
                 <input
@@ -116,13 +115,13 @@ function ImagePage() {
                   min={1}
                   max={4}
                   disabled={isLoading}
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+                  className="demo-input text-sm"
                 />
               </div>
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+              <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                 Prompt
               </label>
               <textarea
@@ -130,7 +129,7 @@ function ImagePage() {
                 onChange={(e) => setPrompt(e.target.value)}
                 disabled={isLoading}
                 rows={6}
-                className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50 resize-none"
+                className="demo-textarea text-sm"
                 placeholder="Describe the image you want to generate..."
               />
             </div>
@@ -138,7 +137,7 @@ function ImagePage() {
             <button
               onClick={handleGenerate}
               disabled={isLoading || !prompt.trim()}
-              className="w-full px-4 py-3 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+              className="demo-button w-full"
             >
               {isLoading ? (
                 <>
@@ -151,16 +150,11 @@ function ImagePage() {
             </button>
           </div>
 
-          {/* Output Panel */}
-          <div className="lg:col-span-2 bg-gray-800 rounded-lg p-6 border border-orange-500/20">
-            <h2 className="text-lg font-semibold text-white mb-4">
-              Generated Images
-            </h2>
+          <div className="demo-panel lg:col-span-2">
+            <h2 className="demo-section-title mb-4">Generated Images</h2>
 
             {error && (
-              <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 mb-4">
-                {error}
-              </div>
+              <div className="demo-alert demo-alert-danger mb-4">{error}</div>
             )}
 
             {images.length > 0 ? (
@@ -171,17 +165,17 @@ function ImagePage() {
                       <img
                         src={getImageSrc(image)}
                         alt={`Generated image ${index + 1}`}
-                        className="w-full rounded-lg border border-gray-700"
+                        className="w-full rounded-lg border border-[var(--line)]"
                       />
                       <button
                         onClick={() => handleDownload(image, index)}
-                        className="absolute top-2 right-2 p-2 bg-gray-900/80 hover:bg-gray-900 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="demo-button absolute right-2 top-2 p-2 opacity-0 transition-opacity group-hover:opacity-100"
                         title="Download image"
                       >
-                        <Download className="w-4 h-4 text-white" />
+                        <Download className="w-4 h-4" />
                       </button>
                       {image.revisedPrompt && (
-                        <p className="mt-2 text-xs text-gray-400 italic">
+                        <p className="demo-muted mt-2 text-xs italic">
                           Revised: {image.revisedPrompt}
                         </p>
                       )}
@@ -190,7 +184,7 @@ function ImagePage() {
                 </div>
               </div>
             ) : !error && !isLoading ? (
-              <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+              <div className="demo-muted flex h-64 flex-col items-center justify-center">
                 <ImageIcon className="w-16 h-16 mb-4 opacity-50" />
                 <p>
                   Enter a prompt and click "Generate Image" to create an image.
@@ -200,7 +194,7 @@ function ImagePage() {
           </div>
         </div>
       </div>
-    </div>
+    </main>
   )
 }
 

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-structured.tsx

@@ -20,35 +20,37 @@ const SAMPLE_RECIPES = [
 
 function RecipeCard({ recipe }: { recipe: Recipe }) {
   const difficultyColors = {
-    easy: 'bg-green-500/20 text-green-400',
-    medium: 'bg-yellow-500/20 text-yellow-400',
-    hard: 'bg-red-500/20 text-red-400',
+    easy: 'demo-pill',
+    medium: 'demo-pill',
+    hard: 'demo-pill',
   }
 
   return (
     <div className="space-y-6">
       {/* Header */}
       <div>
-        <h3 className="text-2xl font-bold text-white mb-2">{recipe.name}</h3>
-        <p className="text-gray-400">{recipe.description}</p>
+        <h3 className="text-2xl font-bold text-[var(--sea-ink)] mb-2">
+          {recipe.name}
+        </h3>
+        <p className="demo-muted">{recipe.description}</p>
       </div>
 
       {/* Meta info */}
       <div className="flex flex-wrap gap-4">
-        <div className="flex items-center gap-2 text-gray-300">
-          <Clock className="w-4 h-4 text-orange-400" />
+        <div className="demo-muted flex items-center gap-2">
+          <Clock className="w-4 h-4 text-[var(--lagoon-deep)]" />
           <span className="text-sm">Prep: {recipe.prepTime}</span>
         </div>
-        <div className="flex items-center gap-2 text-gray-300">
-          <Clock className="w-4 h-4 text-orange-400" />
+        <div className="demo-muted flex items-center gap-2">
+          <Clock className="w-4 h-4 text-[var(--lagoon-deep)]" />
           <span className="text-sm">Cook: {recipe.cookTime}</span>
         </div>
-        <div className="flex items-center gap-2 text-gray-300">
-          <Users className="w-4 h-4 text-orange-400" />
+        <div className="demo-muted flex items-center gap-2">
+          <Users className="w-4 h-4 text-[var(--lagoon-deep)]" />
           <span className="text-sm">{recipe.servings} servings</span>
         </div>
         <div
-          className={`flex items-center gap-2 px-2 py-1 rounded-full ${
+          className={`flex items-center gap-2 ${
             difficultyColors[recipe.difficulty]
           }`}
         >
@@ -59,16 +61,16 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
 
       {/* Ingredients */}
       <div>
-        <h4 className="text-lg font-semibold text-white mb-3">Ingredients</h4>
+        <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
+          Ingredients
+        </h4>
         <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
           {recipe.ingredients.map((ing, idx) => (
-            <li key={idx} className="flex items-start gap-2 text-gray-300">
-              <span className="text-orange-400">•</span>
+            <li key={idx} className="demo-muted flex items-start gap-2">
+              <span className="text-[var(--lagoon-deep)]">•</span>
               <span>
                 <span className="font-medium">{ing.amount}</span> {ing.item}
-                {ing.notes && (
-                  <span className="text-gray-500 text-sm"> ({ing.notes})</span>
-                )}
+                {ing.notes && <span className="text-sm"> ({ing.notes})</span>}
               </span>
             </li>
           ))}
@@ -77,11 +79,13 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
 
       {/* Instructions */}
       <div>
-        <h4 className="text-lg font-semibold text-white mb-3">Instructions</h4>
+        <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
+          Instructions
+        </h4>
         <ol className="space-y-3">
           {recipe.instructions.map((step, idx) => (
-            <li key={idx} className="flex gap-3 text-gray-300">
-              <span className="flex-shrink-0 w-6 h-6 bg-orange-500/20 text-orange-400 rounded-full flex items-center justify-center text-sm font-medium">
+            <li key={idx} className="demo-muted flex gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full border border-[var(--line)] bg-[var(--chip-bg)] text-[var(--sea-ink)] flex items-center justify-center text-sm font-medium">
                 {idx + 1}
               </span>
               <span>{step}</span>
@@ -93,11 +97,13 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
       {/* Tips */}
       {recipe.tips && recipe.tips.length > 0 && (
         <div>
-          <h4 className="text-lg font-semibold text-white mb-3">Tips</h4>
+          <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
+            Tips
+          </h4>
           <ul className="space-y-2">
             {recipe.tips.map((tip, idx) => (
-              <li key={idx} className="flex items-start gap-2 text-gray-300">
-                <span className="text-yellow-400">*</span>
+              <li key={idx} className="demo-muted flex items-start gap-2">
+                <span className="text-[var(--lagoon-deep)]">*</span>
                 <span>{tip}</span>
               </li>
             ))}
@@ -108,27 +114,27 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
       {/* Nutrition */}
       {recipe.nutritionPerServing && (
         <div>
-          <h4 className="text-lg font-semibold text-white mb-3">
+          <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
             Nutrition (per serving)
           </h4>
           <div className="flex flex-wrap gap-4 text-sm">
             {recipe.nutritionPerServing.calories && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 {recipe.nutritionPerServing.calories} cal
               </span>
             )}
             {recipe.nutritionPerServing.protein && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 Protein: {recipe.nutritionPerServing.protein}
               </span>
             )}
             {recipe.nutritionPerServing.carbs && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 Carbs: {recipe.nutritionPerServing.carbs}
               </span>
             )}
             {recipe.nutritionPerServing.fat && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 Fat: {recipe.nutritionPerServing.fat}
               </span>
             )}
@@ -182,26 +188,24 @@ function StructuredPage() {
   const canExecute = !!(!isLoading && recipeName.trim() && !error)
 
   return (
-    <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
-      <div className="max-w-6xl mx-auto">
+    <main className="demo-page demo-page-wide">
+      <div>
         <div className="flex items-center gap-3 mb-6">
-          <ChefHat className="w-8 h-8 text-orange-500" />
-          <h1 className="text-2xl font-bold text-white">
-            One-Shot & Structured Output
-          </h1>
+          <ChefHat className="w-8 h-8 text-[var(--lagoon-deep)]" />
+          <h1 className="demo-title">One-Shot & Structured Output</h1>
         </div>
 
-        <p className="text-gray-400 mb-6">
+        <p className="demo-muted mb-6">
           Compare two output modes:{' '}
-          <strong className="text-orange-400">One-Shot</strong> returns freeform
-          markdown, while{' '}
-          <strong className="text-orange-400">Structured</strong> returns
+          <strong className="text-[var(--sea-ink)]">One-Shot</strong> returns
+          freeform markdown, while{' '}
+          <strong className="text-[var(--sea-ink)]">Structured</strong> returns
           validated JSON conforming to a Zod schema.
         </p>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
+            <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
               Recipe Name
             </label>
             <input
@@ -210,11 +214,11 @@ function StructuredPage() {
               onChange={(e) => setRecipeName(e.target.value)}
               disabled={isLoading}
               placeholder="e.g., Chocolate Chip Cookies"
-              className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+              className="demo-input text-sm"
             />
 
             <div className="mt-2">
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+              <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                 Quick Picks
               </label>
               <div className="flex flex-wrap gap-2">
@@ -223,7 +227,7 @@ function StructuredPage() {
                     key={name}
                     onClick={() => setRecipeName(name)}
                     disabled={isLoading}
-                    className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 transition-colors"
+                    className="demo-button demo-button-secondary px-2 py-1 text-xs"
                   >
                     {name}
                   </button>
@@ -237,18 +241,14 @@ function StructuredPage() {
               <button
                 onClick={() => handleGenerate('oneshot')}
                 disabled={!canExecute}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors text-white ${
-                  !canExecute ? 'bg-gray-600' : 'bg-orange-500'
-                }`}
+                className="demo-button"
               >
                 One-Shot (Markdown)
               </button>
               <button
                 onClick={() => handleGenerate('structured')}
                 disabled={!canExecute}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors  text-white ${
-                  !canExecute ? 'bg-gray-600' : 'bg-blue-500'
-                }`}
+                className="demo-button"
               >
                 Structured (JSON)
               </button>
@@ -256,29 +256,18 @@ function StructuredPage() {
           </div>
         </div>
 
-        {/* Output Panel */}
-        <div className="mt-5 lg:col-span-2 bg-gray-800 rounded-lg p-6 border border-orange-500/20">
+        <div className="demo-panel mt-5 lg:col-span-2">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-semibold text-white">
-              Generated Recipe
-            </h2>
+            <h2 className="demo-section-title">Generated Recipe</h2>
             {result && (
-              <span
-                className={`px-2 py-1 rounded text-xs font-medium ${
-                  result.mode === 'structured'
-                    ? 'bg-purple-500/20 text-purple-400'
-                    : 'bg-blue-500/20 text-blue-400'
-                }`}
-              >
+              <span className="demo-pill">
                 {result.mode === 'structured' ? 'Structured JSON' : 'Markdown'}
               </span>
             )}
           </div>
 
           {error && (
-            <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 mb-4">
-              {error}
-            </div>
+            <div className="demo-alert demo-alert-danger mb-4">{error}</div>
           )}
 
           {result ? (
@@ -286,13 +275,13 @@ function StructuredPage() {
               {result.mode === 'structured' && result.recipe ? (
                 <RecipeCard recipe={result.recipe} />
               ) : result.markdown ? (
-                <div className="prose prose-invert max-w-none">
+                <div className="max-w-none">
                   <Streamdown>{result.markdown}</Streamdown>
                 </div>
               ) : null}
             </div>
           ) : !error && !isLoading ? (
-            <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+            <div className="demo-muted flex h-64 flex-col items-center justify-center">
               <ChefHat className="w-16 h-16 mb-4 opacity-50" />
               <p>
                 Enter a recipe name and click "Generate Recipe" to get started.
@@ -301,7 +290,7 @@ function StructuredPage() {
           ) : null}
         </div>
       </div>
-    </div>
+    </main>
   )
 }
 

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx

@@ -17,35 +17,30 @@ function RouteComponent() {
   const guitar = Route.useLoaderData()
 
   return (
-    <div className="relative min-h-[100vh] flex items-center bg-black text-white p-5">
-      <div className="relative z-10 w-[60%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-8 border border-gray-800/50 shadow-xl">
-        <Link
-          to="/example/guitars"
-          className="inline-block mb-4 text-emerald-400 hover:text-emerald-300"
-        >
-          &larr; Back to all guitars
-        </Link>
-        <h1 className="text-3xl font-bold mb-4">{guitar.name}</h1>
-        <p className="text-gray-300 mb-6">{guitar.description}</p>
-        <div className="flex items-center justify-between">
-          <div className="text-2xl font-bold text-emerald-400">
-            ${guitar.price}
+    <main className="demo-page">
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,28rem)] lg:items-center">
+        <section className="demo-panel">
+          <Link to="/demo/guitars/" className="mb-4 inline-block">
+            &larr; Back to all guitars
+          </Link>
+          <h1 className="demo-title mb-4">{guitar.name}</h1>
+          <p className="demo-muted mb-6">{guitar.description}</p>
+          <div className="flex items-center justify-between">
+            <div className="text-2xl font-bold text-[var(--lagoon-deep)]">
+              ${guitar.price}
+            </div>
+            <button className="demo-button">Add to Cart</button>
           </div>
-          <button className="bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-2 rounded-lg transition-colors">
-            Add to Cart
-          </button>
-        </div>
-      </div>
+        </section>
 
-      <div className="absolute top-0 right-0 w-[55%] h-full z-0">
-        <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+        <div className="demo-card overflow-hidden p-0">
           <img
             src={guitar.image}
             alt={guitar.name}
-            className="w-full h-full object-cover guitar-image"
+            className="guitar-image h-full w-full object-cover"
           />
         </div>
       </div>
-    </div>
+    </main>
   )
 }