fix: verseslideshow animation renders properly and remove multiple cards

Author: Awnder

src/components/VerseSlide.tsx

@@ -16,24 +16,8 @@ const VerseSlide: React.FC<VerseSlideProps> = ({
 }) => {
   return (
     <div className={cn("default-class", className)}>
-      <Card>
-        <CardHeader>
-          <CardTitle>{verseReference}</CardTitle>
-        </CardHeader>
-        {/* <AnimatePresence mode="wait">
-          <motion.div
-            key="verse"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-          > */}
-        <CardContent>
-          <blockquote className="text-lg italic mb-4">{verseText}</blockquote>
-        </CardContent>
-          {/* </motion.div>
-        </AnimatePresence> */}
-      </Card>
+        <blockquote className="text-lg">{verseReference}</blockquote>
+        <blockquote className="text-muted-foreground italic">{verseText}</blockquote>
     </div>
   );
 };

src/components/VerseSlideshow.tsx

@@ -29,7 +29,7 @@ const VerseSlideshow: React.FC<VerseSlideshowProps> = ({ className }) => {
 
   return (
     <div className={cn("default-class", className)}>
-      <AnimatePresence>
+      <AnimatePresence mode="wait">
         {Object.entries(verseReferences).map(
           ([reference, text], index) =>
             index === currentIndex && (
@@ -38,6 +38,7 @@ const VerseSlideshow: React.FC<VerseSlideshowProps> = ({ className }) => {
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
               >
                 <VerseSlide verseReference={reference} verseText={text} />
               </motion.div>

src/pages/Dashboard.tsx

@@ -307,10 +307,7 @@ const Dashboard: React.FC = () => {
 
       <div className="glass-card rounded-lg p-6 text-center">
         <h3 className="text-xl font-medium mb-3">Daily Inspiration</h3>
-        <blockquote className="text-lg italic mb-4"> "-- QUOTE HERE --"
-        </blockquote>
         <VerseSlideshow />
-        <p className="text-muted-foreground">Scripture Quote</p>
       </div>
     </motion.div>
   );