import React from "react";

export const Home_Banner: React.FC = () => {
  return (
    <div className="hero_img w-full flex flex-wrap gap-4 p-4 md:p-6 lg:p-8">
      <div className="hero_text max-w-md mx-auto md:mx-0">
        <h3 className="text-xl md:text-2xl lg:text-3xl font-bold mb-2">Bring Your Story to Life</h3>
        <p className="text-sm md:text-base mb-4">
          Start creating your own ebook today — share your voice, inspire
          readers, and publish to the world in just a few clicks.
        </p>
        <button className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm md:text-base">
          Create an ebook
        </button>
      </div>
      <div className="hero_cards flex flex-wrap gap-4 mt-6">
        <div className="card_1 w-full sm:w-1/2 md:w-1/3 lg:w-1/4 h-32 md:h-40 bg-white rounded-lg shadow"></div>
        <div className="card_2 w-full sm:w-1/2 md:w-1/3 lg:w-1/4 h-32 md:h-40 bg-white rounded-lg shadow "></div>
        <div className="card_3 w-full sm:w-1/2 md:w-1/3 lg:w-1/4 h-32 md:h-40 bg-white rounded-lg shadow "></div>
      </div>
    </div>
  );
};