feat : made hero component responsive

components/hero.js

@@ -0,0 +1,38 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      font-size: 50px; /* Default font size */
+    }
+
+    @media (max-width: 1024x) {
+      :host {
+        font-size: 40px; /* Tablet font size */
+      }
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        font-size: 30px; /* Mobile font size */
+      }
+    }
+
+    p {
+      font-weight: 500;
+    }
+  </style>
+  <p>
+    <slot></slot>
+  </p>
+`;
+
+class HeroComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+window.customElements.define('hero-component', HeroComponent);

index.html

@@ -238,7 +238,7 @@
 
     <div id="intro-container">
       <div class="hero">
-        <p>해외취업을 위한 커뮤니티 기반 알고리즘 스터디</p>      
+        <hero-component>해외취업을 위한 커뮤니티 기반 알고리즘 스터디</hero-component>
         <link-button size="big" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
       </div>
 
@@ -252,14 +252,14 @@
         <img src="images/languages.png" alt="#" />
       </div>
       <div class="hero">
-        <p>지역에 관계없이 다양한 언어로 참여할 수 있어요</p>
+        <hero-component>지역에 관계없이 다양한 언어로 참여할 수 있어요</hero-component>
         <link-button size="big" variant="ghost" outline href="#join-instruction-container">참여방법 안내</link-button>
       </div>
     </div>
 
     <div id="review-container">
       <div class="hero">
-        <p>코드리뷰를 통해 새로운 관점을 배울 수 있어요</p>
+        <hero-component>코드리뷰를 통해 새로운 관점을 배울 수 있어요</hero-component>
         <link-button size="big" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
       </div>
       <div class="review-image">