Remove arrow and finetune styles (#468)

Author: kathywklee

src/components/pages/home/section/getting-started.tsx

@@ -30,7 +30,7 @@ type LinkButtonProps = {
 const LinkButton = ({ url, logo: Logo }: LinkButtonProps) => (
   <Link
     to={url}
-    className="group flex items-center justify-center border-gray-600 border-solid rounded-sm border-2 px-6 py-3 w-[200px] h-[70px] transition-all duration-200 hover:scale-110 hover:bg-gray-600"
+    className="group flex items-center justify-center border-gray-600 border-solid rounded-sm border-2 px-6 py-3 w-[180px] h-[70px] transition-all duration-200 hover:scale-110 hover:bg-gray-600"
   >
     <Logo className="fill-brand-text-light dark:fill-brand-text-dark group-hover:fill-white" />
   </Link>
@@ -39,11 +39,11 @@ const LinkButton = ({ url, logo: Logo }: LinkButtonProps) => (
 const GettingStarted = () => {
   return (
     <>
-      <h2 className="text-center font-bold mb-4 text-3xl md:text-6xl text-primary-light dark:text-primary-dark">
+      <h2 className="text-center font-bold mb-4 text-2xl md:text-4xl text-primary-light dark:text-primary-dark">
         Get Started Using:
       </h2>
 
-      <ul className="list-none px-0 w-full mt-6 inline-flex gap-10 flex-col md:flex-row items-center justify-center pb-16">
+      <ul className="list-none px-0 w-full m-0 md:mt-6 inline-flex gap-5 md:gap-10 flex-col md:flex-row items-center justify-center">
         {list.map(({ url, name, logo }) => (
           <li key={name}>
             <LinkButton url={url} logo={logo} />

src/components/pages/home/section/opening-section.tsx

@@ -8,42 +8,28 @@ import GettingStarted from './getting-started';
 const OpeningSection = () => {
   const ref = createRef<HTMLDivElement>();
 
-  const scrollToNextSection = () => {
-    const element = ref.current.getBoundingClientRect();
-    window.scrollTo({ top: element.height, behavior: 'smooth' });
-  };
-
   return (
-    <Section ref={ref} className="!py-0 !px-4 !min-h-[calc(100vh-60px)]">
+    <Section ref={ref} className="!pt-0 !pb-8 !px-4 !min-h-[calc(100vh-60px)]">
       <FadeIntoView>
-        <h1>
+        <h1 className="m-0">
           <span className="invisible absolute w-0 h-0">GameCI</span>
-          <GameCiLogoLight className="block dark:hidden select-none w-full max-w-[320px] h-auto" />
-          <GameCiLogo className="hidden dark:block select-none w-full max-w-[320px] h-auto" />
+          <GameCiLogoLight className="block dark:hidden select-none w-full max-w-[280px] h-auto" />
+          <GameCiLogo className="hidden dark:block select-none w-full max-w-[280px] h-auto" />
         </h1>
       </FadeIntoView>
 
       <FadeIntoView delay={150}>
-        <h2 className="text-base md:text-2xl text-center w-full max-w-[500px]">
+        <h2 className="text-base md:text-2xl text-center w-full max-w-[500px] m-0">
           The fastest and <strong>easiest</strong> way to automatically test and build your game
           projects
         </h2>
       </FadeIntoView>
 
       <FadeIntoView delay={200}>
-        <div className="mt-8 md:mt-12">
+        <div className="mt-4 md:mt-8">
           <GettingStarted />
         </div>
       </FadeIntoView>
-
-      <button
-        type="button"
-        onClick={scrollToNextSection}
-        className="hidden md:block bg-transparent border-none cursor-pointer text-7xl absolute bottom-0 mb-2 focus-visible:outline focus-visible:outline-2"
-        aria-label="Click to scroll to the next section"
-      >
-        ⇩
-      </button>
     </Section>
   );
 };