add icons to all products

Author: 0xa3k5

website/src/HomePage.tsx

@@ -3,7 +3,7 @@ import { useData } from 'nextra/hooks'
 import type { ComponentPropsWithoutRef } from 'react'
 
 import { classNames, Link as LegacyLink, Tooltip } from '@edgeandnode/gds'
-import { Clock, GraphExplorer, SocialYouTube, Subgraph, Substreams } from '@edgeandnode/gds/icons'
+import { Clock, Firehose, GraphExplorer, GraphNode, SocialYouTube, Subgraph, Substreams, SubstreamsPoweredSubgraph } from '@edgeandnode/gds/icons'
 import { NetworkIcon } from '@edgeandnode/go'
 
 import { Card, Heading, Link } from '@/components'
@@ -68,16 +68,31 @@ export default function HomePage() {
                 title={t('index.products.sps.title')}
                 description={t('index.products.sps.description')}
                 cta={<Link href="/sps/tutorial/">{t('index.products.sps.cta')}</Link>}
+                icon={
+                  <div className="flex size-8 items-center justify-center rounded-4 bg-white-8 text-white">
+                    <SubstreamsPoweredSubgraph size={4} />
+                  </div>
+                }
               />
               <Card
                 title={t('index.products.graphNode.title')}
                 description={t('index.products.graphNode.description')}
                 cta={<Link href="/indexing/tooling/graph-node/">{t('index.products.graphNode.cta')}</Link>}
+                icon={
+                  <div className="flex size-8 items-center justify-center rounded-4 bg-white-8 text-white">
+                    <GraphNode size={4} />
+                  </div>
+                }
               />
               <Card
                 title={t('index.products.firehose.title')}
                 description={t('index.products.firehose.description')}
                 cta={<Link href="/indexing/tooling/firehose/">{t('index.products.firehose.cta')}</Link>}
+                icon={
+                  <div className="flex size-8 items-center justify-center rounded-4 bg-white-8 text-white">
+                    <Firehose size={4} />
+                  </div>
+                }
               />
             </div>
           </div>