diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index e075ad75..f3a92336 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -47,6 +47,7 @@ export { AddIcon, ArrowBackIcon, ArrowForwardIcon, + ArrowUpIcon, CalendarIcon, CheckIcon, ChevronDownIcon, diff --git a/packages/web/assets/octopus.png b/packages/web/assets/octopus.png new file mode 100644 index 00000000..7ce26f16 Binary files /dev/null and b/packages/web/assets/octopus.png differ diff --git a/packages/web/pages/seeds.tsx b/packages/web/pages/seeds.tsx index 58043157..aafe2175 100644 --- a/packages/web/pages/seeds.tsx +++ b/packages/web/pages/seeds.tsx @@ -1,4 +1,5 @@ import { + ArrowUpIcon, Box, Button, Flex, @@ -9,15 +10,21 @@ import { VStack, } from '@metafam/ds'; import Seeds from 'assets/menuIcon/seeds.svg'; +import Octopus from 'assets/octopus.png'; import SeedCardBg from 'assets/seed-card-bg.png'; import SeedsFlowChart from 'assets/seeds-flowchart.png'; import { PageContainer } from 'components/Container'; import { HeadComponent } from 'components/Seo'; import { useRouter } from 'next/router'; -import React from 'react'; +import React, { useRef } from 'react'; const SeedsPage: React.FC = () => { const router = useRouter(); + const topRef = useRef(null); + + function handleBackClick() { + topRef?.current?.scrollIntoView({ behavior: 'smooth' }); + } if (router.isFallback) { return ; @@ -39,6 +46,7 @@ const SeedsPage: React.FC = () => { pb={4} display="flex" flexDir="row" + ref={topRef} > Seeds{' '} @@ -57,6 +65,20 @@ const SeedsPage: React.FC = () => { {cardsData.map(({ title, description }) => ( ))} + + + + );