Vishva/citpl_cms_react_express_postgres
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new site content, gallery components and brand assets

Browse Source
This commit is contained in:
Vishva
2026-07-23 16:22:01 +05:30
parent 49d487471f
commit 6c3e52ae61
35 changed files with 1462 additions and 620 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProductCard.jsx
+81 -102
View File
@@ -2,9 +2,9 @@ import { motion, useReducedMotion } from 'framer-motion';
import { assetUrl } from '../lib/assetUrl';
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%)',
'linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(235, 252, 240, 0.5) 100%)',
'linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(250, 243, 255, 0.5) 100%)',
'linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(254, 252, 232, 0.5) 100%)',
];
export default function ProductCard({ product, isMobile, delay = 0, index = 0 }) {
@@ -12,9 +12,28 @@ export default function ProductCard({ product, isMobile, delay = 0, index = 0 })
const shouldReduceMotion = useReducedMotion();
const dashWidth = isMobile ? '92%' : '520px';
const dashLeft = isMobile ? '4%' : '32%';
const dashHeight = isMobile ? '200px' : '320px';
const shadowHeight = isMobile ? '170px' : '280px';
const dashLeft = isMobile ? '4%' : '20px';
const dashHeight = isMobile ? '220px' : '300px';
// Badge position configurations matching exact design screenshot
const statPositions = [
// Index 0: Nebula AI Platform
[
{ bottom: '25px', left: '20px', bg: 'rgba(30, 30, 35, 0.65)', color: '#ffffff' }, // Bottom Left: 60% Faster Process Automation
{ top: '15px', right: '15px', bg: 'rgba(30, 30, 35, 0.65)', color: '#ffffff' } // Top Right: 24/7 AI Driven Assistance
],
// Index 1: PRODMAX
[
{ top: '40px', left: '15px', bg: 'rgba(255, 255, 255, 0.65)', color: '#000000' }, // Top/Middle Left: 5%+ OEE Improvement
{ bottom: '15px', right: '15px', bg: 'rgba(30, 30, 35, 0.65)', color: '#ffffff' } // Bottom Right: 15% Reduction in Downtime
],
// Index 2: Budgie
[
{ bottom: '40px', left: '20px', bg: 'rgba(255, 255, 255, 0.75)', color: '#166534' } // Bottom Left: 40% Faster HR Operations
]
];
const currentPos = statPositions[index % statPositions.length] || [];
return (
<motion.div
@@ -27,49 +46,36 @@ export default function ProductCard({ product, isMobile, delay = 0, index = 0 })
<div
className="product-card"
style={{
borderRadius: isMobile ? '20px' : '28px',
border: `${isMobile ? 4 : 6}px solid #EAE3E8`,
borderRadius: '24px',
border: '6px solid #ffffff',
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)',
padding: isMobile ? '1.75rem 1.25rem 0' : '2.2rem 2rem 0 2rem',
boxShadow: '0 8px 25px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.8)',
position: 'relative',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
height: '100%',
minHeight: isMobile ? '380px' : '600px',
minHeight: isMobile ? '400px' : '520px',
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';
e.currentTarget.style.boxShadow = '0 12px 35px rgba(0, 0, 0, 0.08)';
e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.15)';
}}
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';
e.currentTarget.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.04)';
e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.08)';
}}
>
<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,
fontSize: isMobile ? '1.4rem' : '1.8rem',
fontWeight: 600,
color: '#0f172a',
margin: '0 0 0.75rem 0',
margin: '0 0 0.6rem 0',
letterSpacing: '-0.02em',
position: 'relative',
zIndex: 3,
@@ -79,8 +85,8 @@ export default function ProductCard({ product, isMobile, delay = 0, index = 0 })
<p style={{
color: '#475569',
fontSize: isMobile ? '0.95rem' : '1.05rem',
lineHeight: '1.6',
fontSize: isMobile ? '0.88rem' : '0.94rem',
lineHeight: '1.55',
margin: '0 0 1.5rem 0',
fontWeight: 400,
maxWidth: '100%',
@@ -90,87 +96,60 @@ export default function ProductCard({ product, isMobile, delay = 0, index = 0 })
{product.description}
</p>
{/* Dashboard Image Container */}
<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)',
position: 'relative',
marginTop: 'auto',
width: '100%',
height: isMobile ? '220px' : '310px',
borderRadius: '14px 14px 0 0',
overflow: 'hidden',
zIndex: 2,
background: 'transparent',
boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.06)'
}}>
<img
src={assetUrl(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%',
width: '100%',
height: '100%',
objectFit: 'cover',
objectPosition: 'top center',
display: 'block'
}}
/>
{/* Floating Stat Badges */}
{product.stats?.map((stat, sIdx) => {
const pos = currentPos[sIdx] || {};
return (
<div
key={sIdx}
style={{
position: 'absolute',
...pos,
background: pos.bg || 'rgba(30, 30, 35, 0.65)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
border: '1px solid rgba(255, 255, 255, 0.2)',
padding: '0.5rem 0.85rem',
borderRadius: '10px',
boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
zIndex: 5,
whiteSpace: 'nowrap',
maxWidth: 'none'
}}
>
<span style={{ fontWeight: 700, color: pos.color || '#ffffff', fontSize: '1.1rem', display: 'block', lineHeight: 1.1 }}>
{stat.value}
</span>
<span style={{ fontSize: '0.7rem', color: pos.color || '#ffffff', opacity: 0.9, fontWeight: 500, whiteSpace: 'nowrap', display: 'block' }}>
{stat.label}
</span>
</div>
);
})}
</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>
);