community page bug fixes and responsive issues in several pages

Author: DhairyaMajmudar

components/Card.tsx

@@ -31,7 +31,7 @@ const CardBody = ({
     large: 'text-[1.5rem]',
   };
   return (
-    <div className='group relative h-full w-full max-w-lg rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors delay-[150ms] ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
+    <div className='group relative h-full w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
       <div className='flex justify-center '>
         {image && <img src={image} className='h-32 p-2' />}
       </div>

components/Faq.tsx

@@ -7,7 +7,7 @@ export default function Faq({ category }: { category: string }) {
 
   return (
     <section>
-      <div className='max-w-screen-md mx-auto p-8 pl-0 ml-0'>
+      <div className='max-w-screen-md mx-auto p-8 px-0 ml-0'>
         <h2 className='text-2xl font-bold text-[24px] mb-4'>
           {category.toUpperCase()}
         </h2>

data/community.json

@@ -56,7 +56,7 @@
   },
   {
     "id": "item-2",
-    "img": "./img/contributers/dairya.jpeg",
+    "img": "./img/contributers/dhairya.jpeg",
     "alt": "dhairya"
   },
   {

pages/community/index.page.tsx

@@ -41,7 +41,6 @@ export const getStaticProps: GetStaticProps = async () => {
     })
     .slice(0, 5);
 
-  // Function to fetch the remote iCal file
   async function fetchRemoteICalFile(url: string) {
     try {
       const response = await axios.get(url, { method: 'no-cors' });
@@ -166,17 +165,17 @@ export default function communityPages(props: any) {
               data-testid='Header-hero-heading'
             >
               <div className='mt-8' data-testid='Header-heading-1'>
-                <h2 className='text-h3mobile md:text-h3 font-bold px-4 items-center text-center'>
+                <h2 className='text-[2.5rem] max-sm:text-[2rem] font-bold px-4 items-center text-center'>
                   Welcome to the
                   <br />
                   JSON Schema Community
                 </h2>
               </div>
               <div className='mt-5 w-5/6' data-testid='Header-heading-2'>
-                <h2 className='text-gray-700 text-sm font-heading dark:text-slate-100 text-body-md tracking-body font-regular '>
+                <h2 className='text-gray-700 text-xl max-sm:text-[15px] font-heading dark:text-slate-100 text-body-md tracking-body font-regular '>
                   Join the Community to learn, share ideas, ask questions, build
                   JSON Schema tooling, and get involved in the future of the
-                  Spec.
+                  specifications.
                 </h2>
               </div>
               <div className='mt-8'>
@@ -210,23 +209,23 @@ export default function communityPages(props: any) {
           </div>
         </div>
         <section className='mt-10'>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12 m-auto'>
+          <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12 m-auto'>
             <Card
               key='roadmap'
               icon='/icons/roadmap.svg'
               title='Roadmap'
               body='Explore our exciting plans and upcoming milestones. 🚀'
               headerSize='large'
-              bodyTextSize='small'
+              bodyTextSize='medium'
               link='https://github.com/orgs/json-schema-org/discussions/427'
             />
             <Card
-              key='contributing'
+              key='contribute'
               icon='/icons/contribute.svg'
-              title='Contributing'
+              title='Contribute'
               body='We are looking forward to working with you. Welcome aboard!'
               headerSize='large'
-              bodyTextSize='small'
+              bodyTextSize='medium'
               link='https://github.com/json-schema-org/.github/blob/main/CONTRIBUTING.md'
             />
           </div>

pages/overview/case-studies/index.page.tsx

@@ -17,7 +17,7 @@ export default function ContentExample() {
       <p className='text-[18px]'>
         Learn how organizations are adopting and benefiting from JSON Schema.
       </p>
-      <div className='w-full lg:w-full grid grid-cols-1 md:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
+      <div className='w-full lg:w-full grid grid-cols-1 sm:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
         {data.map((element, index) => (
           <Card
             key={index}

pages/overview/use-cases/index.page.tsx

@@ -20,7 +20,7 @@ export default function Content() {
         the most common use cases for JSON Schema, but the possibilities are
         endless.
       </p>
-      <div className='w-full lg:w-full grid grid-cols-1 md:grid-cols-3 gap-6 my-[10px] mx-auto mt-8'>
+      <div className='w-full lg:w-full grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-6 my-[10px] mx-auto mt-8'>
         {data.map((element, index) => (
           <Card
             key={index}

pages/overview/welcome/index.page.tsx

@@ -20,7 +20,7 @@ export default function Welcome() {
         occaecat fugiat sunt exercitation adipisicing culpa reprehenderit
         consectetur amet in. Qui fugiat amet do eu.
       </p>
-      <div className='w-full lg:w-full grid grid-cols-1 md:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
+      <div className='w-full lg:w-full grid grid-cols-1 sm:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
         {data.map((element: any, index: any) => (
           <Card
             key={index}

public/img/contributers/dairya.jpeg renamed to public/img/contributers/dhairya.jpeg

@@ -63,30 +63,25 @@ border-radius: 4px; */
   border: none;
 }
 
-
-  .DocSearch-Button {
-    margin: 0;
-    width: 39px;
-  }
-
+.DocSearch-Button {
+  margin: 0;
+  width: 39px;
+}
 
 .DocSearch-Button-Placeholder {
   display: none;
 }
 
+.DocSearch-Search-Icon {
+  width: 20px;
+  height: 20px;
+}
 
-  .DocSearch-Search-Icon {
-    width: 20px;
-    height: 20px;
-  }
-  
-
-  /* .herobtn .DocSearch-Button-Container {
+/* .herobtn .DocSearch-Button-Container {
     margin-right: 4px;
     margin-left: 4px;
   } */
 
-
 @media (max-width: 450px) {
   .DocSearch-Button {
     margin: 0;
@@ -104,14 +99,20 @@ border-radius: 4px; */
 
 /** Style Algolia */
 
-.keygrad{
-  --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8) !important;
+.keygrad {
+  --docsearch-key-gradient: linear-gradient(
+    -225deg,
+    #d5dbe4,
+    #f8f8f8
+  ) !important;
 }
-.keyshadow{
-  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4) !important;
+.keyshadow {
+  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
+    0 1px 2px 1px rgba(30, 35, 90, 0.4) !important;
 }
-.keyshadow[data-theme=dark]{
-  --docsearch-key-shadow: inset 0 -2px 0 0 #ffffff, inset 0 0 1px 1px #ffffff, 0 2px 2px 0 rgba(3, 4, 9, 0.3) !important;
+.keyshadow[data-theme='dark'] {
+  --docsearch-key-shadow: inset 0 -2px 0 0 #ffffff, inset 0 0 1px 1px #ffffff,
+    0 2px 2px 0 rgba(3, 4, 9, 0.3) !important;
 }
 
 .search-input {
@@ -264,9 +265,8 @@ border-radius: 4px; */
   background-color: #fddf4784;
 }
 
-@layer base{
+@layer base {
   body {
-      @apply dark:bg-slate-800 bg-white;
+    @apply dark:bg-slate-800 bg-white;
   }
 }
-