[Feat]: Add Community Page

components/Layout.tsx

@@ -158,7 +158,7 @@ const MainNavigation = () => {
       />
       <MainNavLink
         className='hidden lg:block hover:underline'
-        uri='/#community'
+        uri='/community'
         label='Community'
         isActive={section === 'community'}
       />
@@ -233,7 +233,7 @@ const MobileNav = () => {
       />
       <MainNavLink uri='/blog' label='Blog' isActive={section === 'blog'} />
       <MainNavLink
-        uri='/#community'
+        uri='/community'
         label='Community'
         isActive={section === 'community'}
       />

package.json

@@ -41,6 +41,7 @@
     "slate": "^0.100.0",
     "slate-react": "^0.100.1",
     "slugify": "^1.6.5",
+    "tailwind-merge": "^2.2.1",
     "yarn": "1.22.19",
     "zero-fill": "^2.2.4",
     "zustand": "^4.0.0-rc.1"

pages/community/Header.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+// import IconRocket from './icons/Rocket';
+import Heading from './typography/Heading';
+// import Button from './buttons/Button';
+
+export default function Header() {
+  return (
+    <div
+      className='text-center flex justify-center flex-col items-center mt-10 md:mt-0'
+      data-testid='Header-hero-heading'
+    >
+      <Heading
+        className='bg-gradient-to-r from-startBlue from-1.95% to-endBlue bg-gradient-to-r from-startBlue to-endBlue text-transparent bg-clip-text font-bold'
+        level='h6'
+        typeStyle='heading-xs'
+      >
+        JSON Schema Community
+      </Heading>
+      <div className='mt-8' data-testid='Header-heading-1'>
+        <Heading level='h1' typeStyle='heading-xl' className=''>
+          <span className='title block md:-mt-1 leading-[3rem] md:leading-[3.5rem]'>
+            Welcome to the
+            <br /> JSON Schema Community
+          </span>
+        </Heading>
+      </div>
+      <div className='mt-5 w-5/6' data-testid='Header-heading-2'>
+        <Heading
+          level='h2'
+          typeStyle='body-md'
+          textColor='text-gray-700'
+          className='text-slate-500 text-sm'
+        >
+          With over 60 million weekly downloads, JSON Schema has a large and
+          active developer community across the world. Join the Community to
+          learn, share ideas, ask questions, develop JSON Schema tooling and
+          build new connections. sharing ideas, and building connections.
+        </Heading>
+      </div>
+      <div className='mt-8'>
+        <button
+          className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
+          onClick={() =>
+            window.open(
+              'https://github.com/orgs/json-schema-org/discussions',
+              '_blank',
+            )
+          }
+        >
+          Join Discussions
+        </button>
+      </div>
+    </div>
+  );
+}

pages/community/card/BlogCard.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import Link from 'next/link';
+import TextTruncate from 'react-text-truncate';
+import PropTypes from 'prop-types';
+function BlogCard(props) {
+  return (
+    <div className='w-full mb-6'>
+      <Link href={props.href}>
+        <h3 className='mb-5 font-semibold pt-1'>The JSON Schema Blog</h3>
+        <img src={props.src} className='w-full h-[232px]  mb-4' />
+        <h3 className='mb-4 font-semibold'> {props.h3_1}</h3>
+        <div className='mb-4'>
+          <TextTruncate element='span' line={4} text={props.text} />
+        </div>
+        <div className='flex ml-2 mb-2 '>
+          <div
+            className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
+            style={{
+              backgroundImage: `url(${props.url})`,
+            }}
+          />
+          <div className='flex flex-col ml-2'>
+            <p className='text-sm font-semibold'>{props.author}</p>
+            <div className='text-slate-500 text-sm'>
+              <span>
+                {props.spanPart1} &middot; {props.spanPart2} min read
+              </span>
+            </div>
+          </div>
+        </div>
+      </Link>
+      <div>
+        <Link
+          href={props.href}
+          className='w-full lg:w-1/2 rounded border-2 bg-primary text-white  h-[40px] text-center semi-bold flex items-center justify-center'
+        >
+          Read more{' '}
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+BlogCard.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  h3_1: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  author: PropTypes.string.isRequired,
+  spanPart1: PropTypes.string.isRequired,
+  spanPart2: PropTypes.number.isRequired,
+};
+
+export default BlogCard;

pages/community/card/Button.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button(props) {
+  return (
+    <a
+      href={props.href}
+      target='_blank'
+      rel='noopener noreferrer'
+      className={`bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none ${props.class}`}
+    >
+      {props.btnText}
+    </a>
+  );
+}
+
+// Add prop type validation
+Button.propTypes = {
+  href: PropTypes.string.isRequired, // href prop should be a string and is required
+  class: PropTypes.string, // class prop should be a string (optional)
+  btnText: PropTypes.string.isRequired, // btnText prop should be a string and is required
+};
+
+export default Button;

pages/community/card/Card.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Heading from '../typography/Heading';
+import Button from './Button';
+import PropTypes from 'prop-types';
+
+export default function Card(props) {
+  return (
+    <div className='z-40 mt-20 bg-white w-full md:h-[520px] rounded-lg shadow-xl md:flex grid grid-cols-2 md:justify-between'>
+      <div className='p-10 flex justify-between w-full md:w-2/5 h-auto flex-col text-center md:text-left'>
+        <div data-testid='HomeCard-main'>
+          <Heading
+            level='h2'
+            typeStyle='heading-md'
+            textColor='text-purple-300'
+          >
+            {props.headline}
+          </Heading>
+        </div>
+        <div data-testid='HomeCard-title'>
+          <Heading level='h2' typeStyle='heading-lg' className='mt-10'>
+            {props.title}
+          </Heading>
+          <Heading
+            level='h2'
+            typeStyle='body-lg'
+            textColor='text-gray-700'
+            className='text-slate-500 text-sm mt-10'
+          >
+            {props.description}
+          </Heading>
+          <div className='mt-10' data-testid='HomeCard-button'>
+            <Button href={props.href} btnText={props.btnText} />
+          </div>
+        </div>
+      </div>
+      <div
+        className={`w-full h-fit-content md:w-3/5  flex rounded-r-lg justify-end bg-cover bg-center ${props.className}`}
+      />
+    </div>
+  );
+}
+
+Card.propTypes = {
+  headline: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired,
+  btnText: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};

pages/community/column/Coloumn.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Coloumn(props) {
+  return (
+    <div data-test-id={props.testId}>
+      <a href={props.href}>
+        <div
+          className={`p-3 cursor-pointer border w-full  shadow-3xl rounded-[5px] p-[20px] ${props.className}`}
+        >
+          <div className='p-2 rounded-xl bg-transparent text-center w-min text-xs flex justify-between'>
+            <span>{props.emoji}</span>
+          </div>
+          <div>
+            <h1 className='text-primary-800 font-heading text-heading-md font-bold tracking-heading '>
+              {props.h1}
+            </h1>
+          </div>
+          <div>
+            <p>{props.p}</p>
+          </div>
+          <div className='text-right w-full flex justify-end'>
+            <svg className='w-[20px]' viewBox='0 0 32 32'>
+              <path d='M25,0H7A7,7,0,0,0,0,7V25a7,7,0,0,0,7,7H25a7,7,0,0,0,7-7V7A7,7,0,0,0,25,0Zm5,25a5,5,0,0,1-5,5H7a5,5,0,0,1-5-5V7A5,5,0,0,1,7,2H25a5,5,0,0,1,5,5Z'></path>
+              <path d='M24,7H14V9h7.59L7.29,23.29l1.41,1.41L23,10.41V18h2V8A1,1,0,0,0,24,7Z'></path>
+            </svg>
+          </div>
+        </div>
+      </a>
+    </div>
+  );
+}
+
+Coloumn.propTypes = {
+  testId: PropTypes.string,
+  href: PropTypes.string,
+  className: PropTypes.string,
+  emoji: PropTypes.string,
+  h1: PropTypes.string,
+  p: PropTypes.string,
+};
+
+export default Coloumn;

pages/community/config/orbitData.json

@@ -0,0 +1,108 @@
+[
+  [
+    {
+      "id": "item",
+      "img": "./img/avatars/benhutton.webp",
+      "alt": "benhutton"
+    },
+    {
+      "id": "item",
+      "img": "./img/avatars/benjagm.webp",
+      "alt": "benjagm"
+    },
+    {
+      "id": "item",
+      "img": "./img/avatars/gregsdennis.webp",
+      "alt": "gregs"
+    },
+    {
+      "id": "item",
+      "img": "./img/avatars/jasondesrosiers.jpeg",
+      "alt": "jason"
+    },
+    {
+      "id": "item",
+      "img": "./img/avatars/julian.webp",
+      "alt": "julian"
+    },
+    {
+      "id": "item",
+      "img": "./img/avatars/jviotti.webp",
+      "alt": "jviotti"
+    }
+  ],
+  [
+    {
+      "id": "item-2",
+      "img": "./img/avatars/melinda.webp",
+      "alt": "melinda"
+    },
+    {
+      "id": "item-2",
+      "img": "./img/avatars/mikeralphson.webp",
+      "alt": "mikeralphson"
+    },
+    {
+      "id": "item-2",
+      "img": "./img/avatars/simonplenderleith.webp",
+      "alt": "simon"
+    },
+    {
+      "id": "item-2",
+      "img": "./img/avatars/yanick.jpg",
+      "alt": "yanick"
+    },
+    {
+      "id": "item-2",
+      "img": "./img/avatars/yeray.webp",
+      "alt": "yeray"
+    },
+    {
+      "id": "item-2",
+      "img": "./img/contributer_gsoc_2024/akanksha_kushwaha.jpeg",
+      "alt": "maciej"
+    },
+    {
+      "id": "item-2",
+      "img": "./img/contributer_gsoc_2024/alok_gupta.jpeg",
+      "alt": "git"
+    }
+  ],
+  [
+    {
+      "id": "item-3",
+      "img": "./img/contributer_gsoc_2024/dairya.jpeg",
+      "alt": "ace"
+    },
+    {
+      "id": "item-3",
+      "img": "./img/contributer_gsoc_2024/jeel_rajodiya.jpeg",
+      "alt": "star"
+    },
+    {
+      "id": "item-3",
+      "img": "./img/contributer_gsoc_2024/neeraj_saini.jpeg",
+      "alt": "barbano"
+    },
+    {
+      "id": "item-3",
+      "img": "./img/contributer_gsoc_2024/michael_sharber.jpeg",
+      "alt": "dale"
+    },
+    {
+      "id": "item-3",
+      "img": "./img/contributer_gsoc_2024/mintu_gogoi.jpeg",
+      "alt": "kuda"
+    },
+    {
+      "id": "item-3",
+      "img": "./img/contributer_gsoc_2024/paul_waller.jpeg",
+      "alt": "yash"
+    },
+    {
+      "id": "item-3",
+      "img": "./img/contributer_gsoc_2024/roni.jpeg",
+      "alt": "sergio"
+    }
+  ]
+]