Clean deploy: nueva versión

2026-10-01 12:28:54 -04:00
commit 030734d521
111 changed files with 23159 additions and 0 deletions
@@ -0,0 +1,97 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const images = [
+  {
+    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/05485a6602c92213d17f6b69f0f71c10.jpg',
+    alt: 'Black and white dog playing with green tire toy',
+    title: 'Playtime Fun'
+  },
+  {
+    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/95ed79c076c5d409d3f94dbb6239cc1a.jpg',
+    alt: 'Chihuahua in purple and blue sweater',
+    title: 'Cozy & Cute'
+  },
+  {
+    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/ed25cc9ec1febedad8a061beaf64bcc4.jpg',
+    alt: 'Two black and white dogs indoors',
+    title: 'Best Friends'
+  },
+  {
+    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/f76d2140ccab435fb133f9a5365192ab.jpg',
+    alt: 'Black dog with white chest and tan Labrador on dirt path',
+    title: 'Adventure Time'
+  },
+  {
+    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/b01e33957207904c84325bed7d8400fd.jpg',
+    alt: 'Group of four dogs on brick patio',
+    title: 'The Whole Pack'
+  }
+];
+
+const GallerySection = () => {
+  return (
+    <section className="py-20 bg-white relative overflow-hidden">
+      {/* Decorative background elements */}
+      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-30">
+        <div className="absolute -top-20 -right-20 w-64 h-64 bg-turquoise/20 rounded-full blur-3xl"></div>
+        <div className="absolute top-40 -left-20 w-72 h-72 bg-coral/10 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-navy mb-4">Our Happy Clients</h2>
+          <p className="text-lg text-navy/70 max-w-2xl mx-auto">
+            Take a look at some of the furry friends we've had the pleasure of caring for!
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {images.map((image, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              whileHover={{ scale: 1.03 }}
+              className="group relative aspect-[4/3] rounded-xl overflow-hidden shadow-lg bg-gray-100"
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                loading="lazy"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-navy/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
+                <p className="text-white font-semibold text-lg translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
+                  {image.title}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+          
+          {/* Optional placeholder for grid balance if needed, or simply let it flow */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+            className="flex flex-col items-center justify-center p-8 text-center bg-turquoise/5 rounded-xl border-2 border-dashed border-turquoise/30 aspect-[4/3]"
+          >
+            <p className="text-navy font-medium text-lg mb-2">Your Pet Could Be Here!</p>
+            <p className="text-navy/60 text-sm">Join our happy family today.</p>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default GallerySection;