From 026fc0d0f35a09741935b8928312d95bf0eb950a Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 28 Apr 2026 18:51:00 +0300
Subject: [PATCH 1/3] Bob AI: Implement the component's structure to display
 pet photos an

---
 src/components/sections/other/TeamPets.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/other/TeamPets.tsx b/src/components/sections/other/TeamPets.tsx
index e881a05..c6add6f 100644
--- a/src/components/sections/other/TeamPets.tsx
+++ b/src/components/sections/other/TeamPets.tsx
@@ -64,16 +64,16 @@ export default function TeamPets({
         </div>
 
         <ScrollReveal variant="slide-up">
-          <div className="flex flex-col md:flex-row justify-center items-center pt-8 md:pl-8">
-            {pets.map((pet, index) => (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-8">
+            {pets.map((pet) => (
               <Card 
                 key={pet.name} 
-                className={`flex flex-col items-center p-4 w-64 -mt-8 md:mt-0 md:-ml-8 first:mt-0 md:first:ml-0 hover:-translate-y-2 transition-transform ${index % 2 === 0 ? 'rotate-1' : '-rotate-1'} shadow-xl`}
+                className="flex flex-col items-center p-4 hover:-translate-y-2 transition-transform shadow-xl"
               >
                 <div className="w-full aspect-square rounded overflow-hidden mb-4">
                   <ImageOrVideo imageSrc={pet.imageSrc} className="w-full h-full object-cover" />
                 </div>
-                <h3 className="text-xl font-medium">{pet.name}</h3>
+                <div className="text-xl text-foreground font-semibold">{pet.name}</div>
               </Card>
             ))}
           </div>
-- 
2.49.1


From 3058e8ca382c32b30d7d78df7cc8cdd9e6c67697 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 28 Apr 2026 18:53:00 +0300
Subject: [PATCH 2/3] Bob AI: Import and add the new 'TeamPetsSection'
 component to the ho

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

diff --git a/src/components/sections/other/TeamPets.tsx b/src/components/sections/other/TeamPets.tsx
index c6add6f..61f1d49 100644
--- a/src/components/sections/other/TeamPets.tsx
+++ b/src/components/sections/other/TeamPets.tsx
@@ -64,11 +64,11 @@ export default function TeamPets({
         </div>
 
         <ScrollReveal variant="slide-up">
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-8">
+          <div className="flex flex-col items-center group mt-8">
             {pets.map((pet) => (
               <Card 
                 key={pet.name} 
-                className="flex flex-col items-center p-4 hover:-translate-y-2 transition-transform shadow-xl"
+                className="relative -mt-4 first:mt-0 rotate-1 even:-rotate-1 hover:-translate-y-1 hover:shadow-xl transition-all duration-200 flex flex-col items-center p-4 w-64"
               >
                 <div className="w-full aspect-square rounded overflow-hidden mb-4">
                   <ImageOrVideo imageSrc={pet.imageSrc} className="w-full h-full object-cover" />
-- 
2.49.1


From c4c3dd1302bd93c2802e944cdb55a31017ac3cf7 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 28 Apr 2026 18:55:04 +0300
Subject: [PATCH 3/3] Bob AI: Add basic styling to the 'Team Pets' section for
 layout and

---
 src/components/sections/other/TeamPets.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/other/TeamPets.tsx b/src/components/sections/other/TeamPets.tsx
index 61f1d49..b436e31 100644
--- a/src/components/sections/other/TeamPets.tsx
+++ b/src/components/sections/other/TeamPets.tsx
@@ -5,6 +5,7 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
 
 type Pet = {
   name: string;
+  description?: string;
   imageSrc: string;
 };
 
@@ -18,18 +19,22 @@ type TeamPetsProps = {
 const defaultPets: Pet[] = [
   {
     name: "Barnaby",
+    description: "Chief Tasting Officer",
     imageSrc: "https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxfHxkb2d8ZW58MXwwfHx8MTc3NzM4NDkyMXww&ixlib=rb-4.1.0&q=80&w=1080",
   },
   {
     name: "Luna",
+    description: "Nap Coordinator",
     imageSrc: "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MXwwfHx8MTc3NzM4NDkyMnww&ixlib=rb-4.1.0&q=80&w=1080",
   },
   {
     name: "Cooper",
+    description: "Door Greeter",
     imageSrc: "https://images.unsplash.com/photo-1552053831-71594a27632d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxkb2d8ZW58MXwwfHx8MTc3NzM4NDkyM3ww&ixlib=rb-4.1.0&q=80&w=1080",
   },
   {
     name: "Milo",
+    description: "Crumb Inspector",
     imageSrc: "https://images.unsplash.com/photo-1573865526739-10659fec78a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxjYXR8ZW58MXwwfHx8MTc3NzM4NDkyNHww&ixlib=rb-4.1.0&q=80&w=1080",
   }
 ];
@@ -64,16 +69,19 @@ export default function TeamPets({
         </div>
 
         <ScrollReveal variant="slide-up">
-          <div className="flex flex-col items-center group mt-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
             {pets.map((pet) => (
               <Card 
                 key={pet.name} 
-                className="relative -mt-4 first:mt-0 rotate-1 even:-rotate-1 hover:-translate-y-1 hover:shadow-xl transition-all duration-200 flex flex-col items-center p-4 w-64"
+                className="flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-200"
               >
-                <div className="w-full aspect-square rounded overflow-hidden mb-4">
+                <div className="w-full h-48 rounded overflow-hidden mb-4">
                   <ImageOrVideo imageSrc={pet.imageSrc} className="w-full h-full object-cover" />
                 </div>
-                <div className="text-xl text-foreground font-semibold">{pet.name}</div>
+                <h3 className="text-xl font-semibold text-foreground">{pet.name}</h3>
+                {pet.description && (
+                  <p className="text-base opacity-80 mt-2">{pet.description}</p>
+                )}
               </Card>
             ))}
           </div>
-- 
2.49.1