chore: section space added

Author: sohez

src/app/components/home/Hero.tsx

@@ -5,7 +5,7 @@ import "./hero.css";
 
 const Hero = () => {
   return (
-    <section className="w-full mt-35">
+    <section className="w-full mt-35 px-6">
       <div className="max-w-7xl mx-auto flex flex-col gap-2 justify-center items-center">
         <div className="group relative w-32 sm:w-40 md:w-48 lg:w-56 aspect-square overflow-hidden rounded-full  transition-all duration-300">
           <Image

src/app/components/home/Skills.tsx

@@ -66,7 +66,7 @@ export const skillsData: SkillGroup[] = [
 
 const Skills = () => {
   return (
-    <section className="w-full mt-25">
+    <section className="w-full mt-25 px-6">
       <div className="max-w-7xl mx-auto flex flex-col gap-2 justify-center items-center">
         <div className="text-center flex flex-col justify-center items-center">
           <span className="underline decoration-1 decoration-red-500">
@@ -80,7 +80,7 @@ const Skills = () => {
           </p>
         </div>
         <div className="max-w-4xl">
-          <div className="mt-6 flex  w-full gap-4 border border-gray-700 text-gray-300 backdrop-blur-3xl bg-[#161B22]/70 p-8 rounded-2xl">
+          <div className="mt-6 flex flex-col md:flex-row  w-full gap-4 border border-gray-700 text-gray-300 backdrop-blur-3xl bg-[#161B22]/70 p-8 rounded-2xl">
             {skillsData.map((skill) => (
               <SkillsCard key={skill.title} group={skill} />
             ))}