Built out tile component and prepared temporary site before preview r…

…elease
CodeEditApp · Oct 1, 2022 · a5b6fa1 · a5b6fa1
1 parent 0d7fbbf
commit a5b6fa1
Show file tree

Hide file tree

Showing 28 changed files with 2,058 additions and 157 deletions.
diff --git a/assets/discord-icon.svg b/assets/discord-icon.svg
diff --git a/assets/github-icon.svg b/assets/github-icon.svg
diff --git a/assets/twitter-icon.svg b/assets/twitter-icon.svg
diff --git a/components/common/Button.jsx b/components/common/Button.jsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 const Button = styled.button`
-  cursor: pointer;
+  cursor: ${({ disabled }) => disabled ? `default` : `pointer`};
   display: inline-block;
   text-align: center;
   white-space: nowrap;
@@ -16,7 +16,7 @@ const Button = styled.button`
   padding-top: 8px;
   padding-bottom: 8px;
   border-radius: 18px;
-  background: #0071e3;
+  background: var(${({ disabled }) => disabled ? `--glyph-gray-tertiary` : `--fill-blue`});
   color: #fff;
   border: 0;
   outline: 0;

diff --git a/components/common/Footer.jsx b/components/common/Footer.jsx
@@ -3,6 +3,8 @@ import React from 'react';
 import styled from 'styled-components'
 import ColorSchemeToggle from './ColorSchemeToggle';
 import { mediaQueries } from '@/styles/breakpoints';
+import SocialSection from './SocialSection';
+import links from '@/data/links';
 
 const FooterWrap = styled.footer`
   font-size: 12px;
@@ -16,6 +18,12 @@ const FooterWrap = styled.footer`
   background-color: var(--background-tertiary-color);
   color: var(--label-tertiary-color);
   box-sizing: content-box;
+  a {
+    color: var(--glyph-blue);
+    :hover {
+      text-decoration: underline;
+    }
+  }
 `
 
 const FooterContent = styled.div`
@@ -40,12 +48,6 @@ const MiniFooterTop = styled.div`
   align-items: flex-end;
   justify-content: space-between;
   border-color: var(--separator-color);
-  a {
-    color: var(--glyph-blue);
-    :hover {
-      text-decoration: underline;
-    }
-  }
   @media ${mediaQueries.sm} {
     align-items: flex-start;
     flex-direction: column;
@@ -101,9 +103,10 @@ function Footer() {
       aria-labelledby="footer-label"
     >
       <FooterContent>
+        <SocialSection />
         <FooterMini>
           <MiniFooterTop>
-            <div>To view the latest CodeEdit developments, visit <a href="https://github.com/CodeEditApp/CodeEdit">our GitHub repo</a>.</div>
+            <div>To view the latest CodeEdit developments, visit <a href={links.githubProject}>our roadmap</a>.</div>
             <ColorSchemeToggle />
           </MiniFooterTop>
           <MiniFooterBottom>
@@ -112,14 +115,14 @@ function Footer() {
               <a href="https://codeedit.app">CodeEdit.</a> All rights reserved.
             </LegalCopyright>
             <LegalLinks>
-              <LegalLink href="/legal/tos">
+              {/* <LegalLink href="/legal/tos">
                 Terms of Use
               </LegalLink>
               <LegalLink href="/legal/privacy">
                 Privacy Policy
-              </LegalLink>
-              <LegalLink href="/legal/terms">
-                Agreements and Open Source Licenses
+              </LegalLink> */}
+              <LegalLink href={links.license}>
+                Lincense
               </LegalLink>
             </LegalLinks>
           </MiniFooterBottom>

diff --git a/components/common/Header.jsx b/components/common/Header.jsx
@@ -162,8 +162,8 @@ function Header() {
                 </label>
               </Action>
               <Action>
-                <a href="https://nightly.link/CodeEditApp/CodeEdit/workflows/nightly/main/CodeEdit_Nightly.dmg">
-                  <Button compact>Download Preview</Button>
+                <a>
+                  <Button disabled compact>Download Coming Soon</Button>
                 </a>
               </Action>
             </Actions>

diff --git a/components/common/Ribbon.jsx b/components/common/Ribbon.jsx
@@ -15,6 +15,7 @@ const RibbonWrap = styled.div`
   --ribbon-link-color: #fff;
   --ribbon-focus-color: rgba(255,255,255,0.6);
   overflow: hidden;
