style: responsive on mobile

Author: sonylomo

src/pages/resources-home/search/MastercraftSearch.jsx

@@ -20,9 +20,9 @@ function MastercraftSearch() {
       <div className="px-4 py-8 mx-auto max-w-1440">
         <div className="flex flex-col items-center w-full gap-8 md:gap-12">
           <div className="w-full flex items-center flex-col gap-4 md:gap-8">
-            <div className="w-full flex items-center gap-10">
+            <div className="w-full flex flex-col md:flex-row  items-center gap-10">
               {/* First bar */}
-              <div className="flex gap-10">
+              <div className="flex gap-10 overflow-x-scroll w-full">
                 {[
                   "Documentation",
                   "Tutorials",
@@ -44,7 +44,7 @@ function MastercraftSearch() {
                   </button>
                 ))}
               </div>
-              <div className="relative flex items-center flex-grow pl-4 sm:px-6 py-2 sm:py-3 bg-white text-grey-dark rounded-xl md:rounded-2xl border border-[#EAECF0]">
+              <div className="w-full sm:w-auto relative flex items-center flex-grow pl-4 sm:px-6 py-2 sm:py-3 bg-white text-grey-dark rounded-xl md:rounded-2xl border border-[#EAECF0]">
                 <input
                   type="text"
                   name="resource"

src/pages/resources-home/sections/Features.jsx

@@ -46,7 +46,7 @@ function Features() {
             </form>
 
             {/* Tabs */}
-            <div className="w-full overflow-x-scroll flex items-center">
+            <div className="w-full overflow-x-auto flex items-center">
               <div className="flex gap-3 sm:gap-4 mx-auto">
                 <button
                   onClick={() => setActiveTab("All")}
@@ -84,7 +84,6 @@ function Features() {
             </div>
           </div>
 
-          {/* Day-Zero Software developers */}
           <div className="md:self-start flex flex-col gap-8 md:gap-10 w-full">
             <div className="max-w-xl space-y-2 text-center md:text-left">
               <h3 className="text-2xl md:text-3xl text-green-dark font-semibold">
@@ -110,7 +109,7 @@ function Features() {
                 Newly uploaded resources
               </h3>
               <Link
-                to="/resources/search?q=frontend"
+                to="/resources"
                 className="text-sm xl:text-base leading-tight font-normal text-primary underline"
               >
                 Explore all frontend resources