albums in a page llink to the markketplace

Author: Daveed

src/components/albums.grid.tsx

@@ -11,6 +11,7 @@ import {
   AspectRatio,
 } from '@mantine/core';
 import { IconUsers } from '@tabler/icons-react';
+import config from '../config';
 
 interface AlbumCardProps {
   album: Album;
@@ -25,7 +26,7 @@ interface AlbumsProps {
 function AlbumCard({ album, store_slug }: AlbumCardProps) {
 
   return (
-    <a href={`#/${store_slug}/${album.slug}`} style={{ textDecoration: 'none' }}>
+    <a href={new URL(`/store/${store_slug}/${album.slug}`, config.markket_url).toString()} style={{ textDecoration: 'none' }}>
       <Card
         shadow="sm"
         padding="lg"

src/components/home.page.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Container, Paper, Stack, Image, Title, Button, Group } from '@mantine/core'
+import {
+  Container, Paper, Stack, Image, Title, Button, Box, Overlay,
+  Group
+} from '@mantine/core'
 import { IconHeartbeat } from '@tabler/icons-react'
 import ReactMarkdown from 'react-markdown'
 import PageContent  from './page.content'
@@ -16,48 +19,80 @@ interface PageProps {
 
 const PageComponent = ({ page, store }: PageProps) => {
   return (
-          <Container size="md" py="xl" id={window.location.hash?.replace('#', '')}>
-            <Paper shadow="md" radius="md" p="xl" mb="xl">
-              <Stack align="center">
-                {store?.Logo && (
-                  <Image
-                    src={store.Logo.formats?.small?.url || store.Logo.url}
-                    alt={store.title}
-                    width={200}
-                    height={200}
-                    fit="contain"
-                  />
-                )}
+    <Container size="md" py="xl">
+      <Box pos="relative" h={300} mb={50}>
+        <Box
+          style={{
+            backgroundImage: `url(${store?.Cover?.url || store?.SEO?.socialImage?.url || ''})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            height: '100%',
+            width: '100%',
+          }}
+        >
+          <Overlay
+            gradient="linear-gradient(180deg, rgba(36, 85, 214, 0.2) 0%, rgba(36, 85, 214, 0.4) 100%)"
+            opacity={0.6}
+            zIndex={1}
+          />
+        </Box>
 
-                <Title order={1}>
-                  {store?.title}
-                </Title>
-
-                {store?.Description && (
-                  <div className="blocks-content">
-                    <ReactMarkdown >
-                      {store.Description}
-                    </ReactMarkdown>
-                  </div>
-                )}
-
-                {store?.URLS?.length && (
-                  <Group mt="md">
-                    {store.URLS.map((url) => (
-                      <Button
-                        key={url.id}
-                        component="a"
-                        href={url.URL}
-                        target="_blank"
-                        variant="light"
-                      >
-                        <IconHeartbeat size={18} />{` `}
-                        {url.Label}
-                      </Button>
-                    ))}
-                  </Group>
-                )}
-              </Stack>
+        <Paper
+          pos="absolute"
+          left="50%"
+          style={{ transform: 'translate(-50%, 50%)' }}
+          bottom={0}
+          shadow="xl"
+          p="xs"
+          withBorder
+          radius="md"
+          bg="white"
+          className="z-10"
+        >
+          {store?.Logo?.url && (
+            <img
+              src={store.Logo.url}
+              alt={store.SEO?.metaTitle}
+              width={150}
+              height={150}
+              className="rounded-md object-contain"
+            />
+          )}
+        </Paper>
+      </Box>
+      <Paper shadow="md" radius="md" p="xl" mb="xl">
+        <Container size="lg" className="pb-20 pt-10">
+          <Stack gap="xl">
+            <Title className="text-4xl text-center md:text-5xl mb-4">
+              {store?.title || store?.SEO?.metaTitle}
+            </Title>
+          </Stack>
+        </Container>
+        <Stack align="center">
+          {store?.Description && (
+            <div className="blocks-content">
+              <ReactMarkdown >
+                {store.Description}
+              </ReactMarkdown>
+            </div>
+          )}
+          {store?.URLS?.length && (
+            <Group mt="md">
+              {store.URLS.map((url) => (
+                <Button
+                  key={url.id}
+                  component="a"
+                  href={url.URL}
+                  target="_blank"
+                  variant="light"
+                >
+                  <IconHeartbeat size={18} />{` `}
+                  {url.Label}
+                </Button>
+              ))}
+            </Group>
+          )}
+        </Stack>
       </Paper>
       {page && (
         <Paper className='blocks-content' shadow="md" radius="md" p="xl" mb="xl">

src/config.ts

@@ -1,9 +1,11 @@
 const STRAPI_URL = process.env.REACT_APP_STRAPI_URL || 'https://api.markket.place';
 const STORE_SLUG = process.env.REACT_APP_STORE_SLUG || 'markket';
+const MARKKET_URL = process.env.REACT_APP_MARKKET_URL || 'https://de.markket.place/';
 
 const config = {
   api_url: STRAPI_URL,
   store_slug: STORE_SLUG,
+  markket_url: MARKKET_URL,
 };
 
 export default config;