From 5f8e19f5107b204de6bf79f85f166a81a91b3878 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 8 Jun 2026 05:42:34 +0000
Subject: [PATCH 1/3] Update Bible study series image layout

---
 src/components/BibleStudySection.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/BibleStudySection.tsx b/src/components/BibleStudySection.tsx
index fb66428..af37a8e 100644
--- a/src/components/BibleStudySection.tsx
+++ b/src/components/BibleStudySection.tsx
@@ -1,9 +1,12 @@
 
 import { Calendar, Clock, Users, Book } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { motion, useReducedMotion } from 'framer-motion';
 import FadeIn from './FadeIn';
 
 const BibleStudySection = () => {
+  const prefersReducedMotion = useReducedMotion();
+
   const expectations = [
     { label: 'Opening Prayer', desc: 'We begin each session centering our hearts on God' },
     { label: 'Scripture Reading', desc: "We dive deep into God's Word together" },
@@ -90,19 +93,26 @@ const BibleStudySection = () => {
 
           {/* Current Series */}
           <FadeIn from="right" delay={0.1}>
-            <div className="border border-gold/20 bg-gold/3 p-8 flex flex-col gap-5">
+            <div className="border border-gold/20 bg-gold/3 p-8 md:p-10 flex flex-col gap-6">
               <h4 className="font-sans text-xs tracking-[0.2em] uppercase font-semibold text-gold/80">
                 Current Series
               </h4>
-              <div className="overflow-hidden rounded-lg border border-gold/20 bg-tech-dark/40 aspect-video">
+              <motion.div
+                className="overflow-hidden rounded-lg border border-gold/20 bg-tech-dark/60 aspect-[4/5] max-h-[34rem]"
+                initial={prefersReducedMotion ? false : { opacity: 0, scale: 0.96 }}
+                whileInView={prefersReducedMotion ? undefined : { opacity: 1, scale: 1 }}
+                viewport={{ once: true, amount: 0.35 }}
+                transition={{ duration: 0.45, ease: 'easeOut' }}
+                whileHover={prefersReducedMotion ? undefined : { scale: 1.015 }}
+              >
                 <img
-                  src="https://github.com/user-attachments/assets/fb6912f0-2b24-4153-94b8-00596ae21506"
-                  alt="Current Bible study topic artwork for character study in 1 Samuel focused on David."
-                  className="w-full h-full object-cover"
+                  src="https://github.com/user-attachments/assets/3eeb6cce-50c9-438f-8f82-8bc28a2df355"
+                  alt="Christian studying at a laptop with scripture nearby and a symbolic warrior figure in the background."
+                  className="w-full h-full object-cover object-center"
                   loading="lazy"
                   decoding="async"
                 />
-              </div>
+              </motion.div>
               <h3 className="font-display text-3xl md:text-4xl font-light text-mist leading-tight">
                 Character Study in 1 Samuel
               </h3>

From 44a5f9935e401af33c92df40efdb79bc2dce3265 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 8 Jun 2026 05:43:14 +0000
Subject: [PATCH 2/3] Refine Bible study image motion constants

---
 src/components/BibleStudySection.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/BibleStudySection.tsx b/src/components/BibleStudySection.tsx
index af37a8e..b8a0861 100644
--- a/src/components/BibleStudySection.tsx
+++ b/src/components/BibleStudySection.tsx
@@ -6,6 +6,8 @@ import FadeIn from './FadeIn';
 
 const BibleStudySection = () => {
   const prefersReducedMotion = useReducedMotion();
+  const maxSeriesImageHeight = '34rem';
+  const seriesImageAnimationDuration = 0.45;
 
   const expectations = [
     { label: 'Opening Prayer', desc: 'We begin each session centering our hearts on God' },
@@ -98,11 +100,12 @@ const BibleStudySection = () => {
                 Current Series
               </h4>
               <motion.div
-                className="overflow-hidden rounded-lg border border-gold/20 bg-tech-dark/60 aspect-[4/5] max-h-[34rem]"
+                className="overflow-hidden rounded-lg border border-gold/20 bg-tech-dark/60 aspect-[4/5]"
+                style={{ maxHeight: maxSeriesImageHeight }}
                 initial={prefersReducedMotion ? false : { opacity: 0, scale: 0.96 }}
                 whileInView={prefersReducedMotion ? undefined : { opacity: 1, scale: 1 }}
                 viewport={{ once: true, amount: 0.35 }}
-                transition={{ duration: 0.45, ease: 'easeOut' }}
+                transition={{ duration: seriesImageAnimationDuration, ease: 'easeOut' }}
                 whileHover={prefersReducedMotion ? undefined : { scale: 1.015 }}
               >
                 <img

From eb5eb29a91a8b58c24ab87be0eeaa8692a414d35 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 8 Jun 2026 05:43:58 +0000
Subject: [PATCH 3/3] Polish Bible study image animation behavior

---
 src/components/BibleStudySection.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BibleStudySection.tsx b/src/components/BibleStudySection.tsx
index b8a0861..1ec8b09 100644
--- a/src/components/BibleStudySection.tsx
+++ b/src/components/BibleStudySection.tsx
@@ -102,11 +102,11 @@ const BibleStudySection = () => {
               <motion.div
                 className="overflow-hidden rounded-lg border border-gold/20 bg-tech-dark/60 aspect-[4/5]"
                 style={{ maxHeight: maxSeriesImageHeight }}
-                initial={prefersReducedMotion ? false : { opacity: 0, scale: 0.96 }}
+                initial={prefersReducedMotion ? undefined : { opacity: 0, scale: 0.96 }}
                 whileInView={prefersReducedMotion ? undefined : { opacity: 1, scale: 1 }}
                 viewport={{ once: true, amount: 0.35 }}
                 transition={{ duration: seriesImageAnimationDuration, ease: 'easeOut' }}
-                whileHover={prefersReducedMotion ? undefined : { scale: 1.015 }}
+                whileHover={prefersReducedMotion ? undefined : { scale: 1.02 }}
               >
                 <img
                   src="https://github.com/user-attachments/assets/3eeb6cce-50c9-438f-8f82-8bc28a2df355"