Add new doc set selection cards

src/___new___/components/InnerLayout/innerLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import SelectDocs from '../SelectDocs';
+import SelectDocSet from '../SelectDocSet';
 import HomepageHeader from '../HomepageHeader';
 import ProductComparison from '../ProductComparison';
 import ProductInfo from '../ProductInfo';
@@ -24,7 +24,7 @@ export default function Home() {
 
       <Grid
         gap={0}
-        templateAreas={'"selectdocs"  "productinfo" "productcomparison" "featuretablecomparison" '}
+        templateAreas={'"selectdocset"  "productinfo" "productcomparison" "featuretablecomparison" '}
         templateColumns={'1fr'}
         // note: just loose heights for now, not based on wireframes, please change!
         //minmax(720px, max-content) for explore
@@ -33,11 +33,11 @@ export default function Home() {
         }
       >
         <GridItem
-          gridArea='selectdocs'
+          gridArea='selectdocset'
           as='section'
           data-testid='selectdocs-section'
         >
-          <SelectDocs isDarkMode={isDarkMode} />
+          <SelectDocSet isDarkMode={isDarkMode} />
         </GridItem>
 
         <GridItem

src/___new___/components/SelectDocSet/index.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Box, Flex, Text, SystemStyleObject, Stack, Heading, Button } from '@chakra-ui/react';
+import { ArrowForwardIcon } from '@chakra-ui/icons';
+import Link from '@docusaurus/Link';
+
+import { heading2Styles } from '../styles';
+import {
+  sectionOuterStyles,
+  rectangleStyle,
+  stackStyle,
+  headerTextStyle,
+} from './styles';
+
+import { docCardsInfo } from '../../data/docCardsInfo';
+
+interface SelectDocsProps {
+  sx?: SystemStyleObject;
+  isDarkMode: boolean;
+}
+
+const SelectDocs: React.FC<SelectDocsProps> = ({ isDarkMode, ...rest }) => (
+  <Flex
+    sx={sectionOuterStyles(isDarkMode)}
+    {...rest}
+    flexDirection="column"
+  >
+    <Heading
+      as='h2'
+      size='md'
+      sx={{ ...heading2Styles(isDarkMode), ...headerTextStyle }}
+      textAlign="center"
+      mb={10}
+    >
+      Products
+    </Heading>
+
+    <Stack
+      sx={stackStyle}
+      direction={['column', 'column', 'column', 'column', 'row', 'row', 'row']}
+      spacing={6}
+      alignItems="stretch"
+      justifyContent="center"
+    >
+      {docCardsInfo.map((info, index) => (
+        <Link
+          key={index}
+          href={info.link}
+          style={{ textDecoration: 'none', display: 'flex' }}
+        >
+          <Box
+            role="group"
+            sx={{
+              ...rectangleStyle,
+              maxWidth: '400px',
+              width: '100%',
+              height: 'auto',
+              backgroundColor: 'white',
+              cursor: 'pointer',
+              transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+            }}
+            _hover={{
+              transform: 'translateY(-4px)',
+              boxShadow: 'lg',
+            }}
+            flex="1 1 auto"
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            // Changed from 'center' to 'flex-start' for left alignment
+            alignItems="flex-start"
+            textAlign="left"
+            padding="40px 24px"
+            gap="16px"
+          >
+            <Box width="100%">
+              <Heading as="h3" size="md" mb={4} color="black">
+                {info.heading}
+              </Heading>
+              <Text fontSize="sm" color="gray.700">
+                {info.caption}
+              </Text>
+            </Box>
+
+            <Box mt={8}>
+              <Button
+                variant="unstyled"
+                display="inline-flex"
+                alignItems="center" // Keeps text and arrow vertically aligned
+                rightIcon={<ArrowForwardIcon />}
+                color="black"
+                fontWeight="bold"
+                fontSize="md"
+                height="auto"
+                p={0}
+                pointerEvents="none"
+              >
+                Go to documentation
+              </Button>
+            </Box>
+          </Box>
+        </Link>
+      ))}
+    </Stack>
+  </Flex>
+);
+
+export default SelectDocs;

src/___new___/components/SelectDocSet/styles.ts

@@ -0,0 +1,71 @@
+export default {};
+
+export const sectionOuterStyles = (hasDarkBg: boolean) => ({
+  flexDirection: 'column',
+  h: 'auto',
+  w: '100%',
+  bg: hasDarkBg ? 'tigeraBlack' : 'tigeraGrey.100',
+  pb: '60px',
+});
+
+export const stackStyle = {
+  justifyContent: 'center',
+  h: 'auto',
+  alignItems: 'center',
+  mb: -2,
+  px: [4, 0],
+};
+
+export const headerTextStyle = {
+  textAlign: 'center',
+  pt: 14,
+  mb: 4,
+};
+
+export const subHeaderTextStyle = {
+  fontWeight: '600',
+  textAlign: 'center',
+  mt: 7,
+  fontSize: '2xl',
+  lineHeight: 9,
+};
+
+export const innerTextStyle = {
+  textAlign: 'center',
+  fontSize: 'xl',
+  fontWeight: 'normal',
+  color: 'tigeraGrey.800',
+  mx: '44px',
+  mb: 10,
+  mt: 2,
+  lineHeight: 8,
+};
+
+export const iconContainerStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  pt: '44px',
+};
+
+export const iconStyle = {
+  width: 32,
+  height: 32,
+};
+
+export const rectangleStyle = {
+  minW: ['290px', '371px'],
+  border: '1px',
+  borderColor: 'tigeraCloudGrey',
+  borderRadius: 'lg',
+  bg: 'tigeraWhite',
+  ml: [0, 4],
+  mr: [0, 4],
+  mt: [4, 4, 4, 4, ''],
+  mb: [4, 4, 4, 4, ''],
+  pb: '40px',
+};
+
+export const actionBoxStyles = {
+  mb: 14,
+  justifyContent: 'center',
+};

src/___new___/data/docCardsInfo.ts

@@ -0,0 +1,19 @@
+// data/docsCardsData.ts
+
+export const docCardsInfo = [
+  {
+    heading: 'Calico Open Source',
+    caption: 'Open source networking and network security for containers and VMs.',
+    link: '/calico/latest/about',
+  },
+  {
+    heading: 'Calico Enterprise',
+    caption: 'Advanced security and observability for multi-cluster deployments.',
+    link: '/calico-enterprise/latest/about',
+  },
+  {
+    heading: 'Calico Cloud',
+    caption: 'A full-stack security service for your cloud-native applications.',
+    link: '/calico-cloud/about',
+  },
+];