SEO-friendly communities page (#313)

* Decreased font size and logo sizes of logo bar

* Made it so all communities show at once

Adjusted position of title text also

Clicking navigation goes to that portion of the text (IE Clicking AI logo goes to AI section)

* Fixed spacing between sections, added project photos

* Added placeholder colors per community

* Switched img to Next Image for social media links

* Reduced gap between headers and links

* Updated design photos

* Updated website with outreach green color

* Make all sections render on mobile view

No navigation to initiatives yet

* Removed tofix comments

* Fixed href labels making 404 error

* Changed buttons to links, made mobile buttons a little bit bigger

* style: Auto format with Prettier

* use CSS modules for auto namespaced class names

* refactor: Split Suborgs into individual components

It'll be easier to fix CSS this way

* fix: fix colors and icon links

* refactor: Remove `isMobile` in favor of CSS media queries

* Responsive community description, sticky navbars

* sticky community logos

* Try implementing the mobile design

* polish

* Highlight current section

* copywriting

* Update logos, increase space logo size to make it look like the others

---------

Co-authored-by: Andrew Smithwick <[email protected]>

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-	"editor.formatOnSave": false
-}
+  "editor.formatOnSave": true
+}

pages/_app.tsx

@@ -9,7 +9,6 @@ import "src/components/ScrollDownArrow/styles.scss";
 import "src/components/Statistic/styles.scss";
 // section css imports
 import "src/sections/about/styles.scss";
-import "src/sections/community/styles.scss";
 import "src/sections/home/styles.scss";
 import "src/sections/sponsorship/styles.scss";
 

pages/communities.tsx

@@ -1,21 +1,10 @@
-import { useState, useEffect } from "react";
-import { Size, useWindowSize } from "src/utils/general";
-
 import SEO from "src/components/SEO";
 
-import CommunityHero from "src/sections/community/Community.Hero";
-import CommunitySuborgs from "src/sections/community/Community.Suborgs";
+import CommunitySuborgs from "src/sections/community/Suborgs";
 import ACMWhiteLogo from "public/assets/ACMWhiteLogo.png";
 import { NextPage } from "next";
 
 const CommunitiesPage: NextPage = () => {
-  const size: Size = useWindowSize();
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    setIsMobile((size.width || 0) <= 812);
-  }, [size]);
-
   return (
     <>
       <SEO
@@ -24,7 +13,7 @@ const CommunitiesPage: NextPage = () => {
         description="ACM at UCSD is one large community, but it is made up of several smaller communities focused on specific areas of technology."
         image={ACMWhiteLogo.src}
       />
-      <CommunitySuborgs isMobile={isMobile} />
+      <CommunitySuborgs />
     </>
   );
 };