chore: replace banner

Author: hyochan

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ls:*)",
+      "Bash(lsof:*)",
+      "Bash(xargs kill -9)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.vscode/settings.json

@@ -27,7 +27,6 @@
   "typescript.preferences.importModuleSpecifier": "relative",
   "prettier.configPath": ".prettierrc.js",
   "cSpell.words": [
-    "adfit",
     "clsx",
     "formatjs",
     "hyochan",

app/[lang]/(common)/AdFit.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+
+import greatfrontendGif from '@/public/assets/greatfrontend-js.gif';
+
+export type GreatFrontEndProps = {
+  className?: string;
+  href: string;
+  title?: string;
+};
+
+export default function GreatFrontEnd({
+  className,
+  href,
+  title,
+}: GreatFrontEndProps): JSX.Element {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={clsx('flex flex-col items-start group', className)}
+    >
+      <div className="w-full max-w-[728px] group-hover:opacity-90 transition-opacity">
+        <Image
+          src={greatfrontendGif}
+          alt="GreatFrontEnd - Ace your next front end interview"
+          className="w-full h-auto"
+          priority
+        />
+      </div>
+      {title && (
+        <span className="text-[10px] text-gray6 dark:text-gray2 mt-1.5 group-hover:text-gray5 dark:group-hover:text-gray1 transition-colors">
+          {title}
+        </span>
+      )}
+    </a>
+  );
+}

app/[lang]/(common)/AdFitResponsive.tsx

@@ -18,8 +18,7 @@ import TextInput from '../../(common)/TextInput';
 import StatsSymbols from './StatsSymbol';
 import StatsUrlCard from './StatsUrlCards';
 import {useMediaQuery} from 'usehooks-ts';
-import AdFit from '../../(common)/AdFit';
-import AdFitResponsive from '../../(common)/AdFitResponsive';
+import GreatFrontEnd from '../../(common)/GreatFrontEnd';
 
 const rootUrl = `${process.env.NEXT_PUBLIC_ROOT_URL}/api`;
 
