Index.html

1. About Page

File: about.html

<section class="about py-12 px-6 bg-gray-50">
  <div class="max-w-5xl mx-auto">
    <h1 class="text-4xl font-bold mb-6">About Us</h1>
    <p class="text-lg mb-4">
      Welcome to <span class="font-semibold">BookVerse</span> — your one-stop destination for discovering, exploring, and sharing amazing books. Our mission is to make book discovery simple, engaging, and tailored to your taste.
    </p>
    <p class="text-lg mb-4">
      From timeless classics to the latest bestsellers, our curated collection connects readers with the stories they’ll love. Whether you are an avid reader, a student, or a casual browser, BookVerse offers a personalized experience that grows with you.
    </p>
    <p class="text-lg mb-4">
      We believe that books have the power to inspire, educate, and transform. Our platform combines a modern, intuitive interface with advanced recommendation algorithms to help you find your next favorite read effortlessly.
    </p>
    <h2 class="text-2xl font-semibold mt-8 mb-4">Our Values</h2>
    <ul class="list-disc list-inside text-lg space-y-2">
      <li><strong>Accessibility:</strong> Making books and knowledge available to everyone.</li>
      <li><strong>Community:</strong> Building a space for readers to share and connect.</li>
      <li><strong>Innovation:</strong> Leveraging technology to enhance the reading experience.</li>
      <li><strong>Quality:</strong> Curating content that is trustworthy and engaging.</li>
    </ul>
  </div>
</section>


---

2. Contact Page

File: contact.html

<section class="contact py-12 px-6 bg-white">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold mb-6">Contact Us</h1>
    <p class="text-lg mb-6">
      We'd love to hear from you! Whether you have questions, feedback, or partnership inquiries, our team is here to help. Reach out using the form below or through our contact details.
    </p>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- Contact Form -->
      <form class="bg-gray-50 p-6 rounded-lg shadow-md space-y-4">
        <div>
          <label for="name" class="block font-medium mb-1">Name</label>
          <input type="text" id="name" class="w-full border border-gray-300 rounded-md p-2" placeholder="Your Name">
        </div>
        <div>
          <label for="email" class="block font-medium mb-1">Email</label>
          <input type="email" id="email" class="w-full border border-gray-300 rounded-md p-2" placeholder="you@example.com">
        </div>
        <div>
          <label for="message" class="block font-medium mb-1">Message</label>
          <textarea id="message" rows="5" class="w-full border border-gray-300 rounded-md p-2" placeholder="Write your message..."></textarea>
        </div>
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Send Message</button>
      </form>

      <!-- Contact Details -->
      <div class="space-y-4">
        <h2 class="text-2xl font-semibold mb-2">Get in Touch</h2>
        <p><strong>Email:</strong> support@bookverse.com</p>
        <p><strong>Phone:</strong> +1 234 567 8901</p>
        <p><strong>Address:</strong> 123 Book St, Reading City, Knowledge State</p>
        <p class="mt-4 text-gray-600">
          Follow us on social media to stay updated with new releases, events, and special promotions!
        </p>
      </div>
    </div>
  </div>
</section>


---

3. Components Page

File: components.html

<section class="components py-12 px-6 bg-gray-50">
  <div class="max-w-6xl mx-auto">
    <h1 class="text-4xl font-bold mb-6">UI Components</h1>
    <p class="text-lg mb-6">
      BookVerse is built with modular, reusable components to ensure a smooth and consistent user experience. Below is an overview of the main components available on our platform.
    </p>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Book Card -->
      <div class="bg-white rounded-lg shadow-md p-4">
        <h2 class="font-semibold text-xl mb-2">Book Card</h2>
        <p class="text-gray-600 text-sm">
          Displays book cover, title, author, and ratings. Used in carousels, recommendations, and search results.
        </p>
      </div>

      <!-- Carousel Slider -->
      <div class="bg-white rounded-lg shadow-md p-4">
        <h2 class="font-semibold text-xl mb-2">Carousel Slider</h2>
        <p class="text-gray-600 text-sm">
          Horizontally scrollable component for showcasing multiple books, similar to the "Other Books" carousel on the Book Page.
        </p>
      </div>

      <!-- Navigation Menu -->
      <div class="bg-white rounded-lg shadow-md p-4">
        <h2 class="font-semibold text-xl mb-2">Navigation Menu</h2>
        <p class="text-gray-600 text-sm">
          Responsive header navigation with dropdowns, search bar, and account access.
        </p>
      </div>

      <!-- Modal / Popup -->
      <div class="bg-white rounded-lg shadow-md p-4">
        <h2 class="font-semibold text-xl mb-2">Modal / Popup</h2>
        <p class="text-gray-600 text-sm">
          Used for login forms, book details, notifications, and alerts. Fully responsive and accessible.
        </p>
      </div>

      <!-- Forms -->
      <div class="bg-white rounded-lg shadow-md p-4">
        <h2 class="font-semibold text-xl mb-2">Forms</h2>
        <p class="text-gray-600 text-sm">
          Contact forms, subscription forms, and login forms with validation and responsive styling.
        </p>
      </div>

      <!-- Buttons -->
      <div class="bg-white rounded-lg shadow-md p-4">
        <h2 class="font-semibold text-xl mb-2">Buttons</h2>
        <p class="text-gray-600 text-sm">
          Reusable buttons with multiple styles (primary, secondary, outline, icon buttons) consistent across the platform.
        </p>
      </div>
    </div>
  </div>
</section>