social media linking rough

Seasoned.Frontend/app/assets/css/app-theme.css

@@ -287,6 +287,25 @@ html, body {
   border-radius: 8px !important;
 }
 
+.public-cta-container {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 16px;
+  border: 1px dashed #dccca7;
+}
+
+.cta-title {
+  font-family: 'Libre Baskerville', serif !important;
+  color: #2e1e0a;
+  font-size: 1.8rem;
+}
+
+.cta-text {
+  font-family: 'Libre Baskerville', serif !important;
+  color: #5d4a36;
+  font-size: 1.1rem;
+  line-height: 1.6;
+}
+
 @media print {
   @page {
     margin: 0 !important;
@@ -308,7 +327,7 @@ html, body {
   .chat-container, .v-app-bar, .no-print, .separator, .v-divider, 
   .recipe-description, button, .v-btn, .drop-zone, .v-card-actions,
   .v-btn--variant-text, .v-btn--variant-elevated,
-  footer, .v-footer, .recipe-actions-row, .share-btn {
+  footer, .v-footer, .recipe-actions-row, .share-btn, .public-cta-container {
     display: none !important;
     visibility: hidden !important;
     opacity: 0 !important;

Seasoned.Frontend/app/components/RecipeDisplay.vue

@@ -41,7 +41,7 @@
 
       <v-row justify="center" class="mt-12 pb-10">
         <v-btn
-          class="print-btn px-12"
+          class="px=8 print-btn"
           size="large"
           elevation="0"
           @click="printRecipe"
@@ -51,7 +51,7 @@
         </v-btn>
 
         <v-btn
-          class="px-12 transition-swing"
+          class="px-8 transition-swing"
           size="large"
           elevation="0"
           :loading="isSaving"
@@ -72,7 +72,7 @@
         </v-btn>
 
         <v-btn
-          class="px-12 transition-swing"
+          class="px-8 transition-swing"
           size="large"
           elevation="0"
           :color="hasShared ? '#556b2f' : '#5d4a36'"
@@ -90,6 +90,24 @@
           </template>
         </v-btn>
       </v-row>
+      <v-fade-transition>
+        <div v-if="isPublicView" class="public-cta-container mt-16 text-center pa-8">
+          <v-divider class="mb-8 separator"></v-divider>
+          <h3 class="cta-title mb-4">Enjoyed this recipe?</h3>
+          <p class="cta-text mb-6">
+            Join <strong>Seasoned</strong> to scan your own family recipes, 
+            consult with the Chef, and build your digital archive.
+          </p>
+          <v-btn 
+            to="/login" 
+            class="auth-btn px-10" 
+            size="large"
+            elevation="4"
+          >
+            Start Your Collection
+          </v-btn>
+        </div>
+      </v-fade-transition>
     </div>
   </transition>
 </template>
@@ -112,10 +130,14 @@ const printRecipe = () => {
 }
 
 const shareRecipe = async () => {
+  const shareUrl = props.recipe.id 
+      ? `${window.location.origin}/recipe/${props.recipe.id}` 
+      : window.location.href;
+
   const shareData = {
     title: props.recipe.title,
-    text: `Check out this delicious ${props.recipe.title} recipe!`,
-    url: window.location.href
+    text: `Check out this delicious ${props.recipe.title} recipe on Seasoned!`,
+    url: shareUrl
   }
 
   try {
@@ -123,7 +145,7 @@ const shareRecipe = async () => {
       await navigator.share(shareData)
       triggerShareSuccess()
     } else {
-      await navigator.clipboard.writeText(window.location.href)
+      await navigator.clipboard.writeText(shareUrl)
       triggerShareSuccess()
     }
   } catch (err) {

Seasoned.Frontend/app/pages/recipe/[id].vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="recipe-bg min-h-screen">
+    <v-container>
+       <RecipeDisplay v-if="recipe" :recipe="recipe" :is-public-view="true" />
+       <v-progress-linear v-else indeterminate color="#8c4a32" />
+    </v-container>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+const config = useRuntimeConfig();
+
+const { data: recipe, error } = await useAsyncData(`recipe-${route.params.id}`, () => 
+  $fetch(`${config.public.apiBase}api/recipe/${route.params.id}`)
+)
+
+if (error.value || !recipe.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Recipe not found' })
+}
+
+useSeoMeta({
+  title: `${recipe.value.title} | Seasoned`,
+  ogTitle: `Chef's Choice: ${recipe.value.title}`,
+  description: `Check out this delicious recipe for ${recipe.value.title} on Seasoned.`,
+  ogDescription: `A hand-crafted parchment recipe for ${recipe.value.title}.`,
+  ogImage: recipe.value.imageUrl || '/images/seasoned-logo.png',
+  twitterCard: 'summary_large_image',
+  ogType: 'article',
+})
+</script>