added responsiveness to hero page

Author: ProgrammingInBlood

src/components/home/HeroSection.tsx

@@ -5,13 +5,13 @@ import { HeroIcon } from "../icons/animated/HeroIcon";
 
 function HeroSection() {
   return (
-    <div className="flex flex-col items-center md:justify-between gap-12 md:flex-row h-[calc(100vh-76px)] mt-8 md:mt-0">
+    <div className="flex flex-col-reverse items-center justify-end md:justify-between gap-12 md:flex-row min-h-[calc(100vh-76px)]">
       <div className=" md:w-1/2 w-full">
-        <h1 className="text-6xl font-bold md:text-7xl">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold lg:text-7xl">
           Your go-to <UnderlineText>toolkit</UnderlineText> for everyday tasks.
         </h1>
 
-        <p className=" text-xl text-gray-500 font-medium">
+        <p className="text-lg sm:text-xl text-gray-500 font-medium">
           From secure passwords to quick conversions, AtoZTools has everything
           you need to get things done faster.
         </p>
@@ -21,7 +21,7 @@ function HeroSection() {
         </div>
       </div>
 
-      <div className="md:w-1/2  w-full min-w-64 max-w-96 md:max-w-full">
+      <div className="md:w-1/2 w-full max-w-64  min-w-64 sm:max-w-96">
         <HeroIcon />
       </div>
     </div>

src/components/icons/animated/HeroIcon.tsx

@@ -14,7 +14,6 @@ const icon = {
 
 export const HeroIcon = () => (
   <motion.div
-    className="container"
     variants={icon}
     initial="hidden"
     animate="visible"