БрутализмПортфолиоИнтерактив

<div class="bg-gray-900 dark:bg-black p-8 min-h-screen">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-yellow-400 dark:bg-pink-600 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Alpha</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Alpha, showcasing its features and impact.</p>
      <a href="#" class="inline-block bg-black text-yellow-400 dark:bg-white dark:text-pink-600 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">Learn More</a>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-pink-600 dark:bg-yellow-400 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Beta</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Beta, highlighting its innovative aspects.</p>
      <a href="#" class="inline-block bg-black text-pink-600 dark:bg-white dark:text-yellow-400 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">View Case Study</a>
    </div>

    <!-- Interactive Contact Form -->
    <div class="md:col-span-2 bg-teal-400 dark:bg-purple-600 p-8 border-4 border-black dark:border-white shadow-brutal">
      <h3 class="text-3xl font-bold mb-6 text-black dark:text-white">Get in Touch</h3>
      <form action="#" method="post">
        <div class="mb-4">
          <label for="name" class="block text-black dark:text-white text-sm font-bold mb-2">Name:</label>
          <input type="text" id="name" name="name" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-black dark:text-white text-sm font-bold mb-2">Email:</label>
          <input type="email" id="email" name="email" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Email">
        </div>
        <div class="mb-6">
          <label for="message" class="block text-black dark:text-white text-sm font-bold mb-2">Message:</label>
          <textarea id="message" name="message" rows="6" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Message"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button type="submit" class="bg-black text-teal-400 dark:bg-white dark:text-purple-600 font-bold py-3 px-6 rounded border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:shadow-outline transition-colors">
            Send Message
          </button>
        </div>
      </form>
    </div>

    <!-- Testimonials/Avatar Section -->
    <div class="md:col-span-2 bg-red-500 dark:bg-blue-600 p-8 border-4 border-black dark:border-white shadow-brutal grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Working with this company was a game-changer!"</p>
        <p class="font-bold text-black dark:text-white">- Client A</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Highly recommended for their creativity and skill."</p>
        <p class="font-bold text-black dark:text-white">- Client B</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar 3" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"They exceeded all expectations!"</p>
        <p class="font-bold text-black dark:text-white">- Client C</p>
      </div>
    </div>

  </div>
</div>

<style>
.shadow-brutal {
  box-shadow: 8px 8px 0 0 #000;
}

.dark .shadow-brutal {
  box-shadow: 8px 8px 0 0 #fff;
}
</style>