ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

feat: update UI styling and add new page images

Browse Source 
- Added new WebP images for different pages (agent, cloud, compute, gpu, network, storage)
- Updated benefits section images with optimized WebP versions
- Enhanced text styling:
  - Increased paragraph font size to text-xl on large screens
  - Adjusted H5 line height for better readability
  - Updated card paragraph text size to text-base
- Refined visual design elements:
  - Changed cube stroke color to gray-600 for subtler appearance
  - Adjusted glow effects and gradients to
This commit is contained in:
sasha-astiadi
2025-10-31 03:01:17 +01:00
parent ea1ef853f1
commit dd4eba2215
21 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Texts.tsx
View File

@@ -88,7 +88,7 @@ export const H4 = createTextComponent(
)
export const P = createTextComponent(
'p',
'text-base lg:text-lg leading-relaxed'
'text-base lg:text-xl leading-relaxed'
)
export const Small = createTextComponent(
'small',
@@ -100,7 +100,7 @@ export const Subtle = createTextComponent(
)
export const H5 = createTextComponent(
'h5',
'text-xl lg:text-2xl font-light leading-snug tracking-normal'
'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
)
export const Eyebrow = createTextComponent(
'h2',
@@ -160,4 +160,4 @@ export const DownloadCardDescription = createTextComponent(
)
export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
export const CP = createTextComponent('p', 'text-sm lg:text-sm tracking-wide leading-[1.525] font-light')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-[1.525] font-light')

16
src/components/ui/CubeLight.tsx
View File

@@ -26,7 +26,7 @@ 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(59, 130, 246, 0.25)"
stroke="rgba(107, 114, 128, 0.3)"
strokeWidth="0.5"
/>
<defs>
@@ -79,8 +79,8 @@ export function CubeLight({
<div
className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
isActive
? "bg-blue-400/40 opacity-70"
: "bg-blue-200/20 opacity-40"
? "bg-cyan-400/20 opacity-30"
: "bg-cyan-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(59, 130, 246, 0.4)) brightness(1.1)"
: "drop-shadow(0 0 10px rgba(59, 130, 246, 0.15)) brightness(1)",
? "drop-shadow(0 0 15px rgba(34, 211, 238, 0.25)) brightness(1.05)"
: "drop-shadow(0 0 10px rgba(34, 211, 238, 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-blue-900 text-sm lg:text-base font-medium text-center px-4"
className="text-cyan-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(59, 130, 246, 0.5)",
"0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(34, 211, 238, 0.5)",
}}
>
{title}
@@ -131,7 +131,7 @@ export function CubeLight({
y1="1"
x2="120"
y2="1"
stroke="rgba(59, 130, 246, 0.6)"
stroke="rgba(34, 211, 238, 0.6)"
strokeWidth="1"
opacity="0.8"
/>

12
src/components/ui/StackedCubesLight.tsx
View File

@@ -35,8 +35,8 @@ const stackData = [
];
export function StackedCubesLight() {
const [active, setActive] = useState<string | null>("agent");
const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
const [active, setActive] = useState<string | null>("network");
const [selectedForMobile, setSelectedForMobile] = useState<string | null>("network");
const handleCubeClick = (id: string) => {
setSelectedForMobile((prev) => (prev === id ? null : id));
@@ -49,10 +49,10 @@ export function StackedCubesLight() {
return (
<div className="flex flex-col items-center relative">
{/* ✨ Ambient cyan-white gradient background */}
<div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/40 to-white blur-3xl opacity-70 pointer-events-none" />
<div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/30 to-white blur-3xl opacity-70 pointer-events-none" />
<div
className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
onMouseLeave={() => setActive("agent")}
onMouseLeave={() => setActive("network")}
>
<motion.div
className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
@@ -77,8 +77,8 @@ export function StackedCubesLight() {
<div
className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
active === layer.id
? "bg-cyan-300/40 opacity-70"
: "bg-cyan-200/20 opacity-40"
? "bg-cyan-300/20 opacity-20"
: "bg-cyan-200/20 opacity-20"
}`}
/>
<CubeLight

2
src/components/ui/apple-cards-carousel.tsx
View File

@@ -93,7 +93,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
},
}}
key={"card" + index}
className="rounded-3xl last:pr-[5%] md:last:pr-[33%]"
className="rounded-3xl last:pr-[5%] md:last:pr-[33%] "
>
{item}
</motion.div>