Add input expand animation and fix Japanese header on mobile

src/components/Header.tsx

@@ -23,7 +23,7 @@ export function Header() {
             src="/logo.png"
             className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
           ></img>
-          <h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
+          <h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
             {t("header.title")}
           </h1>
         </div>

src/pages/Home.tsx

@@ -10,16 +10,18 @@ export function Home() {
     <HeaderRoute>
       <div class="flex h-full items-center justify-center">
         <input
-          onFocus={(e) => {
+          onFocus={() => {
             setIsFocused(true);
           }}
-          onBlur={(e) => {
+          onBlur={() => {
             setIsFocused(false);
           }}
           type="text"
-          class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
+          className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
-          placeholder={isFocused ? "" : t("home.placeholder")}
+            isFocused ? "w-full md:w-3/12" : "w-full md:w-80"
-        ></input>
+          } transition-all duration-300`}
+          placeholder={isFocused ? "" : t('home.placeholder')}
+        />
       </div>
     </HeaderRoute>
   );