first commit

2026-07-14 15:20:26 +05:30
commit 4b8af23f5f
125 changed files with 15124 additions and 0 deletions
@@ -0,0 +1,176 @@
+import { motion, useReducedMotion } from 'framer-motion';
+
+const ACCENT_GRADIENTS = [
+  'radial-gradient(circle at top right, rgba(139, 92, 246, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
+  'radial-gradient(circle at top right, rgba(16, 185, 129, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
+  'radial-gradient(circle at top right, rgba(245, 158, 11, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
+];
+
+export default function ProductCard({ product, isMobile, delay = 0, index = 0 }) {
+  if (!product) return null;
+  const shouldReduceMotion = useReducedMotion();
+
+  const dashWidth = isMobile ? '92%' : '520px';
+  const dashLeft = isMobile ? '4%' : '32%';
+  const dashHeight = isMobile ? '200px' : '320px';
+  const shadowHeight = isMobile ? '170px' : '280px';
+
+  return (
+    <motion.div
+      initial={shouldReduceMotion ? false : { opacity: 0, y: 40 }}
+      whileInView={shouldReduceMotion ? undefined : { opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.15 }}
+      transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay }}
+      style={{ height: '100%' }}
+    >
+      <div
+        className="product-card"
+        style={{
+          borderRadius: isMobile ? '20px' : '28px',
+          border: `${isMobile ? 4 : 6}px solid #EAE3E8`,
+          background: ACCENT_GRADIENTS[index % ACCENT_GRADIENTS.length],
+          padding: isMobile ? '1.75rem 1.25rem 0' : '3rem 2.5rem 0 2.5rem',
+          boxShadow: '0 4px 24px rgba(234, 227, 232, 0.25)',
+          position: 'relative',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          minHeight: isMobile ? '380px' : '600px',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+        onMouseEnter={(e) => {
+          if (isMobile) return;
+          e.currentTarget.style.transform = 'translateY(-6px)';
+          e.currentTarget.style.boxShadow = '0 10px 30px rgba(255, 170, 0, 0.2)';
+          e.currentTarget.style.borderColor = '#ffaa00';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = 'translateY(0)';
+          e.currentTarget.style.boxShadow = '0 4px 24px rgba(234, 227, 232, 0.25)';
+          e.currentTarget.style.borderColor = '#EAE3E8';
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundImage: 'radial-gradient(#E0D2DC 1.5px, transparent 1.5px)',
+            backgroundSize: '12px 12px',
+            WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 65%)',
+            maskImage: 'linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 65%)',
+            pointerEvents: 'none',
+            zIndex: 1,
+          }}
+        />
+
+        <h3 style={{
+          fontSize: isMobile ? '1.5rem' : '2rem',
+          fontWeight: 800,
+          color: '#0f172a',
+          margin: '0 0 0.75rem 0',
+          letterSpacing: '-0.02em',
+          position: 'relative',
+          zIndex: 3,
+        }}>
+          {product.name}
+        </h3>
+
+        <p style={{
+          color: '#475569',
+          fontSize: isMobile ? '0.95rem' : '1.05rem',
+          lineHeight: '1.6',
+          margin: '0 0 1.5rem 0',
+          fontWeight: 400,
+          maxWidth: '100%',
+          position: 'relative',
+          zIndex: 3,
+        }}>
+          {product.description}
+        </p>
+
+        <div style={{
+          position: 'absolute',
+          bottom: 0,
+          left: dashLeft,
+          width: dashWidth,
+          height: shadowHeight,
+          borderRadius: '20px 20px 0 0',
+          boxShadow: '-20px -20px 45px rgba(0,0,0,0.12)',
+          zIndex: 2,
+          pointerEvents: 'none',
+        }} />
+
+        <div style={{
+          position: 'absolute',
+          bottom: isMobile ? '-16px' : '-40px',
+          left: dashLeft,
+          width: dashWidth,
+          height: dashHeight,
+          borderRadius: '16px',
+          border: '1.5px solid rgba(255, 255, 255, 0.4)',
+          overflow: 'hidden',
+          zIndex: 2,
+          background: 'transparent',
+        }}>
+          <img
+            src={product.image}
+            alt={`${product.name} dashboard`}
+            style={{
+              position: 'absolute',
+              top: isMobile ? '0' : '-8%',
+              left: isMobile ? '0' : '-40%',
+              width: isMobile ? '100%' : '160%',
+              height: isMobile ? '100%' : '145%',
+              objectFit: 'cover',
+            }}
+          />
+        </div>
+
+        {product.stats?.[0] && (
+          <div style={{
+            position: 'absolute',
+            bottom: isMobile ? '110px' : '160px',
+            left: isMobile ? '6%' : '18%',
+            background: 'rgba(255, 255, 255, 0.25)',
+            backdropFilter: 'blur(12px)',
+            border: '1px solid rgba(255, 255, 255, 0.3)',
+            padding: isMobile ? '0.5rem 0.75rem' : '0.8rem 1.2rem',
+            borderRadius: '12px',
+            boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
+            zIndex: 5,
+          }}>
+            <span style={{ fontWeight: 800, color: '#000000', fontSize: isMobile ? '1.1rem' : '1.4rem', display: 'block', lineHeight: 1.1 }}>
+              {product.stats[0].value}
+            </span>
+            <span style={{ fontSize: isMobile ? '0.65rem' : '0.75rem', color: '#000000', fontWeight: 600 }}>
+              {product.stats[0].label}
+            </span>
+          </div>
+        )}
+
+        {product.stats?.[1] && (
+          <div style={{
+            position: 'absolute',
+            bottom: isMobile ? '36px' : '50px',
+            right: isMobile ? '5%' : '8%',
+            background: 'rgba(20, 20, 25, 0.55)',
+            backdropFilter: 'blur(12px)',
+            border: '1px solid rgba(255, 255, 255, 0.15)',
+            padding: isMobile ? '0.5rem 0.75rem' : '0.8rem 1.2rem',
+            borderRadius: '12px',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)',
+            zIndex: 5,
+          }}>
+            <span style={{ fontWeight: 800, color: '#ffffff', fontSize: isMobile ? '1.1rem' : '1.4rem', display: 'block', lineHeight: 1.1 }}>
+              {product.stats[1].value}
+            </span>
+            <span style={{ fontSize: isMobile ? '0.65rem' : '0.75rem', color: '#ffffff', fontWeight: 500 }}>
+              {product.stats[1].label}
+            </span>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}