responsiveness in home page

src/components/Home/HomePage.jsx

@@ -10,26 +10,25 @@ const HomePage = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen w-full bg-gradient-to-r from-blue-400 to-purple-500 text-white">
-      <motion.h1
-        className="text-6xl font-bold mb-4"
+    <div className="flex flex-col items-center justify-center min-h-screen w-full bg-gradient-to-r from-blue-400 to-purple-500 text-white px-4">
+      <motion.h2
+        className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 text-center"
         initial={{ opacity: 0, y: -50 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
-        style={{ fontWeight: 600, fontSize: '7rem' }} // Adjusted font weight and size
       >
         Welcome to AnimateHub
-      </motion.h1>
+      </motion.h2>
       <motion.p
-        className="text-lg mb-8 max-w-2xl text-center px-4"
+        className="text-base md:text-lg lg:text-xl mb-8 max-w-screen-lg text-center"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.3 }}
       >
         Explore various animated components and more! AnimateHub is an open-source project where you can find and contribute to a collection of animated UI components built with React and other modern web technologies.
       </motion.p>
       <motion.button
-        className="text-white text-md py-2 px-8 rounded-full shadow-md bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 focus:outline-none transform hover:scale-110 transition-transform duration-300"
+        className="text-white text-sm md:text-md lg:text-lg py-2 px-8 rounded-full shadow-md bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 focus:outline-none transform hover:scale-110 transition-transform duration-300"
         onClick={handleExploreClick}
         whileHover={{ scale: 1.1 }}
         whileTap={{ scale: 0.9 }}

src/components/Home/Navbar.jsx

@@ -14,14 +14,14 @@ const Navbar = () => {
       <div className="container mx-auto px-4 md:px-8">
         <div className="flex justify-between items-center">
           <motion.div
-            className="text-2xl font-bold" // Increased font weight to bold
+            className="text-lg md:text-xl lg:text-2xl font-bold" // Responsive font size
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.5, delay: 0.2 }}
           >
             AnimateHub
           </motion.div>
-          <div className="flex space-x-6 items-center"> {/* Added items-center for vertical alignment */}
+          <div className="flex space-x-4 md:space-x-6 items-center"> {/* Added items-center for vertical alignment */}
             <motion.div
               className="hover:text-gray-300"
               whileHover={{ scale: 1.1 }}