Hero Cancer - Copy this React, Tailwind Component to your project

import-DonateMain-from-"../DonateMain";-import-{-getLocale,-getTranslations-}-from-"next-intl/server";-import-LocaleToGoogleLangConverter-from-"../LocaleToGoogleLangConverter";-import-parse-from-"html-react-parser";-import-translate-from-"translate";-translate.engine-=-process.env.TRANSLATE_ENGINE;-export-default-async-function-HeroCancer2()-{-const-t-=-await-getTranslations("HeroCancer");-const-locale-=-await-getLocale();-const-GoogleLangKey-=-LocaleToGoogleLangConverter(locale);-return-(-<section-className="py-4-mt-14-lg:mt-0">-<div-className="mx-auto-lg:max-w-7xl-w-full-px-5-sm:px-10-md:px-12-lg:px-5-grid-lg:grid-cols-2-lg:items-center-gap-10">-<div-className="flex-flex-col-space-y-2-sm:space-y-8-lg:items-start-text-center-lg:text-left-max-w-2xl-md:max-w-3xl-order-2-lg:order-1">-<h1-className="text-left-leading-tight-bg-gradient-to-r-from-red-500-to-amber-700-text-transparent-bg-clip-text-font-bold-text-4xl-lg:text-5xl">-{parse(-await-translate(-"Cancer-Research-<br/><i>'Zero-Cancer-World'</i>",-GoogleLangKey-)-)}-</h1>-<p-className="text-justify-text-gray-700-md:font-semibold-tracking-tight-max-w-xl-lg:max-w-none">-{await-translate(-"Despite-incredible-strides-in-technology,-the-fight-against-cancer-remains-uncertain,-with-millions-worldwide-still-bearing-the-weight-of-late-stage-diagnoses.-The-goal-is-to-find-knowledge-that-could-enhance-at-risk-individual's-early-intervention-or-even-before-symptoms-arise.",-GoogleLangKey-)}-</p>-<div-className="flex">-<DonateMain-mainText={`${await-translate(-"Learn-More",-GoogleLangKey-)}`}-link={`${locale}/cancer`}-/>-</div>-</div>-<div-className="flex-aspect-square-lg:aspect-auto-lg:h-[35rem]-relative-order-1-lg:order-2">-<div-className="w-3/5-h-[80%]-rounded-3xl-overflow-clip-border-8-border-gray-200-z-30">-<img-src={`/images/${locale}/Homepage/Hero/hero-cancer.png`}-alt="cancer-patient-image"-width={300}-className="w-full-h-full-object-cover-object-right-z-30"-/>-</div>-<div-className="absolute-right-0-bottom-0-h-[calc(100%-50px)]-w-4/5-rounded-3xl-overflow-clip-border-4-border-gray-200-z-10">-<img-src="/images/cancerHero.jpg"-alt="cancer-patient-image"-width={300}-className="z-10-w-full-h-full-object-cover"-/>-</div>-</div>-</div>-</section>-);-}-change-this-hero-component-so-that-it-looks-modern-and-pleasing