view file & image

client/src/components/Navigation.astro

@@ -8,7 +8,7 @@
 			<!-- Logo/Brand -->
 			<div class="flex items-center">
 				<a href="/" class="text-xl font-bold text-gray-800 hover:text-gray-600 transition-colors">
-					Pole Sport
+					Pole Book
 				</a>
 			</div>
 			

client/src/pages/elements/[...id].astro

@@ -1,5 +1,5 @@
 ---
-import MardownContent from '../../components/MardownContent.astro';
+import ElementView from '../../views/ElementView.astro';
 import Layout from '../../layouts/Layout.astro';
 
 import fetchApi from '../../lib/strapi';
@@ -25,6 +25,5 @@ try {
 
 ---
 <Layout title={poleElement.name} description={poleElement.description}>
-  <h1>{poleElement.name}</h1>
+  <ElementView entry={{ data: poleElement }} />
-  {poleElement.description && <MardownContent content={poleElement.description} />}
 </Layout>

client/src/views/ElementView.astro

@@ -1,21 +1,41 @@
 ---
 import MardownContent from '../components/MardownContent.astro';
+import { getStrapiMedia } from '../lib/strapi';
+import { getStrapiBaseUrl } from '../config/strapi';
 
 interface Props {
   entry: {
     data: {
-      title: string;
+      name: string;
       description: string;
+      mainImage: {
+        url: string;
+        alternativeText: string;
+      };
     };
   };
 }
 
 const { entry } = Astro.props;
+const BASE_URL = getStrapiBaseUrl();
 ---
-
 <div class="element-view">
-  <h1>{entry.data.title}</h1>
+  <div class="element-content">
-  <MardownContent content={entry.data.description} />
+    <div class="element-text">
+      <h1>{entry.data.name}</h1>
+      <MardownContent content={entry.data.description} />
+    </div>
+    
+    {entry.data.mainImage && (
+      <div class="element-image">
+        <img
+          src={getStrapiMedia(entry.data.mainImage.url, BASE_URL)}
+          alt={entry.data.mainImage.alternativeText}
+          class="main-image"
+        />
+      </div>
+    )}
+  </div>
 </div>
 
 <style>
@@ -25,6 +45,20 @@ const { entry } = Astro.props;
     margin-right: auto;
   }
   
+  .element-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+  
+  .element-text {
+    order: 2;
+  }
+  
+  .element-image {
+    order: 1;
+  }
+  
   .element-view h1 {
     font-size: 2.25rem;
     font-weight: 700;
@@ -33,4 +67,36 @@ const { entry } = Astro.props;
     margin-top: 2rem;
     line-height: 1.2;
   }
+  
+  .main-image {
+    width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+  
+  /* Desktop styles */
+  @media (min-width: 768px) {
+    .element-content {
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 3rem;
+    }
+    
+    .element-text {
+      order: 1;
+      flex: 1;
+    }
+    
+    .element-image {
+      order: 2;
+      flex-shrink: 0;
+      width: 300px;
+    }
+    
+    .main-image {
+      width: 300px;
+      height: auto;
+    }
+  }
 </style>