New landing page (#694)

* checkpoint, building structure for desktop and mobile

* key features, still need to replace top cards with styled components, svg are losing their stroke color in key features, checkpoint

* fix feature card background between light and dark mode

* fix icon alignments

* create hover state for home page pill components

* mobile for building onflow cards

* all theme primary color to be svg stroke

* add hover effect to image links

* structure docs links

* style explore the docs

* add arrow svg

* fix highlight of category on starting building section

* add social cards

* fix button style in mobile

* update wording

* fix spelling

* fix typo

* added new gradient to be used for section background

* add bg image to social cards

* add links and update text hover

* add hover effect, fix link color in link grid

* fix dark mode hover effect for link grid

* polish

* update links and hover state for key features

* reorganize page cards to allow user to page through multiple pages of cards on desktop

* add section transition

* remove console log

* update images for paged cards

* update card text

* polish and fix typo

* fix more links

* fix some linting warnings

* fix responsive with cards

* alignment hover state on pill

* fix responsivness in start list pills md size

* fix responsiviness of feature cards for tablet format

* fix margin issues in md layout

* fix border color for grid of links

* fix md layout for social cards

docusaurus.config.js

@@ -409,8 +409,8 @@ const config = {
                 label: 'Core Contracts & Standards',
               },
               {
-                href: 'https://academy.ecdao.org/',
-                label: 'Emerald DAO Bootcamp',
+                href: '/evm/about',
+                label: 'EVM',
               },
             ],
           },
@@ -503,6 +503,43 @@ const config = {
       },
     }),
   plugins: [
+    function customizedSvgo() {
+      return {
+        name: 'docusaurus-svgo',
+        configureWebpack(config) {
+          // allow svgr to use svgo config file
+          for (const rule of config.module.rules) {
+            if (
+              typeof rule === 'object' &&
+              rule.test.toString() === '/\\.svg$/i'
+            ) {
+              for (const nestedRule of rule.oneOf) {
+                if (nestedRule.use instanceof Array) {
+                  for (const loader of nestedRule.use) {
+                    if (
+                      typeof loader === 'object' &&
+                      loader.loader === require.resolve('@svgr/webpack')
+                    ) {
+                      if (typeof loader.options === 'object') {
+                        loader.options.svgoConfig = null;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+          return {
+            mergeStrategy: {
+              'module.rules': 'replace',
+            },
+            module: {
+              rules: config.module.rules,
+            },
+          };
+        },
+      };
+    },
     function tailwindPlugin() {
       return {
         name: 'docusaurus-tailwindcss',

src/data/pages/home.tsx

@@ -1,29 +1,7 @@
 import { type ContentNavigationListProps } from '../../ui/design-system/src/lib/Components/ContentNavigationList';
-import { type HomepageStartItemProps } from '../../ui/design-system/src/lib/Components/HomepageStartItem';
-
-const homepageStartProjectData: HomepageStartItemProps[] = [
-  {
-    title: 'Getting Started',
-    text: 'Dive into key concepts with a Hello World quickstart',
-    link: '/build/getting-started/quickstarts/hello-world',
-    icon: 'learn',
-  },
-  {
-    title: 'Developer Guides',
-    text: 'Create your first dApp in just a few minutes',
-    link: '/build/guides/flow-app-quickstart',
-    icon: 'quickstart',
-  },
-  {
-    title: 'Resources',
-    text: 'All the developer tools you need',
-    link: '/tools/flow-cli',
-    icon: 'documentation',
-  },
-];
 
 const contentNavigationListItems: ContentNavigationListProps = {
-  header: 'Explore Key Concepts and Features',
+  header: 'Key Features',
   contentNavigationItems: [
     {
       title: 'Why Flow',
@@ -52,4 +30,4 @@ const contentNavigationListItems: ContentNavigationListProps = {
   ],
 };
 
-export { homepageStartProjectData, contentNavigationListItems };
+export { contentNavigationListItems };

src/pages/index.tsx

@@ -6,17 +6,13 @@ import { allEvents } from '../data/events';
 import HomePage from '../ui/design-system/src/lib/Pages/HomePage';
 // import { refreshTools } from '../cms/tools.server'
 import { externalLinks } from '../data/external-links';
-import {
-  contentNavigationListItems,
-  homepageStartProjectData,
-} from '../data/pages/home';
+import { contentNavigationListItems } from '../data/pages/home';
 
 const data = {
   discordUrl: externalLinks.discord,
   discourseUrl: externalLinks.discourse,
   twitterUrl: externalLinks.twitter,
   contentNavigationListItems,
-  homepageStartProjectData,
   flips: {
     // ...flips, temporary empty arrays
     goodPlacesToStartFlips: [],
@@ -38,7 +34,6 @@ const Index = (): JSX.Element => {
           discourseUrl={externalLinks.discourse}
           flips={data.flips}
           githubUrl={externalLinks.github}
-          homepageStartProjectData={data.homepageStartProjectData}
           twitterUrl={externalLinks.twitter}
           upcomingEvents={data.upcomingEvents}
         />