+  ${({ onClick }) => onClick ? `cursor: pointer;` : ``}
 `;
 const RibbonDrop = styled.div`
   animation: ${ribbonDrop} 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
@@ -34,20 +35,18 @@ const RibbonContent = styled.div`
   font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
 `;
 
-function Ribbon({ children }) {
-    return (
-        <RibbonWrap>
-          <RibbonDrop>
-            <RibbonContentWrapper>
-                <RibbonContent>
-                    <div className="column large-12 large-centered">
-                        {children}
-                    </div>
-                </RibbonContent>
-            </RibbonContentWrapper>
-          </RibbonDrop>
-        </RibbonWrap>
-    )
+function Ribbon({ children, onClick, ...props }) {
+  return (
+    <RibbonWrap onClick={onClick} {...props}>
+      <RibbonDrop>
+        <RibbonContentWrapper>
+          <RibbonContent>
+            {children}
+          </RibbonContent>
+        </RibbonContentWrapper>
+      </RibbonDrop>
+    </RibbonWrap>
+  )
 }
 
 export default Ribbon;
diff --git a/components/common/SocialSection.jsx b/components/common/SocialSection.jsx
@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import { Heart } from 'react-feather';
+import Typography from '@/components/common/Typography';
+import { Grid, GridItem, Section, Stack } from '@/components/common/layout';
+import TwitterSvg from '@/assets/twitter-icon.svg'
+import DiscordSvg from '@/assets/discord-icon.svg'
+import GitHubSvg from '@/assets/github-icon.svg'
+import links from '@/data/links';
+
+const TwitterIcon = styled(TwitterSvg)`
+  width: 48px;
+  height: 48px;
+`
+const DiscordIcon = styled(DiscordSvg)`
+  width: 48px;
+  height: 48px;
+`
+const GitHubIcon = styled(GitHubSvg)`
+  width: 48px;
+  height: 48px;
+`
+
+const SocialSection = () => {
+  return (
+    <Section contained gutterY>
+      <Grid columns={{ xs: 1, md: 2, lg: 4}} gap>
+        <GridItem>
+          <Stack gap={1} align="center" style={{ textAlign: 'center' }}>
+            <TwitterIcon />
+            <Typography variant="headline-body">Keep up to date</Typography>
+            <Typography variant="body-reduced">
+              Stay in the know! Follow us @CodeEditApp on Twitter to get the
+              latest updates.
+            </Typography>
+            <Typography variant="body-reduced"><a href={links.twitter}>Follow Us</a></Typography>
+          </Stack>
+        </GridItem>
+        <GridItem>
+          <Stack gap={1} align="center" style={{ textAlign: 'center' }}>
+            <DiscordIcon />
+            <Typography variant="headline-body">Join the conversation</Typography>
+            <Typography variant="body-reduced">
+              Some of the best ideas come from our community. Join us to influence CodeEdit.
+            </Typography>
+            <Typography variant="body-reduced"><a href={links.discord}>Start a conversation</a></Typography>
+          </Stack>
+        </GridItem>
+        <GridItem>
+          <Stack gap={1} align="center" style={{ textAlign: 'center' }}>
+            <GitHubIcon />
+            <Typography variant="headline-body">Start Contributing</Typography>
+            <Typography variant="body-reduced">
+              Help shape the future of CodeEdit. Submit an issue or become a contributor today.
+            </Typography>
+            <Typography variant="body-reduced"><a href={links.githubRepo}>Check it out</a></Typography>
+          </Stack>
+        </GridItem>
+        <GridItem>
+          <Stack gap={1} align="center" style={{ textAlign: 'center' }}>
+            <Heart size={48} />
+            <Typography variant="headline-body">Become a Sponsor</Typography>
+            <Typography variant="body-reduced">
+              Don&apos;t have time to contribute? You can show your support by becaoming a sponsor.
+            </Typography>
+            <Typography variant="body-reduced"><a href={links.githubSponsor}>Sponsor the Project</a></Typography>
+          </Stack>
+        </GridItem>
+      </Grid>
+    </Section>
+  );
+}
+
+export default SocialSection;