Merge pull request #1087 from onflow/support-updates

Update support
onflow · Jan 10, 2025 · 1999bd1 · 1999bd1
2 parents 7b6dcb7 + d8c2b60
commit 1999bd1
Show file tree

Hide file tree

Showing 5 changed files with 3,173 additions and 2,750 deletions.
diff --git a/src/ui/design-system/images/page/flow-forum-icon.svg b/src/ui/design-system/images/page/flow-forum-icon.svg
diff --git a/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx b/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import { ContentFeature, type ContentFeatureProps } from './ContentFeature';
+import {
+  HomepagePillItem,
+  type HomepagePillItemsProps,
+} from '../HomepageStartItem/HomepagePillItem';
 
 const ContentFeatures: Record<string, ContentFeatureProps> = {
   'why-flow': {
     icon: 'feature-why-flow-icon',
     image: 'feature-why-flow-image',
     header: 'Why Flow',
-    text: 'Explore Flow\'s scalable and high-performance blockchain architecture',
+    text: "Explore Flow's scalable and high-performance blockchain architecture",
     link: '/build/flow',
   },
   'smart-accounts': {
@@ -39,12 +43,48 @@ const ContentFeatures: Record<string, ContentFeatureProps> = {
   },
 };
 
+const homepagePillData: Record<string, HomepagePillItemsProps> = {
+  'dev-office-hours': {
+    link: 'https://calendar.google.com/calendar/embed?src=c_47978f5cd9da636cadc6b8473102b5092c1a865dd010558393ecb7f9fd0c9ad0%40group.calendar.google.com',
+    icon: 'dev-office-hours',
+    text: 'Dev Office Hours',
+    subText: 'Join weekly calls',
+  },
+  'flow-assistant': {
+    link: '#',
+    icon: 'flow-assistant-gpt',
+    text: 'Flow AI Assistant',
+    subText: 'Chat with devs',
+  },
+  'developer-chat': {
+    link: 'https://discord.gg/flow',
+    icon: 'developer-chat',
+    text: 'Developers Discord',
+    subText: 'Chat with devs',
+  },
+  forum: {
+    link: 'https://flow.com/upgrade/crescendo',
+    icon: 'forum',
+    text: 'Forum',
+    subText: 'Discuss & Learn',
+  },
+  github: {
+    link: 'https://github.com/orgs/onflow/discussions',
+    icon: 'network-upgrade',
+    text: 'Github Discussions',
+    subText: 'Share issues',
+  },
+};
+
 export function ContentFeatureList(): React.ReactElement {
   return (
     <div className="container">
       <div className="flex flex-col md:w-1/2 md:block pb-9">
         <div className="text-h2 pb-5">Key Features</div>
-        Discover the innovative features that make Flow the blockchain built for the next generation of apps, games, and digital assets. Learn about its scalable architecture, developer-friendly environment, and resource-oriented programming with Cadence.
+        Discover the innovative features that make Flow the blockchain built for
+        the next generation of apps, games, and digital assets. Learn about its
+        scalable architecture, developer-friendly environment, and
+        resource-oriented programming with Cadence.
       </div>
       <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4`}>
         <div className="lg:col-span-2">
@@ -64,6 +104,13 @@ export function ContentFeatureList(): React.ReactElement {
           <ContentFeature key={4} {...ContentFeatures.evm} />
         </div>
       </div>
+      <div className="grid col-span-1 md:grid-cols-2 md:col-span-2 lg:grid-cols-4 lg:col-span-3 gap-4 mt-10">
+        <HomepagePillItem key={4} {...homepagePillData['dev-office-hours']} />
+        <HomepagePillItem key={5} {...homepagePillData['flow-assistant']} />
+        <HomepagePillItem key={6} {...homepagePillData['developer-chat']} />
+        <HomepagePillItem key={7} {...homepagePillData['github']} />
+        {/* <HomepagePillItem key={8} {...homepagePillData['forum']} /> */}
+      </div>
     </div>
   );
 }
diff --git a/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepageStartIcons.tsx b/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepageStartIcons.tsx
@@ -16,6 +16,7 @@ import RoadmapLarge from '../../../../images/misc/roadmap-card-lg.png';
 import RoadmapSmall from '../../../../images/misc/roadmap-card-sm.png';
 import UpdatesLight from '../../../../images/misc/updates-light.png';
 import UpdatesDark from '../../../../images/misc/updates-dark.png';
+import Forum from '../../../../images/page/flow-forum-icon.svg';
 
 export interface HomepageStartItemIconsProps {
   icon: string;
@@ -88,6 +89,8 @@ export function HomepageStartItemIcons({
       return <DeveloperChat />;
     case 'network-upgrade':
       return <NetworkUpgrade />;
+    case 'forum':
+      return <Forum />;
     case 'updates':
       return (
         <span>

diff --git a/src/ui/design-system/src/lib/Components/HomepageStartList/index.tsx b/src/ui/design-system/src/lib/Components/HomepageStartList/index.tsx
@@ -3,10 +3,6 @@ import {
   HomepageStartItem,
   type HomepageStartItemProps,
 } from '../HomepageStartItem';
-import {
-  HomepagePillItem,
-  type HomepagePillItemsProps,
-} from '../HomepageStartItem/HomepagePillItem';
 
 const homepageData: Record<string, HomepageStartItemProps> = {
   'cadence-course': {
@@ -27,38 +23,15 @@ const homepageData: Record<string, HomepageStartItemProps> = {
   },
 };
 
-const homepagePillData: Record<string, HomepagePillItemsProps> = {
-  'dev-office-hours': {
-    link: 'https://github.com/onflow/Flow-Working-Groups#Calendar',
-    icon: 'dev-office-hours',
-    text: 'Working Groups',
-    subText: 'Get involved',
-  },
-  'flow-assistant': {
-    link: 'https://chatgpt.com/g/g-a1jOaEj1h-flow-assistant',
-    icon: 'flow-assistant-gpt',
-    text: 'Flow Assistant GPT',
-    subText: 'Check it out',
-  },
-  'developer-chat': {
-    link: 'https://discord.gg/flow',
-    icon: 'developer-chat',
-    text: 'Developers Chat',
-    subText: 'Chat with devs',
-  },
-  'network-upgrade': {
-    link: 'https://flow.com/upgrade/crescendo',
-    icon: 'network-upgrade',
-    text: 'Crescendo',
-    subText: 'View latest',
-  },
-};
 export function HomepageStartList(): React.ReactElement {
   return (
     <div className="container mx-auto p-4">
       <div className="flex flex-col md:w-1/2 md:block pb-9">
         <div className="text-h2 pb-5">EVM on Flow</div>
-        Unlock the ability to run EVM-compatible smart contracts on Flow. Leverage your existing Solidity skills and EVM tools to build on Flow's high-performance blockchain, combining familiar development experiences with Flow's scalability and efficiency.
+        Unlock the ability to run EVM-compatible smart contracts on Flow.
+        Leverage your existing Solidity skills and EVM tools to build on Flow's
+        high-performance blockchain, combining familiar development experiences
+        with Flow's scalability and efficiency.
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <div className="col-span-1 md:col-span-1 md:row-span-2 lg:col-span-1 lg:row-span-2 rounded-lg shadow p-2">
@@ -73,12 +46,6 @@ export function HomepageStartList(): React.ReactElement {
         <div className="col-span-1 md:col-span-2 lg:col-start-2 lg:col-span-2 rounded-lg shadow p-2">
           <HomepageStartItem key={3} {...homepageData['lang-reference']} />
         </div>
-        <div className="grid col-span-1 md:grid-cols-2 md:col-span-2 lg:grid-cols-4 lg:col-span-3 gap-4">
-          <HomepagePillItem key={4} {...homepagePillData['dev-office-hours']} />
-          <HomepagePillItem key={5} {...homepagePillData['flow-assistant']} />
-          <HomepagePillItem key={6} {...homepagePillData['developer-chat']} />
-          <HomepagePillItem key={7} {...homepagePillData['network-upgrade']} />
-        </div>
       </div>
     </div>
   );