Update

resources/js/pages/memes/show.tsx

@@ -1,10 +1,12 @@
 import { MemeCard } from '@/components/custom/meme-card';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { KeywordBadge } from '@/components/ui/keyword-badge';
 import { Spinner } from '@/components/ui/spinner';
 import Footer from '@/pages/home/partials/Footer';
 import { Link } from '@inertiajs/react';
+import { ArrowLeft } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { route } from 'ziggy-js';
 import BrandLogo from '../home/partials/BrandLogo';
@@ -82,7 +84,7 @@ export default function MemeShow({ meme, relatedMemes }: Props) {
                     <div className="container mx-auto mb-6 space-y-2 px-4 text-center">
                         <h1 className="text-foreground text-3xl font-bold">{meme.name} Meme</h1>
                         <h2 className="text-muted-foreground">
-                            Use our video meme editor to customise your {meme.name} meme and save to a video in minutes!
+                            Use our video meme editor to customise your {meme.name} meme and export as MP4 video in minutes!
                         </h2>
                     </div>
                     {isClient && Editor ? (
@@ -104,9 +106,10 @@ export default function MemeShow({ meme, relatedMemes }: Props) {
                         <Card className="h-auto">
                             <CardHeader>
                                 <CardTitle className="text-lg">Know Your Meme</CardTitle>
-                                <CardDescription>Learn more about {meme.name} meme!</CardDescription>
+                                <CardDescription className="hidden"></CardDescription>
                             </CardHeader>
                             <CardContent>
+                                <b>Description: </b>
                                 {meme.description && (
                                     <div className="mb-4">
                                         <p className="text-muted-foreground text-sm leading-relaxed">{meme.description}</p>
@@ -139,6 +142,16 @@ export default function MemeShow({ meme, relatedMemes }: Props) {
                             </Card>
                         )}
                     </div>
+
+                    {/* Back to Meme Library Button */}
+                    <div className="mt-8 text-center">
+                        <Link href={route('memes.index')}>
+                            <Button variant="outline" size="lg" className="gap-2">
+                                <ArrowLeft className="h-4 w-4" />
+                                Back to Meme Library
+                            </Button>
+                        </Link>
+                    </div>
                 </div>
                 <Footer />
                 {/* <AuthUser /> */}