fix: modify the UI style of the component

Author: huzhengen

src/app/home/Main.js

@@ -63,7 +63,7 @@ export function HomeMain({data}) {
             <button className="max-md:w-full max-md:font-normal h-14 text-lg btn btn-outline btn-primary hover:bg-gray hover:text-white md:mr-3 px-9">🎉 Join Community</button>
           </a>
           <Link href="/learn/courses">
-            <button className="max-md:relative max-md:mt-3 max-md:w-full max-md:font-normal h-14 text-lg relative btn btn-primary text-white pl-9 max-md:pl-0 pr-2 max-md:pr-0 hover:!opacity-90">
+            <button className="max-md:relative max-md:mt-3 max-md:w-full max-md:font-normal h-14 text-lg relative btn btn-primary text-white pl-9 max-md:px-0 pr-2 hover:!opacity-90">
               Get Started
               <span className="max-md:absolute max-md:top-3 max-md:right-3 p-2 bg-white rounded ml-14">
                 <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">

src/app/learn/[type]/[id]/Author.js

@@ -25,10 +25,10 @@ export function Author({ data }) {
       <div className="flex items-center" suppressHydrationWarning>
         <Avatar size={56} user={data?.team_user} />
         <div className="ml-4 flex-1">
-          <h4 className="text-sm font-bold md:text-lg max-md:text-lg">
+          <h4 className="font-bold text-lg">
             <a href={`/u/${data?.team_user?.user_handle}`}>{data?.team_user?.user_nick_name}</a>
           </h4>
-          <p className="text-xs text-gray-500 md:text-sm max-md:text-sm">
+          <p className="text-gray-500 text-sm">
             Posted on <span className="text-gray-50">{formatTime(Number(data?.base?.cs_created_at) * 1000, 'MMM D, YYYY HH:mm')}</span> · Latest update on{' '}
             <span className="text-gray-50">{formatTime(data?.base?.cs_updated_at * 1000, 'MMM D, YYYY')}</span>
           </p>

src/entry/components/Header/nav.js

@@ -74,14 +74,14 @@ export function Navs({data}) {
                 onClick={() => setOpenMenu(!openMenu)}
                 href={i.link}
               >
-                <li className="flex justify-between items-center font-bold h-14 text-base">
+                <li className="flex justify-between items-center font-bold h-14">
                   {i.name}
                   <ChevronRightIcon className="h-4 w-4 opacity-60" />
                 </li>
               </Link> : (
                 <div key={`header-menu-${k}`} className="collapse">
                   <input type="radio" name={`my-accordion-${k}`} checked="checked" readOnly />
-                  <div className="collapse-title collapse-title-sm min-h-0 h-14 text-base font-bold flex justify-between items-center">
+                  <div className="collapse-title collapse-title-sm min-h-0 h-14 font-bold flex justify-between items-center">
                     {i.name}
                     <ChevronDownIcon className="h-4 w-4 opacity-60" />
                   </div>

src/entry/layouts/default/Footer.js

@@ -168,11 +168,11 @@ export function Footer() {
               key={`footer-menus-${k}`}
               className="max-md:mb-4 max-md:border-t max-md:border-[rgba(255,255,255,0.06)] max-md:pt-6 md:ml-[64px]"
             >
-              <h4 className="mb-0 text-sm font-semibold max-md:mb-2 md:mb-12 md:text-lg max-md:text-base">{i.name}</h4>
+              <h4 className="mb-0 font-semibold max-md:mb-2 md:mb-12 md:text-lg">{i.name}</h4>
               <ul>
                 {i.items.map(subItem => (
                   <li
-                    className="text-xs leading-7 transition-all duration-300 hover:text-green hover:underline md:text-sm max-md:leading-7 max-md:text-sm md:leading-10"
+                    className="leading-7 transition-all duration-300 hover:text-green hover:underline text-sm md:leading-10"
                     key={`footer-menus-sub-${subItem.name}`}
                   >
                     {/* href={subItem.link} */}