feat: add section to native apps

build-trust · Dec 17, 2024 · 446dd2e · 446dd2e
1 parent bd8dc7a
commit 446dd2e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/content/landing-pages/snowflake.mdx b/src/content/landing-pages/snowflake.mdx
@@ -8,20 +8,28 @@ list_features: false
 examples:
   - name: Sync Snowflake to Postgres
     url: /blog/snowflake-push-postgres
+    description: Push a stream of changes from Snowflake tables or views to Postgres tables in a private Postgres database
   - name: Sync Postgres to Snowflake
     url: /blog/snowflake-pull-postgres
+    description: Pull a stream of changes from a private Postgres database into Snowflake tables
   - name: Query federated data in remote Postgres
     url: /blog/snowflake-query-postgres
+    description: Run custom queries on a remote Postgres database
   - name: Push from Snowflake to Kafka
     url: /blog/snowflake-push-kafka
+    description: Push a stream of changes from Snowflake tables or views to Kafka topics in a private Kafka cluster
   - name: Pull from Kafka to Snowflake
     url: /blog/snowflake-pull-kafka
+    description: Pull messages from Kafka topics located on a private server and insert them in Snowflake tables
   - name: Mount Snowflake Stages as a WebDAV filesystem
     url: /blog/snowflake-stage-data-webdav
-  - name: Expose Snowflake Stages as a private SFTP server
+    description: Use Ockam to securely access files in your stage via WebDAV
+  - name: Access Snowflake Stages as a private SFTP server
     url: /blog/snowflake-stage-data-sftp
+    description: Use Ockam to securely access files in your stage via SFTP
   - name: Query a private API from Snowflake using SQL
     url: /blog/snowflake-call-private-api
+    description: Call an API in your private network, using Snowflake stored procedures
 features:
   - title: Remove public API endpoints
     image: snowflake-architecture
@@ -47,6 +55,7 @@ features:
       and credentials are safely created, stored, rotated, and revoked 
       automagically so there's almost nothing to manage.
   - insert: examples
+    title: Setup the following Snowflake Native Apps within minutes...
   - title: No more shipping secrets
     image: shared-key-shipping-exposure-risk
     text: |

diff --git a/src/pages/for/[slug].tsx b/src/pages/for/[slug].tsx
@@ -119,10 +119,12 @@ const fieldsToMdx = async (fields: string[], frontmatter: Frontmatter): Promise<
 
 type ExamplesContainerProps = {
   examples: Example[];
+  title?: string;
 };
-const ExamplesContainer: FC<ExamplesContainerProps> = ({ examples }) => {
+const ExamplesContainer: FC<ExamplesContainerProps> = ({ examples, title }) => {
   return (
-    <FlexContainer>
+    <FlexContainer flexDirection="column">
+      <Title w="100%">{title}</Title>
       <Flex
         flexDirection={{ base: 'column', lg: 'row' }}
         gap={{ base: '1rem', lg: '1.5rem' }}
@@ -134,7 +136,7 @@ const ExamplesContainer: FC<ExamplesContainerProps> = ({ examples }) => {
         backdropFilter="blur(10px)"
         flexWrap="wrap"
       >
-        {examples.map(({ name, url }) => (
+        {examples.map(({ name, url, description }) => (
           <LinkBox
             borderRadius={{ base: '0.75rem' }}
             minW={{ base: '30%' }}
@@ -146,6 +148,7 @@ const ExamplesContainer: FC<ExamplesContainerProps> = ({ examples }) => {
             border="1px solid"
             borderColor="gray.200"
             backgroundColor="brand.500"
+            _hover={{ backgroundColor: 'brand.600' }}
           >
             <Text
               color="brand.800"
@@ -156,7 +159,7 @@ const ExamplesContainer: FC<ExamplesContainerProps> = ({ examples }) => {
               {name}
             </Text>
             <Text color="white" fontWeight={{ base: 500 }} fontSize={{ base: '1rem' }}>
-              {name}
+              {description}
             </Text>
             <LinkOverlay href={url} />
           </LinkBox>
@@ -251,10 +254,10 @@ const LandingPage: NextPageWithLayout<PageProps> = ({
       <WhiteContainer>
         <StackContainer>
           {features.map(
-            (feature, ix) =>
-              (!feature.insert && <FeatureContainer key={feature.title} {...feature} />) ||
+            (feature) =>
+              (!feature.insert && <FeatureContainer {...feature} />) ||
               (feature.insert && feature.insert === 'examples' && (
-                <ExamplesContainer key={`examples-${ix}`} examples={examples} />
+                <ExamplesContainer examples={examples} title={feature.title} />
               )),
           )}
         </StackContainer>

diff --git a/src/views/for/common/FormSection/index.tsx b/src/views/for/common/FormSection/index.tsx
@@ -9,6 +9,7 @@ import backgroundSrc from './assets/background.svg?url';
 type Example = {
   name: string;
   url: string;
+  description?: string;
 };
 type Props = {
   examples?: Example[];