diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index e1640f26..7553ad83 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -2,6 +2,30 @@ import React from 'react'; import PropTypes from 'prop-types'; import './Hero.css'; +/** Size class mappings */ +const SIZE_CLASSES = { + small: 'hero--small', + medium: 'hero--medium', + large: 'hero--large', +}; + +/** Alignment class mappings */ +const ALIGN_CLASSES = { + left: 'hero--align-left', + center: 'hero--align-center', + right: 'hero--align-right', +}; + +/** Build hero CSS classes from props */ +const buildHeroClasses = ({ size, align, overlayColor, backgroundImage, className }) => [ + 'hero', + SIZE_CLASSES[size] || SIZE_CLASSES.large, + ALIGN_CLASSES[align] || ALIGN_CLASSES.center, + overlayColor === 'light' ? 'hero--overlay-light' : 'hero--overlay-dark', + backgroundImage ? 'hero--has-image' : '', + className, +].filter(Boolean).join(' '); + /** * Hero Component - Reusable hero section with background image support * @@ -28,48 +52,16 @@ const Hero = ({ className = '', ...rest }) => { - const sizeClasses = { - small: 'hero--small', - medium: 'hero--medium', - large: 'hero--large', - }; - - const alignClasses = { - left: 'hero--align-left', - center: 'hero--align-center', - right: 'hero--align-right', - }; - - const overlayStyle = { - '--hero-overlay-opacity': overlayOpacity, - }; - - const heroClasses = [ - 'hero', - sizeClasses[size] || sizeClasses.large, - alignClasses[align] || alignClasses.center, - overlayColor === 'light' ? 'hero--overlay-light' : 'hero--overlay-dark', - backgroundImage ? 'hero--has-image' : '', - className, - ].filter(Boolean).join(' '); - + const heroClasses = buildHeroClasses({ size, align, overlayColor, backgroundImage, className }); + const overlayStyle = { '--hero-overlay-opacity': overlayOpacity }; const TravelGlobe = React.useMemo(() => React.lazy(() => import('./3d/TravelGlobe')), []); return ( -
+
{/* Background Layer */}
{backgroundImage ? ( - + ) : (