<div className="max-w-5xl mx-auto space-y-8 py-12">

  - <Github className="inline-block w-5 h-5 mr-2 align-text-bottom text-gray-600 dark:text-gray-300" /> **GitHub Repository**: [kiaksarg/edu-editor](https://github.com/kiaksarg/edu-editor)
  - <Globe className="inline-block w-5 h-5 mr-2 align-text-bottom text-gray-600 dark:text-gray-300" /> **Live Demo**: [edu-editor.netlify.app](https://edu-editor.netlify.app/)
  - <Youtube className="inline-block w-5 h-5 mr-2 align-text-bottom text-gray-600 dark:text-gray-300" /> **Watch the Demo Video**: [YouTube](https://youtu.be/3xKwSs96RJo)


  {/*  */}
  {/* <ZoomImage  src="/edu-editor-cover.png"
        alt="EduEditor Cover"
        fill="true"
        /> */}

  {/*  */}
  <div className="space-y-0.5">

  </div>

  <div className="relative pt-[56.25%]">
    <iframe
      className="absolute top-0 left-0 w-full h-full rounded-2xl shadow-lg"
      src="https://www.youtube.com/embed/3xKwSs96RJo"
      title="EduEditor Demo"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
    />
  </div>

  {/*  */}

  EduEditor is a block-based, developer-friendly rich text editor built on Slate.js. Designed for extensibility,
  it lets you define, compose, and customize content blocks with ease.




  ### 🔧 Basic Features
  - **Blocks**: Define your own block types
  - **Slash Command**: Insert nodes and formatting with `/`-triggered menus
  - **Headings**: Heading blocks
  - **Lists**: Ordered, unordered
  - **Quote**: Quote blocks

  <hr className="mt-8" />

  ### 🚧 Roadmap
  The following features are **not yet implemented** in EduEditor:
  <div className="space-y-2">
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Nested lists</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Table support</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Image block (with captions & resizing)</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Video & embed blocks (YouTube, Vimeo, etc.)</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Copy/paste style preservation (Word, Google Docs)</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Code blocks with syntax highlighting</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Math/LaTeX equation blocks</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Collaborative real-time editing</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Drag-and-drop file uploads</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Accessibility improvements</span>
    </label>
    <label className="flex items-center space-x-2">
      <input type="checkbox" disabled />
      <span>Export to PDF / HTML</span>
    </label>
  </div>


  </div>

EduEditor: A Block-Based, Extensible Slate.js Rich Text Editor

🔧 Basic Features

🚧 Roadmap