chore: tweak padding top in mobile view (#464)

Author: boojack

src/components/pages/about/hero/hero.tsx

@@ -4,7 +4,7 @@ import Pill from '@/components/shared/pill';
 
 const Hero = () => {
   return (
-    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-24">
+    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-8">
       <div className="gap-x-grid relative grid grid-cols-12 justify-items-center sm:grid-cols-4">
         <Pill theme="secondary-1" className="col-span-full">
           Why we build

src/components/pages/batch-change/hero/hero.tsx

@@ -1,6 +1,6 @@
 const Hero = () => {
   return (
-    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-24">
+    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-8">
       <div className="gap-x-grid relative grid grid-cols-12 justify-items-center sm:grid-cols-4">
         <h2 className="col-span-full mt-3.5 max-w-[1000px] text-center font-title text-88 font-semibold leading-none xl:max-w-[780px] xl:text-68 xl:leading-104 md:mt-2 md:max-w-[620px] md:text-54 sm:text-48 sm:leading-95">
           Batch change databases

src/components/pages/blog/blog-post-hero/blog-post-hero.tsx

@@ -30,7 +30,7 @@ const BlogPostHero = ({ post, isBlogPost = true }: BlogPostHeroProps) => {
     <section
       className={clsx(
         isBlogPost
-          ? 'pt-[136px] 2xl:pt-32 lg:pt-[120px] md:pt-[104px] sm:pt-24'
+          ? 'pt-[136px] 2xl:pt-32 lg:pt-[120px] md:pt-[104px] sm:pt-8'
           : 'mt-16 2xl:mt-14 lg:mt-12 md:mt-8',
         'container',
       )}

src/components/pages/branching/hero/hero.tsx

@@ -1,6 +1,6 @@
 const Hero = () => {
   return (
-    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-24">
+    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-8">
       <div className="gap-x-grid relative grid grid-cols-12 justify-items-center sm:grid-cols-4">
         <h2 className="col-span-full mt-3.5 max-w-[1000px] text-center font-title text-88 font-semibold leading-none xl:max-w-[780px] xl:text-68 xl:leading-104 md:mt-2 md:max-w-[620px] md:text-54 sm:text-48 sm:leading-95">
           Change Database the Git Way

src/components/pages/changelog/hero/hero.tsx

@@ -4,7 +4,7 @@ import Route from '@/lib/route';
 
 const Hero = () => {
   return (
-    <section className="pt-[136px] 2xl:pt-32 lg:pt-[120px] md:pt-[104px] sm:pt-24">
+    <section className="pt-[136px] 2xl:pt-32 lg:pt-[120px] md:pt-[104px] sm:pt-8">
       <div className="container">
         <h1 className="font-title text-90 font-semibold leading-none lg:text-68 md:text-56 sm:text-40">
           Bytebase <mark className="bg-transparent text-primary-1">Changelog</mark>

src/components/pages/data-masking/hero/hero.tsx

@@ -1,6 +1,6 @@
 const Hero = () => {
   return (
-    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-24">
+    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-8">
       <div className="gap-x-grid relative grid grid-cols-12 justify-items-center sm:grid-cols-4">
         <h2 className="col-span-full mt-3.5 max-w-[1000px] text-center font-title text-88 font-semibold leading-none xl:max-w-[780px] xl:text-68 xl:leading-104 md:mt-2 md:max-w-[620px] md:text-54 sm:text-48 sm:leading-95">
           🎭 Dynamic Data Masking

src/components/pages/schema-migration/hero/hero.tsx

@@ -40,7 +40,7 @@ const Hero = ({ subjects }: HeroProps) => {
   }, []);
 
   return (
-    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-24">
+    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-8">
       <div className="gap-x-grid relative grid grid-cols-12 justify-items-center sm:grid-cols-4">
         <Pill theme="secondary-1" className="col-span-full">
           With Web GUI

src/components/pages/sql-editor/hero/hero.tsx

@@ -40,7 +40,7 @@ const Hero = ({ subjects }: HeroProps) => {
   }, []);
 
   return (
-    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-24">
+    <section className="container pt-[136px] 3xl:pt-[128px] xl:pt-[120px] md:pt-[104px] sm:pt-8">
       <div className="gap-x-grid relative grid grid-cols-12 justify-items-center sm:grid-cols-4">
         <Pill theme="secondary-1" className="col-span-full">
           Web-based