VisionForge AI

AI Image & Video Generator

{/* Hero Section */}

{/* Left */}

Unlimited AI Visual Generator

Create Stunning {' '}AI Visuals {' '}From Prompt

Generate ultra realistic images and cinematic videos from a single prompt. Choose aspect ratios, styles, quality, and instantly download your creations.

{/* Right Preview */}

Resolution

4K Ultra

Style

Cinematic

Speed

Fast AI

{/* Generator Section */}

{/* Controls */}

AI Generator Panel

{/* Prompt */}

Main Prompt

</div>

{/* Image Upload */}
          <div className="mb-6">
            <label className="block text-sm text-white/70 mb-2">
              Upload Image (For AI Video)
            </label>

<div className="border-2 border-dashed border-white/20 rounded-2xl p-10 text-center hover:border-purple-500 transition-all cursor-pointer bg-black/20">
              <p className="text-white/60">Drop image here or click to upload</p>
            </div>
          </div>

{/* Aspect Ratio */}
          <div className="mb-6">
            <label className="block text-sm text-white/70 mb-3">
              Aspect Ratio
            </label>

<div className="grid grid-cols-3 gap-3">
              {[
                '1:1',
                '9:16',
                '16:9',
                '4:5',
                '3:4',
                '21:9',
              ].map((ratio) => (
                <button
                  key={ratio}
                  className="bg-white/5 border border-white/10 hover:border-purple-500 rounded-xl py-3 font-semibold transition-all"
                >
                  {ratio}
                </button>
              ))}
            </div>
          </div>

{/* Style */}
          <div className="mb-6">
            <label className="block text-sm text-white/70 mb-3">
              AI Style
            </label>

<select className="w-full bg-black/40 border border-white/10 rounded-2xl p-4 outline-none focus:border-cyan-500">
              <option>Cinematic</option>
              <option>Anime</option>
              <option>Realistic</option>
              <option>Fantasy</option>
              <option>Cyberpunk</option>
              <option>3D Render</option>
            </select>
          </div>

{/* Buttons */}
          <div className="grid grid-cols-2 gap-4">
            <button className="py-4 rounded-2xl bg-gradient-to-r from-purple-500 to-pink-500 font-bold hover:scale-[1.02] transition-all shadow-xl shadow-purple-500/20">
              Generate Image
            </button>

<button className="py-4 rounded-2xl bg-gradient-to-r from-cyan-500 to-blue-500 font-bold hover:scale-[1.02] transition-all shadow-xl shadow-cyan-500/20">
              Generate Video
            </button>
          </div>
        </div>

{/* Result */}
        <div>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-3xl font-bold">Generated Result</h2>

<button className="px-5 py-2 rounded-xl bg-green-500 hover:bg-green-400 transition-all font-semibold">
              Download
            </button>
          </div>

<div className="absolute bottom-4 left-4 right-4 bg-black/60 backdrop-blur-xl rounded-2xl p-4 border border-white/10">
              <p className="text-sm text-white/70">
                Prompt:
              </p>

<p className="font-medium mt-1">
                A cinematic futuristic city with neon lights and rainy atmosphere.
              </p>
            </div>
          </div>

{/* Video Preview */}
          <div className="mt-6 rounded-3xl overflow-hidden border border-white/10 bg-black">
            <video
              controls
              className="w-full"
              poster="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop"
            >
              <source src="" type="video/mp4" />
            </video>
          </div>
        </div>
      </div>
    </div>
  </section>

{/* API Section */}
  <section className="relative z-10 max-w-7xl mx-auto px-6 pb-20">
    <div className="grid lg:grid-cols-2 gap-6">
      {/* Image API */}
      <div className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-xl">
        <h2 className="text-2xl font-bold mb-4">Image Generation API</h2>

<p className="text-white/70 mb-5 leading-relaxed">
          You can connect any AI provider like OpenAI, Stability AI, Leonardo AI,
          Replicate, Together AI, or Fal AI.
        </p>

<div className="bg-black/40 rounded-2xl p-5 border border-white/10 overflow-auto text-sm">
          <pre>{`// Example API Integration\n\nconst generateImage = async () => {\n  const response = await fetch(\n    'YOUR_API_ENDPOINT',\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Authorization: 'Bearer YOUR_API_KEY'\n      },\n      body: JSON.stringify({\n        prompt: promptText,\n        aspect_ratio: '16:9',\n        style: 'cinematic'\n      })\n    }\n  )\n\n  const data = await response.json()\n  console.log(data)\n}`}</pre>
        </div>
      </div>

{/* Video API */}
      <div className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-xl">
        <h2 className="text-2xl font-bold mb-4">Video Generation API</h2>

<p className="text-white/70 mb-5 leading-relaxed">
          Connect video AI models like Runway, Kling AI, Luma AI, Pika Labs,
          Stability Video, or Haiper AI.
        </p>

<div className="bg-black/40 rounded-2xl p-5 border border-white/10 overflow-auto text-sm">
          <pre>{`// Example Video API\n\nconst generateVideo = async () => {\n  const response = await fetch(\n    'YOUR_VIDEO_API_ENDPOINT',\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Authorization: 'Bearer YOUR_API_KEY'\n      },\n      body: JSON.stringify({\n        image: uploadedImage,\n        prompt: videoPrompt,\n        duration: 5,\n        ratio: '9:16'\n      })\n    }\n  )\n\n  const data = await response.json()\n  console.log(data)\n}`}</pre>
        </div>
      </div>
    </div>
  </section>

{/* Footer */}
  <footer className="relative z-10 border-t border-white/10 bg-white/5 backdrop-blur-xl">
    <div className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
      <div>
        <h3 className="font-bold text-xl">VisionForge AI</h3>
        <p className="text-white/50 text-sm mt-1">
          Unlimited AI Image & Video Generator Platform
        </p>
      </div>

<div className="flex gap-6 text-white/60 text-sm">
        <button className="hover:text-white transition-all">Terms</button>
        <button className="hover:text-white transition-all">Privacy</button>
        <button className="hover:text-white transition-all">API Docs</button>
      </div>
    </div>
  </footer>
</div>

) }</body></html>