Merge pull request #11 from Awnder/scripture-encouragement

fix: verseslideshow animation renders properly and remove multiple cards

Author: JustinhSE

src/components/VerseSlide.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { cn } from "@/lib/utils";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { motion, AnimatePresence } from "framer-motion";
 
 interface VerseSlideProps {
   className?: string;
@@ -16,24 +14,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

@@ -306,10 +306,11 @@ const Dashboard: React.FC = () => {
       </div>
 
       <div className="glass-card rounded-lg p-6 text-center">
+        <h3 className="text-xl font-medium mb-3">Daily Inspiration</h3>
         <VerseSlideshow />
       </div>
     </motion.div>
   );
 };
 
-export default Dashboard;
+export default Dashboard;