{/* another layout  */}
      <div className="mx-auto mt-12 max-w-6xl space-y-12 sm:mt-16 sm:space-y-20 lg:mt-20 lg:space-y-24 xl:space-y-32">
        <div className="grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2 lg:items-center xl:gap-x-16">
          <div>
            <CustomImage
              src="/oneHour/customdomain1.jpg"
              sizes="(max-width: 479px) 100vw, (max-width: 767px) 74vw, (max-width: 991px) 55vw, (max-width: 1279px) 96vw, (max-width: 1439px) 82vw, (max-width: 1919px) 1186px, 1346px"
            />
          </div>
          <div className="flex flex-col items-start justify-start lg:self-center">
            <div className="inline-flex h-14 w-14 items-center justify-center rounded-xl border border-paleAqua bg-paleAqua/20">
              <Globe width={24} height={24} className="text-[#00838d]" />
            </div>
            <Title title="Your Name. Your Domain. Your Personal Brand." />
            <Subtitle
              text=" Set up your custom domain in a few simple steps and make your
                portfolio truly yours."
            />
          </div>
        </div>

        {/* second feature  */}
        <div className="grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2 lg:items-center xl:gap-x-16">
          <div className="lg:order-2">
            <CustomImage
              src="/oneHour/blog.jpg"
              sizes="(max-width: 479px) 100vw, (max-width: 767px) 74vw, (max-width: 991px) 55vw, (max-width: 1279px) 96vw, (max-width: 1439px) 82vw, (max-width: 1919px) 1186px, 1346px"
            />
          </div>
          <div className="flex flex-col items-start justify-start lg:order-1 lg:self-center">
            <div className="inline-flex h-14 w-14 items-center justify-center rounded-xl border border-paleAqua bg-paleAqua/20">
              <Globe width={24} height={24} className="text-[#00838d]" />
            </div>
            <Title title="Launch Your Blog with Ease" />
            <Subtitle text="  Create, and publish posts effortlessly—all within Notion." />
          </div>
        </div>
      </div>















const CustomImage = ({
  src,
  className,
  sizes,
}: {
  src: string;
  className?: string;
  sizes?: string;
}) => {
  return (
    <img
      src={src}
      className={twMerge(
        "h-full w-full rounded-2xl border border-paleAqua object-cover shadow-xl shadow-paleAqua/20",
        className,
      )}
      alt=""
    />
  );
};

const Title = ({ title, className }: { title: string; className?: string }) => {
  return (
    <h3
      className={twMerge(
        "mt-4 text-start text-2xl font-bold text-midnightBlue sm:text-3xl",
        className,
      )}
    >
      {title}
    </h3>
  );
};

const Subtitle = ({
  text,
  className,
}: {
  text: string;
  className?: string;
}) => {
  return (
    <h4
      className={twMerge(
        "mt-2 text-start text-base font-normal text-slateGray lg:text-lg",
        className,
      )}
    >
      {text}
    </h4>
  );
};