Create bug bounty page

docs/ecosystem/bug-bounty.mdx

@@ -0,0 +1,23 @@
+---
+sidebar_position: 13
+description: Report security vulnerabilities in Flow and earn rewards through the official bug bounty program.
+sidebar_custom_props:
+  icon: 🐛
+---
+
+import Icon from '@site/src/components/Icon';
+import { IconName } from '@site/src/types/icons';
+
+# Bug Bounty Program
+
+<div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start', paddingTop: '1.5rem', paddingBottom: '2rem'}}>
+  <Icon name={IconName.SHIELD_CHECK} style={{width: '80px', height: '80px', flexShrink: 0}} />
+  <div>
+    <p style={{fontSize: '1.1rem', color: 'var(--ifm-color-emphasis-700)', lineHeight: '1.7', marginBottom: '1.5rem'}}>
+      Discover Flow's bug bounty program, which rewards white hat hackers for finding vulnerabilities and helping keep the network secure.
+    </p>
+
+[Submit a Vulnerability Report →](https://hackenproof.com/blog/for-hackers/flow-new-bounty-target)
+
+  </div>
+</div>

docs/ecosystem/projects.mdx

@@ -45,23 +45,6 @@ Explore an array of exciting, grassroots initiatives, and projects that thrive w
         githubLink: 'https://github.com/onflow',
       },
     },
-    {
-      type: 'link',
-      label: 'Flow Bug Bounty Program',
-      href: 'https://flow.com/flow-responsible-disclosure',
-      description:
-        'Get rewarded for finding security vulnerabilities in on of our products or platforms.',
-      customProps: {
-        icon: 'https://assets.website-files.com/5f734f4dbd95382f4fdfa0ea/62763e067575490bc83fe807_Group%20822.svg',
-        author: {
-          name: 'Flow',
-          profileImage:
-            'https://avatars.githubusercontent.com/u/62387156?s=200&v=4',
-        },
-        numStars: 0,
-        twitterLink: 'https://twitter.com/flow_blockchain',
-      },
-    },
     {
       type: 'link',
       label: 'Flowverse',

src/components/Icon.tsx

@@ -29,13 +29,15 @@ interface IconProps {
   className?: string;
   width?: string | number;
   height?: string | number;
+  style?: React.CSSProperties;
 }
 
 export const Icon: React.FC<IconProps> = ({
   name,
   className = "w-6 h-6",
   width = "100%",
-  height = "100%"
+  height = "100%",
+  style,
 }) => {
   if (!name) {
     return <LocationIcon />;
@@ -50,7 +52,7 @@ export const Icon: React.FC<IconProps> = ({
 
   // Always render as an image since we're using static paths
   return (
-    <div className={className}>
+    <div className={className} style={style}>
       <img 
         src={iconPath} 
         alt={name}

src/hooks/use-icons.ts

@@ -61,6 +61,9 @@ const iconMap: Record<IconName, string> = {
   [IconName.ALCHEMY]: '/img/ecosystem/alchemy.svg',
   [IconName.THIRDWEB]: '/img/ecosystem/thirdweb.svg',
   [IconName.UNIBLOCK]: '/img/ecosystem/uniblock.svg',
+
+  // Security icons
+  [IconName.SHIELD_CHECK]: '/images/icons/shield-check.svg',
 };
 
 // Simple function to get icon path - no need for a hook since it's just static data

src/types/icons.ts

@@ -58,4 +58,7 @@ export enum IconName {
   DISCORD = 'discord',
   X_COM = 'x.com',
   GITHUB = 'github',
+
+  // Security icons
+  SHIELD_CHECK = 'shield-check',
 }