Landing page fo... - Tailwind AI

Vladimir Drayling
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
  <header class="bg-white shadow-lg">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex justify-between items-center py-6">
        <div class="flex items-center space-x-4">
          <i class="iconoir-video-camera text-3xl"></i>
          <span class="font-bold text-2xl">VideoPro</span>
        </div>
        <nav class="hidden md:flex items-center space-x-4">
          <a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
          <a href="#" class="text-gray-700 hover:text-gray-900">About</a>
          <a href="#" class="text-gray-700 hover:text-gray-900">Services</a>
          <a href="#" class="text-gray-700 hover:text-gray-900">Portfolio</a>
          <a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
        </nav>
        <div class="md:hidden flex items-center">
          <button class="mobile-menu-button">
            <i class="iconoir-menu text-2xl"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="mobile-menu hidden md:hidden">
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Home</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">About</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Services</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Portfolio</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Contact</a>
    </div>
  </header>

  <section class="bg-cover bg-center h-screen" style="background-image: url('https://placehold.co/1920x1080');">
    <div class="flex items-center justify-center h-full bg-gray-900 bg-opacity-50">
      <div class="text-center text-white">
        <h1 class="text-5xl font-bold mb-4">Professional Video Production</h1>
        <p class="text-xl mb-8">Capturing your moments with creativity and precision</p>
        <a href="#" class="bg-blue-500 text-white py-3 px-6 rounded hover:bg-blue-400 transition duration-300">Get Started</a>
      </div>
    </div>
  </section>

  <section class="py-12 bg-white">
    <div class="max-w-6xl mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-8">Our Services</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="text-center">
          <i class="iconoir-video-camera text-5xl text-blue-500 mb-4"></i>
          <h3 class="text-xl font-bold mb-2">Video Production</h3>
          <p class="text-gray-600">High-quality video production for all your needs.</p>
        </div>
        <div class="text-center">
          <i class="iconoir-edit-pencil text-5xl text-blue-500 mb-4"></i>
          <h3 class="text-xl font-bold mb-2">Editing</h3>
          <p class="text-gray-600">Professional editing to make your videos stand out.</p>
        </div>
        <div class="text-center">
          <i class="iconoir-microphone text-5xl text-blue-500 mb-4"></i>
          <h3 class="text-xl font-bold mb-2">Voice Over</h3>
          <p class="text-gray-600">Expert voice-over services for your projects.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="py-12 bg-gray-100">
    <div class="max-w-6xl mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-8">Our Portfolio</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
          <img src="https://placehold.co/400x300" alt="Portfolio Image" class="w-full">
          <div class="p-4">
            <h3 class="text-xl font-bold mb-2">Project Title</h3>
            <p class="text-gray-600">Brief description of the project.</p>
          </div>
        </div>
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
          <img src="https://placehold.co/400x300" alt="Portfolio Image" class="w-full">
          <div class="p-4">
            <h3 class="text-xl font-bold mb-2">Project Title</h3>
            <p class="text-gray-600">Brief description of the project.</p>
          </div>
        </div>
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
          <img src="https://placehold.co/400x300" alt="Portfolio Image" class="w-full">
          <div class="p-4">
            <h3 class="text-xl font-bold mb-2">Project Title</h3>
            <p class="text-gray-600">Brief description of the project.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="py-12 bg-white">
    <div class="max-w-6xl mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-8">Contact Us</h2>
      <div class="bg-gray-100 shadow-lg rounded-lg p-8 max-w-md mx-auto">
        <form>
          <div class="mb-4">
            <label for="name" class="block text-gray-700 mb-2">Name</label>
            <input type="text" id="name" class="w-full p-2 border rounded" placeholder="Enter your name">
          </div>
          <div class="mb-4">
            <label for="email" class="block text-gray-700 mb-2">Email</label>
            <input type="email" id="email" class="w-full p-2 border rounded" placeholder="Enter your email">
          </div>
          <div class="mb-4">
            <label for="message" class="block text-gray-700 mb-2">Message</label>
            <textarea id="message" class="w-full p-2 border rounded" placeholder="Enter your message" rows="4"></textarea>
          </div>
          <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-400">Submit</button>
        </form>
      </div>
    </div>
  </section>

  <footer class="bg-gray-800 text-white py-6">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-4">
          <i class="iconoir-video-camera text-3xl"></i>
          <span class="font-bold text-xl">VideoPro</span>
        </div>
        <div class="flex space-x-4">
          <a href="#" class="hover:text-gray-400">Privacy Policy</a>
          <a href="#" class="hover:text-gray-400">Terms of Service</a>
        </div>
      </div>
      <div class="text-center mt-4">
        <p>&copy; 2023 VideoPro. All rights reserved.</p>
      </div>
    </div>
  </footer>
</body>
Landing page for video production company
