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

feat: enhance cloud features UI with improved image styling

Browse Source 
- Removed CircleBackground component and its instances from desktop and mobile views for cleaner design
- Updated image shadows from shadow-xl to shadow-2xl for stronger depth effect
- Modified image positioning with -ml-32 margin for better layout alignment in tablet and desktop views
- Removed unnecessary background animations to improve visual focus on feature screenshots
This commit is contained in:
sasha-astiadi
2025-10-31 04:55:30 +01:00
parent c861f15492
commit 24f6da37ed
1 changed files with 3 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/cloud/CloudFeatures.tsx
View File

@@ -19,7 +19,6 @@ import {
P, P,
SectionHeader, SectionHeader,
} from '@/components/Texts' } from '@/components/Texts'
import { CircleBackground } from '@/components/CircleBackground'
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import reservenodeimg from '/images/cloud/reserve.png' import reservenodeimg from '/images/cloud/reserve.png'
@@ -187,7 +186,7 @@ function ReserveNodeScreen() {
alt="Mycelium Reserve Node" alt="Mycelium Reserve Node"
width={2432} width={2432}
height={1442} height={1442}
className="w-4xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-4 lg:ml-0" className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
/> />
); );
} }
@@ -199,7 +198,7 @@ function ManageClusterScreen() {
alt="Mycelium Kubeconfig" alt="Mycelium Kubeconfig"
width={2432} width={2432}
height={1442} height={1442}
className="w-4xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-4 lg:ml-0" className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
/> />
); );
} }
@@ -211,7 +210,7 @@ function PersonalisedBillingsScreen() {
alt="Mycelium Billing" alt="Mycelium Billing"
width={2432} width={2432}
height={1442} height={1442}
className="w-4xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-4 lg:ml-0" className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
/> />
); );
} }
@@ -282,9 +281,6 @@ function CloudFeaturesDesktop() {
))} ))}
</TabList> </TabList>
<div className="relative col-span-6 overflow-hidden"> <div className="relative col-span-6 overflow-hidden">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
</div>
<div className="z-10 mx-auto w-full max-w-[366px]"> <div className="z-10 mx-auto w-full max-w-[366px]">
<TabPanels as={Fragment}> <TabPanels as={Fragment}>
<AnimatePresence <AnimatePresence
@@ -364,13 +360,6 @@ function CloudFeaturesMobile() {
: 'outline-transparent hover:outline-cyan-500', : 'outline-transparent hover:outline-cyan-500',
)} )}
> >
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground
id={`primaryfeatures_mobile_circle_${featureIndex}`}
color="#13B5C8"
className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
/>
</div>
<div className="relative mx-auto w-full max-w-[366px]"> <div className="relative mx-auto w-full max-w-[366px]">
<feature.screen /> <feature.screen />
</div> </div>