Merge branch 'web-release-3' into web-r-3-rem

Author: benjagm

.github/workflows/greet_on_first_merge.yml

@@ -0,0 +1,38 @@
+name: Greet on User First PR Merge
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  greet:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const prNumber = context.payload.pull_request.number;
+            const authorLogin = context.payload.pull_request.user.login;
+
+            const firstPR = await github.issues.listForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_requests: {
+                state: 'closed',
+                author: authorLogin,
+              },
+            });
+            
+            console.log(firstPR.data.length); 
+
+            if (firstPR.data.length === 1) {
+              const greetingMessage = ` Congratulations, @${authorLogin} for your first pull request merge in this repository! 🎉🎉. Thanks for your contribution to JSON Schema! `;
+
+              await github.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                body: greetingMessage
+              });
+            }

CODEOWNERS

@@ -0,0 +1,16 @@
+##############################################################
+#
+# List of approvers/reviewers for JSON Schema website
+#
+##############################################################
+#
+# Get in touch with us via the JSON Schema Community
+#  https://json-schema.org/#community
+# 
+#
+# Learn about CODEOWNERS file format: 
+#  https://help.github.com/en/articles/about-code-owners
+#
+
+# This group will be the default group approving/reviewing PRs
+* @json-schema-org/web-team

components/Accordion.tsx

@@ -56,7 +56,7 @@ const Accordion: React.FC<AccordionProps> = ({ items }) => {
             activeIndex === index ? 'max-h-96' : 'max-h-20'
           } ${index === items.length - 1 ? 'border-b-2' : ''}`}
         >
-          <div className='flex justify-between items-center p-4 cursor-pointer'>
+          <div className='flex justify-between p-4 pl-2 cursor-pointer'>
             <div className='text-[20px]'>
               <a
                 href={`#${item.id}`}
@@ -69,7 +69,7 @@ const Accordion: React.FC<AccordionProps> = ({ items }) => {
               </a>
             </div>
             <div
-              className={`transform transition-transform text-[20px] ${
+              className={`transform transition-transform duration-200 max-h-7 text-[20px] ${
                 activeIndex === index ? 'rotate-45' : ''
               }`}
               onClick={() => handleToggle(index)}
@@ -80,7 +80,7 @@ const Accordion: React.FC<AccordionProps> = ({ items }) => {
           {activeIndex === index && (
             <div
               id={`${item.id}`}
-              className='p-2 text-gray-500 dark:text-slate-200'
+              className='p-2 text-gray-500 dark:text-slate-200 pb-4'
             >
               {item.answer}
             </div>

components/Card.tsx

@@ -31,30 +31,30 @@ 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 transition-colors delay-[150ms] ease-in-out hover:bg-slate-100'>
+    <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>
       <div className='flex flex-row items-start mb-6'>
         {icon && (
-          <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900'>
+          <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
             <img src={icon} alt={title} className='h-full w-full' />
           </span>
         )}
         <p
-          className={`mb-1 mt-1 items-center font-bold text-gray-900 ${headerSizeClasses[headerSize || 'medium']}`}
+          className={`mb-1 mt-1 items-center font-bold text-gray-900 dark:text-white ${headerSizeClasses[headerSize || 'medium']}`}
         >
           {title}
         </p>
       </div>
       <hr className='mb-4 mt-3.5 h-px border-0 bg-gray-400' />
       <p
-        className={`mb-8 dark:text-black mt-5 ${bodyTextSizeClasses[bodyTextSize || 'medium']} `}
+        className={`mb-8 text-black mt-5 dark:text-white  ${bodyTextSizeClasses[bodyTextSize || 'medium']} `}
       >
         <TextTruncate element='span' line={3} text={body} />
       </p>
       {link && (
-        <p className='absolute bottom-3 right-5 font-medium opacity-0 transition-opacity delay-150 ease-in-out group-hover:opacity-100 dark:text-black'>
+        <p className='absolute bottom-3 right-5 font-medium opacity-0 transition-opacity delay-150 ease-in-out group-hover:opacity-100 text-black dark:text-white '>
           Read More
         </p>
       )}

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'>
+      <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>

components/Layout.tsx

@@ -312,7 +312,7 @@ export const SegmentHeadline = ({ label }: { label: string }) => {
 const Footer = () => (
   <footer
     className={classnames(
-      'z-10 h-[350px] md:h-[300px] bg-gradient-to-r from-startBlue from-1.95% to-endBlue dark:from-[#002C34] dark:to-[#023e8a] clip-top grid items-center',
+      'z-10 h-[350px] md:h-[300px] bg-gradient-to-r from-startBlue from-1.95% to-endBlue dark:from-[#002C34] dark:to-[#023e8a] clip-top grid items-center mt-16',
     )}
   >
     <div className='max-w-[1400px] mx-auto mt-8 md:mt-4 grid grid-cols-1 md:grid-cols-2 md:w-1/2 lg:w-1/3 justify-center '>

components/Sidebar.tsx

@@ -96,7 +96,7 @@ const getDocsPath = [
   '/overview/similar-technologies',
   '/overview/use-cases',
   '/overview/code-of-conduct',
-  '/overview/FAQ',
+  '/overview/faq',
 ];
 const getStartedPath = [
   '/learn/json-schema-examples',