> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/MateoRiosdev/Free-TTS-VozCraft/llms.txt
> Use this file to discover all available pages before exploring further.

# VozCraft Documentation

> Free browser-based text-to-speech with multi-language support

<div className="relative w-full overflow-hidden dark:bg-[#0F172A] bg-white py-20">
  <div className="absolute inset-0 bg-gradient-to-br dark:from-[#944651]/20 dark:via-[#1b3c6b]/10 dark:to-transparent from-[#944651]/10 via-[#1b3c6b]/5 to-transparent" />

  <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
    <div className="grid lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-5xl lg:text-6xl font-bold dark:text-white text-gray-900 mb-6 leading-tight">
          VozCraft
        </h1>

        <p className="text-xl dark:text-gray-300 text-gray-600 mb-8 max-w-2xl">
          Generate high-quality text-to-speech audio directly in your browser. No API keys, no backend, completely free.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center px-8 py-3 rounded-lg bg-[#944651] hover:bg-[#7a3842] text-white font-semibold transition-colors">
            Get Started

            <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>

          <a href="/features/voice-options" className="inline-flex items-center px-8 py-3 rounded-lg dark:bg-white/10 dark:hover:bg-white/20 bg-gray-100 hover:bg-gray-200 dark:text-white text-gray-900 font-semibold border dark:border-white/20 border-gray-300 transition-colors">
            Explore Features
          </a>
        </div>
      </div>

      <div className="lg:col-span-5 relative">
        <div className="relative rounded-2xl dark:bg-[#1a2535]/80 bg-gray-50 border dark:border-[#27272a] border-gray-200 p-8 backdrop-blur-sm">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#944651] to-[#1b3c6b] flex items-center justify-center">
              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
              </svg>
            </div>

            <div>
              <div className="font-semibold dark:text-white text-gray-900">Free TTS</div>
              <div className="text-sm dark:text-gray-400 text-gray-600">Browser-based</div>
            </div>
          </div>

          <div className="space-y-3">
            <div className="flex items-center gap-2 dark:text-gray-300 text-gray-700 text-sm">
              <svg className="w-5 h-5 text-[#944651]" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>

              20+ Languages & Accents
            </div>

            <div className="flex items-center gap-2 dark:text-gray-300 text-gray-700 text-sm">
              <svg className="w-5 h-5 text-[#944651]" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>

              Voice Customization (Pitch, Speed, Mood)
            </div>

            <div className="flex items-center gap-2 dark:text-gray-300 text-gray-700 text-sm">
              <svg className="w-5 h-5 text-[#944651]" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>

              Export MP3/WAV Audio Files
            </div>

            <div className="flex items-center gap-2 dark:text-gray-300 text-gray-700 text-sm">
              <svg className="w-5 h-5 text-[#944651]" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>

              No API Keys Required
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Quick Start</h2>
  <p className="dark:text-gray-400 text-gray-600 mb-8">Get started with VozCraft in three simple steps</p>

  <Steps>
    <Step title="Access VozCraft">
      Open VozCraft in any modern web browser. No installation or account creation required.

      ```bash theme={null}
      # Or run locally
      git clone https://github.com/MateoRiosdev/Free-TTS-VozCraft.git
      cd Free-TTS-VozCraft
      npm install
      npm run dev
      ```
    </Step>

    <Step title="Configure Your Voice">
      Select your preferred language, voice type, speed, and mood from the control panel. VozCraft supports over 20 languages including Spanish, English, Portuguese, French, German, and more.

      <Note>
        Voice availability depends on your browser and operating system. Chrome and Edge typically offer the most voice options.
      </Note>
    </Step>

    <Step title="Generate Audio">
      Enter your text (up to 5,000 characters), click "Generate Audio", and listen to the result. You can download the audio as MP3 or WAV, and save your history for later use.

      <Tip>
        Use the mood settings to add emotion to your audio: try "Alegre" (Happy) for upbeat content or "Serio" (Serious) for professional narration.
      </Tip>
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Explore Features</h2>
  <p className="dark:text-gray-400 text-gray-600 mb-8">Discover what makes VozCraft powerful</p>

  <CardGroup cols={2}>
    <Card title="Voice Options" icon="microphone" href="/features/voice-options">
      Choose from 20+ languages and accents, with customizable voice types and regional variants.
    </Card>

    <Card title="Audio Export" icon="download" href="/features/audio-export">
      Download your generated audio as MP3 or WAV files with high-quality encoding.
    </Card>

    <Card title="History Management" icon="clock-rotate-left" href="/features/history-management">
      Track all your generated audio, rename entries, and export/import your history as JSON.
    </Card>

    <Card title="Customization" icon="sliders" href="/features/customization">
      Fine-tune pitch, speed, and mood settings to create the perfect voice for your needs.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Technical Resources</h2>
  <p className="dark:text-gray-400 text-gray-600 mb-8">Learn how VozCraft works under the hood</p>

  <CardGroup cols={3}>
    <Card title="Web Speech API" icon="code" href="/technical/web-speech-api">
      Understand how VozCraft leverages the browser's native speech synthesis capabilities.
    </Card>

    <Card title="Audio Processing" icon="waveform" href="/technical/audio-processing">
      Learn about the audio generation and encoding process for MP3/WAV exports.
    </Card>

    <Card title="PWA Setup" icon="mobile" href="/technical/pwa-setup">
      Install VozCraft as a Progressive Web App for offline access.
    </Card>
  </CardGroup>
</div>

<div className="mt-20 mb-16 max-w-5xl mx-auto px-6">
  <div className="rounded-2xl dark:bg-gradient-to-br dark:from-[#944651]/20 dark:to-[#1b3c6b]/20 bg-gradient-to-br from-[#944651]/10 to-[#1b3c6b]/10 border dark:border-[#944651]/30 border-[#944651]/20 p-12 text-center">
    <h2 className="text-3xl font-bold dark:text-white text-gray-900 mb-4">Ready to create amazing audio?</h2>

    <p className="dark:text-gray-300 text-gray-600 mb-8 max-w-2xl mx-auto">
      Start generating high-quality text-to-speech audio in seconds. No signup, no API keys, completely free.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-8 py-3 rounded-lg bg-[#944651] hover:bg-[#7a3842] text-white font-semibold transition-colors">
      Get Started Now

      <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
      </svg>
    </a>
  </div>
</div>