thiagorossener commented on code in PR #24393:
URL: https://github.com/apache/superset/pull/24393#discussion_r1231007373


##########
docs/src/pages/community.tsx:
##########
@@ -20,103 +20,193 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { List } from 'antd';
 import Layout from '@theme/Layout';
+import { mq } from '../utils';
+import SectionHeader from '../components/SectionHeader';
+import BlurredSection from '../components/BlurredSection';
 
-const links = [
-  [
-    'http://bit.ly/join-superset-slack',
-    'Slack',
-    'interact with other Superset users and community members',
-  ],
-  [
-    'https://github.com/apache/superset',
-    'GitHub',
-    'create tickets to report issues, report bugs, and suggest new features',
-  ],
-  [
-    'https://lists.apache.org/list.html?d...@superset.apache.org',
-    'dev@ Mailing List',
-    'participate in conversations with committers and contributors',
-  ],
-  [
-    
'https://calendar.google.com/calendar/u/2?cid=c3VwZXJzZXQuY29tbWl0dGVyc0BnbWFpbC5jb20',
-    'Superset Community Calendar',
-    'join us for working group sessions and other community gatherings',
-  ],
-  [
-    'https://stackoverflow.com/questions/tagged/superset+apache-superset',
-    'Stack Overflow',
-    'our growing knowledge base',
-  ],
-  [
-    'https://www.meetup.com/Global-Apache-Superset-Community-Meetup/',
-    'Superset Meetup Group',
-    'join our monthly virtual meetups and register for any upcoming events',
-  ],
-  [
-    'https://github.com/apache/superset/blob/master/RESOURCES/INTHEWILD.md',
-    'Organizations',
-    'a list of some of the organizations using Superset in production',
-  ],
-  [
-    'https://github.com/apache-superset/awesome-apache-superset',
-    'Contributors Guide',
-    'Interested in contributing? Learn how to contribute and best practices',
-  ],
+const communityLinks = [
+  {
+    url: 'http://bit.ly/join-superset-slack',
+    title: 'Slack',
+    description: 'Interact with other Superset users and community members.',
+    image: 'slack-symbol.jpg',
+  },
+  {
+    url: 'https://github.com/apache/superset',
+    title: 'GitHub',
+    description:
+      'Create tickets to report issues, report bugs, and suggest new 
features.',
+    image: 'github-symbol.jpg',
+  },
+  {
+    url: 'https://lists.apache.org/list.html?d...@superset.apache.org',
+    title: 'dev@ Mailing List',
+    description:
+      'Participate in conversations with committers and contributors.',
+    image: 'email-symbol.png',
+  },
+  {
+    url: 'https://stackoverflow.com/questions/tagged/superset+apache-superset',
+    title: 'Stack Overflow',
+    description: 'Our growing knowledge base.',
+    image: 'stackoverflow-symbol.jpg',
+  },
+  {
+    url: 'https://www.meetup.com/Global-Apache-Superset-Community-Meetup/',
+    title: 'Superset Meetup Group',
+    description:
+      'Join our monthly virtual meetups and register for any upcoming events.',
+    image: 'coffee-symbol.png',
+  },
+  {
+    url: 
'https://github.com/apache/superset/blob/master/RESOURCES/INTHEWILD.md',
+    title: 'Organizations',
+    description:
+      'A list of some of the organizations using Superset in production.',
+    image: 'note-symbol.png',
+  },
+  {
+    url: 'https://github.com/apache-superset/awesome-apache-superset',
+    title: 'Contributors Guide',
+    description:
+      'Interested in contributing? Learn how to contribute and best 
practices.',
+    image: 'writing-symbol.png',
+  },
 ];
 
-const StyledMain = styled('main')`
-  padding-bottom: 60px;
-  padding-left: 16px;
-  padding-right: 16px;
-  section {
-    width: 100%;
-    max-width: 800px;
+const StyledJoinCommunity = styled('section')`
+  background-color: #fbfbfb;
+  border-bottom: 1px solid #ededed;
+  .list {
+    max-width: 540px;
     margin: 0 auto;
-    padding: 60px 0 0 0;
-    font-size: 17px;
-    &:first-of-type{
-      padding: 40px;
-      background-image: linear-gradient(120deg, #d6f2f8, #52c6e3);
-      border-radius: 0 0 10px;
+    padding: 40px 20px 20px 35px;
+  }
+  .item {
+    padding: 0;
+    border: 0;
+  }
+  .icon {
+    width: 40px;
+    margin-top: 5px;
+    ${mq[1]} {
+      width: 40px;
+      margin-top: 0;
+    }
+  }
+  .title {
+    font-size: 20px;
+    line-height: 36px;
+    font-weight: 700;
+    color: var(--ifm-font-base-color);
+    ${mq[1]} {
+      font-size: 23px;
+      line-height: 26px;
+    }
+  }
+  .description {
+    font-size: 14px;
+    line-height: 20px;
+    color: #5f5f5f;
+    margin-top: -8px;
+    margin-bottom: 23px;
+    ${mq[1]} {
+      font-size: 17px;
+      line-height: 22px;
+      color: #484848;
+      margin-bottom: 35px;
+      margin-top: 0;
     }
   }
 `;
 
-const StyledGetInvolved = styled('div')`
-  margin-bottom: 25px;
+const StyledCalendarIframe = styled('iframe')`
+  display: block;
+  margin: 20px auto 30px;
+  max-width: 800px;
+  width: 100%;
+  height: 600px;
+  border: 0;
+  ${mq[1]} {
+    width: calc(100% - 40px);
+  }
+`;
+
+const StyledNewsletterIframe = styled('iframe')`
+  display: block;
+  max-width: 1080px;
+  width: calc(100% - 40px);
+  height: 285px;
+  margin: 30px auto 20px;
+  border: 0;
+  @media (max-width: 1200px) {
+    height: 380px;
+  }
+  @media (max-width: 679px) {
+    height: 680px;
+    margin-top: 15px;
+  }
 `;
 
 const Community = () => {
   return (
     <Layout
       title="Community"
-      description="Community website for Apache Superset, a data visualization 
and data exploration platform"
+      description="Community website for Apache Supersetâ„¢, a data 
visualization and data exploration platform"
     >
-      <StyledMain>
-        <section>
-          <h1 className="title">Community</h1>
-          Get involved in our welcoming, fast growing community!
-        </section>
-        <section className="joinCommunity">
-          <StyledGetInvolved>
-            <h2>Get involved!</h2>
-            <List
-              size="small"
-              bordered
-              dataSource={links}
-              renderItem={([href, link, post]) => (
-                <List.Item>
-                  <a href={href}>{link}</a>
-                  {' '}
-                  -
-                  {' '}
-                  {post}
-                </List.Item>
-              )}
-            />
-          </StyledGetInvolved>
-        </section>
-      </StyledMain>
+      <main>
+        <BlurredSection>
+          <SectionHeader
+            level="h1"
+            title="Community"
+            subtitle="Get involved in our welcoming, fast growing community!"
+          />
+        </BlurredSection>
+        <StyledJoinCommunity>
+          <List
+            className="list"
+            itemLayout="horizontal"
+            dataSource={communityLinks}
+            renderItem={({ url, title, description, image }) => (
+              <List.Item className="item">
+                <List.Item.Meta
+                  avatar={
+                    <a className="title" href={url} target="_blank">

Review Comment:
   Yeah, I just added some aria labels where it made sense.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org

Reply via email to