feat: hero component for home page

src/pages/home/components/Hero.tsx

@@ -45,7 +45,7 @@ export function Hero() {
                 <div className="absolute inset-x-0 top-[650px] h-[70px] bg-[linear-gradient(0deg,#00040A_8.57%,#00040A00_100%)]" />
             </div>
             <div className="relative z-10 flex flex-col items-center max-w-[1440px] mx-auto">
-                <div className="flex flex-col items-center gap-6 px-5 sm:px-12 lg:px-20 pt-[140px] sm:pt-[200px] lg:pt-[265px] w-full h-[450px]">
+                <div className="flex flex-col items-center gap-6 px-5 sm:px-12 lg:px-20 pt-[140px] sm:pt-[200px] lg:pt-[265px] w-full h-[530px]">
                     <h1 className="text-4xl lg:text-5xl font-black italic text-white text-center uppercase font-[REM] leading-[1.5] tracking-[0.007em]">
                         {t('pages.home.slogan.title')}
                     </h1>
@@ -53,7 +53,7 @@ export function Hero() {
                         {t('pages.home.slogan.description')}
                     </p>
                 </div>
-                <div className="pt-[230px] sm:pt-[140px] lg:pt-[170px] px-5 sm:px-12 lg:px-20 pb-6 w-full">
+                <div className="pt-[90px] sm:pt-[20px] lg:pt-[20px] px-5 sm:px-12 lg:px-20 pb-6 w-full">
                     <div className="overflow-hidden">
                         <div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))]">
                             {HERO_FEATURES.map(({ titleKey, descKey, icon }, index) => (