import React from "react";

export const Home_Banner: React.FC = () => {
  return (
    <div className="hero_img flex flex-wrap gap-3 md:flex-nowrap h-fit md:h-[170px] w-full px-4 md:px-6 py-6 md:py-0 bg-gradient-to-r from-blue-500 to-purple-600">
      <div className="hero_text w-full md:w-1/2 flex flex-col justify-center">
        <h3 className="text-2xl md:text-3xl font-bold mb-2 text-white">Bring Your Story to Life</h3>
        <p className="text-sm md:text-base mb-4 text-white opacity-90 max-w-md">
          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-white text-blue-600 hover:bg-blue-50 transition-colors rounded-md py-2 px-4 text-sm md:text-base font-medium w-fit">Create an ebook</button>
      </div>
      <div className="hero_cards w-full md:w-1/2">
        <div className="card_1 "></div>
        <div className="card_2 "></div>
        <div className="card_3"></div>
      </div>
    </div>
  );
};