@@ -115,16 +114,12 @@ function Hero({t, statsInfo}: Props): ReactElement {
         <p className="body1 text-[20px] text-left mb-[36px] opacity-50">
           {t.developerPowerMeterDesc}
         </p>
-        {/* Begin: AdFit */}
-        <AdFitResponsive
+        {/* Begin: GreatFrontEnd Banner */}
+        <GreatFrontEnd
           className="mb-6"
-          adfitClassName="adfit-top"
-          units={{
-            mobile: 'DAN-dAqcoLWvKpYEtbtq',
-            pc: 'DAN-SEcRVdSHkh05H0jO',
-          }}
+          href="https://www.greatfrontend.com?fpr=hyo73"
         />
-        {/* End: AdFit */}
+        {/* End: GreatFrontEnd Banner */}
         {/* Begin: Search Form */}
         <form
           onSubmit={handleSubmit(searchUser)}

app/[lang]/(common)/GreatFrontEnd.tsx

@@ -10,7 +10,6 @@ import {initAmplitude} from '../../../src/utils/webUtils';
 import Hero from './Hero';
 import SectionFooter from './SectionFooter';
 import SectionHowItWorks from './SectionHowItWorks';
-import AdFit from '../(common)/AdFit';
 
 type Props = {
   t: Translates['home'];

app/[lang]/(home)/Hero/index.tsx

@@ -7,8 +7,7 @@ import type {Translates} from '../../../src/localization';
 import imgBgSection1 from '@/public/assets/bg_section1.png';
 import SvgScouter from '@/public/assets/scouter.svg';
 import {useMediaQuery} from 'usehooks-ts';
-import AdFit from '../(common)/AdFit';
-import AdFitResponsive from '../(common)/AdFitResponsive';
+import GreatFrontEnd from '../(common)/GreatFrontEnd';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -70,20 +69,17 @@ export default function SectionFooter({t}: Props): ReactElement {
           />
           <p className={clsx('text-white text-[12px] align-center opacity-50')}>
             designed by &nbsp;
-            <a href="https://dooboolab.com">dooboolab</a>
+            <a href="https://hyo.dev">hyochan</a>
           </p>
         </div>
       </div>
-      {/* Begin: AdFit */}
-      <AdFitResponsive
-        adfitClassName="adfit-bottom"
+      {/* Begin: GreatFrontEnd Banner */}
+      <GreatFrontEnd
         className="mb-20"
-        units={{
-          mobile: 'DAN-GfeJUqhlQ5KqCOzw',
-          pc: 'DAN-9eecqcxVgP9XX0bN',
-        }}
+        href="https://www.greatfrontend.com/prepare/coding?fpr=hyo73"
+        title="Coding interview questions"
       />
-      {/* End: AdFit */}
+      {/* End: GreatFrontEnd Banner */}
     </div>
   );
 }

app/[lang]/(home)/Home.tsx

@@ -11,7 +11,7 @@ import GithubUserList from './GithubUserList';
 
 import {H1} from '~/components/Typography';
 import type {Locale} from '~/i18n';
-import AdFitResponsive from '../(common)/AdFitResponsive';
+import GreatFrontEnd from '../(common)/GreatFrontEnd';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -36,32 +36,25 @@ export default async function Page({
   return (
     <div className={clsx('flex-1 bg-paper overflow-hidden', 'flex flex-col')}>
       <div
-        className="
-        mt-4 mb-[32px] ml-6 mr-2
-        flex-row items-center justify-between
-        max-[480px]:mb-0 max-[480px]:my-4
-      "
+        className={clsx(
+          'mt-4 mb-[32px] px-6 w-full',
+          'flex flex-row items-center justify-between gap-4',
+          'max-[480px]:flex-col max-[480px]:items-start max-[480px]:mb-0 max-[480px]:my-4',
+        )}
       >
         <H1
           className={clsx(
-            'text-[44px] font-bold',
-            'max-[480px]:hidden',
-            'max-[560px]:text-[28px]',
+            'text-[44px] font-bold shrink-0 whitespace-nowrap',
+            'max-[480px]:text-[28px]',
             inter.className,
           )}
         >
           {recentList.title}
         </H1>
-        <AdFitResponsive
-          className={clsx(
-            "mx-6 mb-2",
-            "mx-0"
-          )}
-          adfitClassName="adfit-top"
-          units={{
-            mobile: 'DAN-dAqcoLWvKpYEtbtq',
-            pc: 'DAN-SEcRVdSHkh05H0jO',
-          }}
+        <GreatFrontEnd
+          className="max-w-[400px] shrink-0 max-[480px]:mt-4 max-[480px]:max-w-full"
+          href="https://www.greatfrontend.com/questions/formats/quiz?fpr=hyo73"
+          title="Quiz interview questions"
         />
       </div>
       <GithubUserList

app/[lang]/(home)/SectionFooter.tsx

@@ -8,7 +8,7 @@ import {getTranslates} from '../../../src/localization';
 import SocialButtons from './SocialButtons';
 
 import type {Locale} from '~/i18n';
-import AdFitResponsive from '../(common)/AdFitResponsive';
+import GreatFrontEnd from '../(common)/GreatFrontEnd';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -30,9 +30,9 @@ export default async function Page({
         <a
           href={
             str === 'termsOfService'
-              ? 'https://legacy.dooboolab.com/termsofservice'
+              ? 'https://www.hyo.dev/termsofservice.html'
               : str === 'privacyPolicy'
-              ? 'https://legacy.dooboolab.com/privacyandpolicy'
+              ? 'https://www.hyo.dev/privacyandpolicy.html'
               : ''
           }
           key={str}
@@ -53,13 +53,10 @@ export default async function Page({
         'flex flex-col justify-center items-center',
       )}
     >
-      <AdFitResponsive
+      <GreatFrontEnd
         className="mx-6 mb-8"
-        adfitClassName="adfit-top"
-        units={{
-          mobile: 'DAN-dAqcoLWvKpYEtbtq',
-          pc: 'DAN-SEcRVdSHkh05H0jO',
-        }}
+        href="https://www.greatfrontend.com/behavioral-interview-playbook?fpr=hyo73"
+        title="Behavioral interview questions"
       />
       <div
         className={clsx(