first commit

2026-07-14 15:20:26 +05:30
commit 4b8af23f5f
125 changed files with 15124 additions and 0 deletions
@@ -0,0 +1,296 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
+import { ArrowRight, Clock } from 'lucide-react';
+
+export default function FeaturedGallery({ gallery }) {
+  const galleryData = gallery?.items || [];
+  const header = gallery || { eyebrow: 'Featured Gallery', title: '', subtitle: '' };
+  const [activeGalleryIndex, setActiveGalleryIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+
+  React.useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 1024);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+
+  return (
+    <section id="featured-gallery" style={{ padding: isMobile ? '4rem 1.25rem' : '6rem 8%', background: '#020710', position: 'relative' }}>
+      <div style={{ marginBottom: '3.5rem', position: 'relative', zIndex: 10 }}>
+        <span style={{ color: '#ffaa00', fontSize: '0.9rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
+          {header.eyebrow}
+        </span>
+        <h2 style={{ fontSize: 'clamp(2rem, 3vw, 2.5rem)', fontWeight: 800, marginTop: '0.5rem', color: '#ffffff' }}>
+          {header.title}
+        </h2>
+        <p style={{ color: '#94a3b8', fontSize: '1rem', marginTop: '0.75rem', maxWidth: '600px', lineHeight: '1.5' }}>
+          {header.subtitle}
+        </p>
+      </div>
+
+      <ResponsiveGalleryWrapper 
+        galleryData={galleryData}
+        activeIdx={activeGalleryIndex} 
+        setActiveIdx={setActiveGalleryIndex} 
+      />
+    </section>
+  );
+}
+
+function ResponsiveGalleryWrapper({ galleryData, activeIdx, setActiveIdx }) {
+  const [isMobileSize, setIsMobileSize] = React.useState(false);
+  const shouldReduceMotion = useReducedMotion();
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobileSize(window.innerWidth < 1024);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const getRevealProps = (index) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 40 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.15 }
+    };
+  };
+
+  if (isMobileSize) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+        {galleryData.map((item, index) => {
+          const isFirst = index === 0;
+          const revealProps = getRevealProps(index);
+          return (
+            <motion.div 
+              key={item.id}
+              className="glass-card"
+              {...revealProps}
+              transition={{
+                duration: 0.8,
+                ease: [0.22, 1, 0.36, 1],
+                delay: index * 0.1
+              }}
+              style={{
+                borderRadius: '24px',
+                overflow: 'hidden',
+                border: '1px solid rgba(255, 255, 255, 0.06)',
+                position: 'relative',
+                height: isFirst ? '320px' : '240px',
+                backgroundImage: `linear-gradient(to bottom, rgba(2, 7, 16, 0.3) 0%, rgba(2, 7, 16, 0.95) 100%), url(${item.image})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+                padding: '2rem 1.5rem',
+                boxShadow: isFirst ? '0 10px 30px -10px rgba(255, 170, 0, 0.15)' : 'none',
+                borderColor: isFirst ? 'rgba(255, 170, 0, 0.3)' : 'rgba(255, 255, 255, 0.06)'
+              }}
+            >
+              <span style={{ 
+                color: '#ffaa00', 
+                fontSize: '0.75rem', 
+                fontWeight: 600, 
+                textTransform: 'uppercase', 
+                letterSpacing: '0.05em',
+                marginBottom: '0.25rem' 
+              }}>
+                {item.category}
+              </span>
+              <h3 style={{ fontSize: '1.4rem', fontWeight: 700, color: '#ffffff', margin: '0 0 0.5rem 0', lineHeight: '1.3' }}>
+                {item.title}
+              </h3>
+              <p style={{ color: '#cbd5e1', fontSize: '0.88rem', margin: '0 0 1rem 0', lineHeight: '1.5', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                {item.excerpt}
+              </p>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255, 255, 255, 0.1)', paddingTop: '0.75rem' }}>
+                <span style={{ color: '#94a3b8', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                  <Clock size={14} /> {item.readTime}
+                </span>
+                <span style={{ color: '#ffaa00', fontSize: '0.85rem', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                  Read More <ArrowRight size={14} />
+                </span>
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Desktop horizontal layout
+  return (
+    <div style={{ 
+      display: 'flex', 
+      gap: '1.25rem', 
+      width: '100%', 
+      height: '460px', 
+      alignItems: 'stretch',
+      position: 'relative'
+    }}>
+      {galleryData.map((item, index) => {
+        const isActive = activeIdx === index;
+        const revealProps = getRevealProps(index);
+        return (
+          <motion.div
+            key={item.id}
+            layout
+            onMouseEnter={() => setActiveIdx(index)}
+            className="glass-card"
+            {...revealProps}
+            transition={shouldReduceMotion ? { type: 'spring', stiffness: 350, damping: 32 } : {
+              layout: { type: 'spring', stiffness: 350, damping: 32 },
+              y: { duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: index * 0.1 },
+              opacity: { duration: 0.8, ease: 'easeOut', delay: index * 0.1 }
+            }}
+            style={{
+              flex: isActive ? 2.8 : 1,
+              borderRadius: '24px',
+              overflow: 'hidden',
+              border: '1px solid rgba(255, 255, 255, 0.06)',
+              position: 'relative',
+              cursor: 'pointer',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              boxShadow: isActive ? '0 15px 35px -12px rgba(255, 170, 0, 0.2)' : '0 4px 20px rgba(0, 0, 0, 0.3)',
+              borderColor: isActive ? 'rgba(255, 170, 0, 0.3)' : 'rgba(255, 255, 255, 0.06)',
+            }}
+          >
+            {/* Background image container for smooth scale transform */}
+            <motion.div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundImage: `url(${item.image})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                zIndex: 1
+              }}
+              animate={{ scale: isActive ? 1.06 : 1 }}
+              transition={{ duration: 0.6 }}
+            />
+
+            {/* Dark Overlay */}
+            <motion.div 
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background: 'linear-gradient(to bottom, rgba(2, 7, 16, 0.3) 0%, rgba(2, 7, 16, 0.95) 100%)',
+                zIndex: 2
+              }}
+              animate={{ opacity: isActive ? 0.95 : 0.85 }}
+              transition={{ duration: 0.4 }}
+            />
+
+            {/* Top Tag */}
+            <div style={{ position: 'relative', zIndex: 3, padding: '2rem 1.8rem 0 1.8rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <span style={{ 
+                color: '#ffaa00', 
+                fontSize: '0.75rem', 
+                fontWeight: 700, 
+                textTransform: 'uppercase', 
+                letterSpacing: '0.08em',
+                background: 'rgba(255, 170, 0, 0.08)',
+                padding: '0.3rem 0.6rem',
+                borderRadius: '8px',
+                border: '1px solid rgba(255, 170, 0, 0.15)'
+              }}>
+                {item.category}
+              </span>
+            </div>
+
+            {/* Bottom Content Area */}
+            <div style={{ position: 'relative', zIndex: 3, padding: '0 1.8rem 2rem 1.8rem' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                <h3 style={{ 
+                  fontSize: isActive ? '1.5rem' : '1.15rem', 
+                  fontWeight: 700, 
+                  color: '#ffffff', 
+                  margin: 0, 
+                  lineHeight: '1.3',
+                  transition: 'font-size 0.3s ease',
+                  whiteSpace: isActive ? 'normal' : 'nowrap',
+                  overflow: isActive ? 'visible' : 'hidden',
+                  textOverflow: isActive ? 'clip' : 'ellipsis',
+                  maxWidth: '100%'
+                }}>
+                  {item.title}
+                </h3>
+
+                {/* Excerpt - Animate visibility based on active state */}
+                <motion.div
+                  initial={false}
+                  animate={{ 
+                    height: isActive ? 'auto' : 0, 
+                    opacity: isActive ? 1 : 0,
+                    marginTop: isActive ? 6 : 0
+                  }}
+                  transition={{ duration: 0.4, ease: 'easeInOut' }}
+                  style={{ overflow: 'hidden' }}
+                >
+                  <p style={{ color: '#cbd5e1', fontSize: '0.88rem', margin: 0, lineHeight: '1.5', maxWidth: '90%' }}>
+                    {item.excerpt}
+                  </p>
+                </motion.div>
+              </div>
+
+              {/* Progress Line and Footer Area */}
+              <div style={{ marginTop: '1.5rem' }}>
+                <div style={{
+                  width: '100%',
+                  height: '2px',
+                  backgroundColor: 'rgba(255, 255, 255, 0.12)',
+                  borderRadius: '1px',
+                  marginBottom: '1rem',
+                  position: 'relative',
+                  overflow: 'hidden'
+                }}>
+                  <motion.div 
+                    style={{
+                      height: '100%',
+                      backgroundColor: '#ffaa00',
+                      borderRadius: '1px'
+                    }}
+                    initial={{ width: 0 }}
+                    animate={{ width: isActive ? '60%' : '15%' }}
+                    transition={{ duration: 0.5 }}
+                  />
+                </div>
+
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px' }}>
+                  <span style={{ color: '#94a3b8', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                    <Clock size={13} style={{ color: '#ffaa00' }} /> {item.readTime}
+                  </span>
+
+                  {isActive && (
+                    <motion.span 
+                      initial={{ opacity: 0, x: -10 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ duration: 0.3 }}
+                      style={{ color: '#ffaa00', fontSize: '0.85rem', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '0.25rem' }}
+                    >
+                      Read More <ArrowRight size={14} />
+                    </motion.span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+}