[#773,website][xs]: add gallery and community sections to the landing page

site/components/Community.tsx

@@ -0,0 +1,67 @@
+import Container from './Container';
+import DiscordIcon from './icons/DiscordIcon';
+import EmailIcon from './icons/EmailIcon';
+import GitHubIcon from './icons/GitHubIcon';
+
+import { siteConfig } from '@/config/siteConfig';
+
+const Stat = ({ title, value, ...props }) => {
+  return (
+    <div {...props}>
+      <span className="text-6xl font-bold text-secondary">{value}</span>
+      <p className="text-lg font-medium">{title}</p>
+    </div>
+  );
+};
+
+const IconButton = ({ Icon, text, href, ...props }) => {
+  return (
+    <div {...props}>
+      <a
+        className="rounded border border-secondary px-5 py-3 text-primary dark:text-primary-dark flex items-center hover:bg-secondary hover:text-primary dark:hover:text-primary transition-all duration-200"
+        href={href}
+        target="_blank"
+      >
+        <Icon className="w-6 h-6 mr-2" />
+        {text}
+      </a>
+    </div>
+  );
+};
+
+export default function Community() {
+  return (
+    <Container>
+      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark ">
+        Community
+      </h2>
+      <p className="text-lg mt-8 ">
+        We are growing. Get in touch or become a contributor!
+      </p>
+      <div className="flex justify-center mt-12">
+        <Stat title="Stars on GitHub" value="+2k" className="mr-10" />
+        <Stat title="Contributors" value="+70" />
+      </div>
+      <div className="flex flex-wrap justify-center mt-12">
+        <IconButton
+          Icon={GitHubIcon}
+          text="Star Portal.JS on GitHub"
+          className="sm:mr-4 mb-4 w-full sm:w-auto"
+          href={siteConfig.github}
+        />
+        <IconButton
+          Icon={DiscordIcon}
+          text="Join the Discord server"
+          className="sm:mr-4 mb-4 w-full sm:w-auto"
+          href={siteConfig.discord}
+        />
+        <IconButton
+          Icon={EmailIcon}
+          text="Subscribe to the Portal.JS newsletter"
+          className="w-full sm:w-auto"
+          href="#hero"
+        />
+      </div>
+    </Container>
+  );
+}

site/components/Container.tsx

@@ -0,0 +1,7 @@
+export default function Container({ children }) {
+  return (
+    <div className="lg:max-w-8xl mx-auto px-4 lg:px-8 xl:px-12 mb-32">
+      {children}
+    </div>
+  );
+}

site/components/Features.tsx

@@ -1,3 +1,5 @@
+import Container from './Container';
+
 const features: { title: string; description: string; icon: string }[] = [
   {
     title: 'Unified sites',
@@ -37,8 +39,10 @@ const features: { title: string; description: string; icon: string }[] = [
 
 export default function Features() {
   return (
-    <div className="lg:max-w-8xl mx-auto px-4 lg:px-8 xl:px-12">
-      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark">How Portal.JS works?</h2>
+    <Container>
+      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark">
+        How Portal.JS works?
+      </h2>
       <p className="text-lg mt-8">
         Portal.JS is built in JavaScript and React on top of the popular Next.js
         framework, assuming a "decoupled" approach where the frontend is a
@@ -66,6 +70,6 @@ export default function Features() {
           </div>
         ))}
       </div>
-    </div>
+    </Container>
   );
 }

site/components/Gallery.tsx

@@ -0,0 +1,53 @@
+import Container from './Container';
+import GalleryItem from './GalleryItem';
+
+const items = [
+  {
+    title: 'Open Data Northern Ireland',
+    href: 'https://www.opendatani.gov.uk/',
+    image: '/images/showcases/odni.png',
+    description: 'Government Open Data Portal',
+  },
+  {
+    title: 'Birmingham City Observatory',
+    href: 'https://www.cityobservatory.birmingham.gov.uk/',
+    image: '/images/showcases/birmingham.png',
+    description: 'Government Open Data Portal',
+  },
+  {
+    title: 'UAE Open Data',
+    href: 'https://opendata.fcsc.gov.ae/',
+    image: '/images/showcases/uae.png',
+    description: 'Government Open Data Portal',
+  },
+  {
+    title: 'Brazil Open Data',
+    href: 'https://dados.gov.br/',
+    image: '/images/showcases/brazil.png',
+    description: 'Government Open Data Portal',
+  },
+  {
+    title: 'Datahub Open Data',
+    href: 'https://opendata.datahub.io/',
+    image: '/images/showcases/datahub.png',
+    description: 'Demo Data Portal by DataHub',
+  },
+];
+
+export default function Gallery() {
+  return (
+    <Container>
+      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark ">
+        Gallery
+      </h2>
+      <p className="text-lg mt-8 ">
+        Discover what's being powered by Portal.JS
+      </p>
+      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {items.map((item) => {
+          return <GalleryItem item={item} />;
+        })}
+      </div>
+    </Container>
+  );
+}

site/components/GalleryItem.tsx

@@ -0,0 +1,24 @@
+export default function GalleryItem({ item }) {
+  return (
+    <a
+      className="rounded overflow-hidden group relative border-1 shadow-lg"
+      target="_blank"
+      href={item.href}
+    >
+      <div
+        className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
+        style={{ backgroundImage: `url(${item.image})` }}
+      >
+        <div className="w-full h-full group-hover:backdrop-brightness-50 transition-all duration-200"></div>
+      </div>
+      <div>
+        <div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
+          <div className="text-center text-primary-dark">
+            <span className="text-xl font-semibold">{item.title}</span>
+            <p className="text-base font-medium">{item.description}</p>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+}

site/components/Hero.tsx

@@ -32,7 +32,7 @@ export function Hero() {
   const el = useRef(null);
 
   return (
-    <div className="overflow-hidden -mb-32 mt-[-4.5rem] pb-32 pt-[4.5rem] lg:mt-[-4.75rem] lg:pt-[4.75rem]">
+    <div className="overflow-hidden -mb-32 mt-[-4.5rem] pb-32 pt-[4.5rem] lg:mt-[-4.75rem] lg:pt-[4.75rem]" id="hero">
       <div className="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
         {/* Commented code on line 37, 39 and 113 will reenable the two columns hero */}
         {/* <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"> */}

site/components/icons/DiscordIcon.tsx

@@ -0,0 +1,14 @@
+export default function DiscordIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
+    </svg>
+  );
+}

site/components/icons/EmailIcon.tsx

@@ -0,0 +1,14 @@
+export default function EmailIcon(props) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 2150 2150"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1920 428.266v1189.54l-464.16-580.146-88.203 70.585 468.679 585.904H83.684l468.679-585.904-88.202-70.585L0 1617.805V428.265l959.944 832.441L1920 428.266ZM1919.932 226v52.627l-959.943 832.44L.045 278.628V226h1919.887Z"
+      />
+    </svg>
+  );
+}

site/components/icons/GitHubIcon.tsx

@@ -0,0 +1,7 @@
+export default function GitHubIcon(props) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
+    </svg>
+  );
+}

site/content/config.js

@@ -19,7 +19,7 @@ const config = {
     { name: "Docs", href: "/docs" },
     { name: "Components", href: "/docs/components" },
     { name: "Learn", href: "/learn" },
-    { name: "Gallery", href: "/gallery" },
+    // { name: "Gallery", href: "/gallery" },
     // { name: "Data Literate", href: "/data-literate" },
     // { name: "DL Demo", href: "/data-literate/demo" },
     // { name: "Excel Viewer", href: "/excel-viewer" },

site/pages/index.tsx

@@ -1,4 +1,6 @@
+import Community from '@/components/Community';
 import Features from '@/components/Features';
+import Gallery from '@/components/Gallery';
 import { Hero } from '@/components/Hero';
 import { UnstyledLayout } from '@flowershow/core';
 import Layout from '../components/Layout';
@@ -10,6 +12,8 @@ export default function Home() {
         <UnstyledLayout>
           <Hero />
           <Features />
+          <Gallery />
+          <Community />
         </UnstyledLayout>
       </Layout>
     </>