diff --git a/client/images/heart.svg b/client/images/heart.svg
new file mode 100644
index 0000000000..1dc62d2639
--- /dev/null
+++ b/client/images/heart.svg
@@ -0,0 +1,8 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11.0001 3.52023C10.6805 3.04625 10.239 2.49888 9.68051 2.00157C8.77907 1.19894 7.54072 0.5 6 0.5C2.95137 0.5 0.5 3.0274 0.5 6.12C0.499991 9.04007 2.65061 11.7635 4.91921 13.7649C6.0688 14.7791 7.28089 15.6365 8.33517 16.2736C9.37198 16.9001 10.2966 17.3381 10.8726 17.4835C10.9137 17.4944 10.9565 17.5001 11.0001 17.5001C11.0437 17.5001 11.0865 17.4944 11.1276 17.4835C11.7036 17.3381 12.6282 16.9001 13.6651 16.2736C14.7193 15.6365 15.9314 14.7791 17.081 13.7649C19.3496 11.7635 21.5002 9.04007 21.5002 6.12C21.5002 3.0274 19.0489 0.5 16.0002 0.5C14.4595 0.5 13.2212 1.19894 12.3197 2.00157C11.7612 2.49888 11.3197 3.04625 11.0001 3.52023ZM10.5528 4.72361C10.3254 4.26879 9.80165 3.44839 9.01552 2.74843C8.2323 2.05106 7.22066 1.5 6 1.5C3.52588 1.5 1.5 3.5572 1.5 6.12C1.49999 8.57993 3.34938 11.0465 5.58078 13.0151C6.68119 13.9859 7.8441 14.8085 8.85233 15.4177C9.7844 15.9809 10.5505 16.3412 11.0001 16.4807C11.4497 16.3412 12.2158 15.9809 13.1479 15.4177C14.1561 14.8085 15.319 13.9859 16.4195 13.0151C18.6508 11.0465 20.5002 8.57993 20.5002 6.12C20.5002 3.5572 18.4743 1.5 16.0002 1.5C14.7796 1.5 13.7679 2.05106 12.9847 2.74843C12.1986 3.44839 11.6749 4.26879 11.4474 4.72361C11.3843 4.84999 11.2748 4.93792 11.1498 4.97711C11.0501 5.00853 10.9458 5.00701 10.8504 4.97711C10.7255 4.93792 10.616 4.84999 10.5528 4.72361Z"
+ fill="currentColor"
+ />
+</svg>
\ No newline at end of file
diff --git a/client/modules/About/About.styles.js b/client/modules/About/About.styles.js
new file mode 100644
index 0000000000..59439addb4
--- /dev/null
+++ b/client/modules/About/About.styles.js
@@ -0,0 +1,227 @@
+import styled from 'styled-components';
+import { remSize, prop } from '../../theme';
+
+export const AboutPageContent = styled.div`
+ margin: ${remSize(42)} ${remSize(295)};
+
+ @media (max-width: 1279px) {
+ margin: ${remSize(20)};
+ width: 95%;
+ overflow: hidden auto;
+ flex-direction: column;
+ }
+`;
+
+export const Intro = styled.div`
+ & h1 {
+ font-size: ${remSize(32)};
+ font-weight: 700;
+ }
+
+ & a {
+ padding: ${remSize(12)};
+ border: ${remSize(1)} solid ${prop('primaryTextColor')};
+ border-radius: ${remSize(24)};
+ display: flex;
+ align-items: center;
+ width: ${remSize(110)};
+ justify-content: space-evenly;
+
+ &:hover {
+ color: ${prop('Button.primary.default.background')};
+ background-color: ${prop('Button.primary.hover.background')};
+ border-color: ${prop('Button.primary.hover.border')};
+ text-decoration: none;
+
+ & svg {
+ & path {
+ fill: ${prop('Button.primary.default.background')};
+ }
+ }
+ }
+ }
+`;
+
+export const IntroHeadline = styled.div`
+ display: flex;
+ align-items: center;
+
+ & div {
+ height: 100%;
+ align-items: center;
+ font-weight: 550;
+ font-size: ${remSize(24)};
+ margin: ${remSize(24)};
+ }
+
+ & svg {
+ & path {
+ fill: ${prop('logoColor')};
+ }
+ }
+
+ @media (max-width: 769px) {
+ flex-direction: column;
+ align-items: start;
+
+ & div {
+ margin: ${remSize(24)} 0;
+ }
+ }
+`;
+
+export const IntroDescription = styled.div`
+ line-height: ${remSize(27)};
+ font-size: ${remSize(16)};
+ margin: ${remSize(24)} 0;
+
+ p {
+ margin-bottom: ${remSize(24)};
+ }
+`;
+
+export const Section = styled.div`
+ margin: ${remSize(50)} 0;
+
+ & h2 {
+ font-size: ${remSize(24)};
+ padding-bottom: ${remSize(30)};
+ font-weight: 600;
+ }
+
+ @media (max-width: 769px) {
+ display: grid;
+ }
+`;
+
+export const SectionContainer = styled.div`
+ display: flex;
+ justify-content: row;
+ padding-top: 0;
+ font-size: ${remSize(16)};
+ width: 100%;
+ flex-wrap: wrap;
+
+ @media (max-width: 769px) {
+ display: grid;
+ }
+`;
+
+export const SectionItem = styled.div`
+ width: 33%;
+ display: flex;
+ line-height: ${remSize(19.5)};
+ font-size: ${remSize(14)};
+ padding: 0 ${remSize(30)} ${remSize(30)} 0;
+
+ & p {
+ margin-top: ${remSize(7)};
+ }
+
+ & a {
+ font-weight: 700;
+ font-size: ${remSize(16)};
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ & svg {
+ padding-right: ${remSize(8)};
+ width: ${remSize(30)};
+ height: ${remSize(20)};
+
+ & path {
+ fill: ${prop('logoColor')};
+ stroke: ${prop('logoColor')};
+ }
+ }
+
+ @media (max-width: 1279px) {
+ width: 50%;
+ }
+
+ @media (max-width: 769px) {
+ width: 100%;
+ }
+`;
+
+export const Contact = styled.div`
+ margin-bottom: ${remSize(50)};
+
+ & h2 {
+ font-size: ${remSize(24)};
+ font-weight: 600;
+ }
+
+ & div {
+ display: flex;
+ width: 100%;
+ margin: ${remSize(20)} 0;
+ font-size: ${remSize(16)};
+ }
+`;
+
+export const ContactTitle = styled.p`
+ width: 50%;
+
+ @media (max-width: 769px) {
+ width: 30%;
+ }
+`;
+
+export const ContactHandles = styled.p`
+ width: 50%;
+
+ & a {
+ color: ${prop('logoColor')};
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ @media (max-width: 769px) {
+ width: 70%;
+ }
+`;
+
+export const Footer = styled.div`
+ border-top: 0.1rem dashed;
+ padding: 0 ${remSize(20)} ${remSize(70)} 0;
+ width: 100%;
+ font-size: ${remSize(16)};
+
+ & div {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ }
+
+ & a {
+ margin: ${remSize(20)} 9.5% 0 0;
+ color: ${prop('logoColor')};
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ & p {
+ padding: ${remSize(20)} 9.5% 0 0;
+ }
+
+ @media (max-width: 770px) {
+ flex-direction: column;
+ padding: 0 ${remSize(20)};
+ }
+
+ @media (max-width: 550px) {
+ padding-left: 0;
+
+ & div {
+ display: grid;
+ }
+ }
+`;
diff --git a/client/modules/About/pages/About.jsx b/client/modules/About/pages/About.jsx
new file mode 100644
index 0000000000..39ef396192
--- /dev/null
+++ b/client/modules/About/pages/About.jsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import {
+ AboutPageContent,
+ Intro,
+ IntroHeadline,
+ IntroDescription,
+ Section,
+ SectionContainer,
+ SectionItem,
+ Contact,
+ ContactTitle,
+ ContactHandles,
+ Footer
+} from '../About.styles';
+
+import { ContactSectionLinks, AboutSectionInfo } from '../statics/aboutData';
+import Nav from '../../IDE/components/Header/Nav';
+import RootPage from '../../../components/RootPage';
+import packageData from '../../../../package.json';
+
+import HeartIcon from '../../../images/heart.svg';
+import AsteriskIcon from '../../../images/p5-asterisk.svg';
+import LogoIcon from '../../../images/p5js-square-logo.svg';
+
+const AboutSection = ({ section, t }) => (
+ <Section>
+ <h2>{t(section.header)}</h2>
+ <SectionContainer>
+ {section.items.map((item) => (
+ <SectionItem key={item.url}>
+ <AsteriskIcon aria-hidden="true" focusable="false" />
+ <div>
+ <a href={item.url} target="_blank" rel="noopener noreferrer">
+ {t(item.title)}
+ </a>
+ <p>{t(item.description)}</p>
+ </div>
+ </SectionItem>
+ ))}
+ </SectionContainer>
+ </Section>
+);
+
+const About = () => {
+ const { t } = useTranslation();
+
+ const p5version = useSelector((state) => {
+ const index = state.files.find((file) => file.name === 'index.html');
+ return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
+ });
+
+ return (
+ <RootPage>
+ <Helmet>
+ <title> {t('About.TitleHelmet')} </title>
+ </Helmet>
+
+ <Nav layout="dashboard" />
+
+ <AboutPageContent>
+ <Intro>
+ <h1>{t('About.Title')}</h1>
+ <IntroHeadline>
+ <LogoIcon
+ role="img"
+ aria-label={t('Common.p5logoARIA')}
+ focusable="false"
+ />
+ <div>
+ <p>{t('About.Headline')}</p>
+ </div>
+ </IntroHeadline>
+ <IntroDescription>
+ <p>{t('About.IntroDescription1')}</p>
+ <p>{t('About.IntroDescription2')}</p>
+ </IntroDescription>
+ <a
+ href="https://p5js.org/donate/"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <HeartIcon aria-hidden="true" focusable="false" />
+ {t('About.Donate')}
+ </a>
+ </Intro>
+
+ {AboutSectionInfo.map((section) => (
+ <AboutSection key={t(section.header)} section={section} t={t} />
+ ))}
+
+ <Contact>
+ <h2>{t('Contact')}</h2>
+ <div>
+ <ContactTitle>{t('About.Email')}</ContactTitle>
+ <ContactHandles>
+ <a
+ href={t('About.EmailAddress')}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ {t('About.EmailAddress')}
+ </a>
+ </ContactHandles>
+ </div>
+ <div>
+ <ContactTitle>{t('About.Socials')}</ContactTitle>
+ <ContactHandles>
+ {ContactSectionLinks.map((item, index, array) => (
+ <React.Fragment key={item.href}>
+ <a href={item.href} target="_blank" rel="noopener noreferrer">
+ {t(item.label)}
+ </a>
+ {index < array.length - 1 && ', '}
+ </React.Fragment>
+ ))}
+ </ContactHandles>
+ </div>
+ </Contact>
+
+ <Footer>
+ <div>
+ <Link to="/privacy-policy">{t('About.PrivacyPolicy')}</Link>
+ <Link to="/terms-of-use">{t('About.TermsOfUse')}</Link>
+ <Link to="/code-of-conduct">{t('About.CodeOfConduct')}</Link>
+ </div>
+ <p>
+ {t('About.WebEditor')}: <span>v{packageData?.version}</span>
+ </p>
+ <p>
+ p5.js: <span>v{p5version}</span>
+ </p>
+ </Footer>
+ </AboutPageContent>
+ </RootPage>
+ );
+};
+
+AboutSection.propTypes = {
+ section: PropTypes.shape({
+ header: PropTypes.string.isRequired,
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ url: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ description: PropTypes.string.isRequired
+ })
+ ).isRequired
+ }).isRequired,
+ t: PropTypes.func.isRequired
+};
+
+export default About;
diff --git a/client/modules/About/statics/aboutData.js b/client/modules/About/statics/aboutData.js
new file mode 100644
index 0000000000..b00583cd0c
--- /dev/null
+++ b/client/modules/About/statics/aboutData.js
@@ -0,0 +1,91 @@
+export const ContactSectionLinks = [
+ {
+ label: 'About.Github',
+ href: 'https://github.com/processing/p5.js-web-editor'
+ },
+ {
+ label: 'About.Instagram',
+ href: 'https://www.instagram.com/p5xjs'
+ },
+ {
+ label: 'About.Youtube',
+ href: 'https://www.youtube.com/@ProcessingFoundation'
+ },
+ { label: 'About.X', href: 'https://x.com/p5xjs' },
+ {
+ label: 'About.Discord',
+ href: 'https://discord.gg/SHQ8dH25r9'
+ },
+ {
+ label: 'About.Forum',
+ href: 'https://forum.processing.org/'
+ }
+];
+
+export const AboutSectionInfo = [
+ {
+ header: 'About.NewP5',
+ items: [
+ {
+ url: 'https://p5js.org/',
+ title: 'About.Home',
+ description: 'About.LinkDescriptions.Home'
+ },
+ {
+ url: 'https://p5js.org/examples/',
+ title: 'About.Examples',
+ description: 'About.LinkDescriptions.Examples'
+ },
+ {
+ url: '/code-of-conduct',
+ title: 'About.CodeOfConduct',
+ description: 'About.LinkDescriptions.CodeOfConduct'
+ }
+ ]
+ },
+ {
+ header: 'About.Resources',
+ items: [
+ {
+ url: 'https://p5js.org/libraries/',
+ title: 'About.Libraries',
+ description: 'About.LinkDescriptions.Libraries'
+ },
+ {
+ url: 'https://p5js.org/reference/',
+ title: 'About.Reference',
+ description: 'About.LinkDescriptions.Reference'
+ }
+ ]
+ },
+ {
+ header: 'About.GetInvolved',
+ items: [
+ {
+ url: 'https://p5js.org/donate/',
+ title: 'About.Donate',
+ description: 'About.LinkDescriptions.Donate'
+ },
+ {
+ url: 'https://github.com/processing/p5.js-web-editor',
+ title: 'About.Contribute',
+ description: 'About.LinkDescriptions.Contribute'
+ },
+ {
+ url: 'https://github.com/processing/p5.js-web-editor/issues/new',
+ title: 'About.Report',
+ description: 'About.LinkDescriptions.Report'
+ },
+ {
+ url: 'https://discourse.processing.org/',
+ title: 'About.ForumCTA',
+ description: 'About.LinkDescriptions.Forum'
+ },
+ {
+ url: 'https://discord.com/invite/SHQ8dH25r9',
+ title: 'About.DiscordCTA',
+ description: 'About.LinkDescriptions.Discord'
+ }
+ ]
+ }
+];
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
deleted file mode 100644
index 25b9f54520..0000000000
--- a/client/modules/IDE/components/About.jsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
-// import PlayIcon from '../../../images/play.svg';
-import AsteriskIcon from '../../../images/p5-asterisk.svg';
-import packageData from '../../../../package.json';
-
-function About(props) {
- const { t } = useTranslation();
- const p5version = useSelector((state) => {
- const index = state.files.find((file) => file.name === 'index.html');
- return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
- });
- return (
- <div className="about__content">
- <Helmet>
- <title> {t('About.TitleHelmet')} </title>
- </Helmet>
- <div className="about__content-column">
- <SquareLogoIcon
- className="about__logo"
- role="img"
- aria-label={t('Common.p5logoARIA')}
- focusable="false"
- />
- <div className="about__content-column">
- <p className="about__version-info">
- {t('About.WebEditor')}: <span>v{packageData?.version}</span>
- </p>
- <p className="about__version-info">
- p5.js: <span>v{p5version}</span>
- </p>
- </div>
- </div>
- <div className="about__content-column">
- <h3 className="about__content-column-title">{t('About.NewP5')}</h3>
- <p className="about__content-column-list">
- <a href="https://p5js.org/" target="_blank" rel="noopener noreferrer">
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Home')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://p5js.org/examples/"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Examples')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://p5js.org/tutorials/"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Learn')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://twitter.com/p5xjs?lang=en"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Twitter')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://www.instagram.com/p5xjs/?hl=en"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Instagram')}
- </a>
- </p>
- </div>
- <div className="about__content-column">
- <h3 className="about__content-column-title">{t('About.Resources')}</h3>
- <p className="about__content-column-list">
- <a
- href="https://p5js.org/libraries/"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Libraries')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://p5js.org/reference/"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('Nav.Help.Reference')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://discourse.processing.org/"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Forum')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://discord.com/invite/SHQ8dH25r9"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.Discord')}
- </a>
- </p>
- <p className="about__content-column-list">
- <a
- href="https://p5js.org/donate/"
- target="_blank"
- rel="noopener noreferrer"
- >
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- Donate
- </a>
- </p>
- <p className="about__content-column-list">
- <Link to="/privacy-policy">
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.PrivacyPolicy')}
- </Link>
- </p>
- <p className="about__content-column-list">
- <Link to="/terms-of-use">
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.TermsOfUse')}
- </Link>
- </p>
- <p className="about__content-column-list">
- <Link to="/code-of-conduct">
- <AsteriskIcon
- className="about__content-column-asterisk"
- aria-hidden="true"
- focusable="false"
- />
- {t('About.CodeOfConduct')}
- </Link>
- </p>
- </div>
- <div className="about__footer">
- <p className="about__footer-list">
- <a
- href="https://github.com/processing/p5.js-web-editor"
- target="_blank"
- rel="noopener noreferrer"
- >
- {t('About.Contribute')}
- </a>
- </p>
- <p className="about__footer-list">
- <a
- href="https://github.com/processing/p5.js-web-editor/issues/new"
- target="_blank"
- rel="noopener noreferrer"
- >
- {t('About.Report')}
- </a>
- </p>
- </div>
- </div>
- );
-}
-
-export default About;
diff --git a/client/modules/IDE/components/About.stories.jsx b/client/modules/IDE/components/About.stories.jsx
deleted file mode 100644
index 97289f9bc8..0000000000
--- a/client/modules/IDE/components/About.stories.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import About from './About';
-
-export default {
- title: 'IDE/About',
- component: About
-};
-
-export const Default = {};
diff --git a/client/modules/IDE/components/IDEOverlays.jsx b/client/modules/IDE/components/IDEOverlays.jsx
index 52b21a9e9e..8565c5bd56 100644
--- a/client/modules/IDE/components/IDEOverlays.jsx
+++ b/client/modules/IDE/components/IDEOverlays.jsx
@@ -9,7 +9,6 @@ import {
closeShareModal,
hideErrorModal
} from '../actions/ide';
-import About from './About';
import AddToCollectionList from './AddToCollectionList';
import ErrorModal from './ErrorModal';
import Feedback from './Feedback';
@@ -49,15 +48,6 @@ export default function IDEOverlays() {
<Preferences />
</Overlay>
)}
- {location.pathname === '/about' && (
- <Overlay
- title={t('About.Title')}
- previousPath={previousPath}
- ariaLabel={t('About.Title')}
- >
- <About />
- </Overlay>
- )}
{location.pathname === '/feedback' && (
<Overlay
title={t('IDEView.SubmitFeedback')}
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 2bd2649770..4084facb77 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -38,7 +38,7 @@ function isAuth(pathname) {
}
function isOverlay(pathname) {
- return pathname === '/about' || pathname === '/feedback';
+ return pathname === '/feedback';
}
function WarnIfUnsavedChanges() {
diff --git a/client/routes.jsx b/client/routes.jsx
index d3aa6ddbe5..26de7e4e6c 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -6,6 +6,7 @@ import { Route as RouterRoute, Switch } from 'react-router-dom';
import App from './modules/App/App';
import IDEView from './modules/IDE/pages/IDEView';
import FullView from './modules/IDE/pages/FullView';
+import About from './modules/About/pages/About';
import CodeOfConduct from './modules/Legal/pages/CodeOfConduct';
import PrivacyPolicy from './modules/Legal/pages/PrivacyPolicy';
import TermsOfUse from './modules/Legal/pages/TermsOfUse';
@@ -72,7 +73,7 @@ const routes = (
<Route path="/sketches" component={DashboardView} />
<Route path="/assets" component={DashboardView} />
<Route path="/account" component={AccountView} />
- <Route path="/about" component={IDEView} />
+ <Route path="/about" component={About} />
<Route path="/privacy-policy" component={PrivacyPolicy} />
<Route path="/terms-of-use" component={TermsOfUse} />
<Route path="/code-of-conduct" component={CodeOfConduct} />
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
deleted file mode 100644
index c21939e6fe..0000000000
--- a/client/styles/components/_about.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@use "sass:math";
-
-.about__logo {
- @include themify() {
- & path {
- fill: getThemifyVariable('logo-color');
- }
- }
-}
-
-.about__content {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- flex-wrap: wrap;
- padding-top: #{math.div(17, $base-font-size)}rem;
- padding-right: #{math.div(78, $base-font-size)}rem;
- padding-bottom: #{math.div(20, $base-font-size)}rem;
- padding-left: #{math.div(20, $base-font-size)}rem;
- width: #{math.div(720, $base-font-size)}rem;
-}
-
-.about__content-column {
- display: flex;
- flex-direction: column;
- margin-left: 15px;
- margin-right: 15px;
-}
-
-@media (max-width: 768px) {
- .about__content {
- flex-direction: column;
- overflow-y: auto;
- overflow-x: hidden;
- width: 100%;
- margin-right: 15rem;
- }
-
- .about__footer {
- flex-direction: column;
- padding-left: #{math.div(20, $base-font-size)}rem;
- padding-right: #{math.div(20, $base-font-size)}rem;
- }
-}
-
-.about__content-column-title {
- font-size: #{math.div(21, $base-font-size)}rem;
- padding-left: #{math.div(17, $base-font-size)}rem;
-}
-
-.about__content-column-asterisk {
- padding-right: #{math.div(5, $base-font-size)}rem;
- @include themify() {
- & path {
- fill: getThemifyVariable('logo-color');
- stroke: getThemifyVariable('logo-color');
- }
- }
-}
-
-.about__content-column-list {
- @include themify() {
- padding-top: #{math.div(10, $base-font-size)}rem;
- font-size: #{math.div(16, $base-font-size)}rem;
- }
-}
-
-.about__version-info {
- @include themify() {
- padding-top: #{math.div(8, $base-font-size)}rem;
- font-size: #{math.div(16, $base-font-size)}rem;
- span {
- color: getThemifyVariable('logo-color');
- }
- &:first-child {
- padding-top: #{math.div(30, $base-font-size)}rem;
- }
- }
- // span {
- // @include themify() {
- // fill: getThemifyVariable('logo-color');
- // }
- // }
-}
-
-.about__footer {
- display: flex;
- justify-content: space-between;
- padding-top: #{math.div(18, $base-font-size)}rem;
- padding-right: #{math.div(20, $base-font-size)}rem;
- padding-bottom: #{math.div(21, $base-font-size)}rem;
- padding-left: #{math.div(20, $base-font-size)}rem;
- width: 100%;
-}
-
-.about__footer-list {
- padding-top: #{math.div(12, $base-font-size)}rem;
-}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 75cc236904..c82a2c3e8f 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -32,7 +32,6 @@
@import 'components/console';
@import 'components/resizer';
@import 'components/overlay';
-@import 'components/about';
@import 'components/forms';
@import 'components/toast';
@import 'components/timer';
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 31a42c47af..697e5a2749 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -89,27 +89,47 @@
"About": {
"Title": "About",
"TitleHelmet": "p5.js Web Editor | About",
+ "Headline": "Create, share, and remix p5.js sketches with the p5.js Editor.",
"Contribute": "Contribute",
+ "IntroDescription1": "p5.js is a free, open-source JavaScript library for learning to code and make art. Using the p5.js Editor, you can create, share, and remix p5.js sketches without needing to download or configure anything.",
+ "IntroDescription2": "We believe software the tools to learn it, should be as open and inclusive as possible. You can support this work by making a donation to the Processing Foundation, the organization that supports p5.js. Your donation supports sofware development for p5.js, education resources like code examples and tutorials, fellowships, and community events.",
+ "Donate": "Donate",
"NewP5": "New to p5.js?",
- "Report": "Report a bug",
+ "Report": "Report a Bug",
"Learn": "Learn",
- "Twitter": "Twitter",
- "Home": "Home",
+ "X": "X",
+ "Home": "p5.js Home",
"Instagram": "Instagram",
"Discord": "Discord",
+ "DiscordCTA": "Join the Discord",
+ "Youtube": "Youtube",
+ "Github": "Github",
+ "GetInvolved": "Get Involved",
"WebEditor": "Web Editor",
"Resources": "Resources",
+ "Reference": "Reference",
"Libraries": "Libraries",
"Forum": "Forum",
+ "ForumCTA": "Join the Forum",
"Examples": "Examples",
- "Home": "Home",
- "Twitter": "Twitter",
- "Instagram": "Instagram",
- "Discord": "Discord",
"PrivacyPolicy": "Privacy Policy",
"TermsOfUse": "Terms of Use",
"CodeOfConduct": "Code of Conduct",
- "WebEditor": "Web Editor"
+ "Email": "Email",
+ "EmailAddress": "hello@p5js.org",
+ "Socials": "Socials",
+ "LinkDescriptions": {
+ "Home": "Learn more about p5.js and our community.",
+ "Examples": "Explore the possibilities of p5.js with short examples.",
+ "CodeOfConduct": "Read our Community State and Code of Conduct.",
+ "Libraries": "Expand the possibilities of p5.js with community-created libraries.",
+ "Reference": "Find easy expalantions for every piece of p5.js code.",
+ "Donate": "Support this work with a donation to the Processing Foundation.",
+ "Contribute": "Contribute to the open-source p5.js Editor on Github.",
+ "Report": "Report broken or incorrect behavior with the p5.js Editor.",
+ "Forum": "Expand the possibilities of p5.js with community-created libraries.",
+ "Discord": "Expand the possibilties of p5.js with community-created libraries."
+ }
},
"Toast": {
"OpenedNewSketch": "Opened new sketch.",