Responsiveness changes

src/components/FAQs/Answer.astro

@@ -1,3 +1,3 @@
-<div class='leading-relaxed text-left p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'>
+<div class='text-sm sm:text-base leading-relaxed text-left p-2 sm:p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'>
   <slot />
 </div>

src/components/FAQs/FAQs.astro

@@ -1,7 +1,7 @@
 <div class='border-t bg-gray-100'>
   <div class='container'>
     <div class='flex justify-between relative -top-5'>
-      <h1 class='text-md font-medium py-1 px-3 border bg-white rounded-md'>
+      <h1 class='text-sm sm:text-base font-medium py-1 px-3 border bg-white rounded-md'>
         Frequently Asked Questions
       </h1>
     </div>

src/components/FAQs/Question.astro

@@ -14,9 +14,9 @@ const { question, isActive = false } = Astro.props;
 >
   <button
     faq-question
-    class='flex flex-row justify-between items-center p-3 w-full'
+    class='flex flex-row justify-between items-center p-2 sm:p-3 w-full'
   >
-    <span class='text-md text-left font-medium'>{question}</span>
+    <span class='text-sm sm:text-base text-left font-medium'>{question}</span>
     <Icon icon='down' class='h-6 hidden sm:block text-gray-400' />
   </button>
   <div class:list={['answer', { hidden: !isActive }]} faq-answer>

src/components/OpenSourceBanner.astro

@@ -7,7 +7,7 @@ const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
 
 <div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
   <div class='max-w-[600px] container'>
-    <h2 class='text-3xl sm:text-5xl font-bold'>Open Source</h1>
+    <h2 class='text-2xl sm:text-5xl font-bold'>Open Source</h2>
     <p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
       The project is OpenSource, <a
         href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'

src/components/ResourcesAlert.astro

@@ -16,7 +16,7 @@ const roadmapTitle =
 
 <div
   class:list={[
-    'mt-4 sm:mt-7 border rounded-md mb-0',
+    'mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0',
     {
       'sm:-mb-[82px]': hasTNSBanner,
       'sm:-mb-[65px]': !hasTNSBanner,

src/components/Sponsor/Sponsor.astro

@@ -1,5 +1,6 @@
 ---
 import type { GAEventType } from '../Analytics/analytics';
+import Icon from '../Icon.astro';
 
 export type SponsorType = {
   url: string;
@@ -28,6 +29,13 @@ const {
   onclick={event ? `window.fireEvent(${JSON.stringify(event)})` : ''}
   class='fixed bottom-[15px] right-[20px] outline-transparent z-50 bg-white max-w-[330px] shadow-lg outline-0 hidden'
 >
+  <button
+    class='absolute top-1.5 right-1.5 text-gray-300 hover:text-gray-800'
+    aria-label='Close'
+    close-sponsor
+  >
+    <Icon icon='close' class='h-4' />
+  </button>
   <img src={imageUrl} class='h-[150px] lg:h-[169px]' alt='Sponsor Banner' />
   <span class='text-sm flex flex-col justify-between'>
     <span class='p-[10px]'>
@@ -37,3 +45,11 @@ const {
     <span class='sponsor-footer'>Partner Content</span>
   </span>
 </a>
+
+<script>
+  document.querySelector('[close-sponsor]')?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    document.getElementById('sponsor-ad')?.classList.add('hidden');
+  });
+</script>