forked from emre/www_projectmycelium_com
feat: update cube component color scheme from cyan to blue
- Changed cube gradient colors from cyan to blue for better visual consistency - Updated glow effects and shadows to use blue (rgba(59, 130, 246)) instead of cyan - Modified background aura gradients in StackSection for enhanced depth perception - Replaced HomeFeaturesDark component with new HomeSlider in HomePage layout - Added isolate property to StackSection to prevent gradient bleeding - Enhanced background layer in StackSection with additional
This commit is contained in:
@@ -26,11 +26,11 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
|
||||
<path
|
||||
fill={`url(#cube-gradient-${index})`}
|
||||
d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
|
||||
stroke="rgba(0,255,255,0.25)"
|
||||
stroke="rgba(59, 130, 246, 0.25)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<defs>
|
||||
{/* Cyan-white soft gradient */}
|
||||
{/* Blue-white soft gradient */}
|
||||
<linearGradient
|
||||
id={`cube-gradient-${index}`}
|
||||
x1="185.298"
|
||||
@@ -39,8 +39,8 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
|
||||
y2="206.448"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0%" stopColor="#DFFFFF" stopOpacity="0.75" />
|
||||
<stop offset="40%" stopColor="#A5F4FF" stopOpacity="0.8" />
|
||||
<stop offset="0%" stopColor="#EBF8FF" stopOpacity="0.75" />
|
||||
<stop offset="40%" stopColor="#BEE3F8" stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.9" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
@@ -79,8 +79,8 @@ export function CubeLight({
|
||||
<div
|
||||
className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
|
||||
isActive
|
||||
? "bg-cyan-400/40 opacity-70"
|
||||
: "bg-cyan-200/20 opacity-40"
|
||||
? "bg-blue-400/40 opacity-70"
|
||||
: "bg-blue-200/20 opacity-40"
|
||||
}`}
|
||||
/>
|
||||
|
||||
@@ -90,8 +90,8 @@ export function CubeLight({
|
||||
className="w-48 sm:w-64 lg:w-80 h-auto relative"
|
||||
style={{
|
||||
filter: isActive
|
||||
? "drop-shadow(0 0 25px rgba(0,255,255,0.4)) brightness(1.1)"
|
||||
: "drop-shadow(0 0 10px rgba(0,255,255,0.15)) brightness(1)",
|
||||
? "drop-shadow(0 0 25px rgba(59, 130, 246, 0.4)) brightness(1.1)"
|
||||
: "drop-shadow(0 0 10px rgba(59, 130, 246, 0.15)) brightness(1)",
|
||||
transition: "all 0.4s ease",
|
||||
}}
|
||||
/>
|
||||
@@ -99,10 +99,10 @@ export function CubeLight({
|
||||
{/* Title overlay */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<h3
|
||||
className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
|
||||
className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
|
||||
style={{
|
||||
textShadow:
|
||||
"0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(0,255,255,0.5)",
|
||||
"0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(59, 130, 246, 0.5)",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
@@ -131,7 +131,7 @@ export function CubeLight({
|
||||
y1="1"
|
||||
x2="120"
|
||||
y2="1"
|
||||
stroke="rgba(0,255,255,0.6)"
|
||||
stroke="rgba(59, 130, 246, 0.6)"
|
||||
strokeWidth="1"
|
||||
opacity="0.8"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user