feat: add anchor links to sections

Added anchor links to the "Customer" and "Pains" sections for easy navigation within the page.

src/components/ProductCard.tsx

@@ -253,8 +253,6 @@ export const ProductCard = ({
     });
   }
 
-  console.log('faaaak', product.media.slice(0, 3));
-
   return (
     <VStack
       as={GatsbyLink}
@@ -330,8 +328,8 @@ export const ProductCard = ({
         <Text fontSize="sm" noOfLines={1}>
           {tags.otherString}
         </Text>
-        <Text fontWeight="semibold">{product.title}</Text>
-        <Text fontWeight="normal">{product.description}</Text>
+        <Text fontSize={"2xl"} fontWeight="bold">{product.title}</Text>
+        {/* <Text fontWeight="normal">{product.description}</Text> */}
         {/*{product.price}
         <Text fontSize="xs" color="gray.600" textAlign={'center'}>
           {taxable ? 'inkl.' : 'exkl.'} Ust.

src/components/navigation/AltTopNav.tsx

@@ -322,22 +322,32 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
                 }}
               /> */}
               <Button
-                variant="ghost"
-                ml={4}
-                filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
-                onClick={handleOnContactClick}
-                fontSize="sm"
-                fontWeight="semibold"
-                color="#273E53"
-                display={{ base: 'none', md: 'block' }}
-              >
-                Meine Beratung
-              </Button>
+                  variant="ghost"
+                  ml={4}
+                  filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
+                  onClick={() => {
+                    const element = document.getElementById('meine_beratung');
+                    if (element) {
+                      element.scrollIntoView({ behavior: 'smooth' });
+                    }
+                  }}
+                  fontSize="sm"
+                  fontWeight="semibold"
+                  color="#273E53"
+                  display={{ base: 'none', md: 'block' }}
+                >
+                  Meine Beratung
+                </Button>
               <Button
                 variant="ghost"
                 ml={4}
                 filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
-                onClick={handleOnContactClick}
+                onClick={() => {
+                  const element = document.getElementById('meine_kunden');
+                  if (element) {
+                    element.scrollIntoView({ behavior: 'smooth' });
+                  }
+                }}
                 fontSize="sm"
                 fontWeight="semibold"
                 color="#273E53"
@@ -357,7 +367,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
               >
                 Rezepte
               </Button>
-              <Button
+              {/* <Button
                 variant="ghost"
                 ml={4}
                 filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
@@ -368,7 +378,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
                 display={{ base: 'none', md: 'block' }}
               >
                 Blog
-              </Button>
+              </Button> */}
               <Button
                 ml={4}
                 filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"

src/components/sections/Customer.tsx

@@ -12,6 +12,7 @@ const Customer = () => {
 
   return (
     <Container
+      id='meine_kunden'
       maxW="8xl"
       as="section"
       p={16}

src/components/sections/LastCall.tsx

@@ -72,7 +72,7 @@ const LastCall = () => {
       <Image
         //mb="8"
         w={"500px"}
-        src="images/header-portrait-image.png"
+        src="/images/header-portrait-image.png"
         alt="Barbara"
       />
     </Container>

src/components/sections/Pains.tsx

@@ -24,6 +24,7 @@ const Pains = () => {
   };
   return (
     <Flex
+      id='meine_beratung'
       as="section"
       flexDir={{ base: 'column', lg: 'row' }}
       w={"full"}

src/components/sections/Portfolio/PortfolioGrid.tsx

@@ -35,7 +35,7 @@ const PortfolioGrid: FC<IPortfolioGridProps> = ({products, ...props}) => {
         console.log('my full index', index)
         console.log('!!!product!!!', product)
         return(
-          <ProductCard key={index} product={product} />
+          <ProductCard key={index} bcolor='#a0c1d9' product={product} />
         )
       })}
     </Grid>

src/components/sections/RecipeHero.tsx

@@ -25,6 +25,7 @@ import { FadeIn } from '../FadeIn';
 import { useContactModal } from '../../services/contact';
 import { UncontrolledMdxField } from 'jaen-fields-mdx';
 import SvgMdxEditor from '../mdx-editor/SvgMdxEditor';
+import { Interface } from 'readline';
 
 interface ScrollArrowsProps {
   isVisible: boolean;
@@ -61,7 +62,12 @@ const ScrollArrows: React.FC<ScrollArrowsProps> = ({ isVisible }) => {
   );
 };
 
-const RecipeHero: FC = () => {
+interface RecipeHeroProps {
+  defaultHeading: string;
+  defaultLead: string;
+}
+
+const RecipeHero: FC<RecipeHeroProps> = ({ defaultHeading, defaultLead }) => {
   const navOffset = useNavOffset();
 
   const isAuthenticated = useAuth().user !== null;
@@ -101,22 +107,22 @@ const RecipeHero: FC = () => {
       >
         <Box as={FadeIn} position="relative" gridArea="image">
           {/* <AspectRatio ratio={1 / 1.04} w="full" h="auto" maxH="700px"> */}
-            <Box position="relative" w="full" h="full">
-              <Box
-                defaultValue="/images/sweets-image-3.png"
-                name="RecipeHeroimage"
-                as={Field.Image}
-                alt="RecipeHero image"
-                objectFit="contain"
-                w="full"
-                h="full"
-                //ml={{ base: 8, md: 16 }}
-                sx={{
-                  //borderRadius: 'md',
-                  //filter: 'drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))'
-                }}
-              />
-              {/* <Image
+          <Box position="relative" w="full" h="full">
+            <Box
+              defaultValue="/images/sweets-image-3.png"
+              name="RecipeHeroimage"
+              as={Field.Image}
+              alt="RecipeHero image"
+              objectFit="contain"
+              w="full"
+              h="full"
+              //ml={{ base: 8, md: 16 }}
+              sx={{
+                //borderRadius: 'md',
+                //filter: 'drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))'
+              }}
+            />
+            {/* <Image
                 src="images/header-portrait-image.png"
                 alt="RecipeHero image"
                 objectFit="cover"
@@ -127,7 +133,7 @@ const RecipeHero: FC = () => {
                   //filter: 'drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))'
                 }}
               /> */}
-            </Box>
+          </Box>
           {/* </AspectRatio> */}
         </Box>
         <VStack pt={`calc(${navOffset})`} as={FadeIn} spacing={4} align="left" gridArea="content" pr={{ base: 8, md: 16 }}>
@@ -144,23 +150,38 @@ const RecipeHero: FC = () => {
             Gesund<chakra.span color="brand.500">·</chakra.span>Einfach
             <chakra.span color="brand.500">·</chakra.span>Ehrlich
           </Heading>
-          <Field.Text
+          {/* <Field.Text
             as={Heading}
             fontSize={{ base: '2xl', lg: '4xl' }}
             lineHeight={1}
             fontWeight="900"
             textAlign="left"
             name="RecipeHeroTitle"
-            defaultValue="Mega Brain Food: Overnight Oats"
+            defaultValue={defaultHeading} // "Mega Brain Food: Overnight Oats"
           />
           <Field.Text
             as={Text}
             fontSize={'lg'}
             opacity={0.5}
             textAlign="left"
             name="RecipeHeroLead"
-            defaultValue="Werde dir bewusst, wie deine Ernährung Körper und Geist beeinflusst – und erlerne die Kunst, dein Wohlbefinden gezielt zu steuern."
-          />
+            defaultValue={defaultLead} //"Werde dir bewusst, wie deine Ernährung Körper und Geist beeinflusst – und erlerne die Kunst, dein Wohlbefinden gezielt zu steuern."
+          /> */}
+          <Heading
+            fontSize={{ base: '2xl', lg: '4xl' }}
+            lineHeight={1}
+            fontWeight="900"
+            textAlign="left"
+          >
+            {defaultHeading}
+          </Heading>
+          <Text
+            fontSize={'lg'}
+            opacity={0.5}
+            textAlign="left"
+          >
+            {defaultLead}
+          </Text>
         </VStack>
         <Box gridArea="customer" p={16}>
           {/* <Text>Customer Testimonials or Data</Text> */}

src/components/sections/Special.tsx

@@ -50,35 +50,35 @@ const Special = () => {
       />
       <HStack justifyContent="space-between" mb={8}>
         <Image
-          src="images/svg/grapes.svg"
+          src="/images/svg/grapes.svg"
           alt="grapes"
         />
         <Image
-          src="images/svg/cup.svg"
+          src="/images/svg/cup.svg"
           alt="cup"
         />
         <Image
-          src="images/svg/apple.svg"
+          src="/images/svg/apple.svg"
           alt="apple"
         />
         <Image
           display={{ base: 'none', lg: 'block' }}
-          src="images/svg/spaghetti.svg"
+          src="/images/svg/spaghetti.svg"
           alt="spaghetti"
         />
         <Image
           display={{ base: 'none', lg: 'block' }}
-          src="images/svg/fish.svg"
+          src="/images/svg/fish.svg"
           alt="fish"
         />
         <Image
           display={{ base: 'none', lg: 'block' }}
-          src="images/svg/cut_mushroom.svg"
+          src="/images/svg/cut_mushroom.svg"
           alt="cut mushroom"
         />
         <Image
           display={{ base: 'none', lg: 'block' }}
-          src="images/svg/wine_glass.svg"
+          src="/images/svg/wine_glass.svg"
           alt="wine glass"
         />
       </HStack>

src/hooks/use-products.tsx

@@ -53,13 +53,15 @@ export interface IJaenProduct {
 // Limit products count to 3 (sort by date)
 export const useJaenProducts = (
   productIndex: any,
-  cmsmedia: any,
+  cmsmediapage: any,
   options?: {unlimited?: boolean}
 ) => {
   const index = productIndex
 
   // override index children to exclude a blog page if it is the current page
   const {jaenPage} = usePageContext()
+  // productHandle is the buildpath with removed starting slash
+  const productHandle = jaenPage.buildPath.slice(1)
 
   // const globalMedia = (cms.childPages.find(
   //   child => child.id === 'JaenPage /cms/media/'
@@ -70,12 +72,18 @@ export const useJaenProducts = (
   //     }
   //   }
   // })['IMA:MEDIA_NODES'].media_nodes.value
-
-  const globalMedia = cmsmedia
+  const sectionFieldName = 'content'
+  const globalMedia = (cmsmediapage?.jaenFields || {
+      'IMA:MEDIA_NODES': {
+        media_nodes: {
+          value: {}
+        }
+      }
+    })['IMA:MEDIA_NODES'].media_nodes.value
 
   const products: IJaenProduct[] = index.childPages
     .filter((child: { id: string }) => child.id !== jaenPage.id)
-    .map((jaenPage: { id: any; slug: any; jaenPageMetadata: { description: any; title: any; blogPost: { date: any }; image: any }; mediaNodes: any[]; sections: any[] }) => ({
+    .map((jaenChildPage: { id: any; slug: any; jaenPageMetadata: { description: any; title: any; blogPost: { date: any }; image: any }; mediaNodes: any[]; sections: any[] }) => ({
       variants: [
         {
           id: 'VariantId',
@@ -90,20 +98,23 @@ export const useJaenProducts = (
       hasOnlyDefaultVariant: true,
       id: jaenPage.id,
       shopifyId: 'your-shopify-id',
-      handle: "products/" + jaenPage.slug || 'none',
-      description: jaenPage.jaenPageMetadata?.description || '',
-      descriptionHtml: jaenPage.jaenPageMetadata?.description || '',
-      title: jaenPage.jaenPageMetadata?.title || '',
+      handle: productHandle + jaenChildPage.slug || 'none',
+      description: jaenChildPage.jaenPageMetadata?.description || '',
+      descriptionHtml: jaenChildPage.jaenPageMetadata?.description || '',
+      title: jaenChildPage.jaenPageMetadata?.title || '',
       tags: ['New', 'T-Shirt', 'Summer'],
       status: 'ACTIVE' as 'ACTIVE' | 'DRAFT' | 'ARCHIVED',
       totalInventory: 100, // Assuming available inventory
-      createdAt: jaenPage.jaenPageMetadata?.blogPost?.date || '',
+      createdAt: jaenChildPage.jaenPageMetadata?.blogPost?.date || '',
       vendor: 'VendorName',
       productType: 'ProductType',
-      media: jaenPage.sections
-      ?.find(section => section.fieldName === 'productImageSection')
-      ?.items.map((item: { jaenFields: any; id: any; altText: any }) => {
-
+      media: jaenChildPage.sections
+      ?.find(section => section.fieldName === sectionFieldName)
+      // filter out all items that arent IMA:ImageField
+      ?.items.filter((item: { jaenFields: { [x: string]: any } }) => item.jaenFields['IMA:ImageField'])
+      ?.map((item: { jaenFields: any; id: any; altText: any }) => {
+        console.log("!!imageID", item.jaenFields)
+
         const imageId = (item.jaenFields || {
           'IMA:ImageField': {
             image: {
@@ -122,9 +133,10 @@ export const useJaenProducts = (
           }
         }
       }) || [],
-      featuredMedia: jaenPage.sections
-      ?.find(section => section.fieldName === 'productImageSection')
-      ?.items.map((item: { jaenFields: any; id: any; altText: any }) => {
+      featuredMedia: jaenChildPage.sections
+      ?.find(section => section.fieldName === sectionFieldName)
+      ?.items.filter((item: { jaenFields: { [x: string]: any } }) => item.jaenFields['IMA:ImageField'])
+      ?.map((item: { jaenFields: any; id: any; altText: any }) => {
 
         const imageId = (item.jaenFields || {
           'IMA:ImageField': {
@@ -146,8 +158,10 @@ export const useJaenProducts = (
       })?.[0] || null,
       metafields: [], // Assuming empty: provide actual values based on your setup
       index: index,
+      indexPage: jaenPage,
+      childPage: jaenChildPage,
       gmedia: globalMedia,
-      sections: jaenPage.sections
+      sections: jaenChildPage.sections
         ?.find(section => section.fieldName === 'productImageSection')
         ?.items.map((item: { jaenFields: any; id: any; altText: any }) => {