diff --git a/src/pages/demo/StoryPageDemo.tsx b/src/pages/demo/StoryPageDemo.tsx
new file mode 100644
index 0000000..07dff15
--- /dev/null
+++ b/src/pages/demo/StoryPageDemo.tsx
@@ -0,0 +1,277 @@
+import React from 'react';
+import { ArrowLeft, ArrowRight, Mic, Volume2, Share2, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
+import { AudioRecorder } from '../../components/story/AudioRecorder';
+import { StoryMetrics } from '../../components/story/StoryMetrics';
+import type { StoryRecording } from '../../types/database';
+
+// Separar dados mock em arquivo próprio
+const DEMO_DATA = {
+  recording: {
+    id: 'demo-recording',
+    fluency_score: 85,
+    pronunciation_score: 90,
+    accuracy_score: 88,
+    comprehension_score: 92,
+    words_per_minute: 120,
+    pause_count: 3,
+    error_count: 2,
+    self_corrections: 1,
+    strengths: [
+      'Ótima pronúncia das palavras',
+      'Boa velocidade de leitura',
+      'Excelente compreensão do texto'
+    ],
+    improvements: [
+      'Reduzir pequenas pausas entre frases',
+      'Praticar palavras mais complexas'
+    ],
+    suggestions: 'Continue praticando a leitura em voz alta regularmente',
+    created_at: new Date().toISOString(),
+    processed_at: new Date().toISOString()
+  },
+  story: {
+    id: 'demo',
+    student_id: 'demo',
+    title: 'Uma Aventura Educacional',
+    content: {
+      pages: [
+        {
+          text: 'Bem-vindo à demonstração do Histórias Mágicas! Aqui você pode ver como funciona nossa plataforma de leitura interativa...',
+          image: 'https://images.unsplash.com/photo-1472162072942-cd5147eb3902?auto=format&fit=crop&q=80&w=800&h=600',
+        },
+        {
+          text: 'Com histórias interativas e educativas, seus alunos aprenderão de forma divertida e envolvente. Cada história é uma nova aventura!',
+          image: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=800&h=600',
+        }
+      ]
+    }
+  }
+};
+
+// Componente para imagem com loading
+function ImageWithLoading({ src, alt }: { src: string; alt: string }) {
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  return (
+    <div className="relative aspect-video bg-gray-50">
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Loader2 className="w-8 h-8 text-purple-600 animate-spin" />
+        </div>
+      )}
+      <img
+        src={src}
+        alt={alt}
+        className={`w-full h-full object-cover transition-opacity duration-300 ${
+          isLoading ? 'opacity-0' : 'opacity-100'
+        }`}
+        onLoad={() => setIsLoading(false)}
+      />
+    </div>
+  );
+}
+
+// Componente para navegação entre páginas
+function PageNavigation({ 
+  currentPage, 
+  totalPages, 
+  onPrevious, 
+  onNext 
+}: { 
+  currentPage: number;
+  totalPages: number;
+  onPrevious: () => void;
+  onNext: () => void;
+}) {
+  return (
+    <div className="flex justify-between items-center mt-8 pt-6 border-t border-gray-200">
+      <button
+        onClick={onPrevious}
+        disabled={currentPage === 0}
+        className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 disabled:opacity-50 transition"
+      >
+        <ArrowLeft className="h-5 w-5" />
+        Anterior
+      </button>
+
+      <span className="text-sm font-medium text-gray-500">
+        Página {currentPage + 1} de {totalPages}
+      </span>
+
+      <button
+        onClick={onNext}
+        disabled={currentPage === totalPages - 1}
+        className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 disabled:opacity-50 transition"
+      >
+        Próxima
+        <ArrowRight className="h-5 w-5" />
+      </button>
+    </div>
+  );
+}
+
+export function StoryPageDemo(): JSX.Element {
+  const [currentPage, setCurrentPage] = React.useState(0);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [showMetrics, setShowMetrics] = React.useState(false);
+  const [isRecording, setIsRecording] = React.useState(false);
+
+  const handleShare = () => {
+    alert('Funcionalidade de compartilhamento disponível apenas na versão completa!');
+  };
+
+  // Simula o processo de gravação e análise
+  const handleRecordingComplete = () => {
+    setIsRecording(true);
+    setTimeout(() => {
+      setIsRecording(false);
+      setShowMetrics(true);
+    }, 3000); // Simula 3 segundos de "processamento"
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-purple-50 to-white py-12">
+      <div className="max-w-4xl mx-auto px-4 space-y-8">
+        {/* Header */}
+        <header className="flex justify-between items-center">
+          <button
+            onClick={() => window.history.back()}
+            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition"
+          >
+            <ArrowLeft className="h-5 w-5" />
+            Voltar
+          </button>
+
+          <div className="flex items-center gap-4">
+            <button
+              onClick={handleShare}
+              className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 transition"
+            >
+              <Share2 className="h-5 w-5" />
+              Compartilhar
+            </button>
+            <button
+              onClick={() => setIsPlaying(!isPlaying)}
+              className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 transition"
+            >
+              <Volume2 className="h-5 w-5" />
+              {isPlaying ? 'Pausar' : 'Ouvir'}
+            </button>
+          </div>
+        </header>
+
+        {/* História com Imagem */}
+        <main className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+          <ImageWithLoading
+            src={DEMO_DATA.story.content.pages[currentPage].image}
+            alt={`Página ${currentPage + 1}`}
+          />
+
+          <div className="p-8">
+            <h1 className="text-3xl font-bold text-gray-900 mb-6">
+              {DEMO_DATA.story.title}
+            </h1>
+            
+            <p className="text-xl leading-relaxed text-gray-700 mb-8">
+              {DEMO_DATA.story.content.pages[currentPage].text}
+            </p>
+
+            <div className="flex items-center gap-4">
+              <button
+                onClick={handleRecordingComplete}
+                disabled={isRecording}
+                className={`flex items-center gap-2 px-6 py-3 rounded-lg text-white transition
+                  ${isRecording 
+                    ? 'bg-gray-400 cursor-not-allowed' 
+                    : 'bg-purple-600 hover:bg-purple-700'}`}
+              >
+                <Mic className="h-5 w-5" />
+                {isRecording ? 'Processando...' : 'Gravar Leitura'}
+              </button>
+              {isRecording && (
+                <div className="flex items-center gap-2 text-gray-600">
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                  Analisando sua leitura...
+                </div>
+              )}
+            </div>
+
+            <PageNavigation
+              currentPage={currentPage}
+              totalPages={DEMO_DATA.story.content.pages.length}
+              onPrevious={() => setCurrentPage(p => Math.max(0, p - 1))}
+              onNext={() => setCurrentPage(p => Math.min(DEMO_DATA.story.content.pages.length - 1, p + 1))}
+            />
+          </div>
+        </main>
+
+        {/* Dashboard de Métricas Condicional */}
+        {showMetrics && (
+          <section className="space-y-6">
+            <h2 className="text-2xl font-bold text-gray-900">
+              Dashboard de Leitura
+            </h2>
+
+            <StoryMetrics 
+              data={{
+                metrics: {
+                  fluency: DEMO_DATA.recording.fluency_score,
+                  pronunciation: DEMO_DATA.recording.pronunciation_score,
+                  accuracy: DEMO_DATA.recording.accuracy_score,
+                  comprehension: DEMO_DATA.recording.comprehension_score
+                },
+                feedback: {
+                  strengths: DEMO_DATA.recording.strengths,
+                  improvements: DEMO_DATA.recording.improvements,
+                  suggestions: DEMO_DATA.recording.suggestions
+                },
+                details: {
+                  wordsPerMinute: DEMO_DATA.recording.words_per_minute,
+                  pauseCount: DEMO_DATA.recording.pause_count,
+                  errorCount: DEMO_DATA.recording.error_count,
+                  selfCorrections: DEMO_DATA.recording.self_corrections
+                }
+              }}
+              isLoading={false}
+            />
+          </section>
+        )}
+
+        {/* CTAs */}
+        <section className="border-t border-gray-200 pt-8 mt-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
+              <h3 className="text-xl font-bold text-gray-900 mb-4">
+                Para Escolas
+              </h3>
+              <p className="text-gray-600 mb-6">
+                Transforme a experiência de leitura na sua escola com nossa plataforma educacional.
+              </p>
+              <button
+                onClick={() => window.location.href = '/register/school'}
+                className="w-full px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
+              >
+                Começar a Usar na Minha Escola
+              </button>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
+              <h3 className="text-xl font-bold text-gray-900 mb-4">
+                Para Pais
+              </h3>
+              <p className="text-gray-600 mb-6">
+                Acompanhe e incentive o desenvolvimento da leitura do seu filho de forma interativa.
+              </p>
+              <button
+                onClick={() => window.location.href = '/register/parent'}
+                className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+              >
+                Quero Usar com Meu Filho
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file