Merge pull request #1124 from onflow/brian-doyle/revamp-root

Brian doyle/revamp root

Author: briandoyle81

docs/ecosystem/grants.md

@@ -0,0 +1,26 @@
+---
+title: Grants
+description: Discover grant opportunities and funding programs available for Flow developers
+sidebar_position: 5
+sidebar_custom_props:
+  icon: 🌱
+---
+
+# Flow Developer Grants
+
+The Flow Foundation provides grants to support developers and teams building tools and products that enhance the Flow ecosystem.
+
+## Focus Areas
+
+We are particularly interested in projects across these key areas:
+
+- **Telegram Miniapps**: Building integrations and applications for the Telegram ecosystem
+- **DeFi**: Innovative decentralized finance solutions
+- **AI Agents**: Artificial intelligence and autonomous systems
+- **Sports**: Applications and platforms in the sports and gaming sector
+
+## How to Apply
+
+1. Visit the [Flow Developer Grants Repository](https://github.com/onflow/developer-grants)
+2. Create a new issue using the "Grant Application" template
+3. Fill out all required details about your project

docs/ecosystem/hackathons.md

@@ -0,0 +1,33 @@
+---
+title: Hackathons
+description: Participate in Flow hackathons to build, learn, and win prizes
+sidebar_position: 6
+sidebar_custom_props:
+  icon: 🚀
+---
+
+# Flow World Tour Hackathons
+
+Some of the most groundbreaking blockchain projects began as hackathon ideas—CryptoKitties, the game that revolutionized NFTs, was first built at the ETHGlobal Waterloo hackathon. Your project could be next.
+
+## Flow World Tour
+
+We're bringing together builders, creators, and innovators through a series of global hackathons—both in-person and online. These events are more than just competitions; they’re an opportunity to experiment, collaborate, and turn bold ideas into reality.
+
+### Why Join?
+
+#### **Build & Learn**
+
+Get hands-on experience with Flow while accessing expert mentorship, technical workshops, and valuable resources to refine your skills on the cutting edge, from AI agents to next-gen DeFi.
+
+#### **Network & Connect**
+
+Meet like-minded builders, potential co-founders, and potential investors. These events are a gateway to becoming part of the global Flow community.
+
+#### **Win & Launch**
+
+With substantial prize pools, industry recognition, and the chance to launch your project, hackathons can be the stepping stone to your next big startup, side-project, or public good.
+
+## Find Your Flow State
+
+Stay ahead of upcoming hackathons and exclusive announcements. [Join Flow World Tour on Telegram](https://t.me/flow_world_tour).

docs/ecosystem/vcs-and-funds.md

@@ -0,0 +1,28 @@
+---
+title: VCs & Funds
+description: Connect with venture capital firms and investment funds supporting Flow projects
+sidebar_position: 4
+sidebar_custom_props:
+  icon: 💼
+---
+
+# VCs & Funds
+
+Building a successful Web3 project requires more than just great technology - having the right investors and partners can make all the difference. The Flow ecosystem is supported by some of the world's leading venture capital firms and crypto-native funds.
+
+Research shows that warm introductions can increase your chances of securing funding by up to 500% more liley compared to cold outreach. The Flow Foundation can help facilitate introductions to our network of trusted investors who have a deep understanding of the Flow ecosystem and web3. Reach out to your local dev-rel in [office hours](https://calendar.google.com/calendar/u/0/embed?src=c_47978f5cd9da636cadc6b8473102b5092c1a865dd010558393ecb7f9fd0c9ad0@group.calendar.google.com) or [discord](https://discord.gg/flow) to get a warm introduction.
+
+<div style={{userSelect: "none"}}>
+    <iframe 
+    className="airtable-embed" 
+    src="https://airtable.com/embed/appl4lT5epHlx31oE/shrhjjDu3V4cCoMM6?viewControls=on" 
+    frameBorder="0" 
+    onMouseWheel="" 
+    style={{
+        width: "100%",
+        height: "533px",
+        background: "transparent",
+        border: "1px solid #ccc"
+    }}
+    />
+</div>

src/components/ActionCard.tsx

@@ -7,7 +7,7 @@ interface ActionCardProps {
   heading: string;
   description: string;
   onClick?: () => void;
-  variant?: 'default' | 'overlay';
+  variant?: 'default' | 'overlay' | 'horizontal';
 }
 
 export const LocationIcon: React.FC = () => (
@@ -33,22 +33,21 @@ export const LocationIcon: React.FC = () => (
 );
 
 const ActionCard: React.FC<ActionCardProps> = ({
-    iconColor = 'white',
-    cardColor = 'black',
-    heading,
-    description,
-    onClick,
-    variant = 'default',
-  }) => {
+  iconColor = 'white',
+  cardColor = 'black',
+  heading,
+  description,
+  onClick,
+  variant = 'default',
+}) => {
   const cardBg = colors[cardColor].dark;
   const iconBg = colors[iconColor].light;
 
   return (
     <div
       onClick={onClick}
-      className={`relative flex flex-col justify-between p-6 rounded-lg shadow-lg hover:scale-105 transition-transform ${
-        onClick ? 'cursor-pointer' : ''
-      } ${cardBg}`}
+      className={`relative flex flex-col justify-between p-6 rounded-lg shadow-lg hover:scale-[1.02] transition-transform ${variant === 'overlay' ? 'mt-6' : ''
+        } ${onClick ? 'cursor-pointer' : ''} ${cardBg}`}
     >
       {variant === 'overlay' && (
         <div
@@ -57,16 +56,33 @@ const ActionCard: React.FC<ActionCardProps> = ({
           <LocationIcon />
         </div>
       )}
-      {variant === 'default' && (
-        <div
-          className={`w-10 h-10 rounded-md flex items-center justify-center mb-6 ${iconBg}`}
-        >
-          <LocationIcon />
-        </div>
-      )}
-      <div className="mt-auto">
-        <h3 className="text-xl font-semibold text-white mb-2">{heading}</h3>
-        <p className="text-sm text-gray-100">{description}</p>
+      <div className="flex flex-col h-full">
+        {variant === 'default' && (
+          <div
+            className={`w-10 h-10 rounded-md flex items-center justify-center mb-4 ${iconBg}`}
+          >
+            <LocationIcon />
+          </div>
+        )}
+        {variant === 'horizontal' && (
+          <div className="flex items-center gap-4 mb-4">
+            <div
+              className={`w-10 h-10 rounded-md flex items-center justify-center ${iconBg}`}
+            >
+              <LocationIcon />
+            </div>
+            <h3 className="text-xl font-semibold text-white">{heading}</h3>
+          </div>
+        )}
+        {variant !== 'horizontal' && (
+          <div className={variant === 'overlay' ? 'mt-6' : ''}>
+            <h3 className="text-xl font-semibold text-white mb-2">{heading}</h3>
+            <p className="text-sm text-gray-100">{description}</p>
+          </div>
+        )}
+        {variant === 'horizontal' && (
+          <p className="text-sm text-gray-100">{description}</p>
+        )}
       </div>
     </div>
   );

src/components/ActionCardGrid.tsx

@@ -4,20 +4,22 @@ import ActionCard, { LocationIcon } from '@site/src/components/ActionCard';
 
 interface ActionCardGridProps {
   title: string;
+  id?: string;
   sections: {
     title: string;
     cards: {
       heading: string;
       description: string;
       iconColor?: string;
       cardColor?: string;
+      onClick?: () => void;
     }[];
   }[];
 }
 
-const ActionCardGrid: React.FC<ActionCardGridProps> = ({ title, sections }) => {
+const ActionCardGrid: React.FC<ActionCardGridProps> = ({ title, sections, id }) => {
   return (
-    <div className="relative p-8">
+    <div className="relative p-8" id={id}>
       {/* Main Title Section */}
       <div className="relative flex items-center mb-8">
         {/* Icon and Line Container */}
@@ -52,6 +54,7 @@ const ActionCardGrid: React.FC<ActionCardGridProps> = ({ title, sections }) => {
                   cardColor={card.cardColor as ColorOption}
                   heading={card.heading}
                   description={card.description}
+                  onClick={card.onClick}
                 />
               ))}
             </div>

src/constants/colors.ts

@@ -1,4 +1,4 @@
-export type ColorOption = 'green' | 'blue' | 'purple' | 'teal' | 'black' | 'white';
+export type ColorOption = 'green' | 'blue' | 'purple' | 'teal' | 'black' | 'white' | 'flowgreen';
 
 export const colors: Record<ColorOption, { light: string; dark: string }> = {
   green: {
@@ -25,4 +25,8 @@ export const colors: Record<ColorOption, { light: string; dark: string }> = {
     light: 'bg-white',
     dark: 'bg-gray-100',
   },
+  flowgreen: {
+    light: 'bg-[#01EF8B]',
+    dark: 'bg-[#01EF8B]'
+  },
 };

src/ui/design-system/src/index.ts

@@ -3,7 +3,7 @@ export { Heading } from './lib/Components/Heading'
 export type { HeadingProps } from './lib/Components/Heading'
 // export { InternalSidebar } from './lib/Components/InternalSidebar'
 export { LandingHeader } from './lib/Components/LandingHeader'
-export { LandingHeaderHome } from './lib/Components/LandingHeaderHome'
+export { LandingHeaderHome } from './lib/Components/HomeNav'
 export { LinkCard2Column } from './lib/Components/LinkCard2Column'
 export type { LinkCard2ColumnProps } from './lib/Components/LinkCard2Column'
 export { default as NetworkCard } from './lib/Components/NetworkCard'

src/ui/design-system/src/lib/Components/GoldStarPanel/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { colors } from '@site/src/constants/colors';
+import { useProgress } from '@site/src/hooks/use-progress';
+import { useCurrentUser } from '@site/src/hooks/use-current-user';
+
+export const GoldStarPanel: React.FC = () => {
+  const { getProgress } = useProgress();
+  const { user } = useCurrentUser();
+
+  const handleAskFlowAI = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    const el = document.querySelector('ask-cookbook') as HTMLElement & {
+      shadowRoot?: ShadowRoot;
+    };
+    if (!el) {
+      console.warn('ask-cookbook element not found');
+      return;
+    }
+
+    const shadow = el.shadowRoot;
+    if (!shadow) {
+      console.warn('ask-cookbook has no shadowRoot');
+      return;
+    }
+
+    const button = shadow.querySelector(
+      '#ask-cookbook-button',
+    ) as HTMLButtonElement;
+    if (!button) {
+      console.warn(
+        'Internal #ask-cookbook-button not found in the shadow root',
+      );
+      return;
+    }
+
+    button.click();
+  };
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <div className="flex gap-2">
+        <button
+          onClick={() => window.open('https://calendar.google.com/calendar/embed?src=c_47978f5cd9da636cadc6b8473102b5092c1a865dd010558393ecb7f9fd0c9ad0%40group.calendar.google.com', '_blank')}
+          className={`flex-1 ${colors.black.dark} text-white px-4 py-2 rounded-xl hover:bg-gray-700 appearance-none cursor-pointer border-0`}
+        >
+          Office Hours
+        </button>
+        <button
+          onClick={() => window.open('https://github.com/orgs/onflow/discussions', '_blank')}
+          className={`flex-1 ${colors.black.dark} text-white px-4 py-2 rounded-xl hover:bg-gray-700 appearance-none cursor-pointer border-0`}
+        >
+          Discussions
+        </button>
+        <button
+          onClick={handleAskFlowAI}
+          className={`flex-1 ${colors.black.dark} text-white px-4 py-2 rounded-xl hover:bg-gray-700 appearance-none cursor-pointer border-0`}
+        >
+          Ask Flow AI
+        </button>
+      </div>
+
+      <div className={`${colors.black.dark} p-6 rounded-lg shadow-lg flex-1`}>
+        <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+          <div className={`${colors.flowgreen.light} h-2.5 rounded-full`} style={{ width: `${user.loggedIn ? getProgress() * 100 : 0}%` }}></div>
+        </div>
+        <p className="text-sm text-gray-100 mt-2">
+          {user.loggedIn
+            ? `Profile Completion: ${Math.round(getProgress() * 100)}%`
+            : 'Please connect your wallet and create a profile'}
+        </p>
+      </div>
+    </div>
+  );
+};

src/ui/design-system/src/lib/Components/HomeHeader/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { NewsCarousel } from '../NewsCarousel';
+import { GoldStarPanel } from '../GoldStarPanel';
+
+export const HomeHeader: React.FC = () => {
+    return (
+        <div className="relative p-8">
+            <div className="relative pl-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pl-8">
+                    <div className="lg:col-span-2">
+                        <NewsCarousel />
+                    </div>
+                    <div>
+                        <GoldStarPanel />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};