Fix getstarted buttons

Author: erikvansebille

src/components/getstarted.js

@@ -1,4 +1,9 @@
 import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
   Box,
   Button,
   Container,
@@ -17,32 +22,48 @@ import { Heading } from '@/components/mdx'
 
 export const GetStarted = () => {
   const getstarted = React.useMemo(() => data, [])
+  const [activeIndex, setActiveIndex] = React.useState(null)
   return (
     <Box id={'getstarted'} as='section'>
       <Container maxW='container.lg' centerContent>
         <Heading as='h1' size='2xl'>
           Get started as
         </Heading>
 
-        <Box my={8}>
+        <Box my={0} width='100%'>
           <Grid
-            templateColumns={`repeat(${getstarted.length}, minmax(auto, max-content))`}
+            templateColumns={`repeat(${getstarted.length}, 1fr)`}
             gap={6}
-            my={4}
-            justifyContent='center'
+            my={0}
+            width='100%'
           >
-            {getstarted.map((getstarted, index) => (
+            {getstarted.map((item, index) => (
               <Button
-                useExternalIcon
-                as={Link}
-                // variant={'outline'}
-                colorScheme={'blue'}
-                href='{getstarted.url}'
+                key={index}
+                bg='blue.400'
+                color='white'
+                _hover={{ bg: 'blue.700' }}
+                borderRadius='md'
+                width='100%'
+                height='64px'
+                fontSize='2xl'
+                fontWeight='bold'
+                onClick={() =>
+                  setActiveIndex(activeIndex === index ? null : index)
+                }
+                display='flex'
+                alignItems='center'
+                justifyContent='center'
               >
-                {getstarted.name}
+                {item.name}
               </Button>
             ))}
           </Grid>
+          {activeIndex !== null && (
+            <Box mt={4} width='100%'>
+              <Text fontSize={'lg'}>{getstarted[activeIndex].text}</Text>
+            </Box>
+          )}
         </Box>
       </Container>
     </Box>

src/data/getstarted.js

@@ -1,26 +1,18 @@
 export const GetStarted = [
   {
     name: 'Learner',
-    // logo_light: '/funders-logos/UUlogo.png',
-    // logo_dark: '/funders-logos/UUlogo_dia.png',
-    // url: 'https://www.uu.nl/en',
+    text: 'As a learner, you will ...',
   },
   {
     name: 'Educator',
-    // logo_light: '/funders-logos/NIOZlogo.png',
-    // logo_dark: '/funders-logos/NIOZlogo.png',
-    // url: 'https://www.nioz.nl/en',
+    text: 'As an educator, you can use the VirtualShip to ...',
   },
   {
     name: 'Researcher',
-    // logo_light: '/funders-logos/NKOlogo.png',
-    // logo_dark: '/funders-logos/NKOlogo.png',
-    // url: 'https://www.nko.nl/en',
+    text: 'As a researcher, you can use the VirtualShip to ...',
   },
   {
     name: 'Developer',
-    // logo_light: '/funders-logos/NKOlogo.png',
-    // logo_dark: '/funders-logos/NKOlogo.png',
-    // url: 'https://www.nko.nl/en',
+    text: 'As a developer, you can help improve VirtualShip by ...',
   },
 ]